/*==========================================================
    I.N.K. ENGINEERING (PRIVATE) LIMITED
    responsive.css
==========================================================*/

/*=========================
1400px
=========================*/

@media (max-width:1400px){

    .container{

        width:min(94%,1200px);

    }

}

/*=========================
1200px
=========================*/

@media (max-width:1200px){

    .grid-2{

        grid-template-columns:1fr;

        gap:70px;

    }

    .stats-grid{

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

    }

    .service-grid{

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

    }

    .projects-grid{

        grid-template-columns:1fr;

    }

    .why-grid{

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

    }

    .team-grid{

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

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

    }

}

/*=========================
992px
=========================*/

@media (max-width:992px){

    h1{

        font-size:4rem;

    }

    h2{

        font-size:2.8rem;

    }

    .hero{

        min-height:90vh;

    }

    .hero-buttons{

        flex-wrap:wrap;

    }

    .nav-links{

        position:fixed;

        top:0;

        right:-100%;

        width:320px;

        height:100vh;

        background:#0b0b0b;

        display:flex;

        flex-direction:column;

        justify-content:center;

        gap:35px;

        transition:.45s;

        box-shadow:-20px 0 50px rgba(0,0,0,.45);

    }

    .nav-links.active{

        right:0;

    }

    .menu-toggle{

        display:block;

        z-index:1001;

    }

}

/*=========================
768px
=========================*/

@media (max-width:768px){

    .section{

        padding:90px 0;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .service-grid{

        grid-template-columns:1fr;

    }

    .why-grid{

        grid-template-columns:1fr;

    }

    .team-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero{

        text-align:center;

    }

    .hero-content{

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .project-meta{

        grid-template-columns:1fr;

    }

    .careers-home .glass{

        padding:50px 35px;

    }

    .sustainability-box{

        padding:40px;

    }

}

/*=========================
576px
=========================*/

@media (max-width:576px){

    body{

        font-size:15px;

    }

    h1{

        font-size:3rem;

        letter-spacing:-1px;

    }

    h2{

        font-size:2.2rem;

    }

    p{

        font-size:1rem;

    }

    header .container{

        padding:18px 0;

    }

    .logo img{

        width:140px;

    }

    .hero{

        min-height:100vh;

    }

    .hero p{

        font-size:1rem;

    }

    .btn-gold,
    .btn-glass{

        width:100%;

        justify-content:center;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .service-card{

        padding:35px;

    }

    .project-content{

        padding:30px;

    }

    .status{

        font-size:.75rem;

        padding:8px 18px;

    }

    .team-card img{

        width:140px;

        height:140px;

    }

    .footer-logo{

        margin:auto;

        margin-bottom:25px;

    }

}

/*=========================
400px
=========================*/

@media (max-width:400px){

    h1{

        font-size:2.5rem;

    }

    h2{

        font-size:2rem;

    }

    .section{

        padding:70px 0;

    }

    .container{

        width:92%;

    }

    .service-card{

        padding:28px;

    }

    .stat-card{

        padding:30px;

    }

    .director-image img{

        border-radius:20px;

    }

}

/*=========================
LANDSCAPE PHONES
=========================*/

@media (max-height:600px){

    .hero{

        min-height:700px;

    }

}

/*=========================
LARGE SCREENS
=========================*/

@media (min-width:1800px){

    .container{

        max-width:1500px;

    }

    h1{

        font-size:7.5rem;

    }

    h2{

        font-size:5rem;

    }

}

/*=========================
PRINT
=========================*/

@media print{

    header,
    footer,
    .hero-buttons,
    .scroll-indicator{

        display:none;

    }

    body{

        background:#fff;

        color:#000;

    }

}

/*==========================================================
END OF responsive.css
==========================================================*/