/* ===========================================================
   RESPONSIVE.CSS
   People & Culture at Work
   Enterprise Responsive Design
   =========================================================== */


/* ===========================================================
   LARGE DESKTOP
=========================================================== */

@media (min-width:1600px){

    .container{

        max-width:1450px;

    }

    .hero h1{

        font-size:5rem;

    }

}


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

@media (max-width:1200px){

    .container{

        width:94%;

    }

    .hero-grid{

        gap:50px;

    }

}


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

@media (max-width:992px){

    .container{

        width:92%;

    }

    .hero{

        text-align:center;

    }

    .hero-grid{

        grid-template-columns:1fr;

    }

    .hero-content{

        order:1;

    }

    .hero-image-wrapper{

        order:2;

        margin-top:40px;

    }

    .two-column,

    .three-column,

    .four-column,

    .footer-grid{

        grid-template-columns:1fr;

    }

    .services-grid{

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

    }

    .hero-buttons,

    .cta-buttons,

    .hero-features{

        justify-content:center;

    }

}


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

@media (max-width:768px){

    section{

        padding:70px 0;

    }

    h1{

        font-size:2.4rem;

    }

    h2{

        font-size:2rem;

    }

    p{

        font-size:1rem;

    }

    .services-grid,

    .trust-grid,

    .why-grid,

    .process-grid,

    .faq-grid{

        grid-template-columns:1fr;

    }

    .service-card,

    .why-card,

    .testimonial-card,

    .faq-card{

        padding:28px;

    }

    .btn{

        width:100%;

        justify-content:center;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .floating-card{

        display:none;

    }

    .top-bar{

        display:none;

    }

}


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

@media (max-width:576px){

    .container{

        width:94%;

    }

    .hero{

        padding-top:60px;

    }

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.75rem;

    }

    .section-title{

        margin-bottom:50px;

    }

    .service-card,

    .why-card,

    .testimonial-card{

        padding:22px;

    }

    .cta-box{

        padding:40px 24px;

    }

    .footer-bottom-content{

        flex-direction:column;

        text-align:center;

        gap:12px;

    }

}


/* ===========================================================
   EXTRA SMALL DEVICES
=========================================================== */

@media (max-width:400px){

    h1{

        font-size:1.8rem;

    }

    .btn{

        padding:14px 22px;

    }

    .logo img{

        height:46px;

    }

}