/* ==========================================================
   RESPONSIVE
   PROJECT TITAN
========================================================== */

/* ==========================================================
   LARGE LAPTOP
========================================================== */

@media (max-width:1400px){

    .container{

        width:95%;

    }

}

/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1200px){

    .hero-title{

        font-size:60px;

    }

    .projects-grid,
    .services-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .statistics-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    .grid-2,
    .about-grid{

        grid-template-columns:1fr;

    }

    .hero{

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

    }

    .hero-card{

        display:none;

    }

    .experience-box{

        right:20px;

    }

    .cta-box{

        flex-direction:column;

        text-align:center;

    }

    .cta-buttons{

        width:100%;

    }

}

/* ==========================================================
   MOBILE NAVIGATION
========================================================== */

@media (max-width:900px){

    .nav-menu{

        display:none;

    }

    .hamburger{

        display:flex;

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    :root{

        --section:80px;

    }

    .section-title{

        font-size:38px;

    }

    .hero-title{

        font-size:48px;

    }

    .hero-description{

        font-size:18px;

    }

    .projects-grid,
    .services-grid,
    .statistics-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

    }

    .about-features{

        grid-template-columns:1fr;

    }

    .hero-stats{

        gap:30px;

    }

    .cta-box{

        padding:50px 30px;

    }

    .cta-content h2{

        font-size:36px;

    }

}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:576px){

    .hero{

        min-height:90vh;

    }

    .hero-title{

        font-size:38px;

    }

    .hero-description{

        font-size:16px;

    }

    .section-title{

        font-size:30px;

    }

    .btn{

        width:100%;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .project-content{

        padding:25px;

    }

    .service-card{

        padding:35px 25px;

    }

    .stat-box{

        padding:30px;

    }

    .scroll-top{

        right:15px;

        bottom:15px;

    }

}
/* ==========================================================
   PARTNERS
========================================================== */

@media (max-width:1200px){

    .partners-grid{

        grid-template-columns:repeat(4,1fr);

    }

}

@media (max-width:992px){

    .partners-grid{

        grid-template-columns:repeat(3,1fr);

    }

}

@media (max-width:768px){

    .partners-grid{

        grid-template-columns:repeat(2,1fr);

        gap:18px;

    }

}

@media (max-width:480px){

    .partners-grid{

        grid-template-columns:1fr;

    }

    .partner-card{

        min-height:120px;

        padding:20px;

    }

}
/* ==========================================================
   COMPANY GOALS
========================================================== */

@media (max-width:768px){

    .about-content{

        max-width:100%;

    }

    .about-content p{

        font-size:16px;

        line-height:1.8;

    }

}
/* ==========================================================
   ORGANIZATION STRUCTURE
========================================================== */

@media (max-width:992px){

    .organization-image{

        margin-top:50px;

    }

    .organization-image img{

        padding:18px;

    }

}

@media (max-width:768px){

    .organization-image{

        margin-top:40px;

    }

    .organization-image img{

        border-radius:15px;

        padding:12px;

    }

}

@media (max-width:576px){

    .organization-image img{

        padding:8px;

    }

}
/* ==========================================================
   ENGINEERING PROCESS
========================================================== */

@media (max-width:992px){

    .process-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .process-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .process-card{

        padding:35px 25px;

    }

    .process-card h3{

        font-size:22px;

    }

}
/* ==========================================================
   FAQ
========================================================== */

@media (max-width:768px){

    .faq-item{

        padding:25px;

    }

    .faq-item h3{

        font-size:20px;

    }

    .faq-item p{

        margin-left:0;

        margin-top:15px;

    }

}
/* ==========================================================
   CONTACT DETAILS
========================================================== */

@media (max-width:992px){

    .contact-info{

        grid-template-columns:1fr;

        gap:50px;

    }

    .contact-details{

        text-align:center;

    }

    .contact-item{

        text-align:left;

    }

}
/* ==========================================================
   CONTACT FORM
========================================================== */

@media (max-width:768px){

    .contact-form{

        margin-top:40px;

    }

    .contact-form .grid-2{

        grid-template-columns:1fr;

        gap:20px;

    }

    .contact-form button{

        width:100%;

    }

}