/* ===========================
   Tablet
=========================== */

@media (max-width:992px){

    .nav-menu{

        display:none;

    }

    .nav-menu.active{

        display:flex;

        flex-direction:column;

        gap:8px;

        list-style:none;

        position:absolute;

        top:calc(100% + 12px);
        left:20px;
        right:20px;

        margin:0;

        padding:24px;
        background:rgba(255,255,255,.94);

        backdrop-filter:blur(28px);
        -webkit-backdrop-filter:blur(28px);

        border:1px solid #E2E8F0;
        border-radius:24px;

        box-shadow:0 30px 80px rgba(15,23,42,.16);

        animation:menuDrop .35s ease;

        z-index:999;

    }

    .nav-menu.active li:not(:last-child){

        border-bottom:1px solid rgba(15,23,42,.06);

    }

    .nav-menu.active a{

        display:flex;

        align-items:center;

        justify-content:flex-start;

        padding:16px;

        border-radius:12px;

        font-size:1rem;

        font-weight:700;

        color:var(--primary);

        transition:all .3s ease;

    }

    .nav-menu.active a:hover{

        background:rgba(37,99,235,.06);

        color:var(--secondary);

        transform:translateX(6px);

    }

    .header-cta{

        display:none;

    }

    .menu-toggle{

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:flex-end;

        gap:6px;

        width:44px;

        height:44px;

        cursor:pointer;

        background:transparent;

        border:none;

        padding:0;

    }

    .menu-toggle span{

        height:2px;

        background:var(--primary);

        border-radius:999px;

        transition:all .35s ease;

    }

    .menu-toggle span:first-child{

        width:28px;

    }

    .menu-toggle span:last-child{

        width:18px;

    }

    .menu-toggle.active span{

        width:28px;

    }

    .menu-toggle.active span:nth-child(1){

        transform:translateY(4px) rotate(45deg);

    }

    .menu-toggle.active span:nth-child(2){

        transform:translateY(-4px) rotate(-45deg);

    }

    .logo img{

        width:170px;

    }
     /* CONTACT */

    .contact-hero{

        padding-top:160px;

        padding-bottom:80px;

    }

    .contact-hero h1{

        font-size:clamp(2.6rem,6vw,3.8rem);

    }

    .contact-hero p{

        max-width:700px;

    }

    .contact-wrapper{

        grid-template-columns:1fr;

        gap:40px;

    }

    .contact-info{

        position:static;

        top:auto;

    }

    .contact-form{

        padding:40px;

    }

    .contact-card{

        padding:40px;

    }

}

@keyframes menuDrop{

    from{

        opacity:0;

        transform:translateY(-16px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ===========================
   Mobile
=========================== */

@media (max-width:768px){

    .header{

        padding:1rem 0;

    }

    .hero{

        padding-top:150px;

        padding-bottom:64px;

    }

    .hero-wrapper{

        grid-template-columns:1fr;

        gap:48px;

    }

    .hero-content{

        order:1;

        width:100%;

        max-width:100%;

    }

    .hero-content > *{

        width:100%;

    }

    .hero-badge{

        width:max-content;

    }

    .hero-image{

        order:2;

        justify-content:center;

    }

    .hero-image img{

        width:100%;

        max-width:620px;

    }

    .hero h1{

        max-width:100%;

        font-size:clamp(2.2rem,10vw,3.4rem);

    }

    .hero p{

        max-width:100%;

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons a{

        width:100%;

        justify-content:center;

    }

}


/* ===========================
   Small Mobile
=========================== */

@media (max-width:480px){

    .container{

        padding-inline:20px;

    }

    .logo img{

        width:155px;

    }

    .hero{

        padding-top:120px;

    }

    .hero h1{

        letter-spacing:-.04em;

    }
    /* SERVICES */

.section-heading{

    margin-bottom:56px;

}

.section-heading h2{

    font-size:2rem;

}

.section-heading p{

    font-size:.95rem;

    line-height:1.7;

}

.services-grid{

    grid-template-columns:1fr;

    gap:24px;

}

.service-card{

    padding:32px;

}

.service-icon{

    width:56px;
    height:56px;

    margin-bottom:22px;

}

.service-icon svg{

    width:26px;
    height:26px;

}

.service-card h3{

    font-size:1.25rem;

    margin-bottom:14px;

}

.service-card p{

    line-height:1.7;

}
/* PROCESS */

.process-grid{

    grid-template-columns:1fr;

    gap:24px;

}

.process-card{

    padding:30px;

}

.process-number{

    width:56px;

    height:56px;

    margin-bottom:22px;

    border-radius:16px;

    font-size:1.2rem;

}

.process-card h3{

    font-size:1.25rem;

    margin-bottom:14px;

}

.process-card p{

    line-height:1.7;

}
/* ABOUT */

.about-wrapper{

    grid-template-columns:1fr;

    gap:48px;

}

.about-content{

    order:2;

}

.about-image{

    order:1;

}

.about-content h2{

    font-size:2rem;

    margin-bottom:20px;

}

.about-content p{

    font-size:.95rem;

    line-height:1.7;

    margin-bottom:32px;

}

.about-features{

    grid-template-columns:1fr;

    gap:14px;

}

.about-feature{

    padding:16px 18px;

}

.about-feature span{

    font-size:.95rem;

}

.about-image img{

    border-radius:22px;

}
/* CTA */

.cta-wrapper{

    padding:56px 28px;

    border-radius:24px;

}

.cta h2{

    font-size:2rem;

    margin-bottom:20px;

}

.cta p{

    font-size:.95rem;

    line-height:1.7;

    margin-bottom:32px;

}

.cta-buttons{

    flex-direction:column;

    gap:14px;

}

.cta-buttons .btn{

    width:100%;

    justify-content:center;

}
/* FOOTER */

.footer{

    padding-top:72px;

}

.footer-grid{

    grid-template-columns:1fr;

    gap:40px;

    padding-bottom:40px;

}

.footer-logo img{

    width:165px;

    margin-bottom:20px;

}

.footer-column{

    text-align:center;

}

.footer-column p{

    max-width:100%;

}

.footer-column h4{

    margin-bottom:18px;

}

.footer-column ul{

    gap:14px;

}

.footer-bottom{

    padding:24px 0;

}

.footer-bottom p{

    font-size:.9rem;

}
/* CONTACT */

.form-row{

    grid-template-columns:1fr;

    gap:20px;

}

.contact-form{

    padding:28px;

}

.contact-card{

    padding:28px;

}

}