@media (max-width: 991px){
    html{
        font-size: 55%;
    }
}

@media (max-width: 768px){
    #menu-btn{
        display: block;
    }

    .header{
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .header .navbar{
        width: 30rem;
        position: absolute;
        right: 0;
        top: 100%;
        padding: 1rem 2rem 2rem 2rem;
        background: rgba(244,248,251,0.98);
        border-left: 0.1rem solid rgba(13,92,145,0.08);
        border-top: 0.1rem solid rgba(13,92,145,0.08);
        transition: 0.25s linear;
        transform: translateX(100%);
        height: calc(100vh - 7rem);
        overflow-y: auto;
        box-shadow: 0 0.8rem 2rem rgba(23,56,79,0.12);
        z-index: 1002;
    }

    #header-wrapper.scrolled .header .navbar{
        background: var(--base-color);
    }

    .header .navbar.active{
        transform: translateX(0);
    }

    .header .navbar a{
        display: block;
        padding: 1.4rem 0;
        margin: 0.4rem 0;
        font-size: 1.7rem;
        border-bottom: 0.1rem solid rgba(13,92,145,0.08);
    }

    #header-wrapper.scrolled .header .navbar a{
        color: rgba(255,255,255,0.9);
        border-bottom: 0.1rem solid rgba(255,255,255,0.12);
    }

    section{
        padding-left: 2rem;
        padding-right: 2rem;
    }

    #page-wrapper{
        padding: 8.5rem 1.5rem 2rem;
    }

    .home{
        padding: 2.5rem 2rem 4rem 2rem;
    }

    .home .box-container{
        gap: 3rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .home .content{
        margin-top: 4rem;
        width: 100%;
    }

    .home .content .text{
        width: 100%;
        max-width: 100%;
    }

    .home .content h1{
        font-size: 4.2rem;
        line-height: 1.15;
    }

    .home .content .hero-static{
        display: block;
    }

    .home .content .hero-typed-wrap{
        display: block;
        min-height: 6.5rem;
        margin-top: 0.4rem;
    }

    .home .content .typing-text{
        display: inline-block;
        white-space: normal;
    }

    .home .hero-copy{
        font-size: 1.65rem;
        max-width: 100%;
    }

    .home .image{
        width: 100%;
        max-width: 34rem;
        margin: 0 auto;
    }

    .about .content h2{
        font-size: 3.1rem;
    }

    .counting .box{
        max-width: none;
    }

    .hero-buttons{
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .hero-buttons .btn{
        width: 100%;
        text-align: center;
    }

    .logo-img{
        height: 5rem;
    }

    .partner-item{
        font-size: 1.7rem;
        padding: 1.5rem 2.4rem;
    }
}

@media (max-width: 450px){
    html{
        font-size: 50%;
    }

    .header{
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .header .navbar{
        width: 100%;
    }

    #page-wrapper{
        padding: 8rem 1rem 1.5rem;
    }

    .home{
        padding: 2rem 1.5rem 3rem 1.5rem;
    }

    .home .content{
        margin-top: 3rem;
    }

    .home .content h1{
        font-size: 3.5rem;
    }

    .home .content .hero-typed-wrap{
        min-height: 5.2rem;
    }

    .home .hero-copy{
        font-size: 1.55rem;
    }

    .portfolio-item{
        height: 30rem;
    }

    .heading h2{
        font-size: 3.6rem;
    }

    .partner-item{
        font-size: 1.55rem;
        padding: 1.3rem 2rem;
    }
}
@media (max-width: 991px){
    .footer-main{
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .footer-links-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px){
    .footer-premium{
        padding: 4rem 5% 2rem;
        border-radius: 1.8rem;
    }

    .footer-links-grid{
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-logo{
        width: 22rem;
    }

    .footer-card h3{
        font-size: 2.5rem;
    }

    .footer-bottom{
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-legal{
        gap: 1.2rem;
    }
}