/* =========================================================
   DZITU TECHNOLOGIES — RESPONSIVE
   ========================================================= */

@media (max-width:1100px){
    .navbar{
        width:94%;
    }

    .nav-links{
        gap:22px;
    }

    .about-container{
        gap:45px;
    }

    .services,
    .about,
    .projects,
    .contact{
        padding-left:5%;
        padding-right:5%;
    }
}

@media (max-width:900px){
    header{
        padding:8px 0;
    }

    .navbar{
        min-height:60px;
    }

    .logo span{
        display:none;
    }

    .logo img{
        width:45px;
        height:45px;
    }

    .menu-btn{
        display:block;
    }

    .nav-links{
        position:absolute;
        top:100%;
        left:3%;
        width:94%;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:5px;
        padding:15px;
        border-radius:18px;
        background:rgba(38,30,105,.97);
        backdrop-filter:blur(20px);
        box-shadow:0 20px 45px rgba(0,0,0,.25);
        border:1px solid rgba(255,255,255,.1);
    }

    .nav-links.active{
        display:flex;
        animation:mobileMenu .25s ease;
    }

    @keyframes mobileMenu{
        from{opacity:0;transform:translateY(-10px);}
        to{opacity:1;transform:translateY(0);}
    }

    .nav-links a{
        display:block;
        text-align:center;
        padding:13px;
        border-radius:10px;
    }

    .nav-links a:hover{
        background:rgba(255,255,255,.08);
    }

    .nav-links a::after{
        display:none;
    }

    .nav-buttons{
        margin-left:auto;
    }

    .hero{
        padding-top:120px;
    }

    .hero-shape{
        opacity:.45;
        transform:scale(.7);
    }

    .shape-1{left:2%;top:22%;}
    .shape-2{right:1%;top:28%;}
    .shape-3{right:4%;bottom:13%;}
    .shape-4{left:4%;bottom:12%;}

    .about-container,
    .contact-wrapper{
        grid-template-columns:1fr;
    }

    .about-image{
        max-width:720px;
        margin:auto;
    }

    .about-image img{
        height:400px;
    }

    .about-text{
        text-align:center;
    }

    .stats{
        max-width:650px;
        margin-left:auto;
        margin-right:auto;
    }

    .contact-info{
        text-align:center;
    }

    .contact-info p{
        text-align:left;
    }

    .footer-container{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:600px){
    .services,
    .about,
    .projects,
    .contact{
        padding-top:75px;
        padding-bottom:75px;
    }

    .hero{
        min-height:100svh;
        padding:110px 18px 70px;
    }

    .hero h1{
        letter-spacing:-2px;
    }

    .hero h2{
        font-size:1.7rem;
    }

    .hero p{
        font-size:15px;
        margin-bottom:28px;
    }

    .hero-btn{
        width:100%;
        max-width:280px;
        padding:14px 25px;
    }

    .hero-shape{
        opacity:.25;
    }

    .services-grid,
    .project-grid{
        grid-template-columns:1fr;
    }

    .service-card img{
        height:210px;
    }

    .plans{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .plan{
        padding:15px 8px;
    }

    .plan h4{
        font-size:18px;
    }

    .plan span{
        font-size:14px;
    }

    .about-image img{
        height:280px;
        transform:none;
    }

    .about-image:hover img{
        transform:scale(1.01);
    }

    .stats{
        grid-template-columns:1fr;
    }

    .stat h3{
        font-size:34px;
    }

    .contact-wrapper{
        margin-top:30px;
    }

    .contact-form,
    .contact-info{
        padding:22px;
    }

    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-container a{
        margin-left:auto;
        margin-right:auto;
    }

    .floating-whatsapp{
        width:56px;
        height:56px;
        right:17px;
        bottom:17px;
        font-size:27px;
    }

    #topBtn{
        width:46px;
        height:46px;
        right:17px;
        bottom:88px;
    }
}

@media (max-width:380px){
    .plans{
        grid-template-columns:1fr;
    }

    .nav-buttons{
        gap:7px;
    }

    #themeToggle{
        width:40px;
        height:40px;
    }

    .menu-btn{
        font-size:25px;
    }
}