/* ==========================================
   TABLET (992px)
========================================== */

@media (max-width:992px){

    /* Navbar */
    .navbar{
        padding:15px 5%;
    }

    .navbar ul li{
        margin-left:25px;
    }

    /* Hero */
    .hero h1{
        font-size:60px;
        line-height:70px;
    }

    .description{
        width:90%;
    }

}

/* ==========================================
   MOBILE (768px)
========================================== */

@media (max-width:768px){

    /* Navbar */
    .menu-toggle{
        display:block;
        font-size:30px;
        color:#fff;
        cursor:pointer;
    }

    .navbar{
        padding:15px 5%;
    }

    .navbar ul{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        display:none;
        flex-direction:column;
        align-items:center;
        gap:20px;
        padding:30px 0;
        background:#111;
    }

    .navbar ul.active{
        display:flex;
    }

    .navbar ul li{
        margin:0;
    }

    /* Hero */
    .hero h1{
        font-size:42px;
        line-height:50px;
    }

    .hero h3{
        font-size:18px;
    }

    .description{
        width:90%;
        font-size:16px;
        line-height:28px;
    }

    .btn,
    .btn2{
        padding:14px 28px;
        font-size:15px;
    }
    .company{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
    padding: 60px 5%;
}

.company-image{
    width: 100%;
    max-width: 500px;
}

.company-image img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
}

.company-content{
    width: 100%;
}

.company-content h2{
    font-size: 34px;
    line-height: 44px;
}

.company-content p{
    font-size: 16px;
    line-height: 28px;
}
.logo img{
    width:60px;
    height:60px;
}

.logo-text h2{
    font-size:20px;
}

.logo-text span{
    font-size:11px;
    letter-spacing:2px;
}
@media (max-width:768px){

    .why{
        width:100%;
        padding:60px 5%;
    }

    .why-container{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
    }

    .why-box{
        width:100%;
    }

}
.page-banner{
    height:35vh;
    padding-top:80px;   /* Push content below the fixed navbar */
}

.banner-content h1{
    font-size:52px;
    line-height:1.1;
    margin-bottom:10px;
}

.banner-content p{
    font-size:18px;
    line-height:1.4;
}
/* ==========================
   PROJECTS - MOBILE
========================== */

@media (max-width:768px){

    .projects-page{
        padding:60px 5%;
    }

    .project-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:25px;
    }

    .project-card{
        width:100%;
    }

    .project-card img{
        width:100%;
        height:auto;
        display:block;
    }

    .project-stats{
        grid-template-columns:1fr;
        gap:20px;
    }

    .project-cta{
        padding:50px 20px;
    }

    .project-cta h2{
        font-size:30px;
    }

}
.contact-section{
    display:grid;
    grid-template-columns:1fr !important;
    gap:40px;
    padding:60px 5%;
}

.contact-info{
    width:100%;
}

.contact-form{
    width:100%;
}

}