/* Responsive layout and mobile menu */

@media (max-width:1100px) {

    .about{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-grid,
    .contact-grid,
    .faq-grid,
    .pricing-grid,
    .portfolio-grid{

        grid-template-columns:1fr;

    }

    .hero.page-hero{

        padding:120px 6%;

    }

    .pricing-card{

        padding:36px;

    }

    .contact a{

        width:auto;

        padding:0 40px;

    }

}

@media (max-width:768px) {

    header{

        padding:14px 4%;

    }

    .navbar{

        padding:12px 14px;

        border-radius:24px;

        position:relative;

        overflow:visible;

        z-index:1100;

        justify-content:flex-end;

    }

    .navbar .logo{

        display:none;

    }

    .nav-links{

        position:fixed;

        top:82px;

        left:12px;

        right:12px;

        width:auto;

        max-width:calc(100vw - 24px);

        background:rgba(7,7,7,.97);

        border:1px solid rgba(255,255,255,.08);

        border-radius:24px;

        box-shadow:0 20px 60px rgba(0,0,0,.35);

        flex-direction:column;

        align-items:flex-start;

        justify-content:flex-start;

        padding:18px 20px;

        gap:8px;

        transform:translateY(-12px) scale(.98);

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:transform .35s ease, opacity .35s ease, visibility .35s ease;

        backdrop-filter:blur(18px);

        z-index:1200;

    }

    .nav-links.open{

        transform:translateY(0) scale(1);

        opacity:1;

        visibility:visible;

        pointer-events:auto;

    }

    .nav-links li{

        width:100%;

        text-align:left;

    }

    .nav-links a{

        display:block;

        width:100%;

        padding:12px 0;

        font-size:15px;

    }

    .menu-toggle{

        display:flex !important;

        width:44px;

        height:44px;

        padding:0;

        border:1px solid rgba(255,255,255,.16);

        border-radius:14px;

        background:rgba(255,255,255,.08);

        z-index:1300;

    }

    body.nav-open{

        overflow:hidden;

    }

    .hero h1{

        font-size:clamp(2.6rem,10vw,4rem);

    }

    .hero p,
    .hero.page-hero .hero p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        gap:18px;

    }

    .hero,
    .hero.page-hero,
    section,
    .contact,
    .footer,
    .about,
    .pricing,
    .faq,
    .policy-content,
    .cta-card{

        max-width:100%;

        overflow-x:hidden;

    }

    .hero-content,
    .section-title,
    .page-404-content,
    .footer,
    .contact,
    .pricing-card,
    .faq-item,
    .card,
    .policy-content,
    .cta-card{

        width:100%;

        max-width:100%;

    }

    .footer{

        padding:40px 7%;

    }

}

@media (max-width:640px) {

    .navbar{

        border-radius:22px;

    }

    .hero{

        padding-top:90px;

    }

    .hero.page-hero{

        padding:100px 6% 70px;

    }

    section:not(:first-child){

        margin-top:0;

    }

    .hero h1{

        font-size:clamp(2.2rem,12vw,3.2rem);

    }

    .hero-buttons a,
    .contact a,
    .primary-btn,
    .secondary-btn{

        width:100%;

        justify-content:center;

    }

    .contact{

        padding-bottom:140px;

    }

    .pricing-card,
    .faq-item,
    .card,
    .policy-content,
    .cta-card{

        padding:28px;

    }

    .footer-links{

        justify-content:center;

    }

    .footer p{

        margin-top:24px;

    }

}

@media (max-width:480px) {

    header{

        padding:10px 3%;

    }

    .navbar{

        padding:10px 12px;

    }

    .logo{

        font-size:13px;

        letter-spacing:.25em;

    }

    .nav-links{

        top:70px;

        left:8px;

        right:8px;

        max-width:calc(100vw - 16px);

        padding:16px 16px 12px;

    }

    .nav-links a{

        font-size:14px;

        padding:10px 0;

    }

    .hero{

        min-height:auto;

        padding-top:88px;

        padding-bottom:36px;

    }

    .hero.page-hero{

        padding:96px 5% 56px;

    }

    .section-title h2,
    .contact h2,
    .page-404-content h1{

        font-size:clamp(1.7rem,8vw,2.3rem);

    }

    .project-info,
    .pricing-card,
    .faq-item,
    .card,
    .policy-content,
    .cta-card{

        padding:24px;

    }

    .footer{

        padding:36px 6%;

    }

}