/*==================================================
  RESPONSIVE STYLES
==================================================*/

/*==============================
  LARGE TABLETS
==============================*/

@media (max-width: 1200px){

    .container{
        width:94%;
    }

    h1{
        font-size:52px;
    }

    h2{
        font-size:38px;
    }

}

/*==============================
  TABLETS
==============================*/

@media (max-width: 992px){

    section{
        padding:80px 0;
    }

    .hero-grid,
    .why-grid{

        grid-template-columns:1fr;
        gap:60px;

    }

    .hero{

        text-align:center;

    }

    .hero-content p{

        margin-left:auto;
        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-rating{

        justify-content:center;
        flex-wrap:wrap;

    }

    .hero-image{

        order:-1;

    }

    .hero-image img{

        max-width:400px;

    }

    .floating-card{

        display:none;

    }

    .stats .container{

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

    }

    .footer-grid{

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

        gap:40px;

    }

    .trust-logos{

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

    }

}

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

@media (max-width:768px){

    .menu-btn{

        display:block;

        z-index:1001;

    }

    .btn-nav{

        display:none;

    }

    .navbar{

        position:fixed;

        top:85px;

        left:-100%;

        width:100%;

        background:white;

        box-shadow:0 15px 40px rgba(0,0,0,.08);

        transition:.35s;

    }

    .navbar.active{

        left:0;

    }

    .navbar ul{

        flex-direction:column;

        padding:35px;

        gap:25px;

    }

    .navbar a{

        font-size:18px;

    }

}

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

@media (max-width:768px){

    h1{

        font-size:42px;

    }

    h2{

        font-size:34px;

    }

    h3{

        font-size:24px;

    }

    .hero{

        padding-top:130px;

    }

    .stats .container{

        grid-template-columns:1fr;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .portfolio-grid{

        grid-template-columns:1fr;

    }

    .testimonial-grid{

        grid-template-columns:1fr;

    }

    .trust-logos{

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

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer ul{

        padding:0;

    }

}

/*==============================
  SMALL PHONES
==============================*/

@media (max-width:480px){

    .container{

        width:92%;

    }

    section{

        padding:70px 0;

    }

    h1{

        font-size:34px;

        line-height:1.2;

    }

    h2{

        font-size:28px;

    }

    p{

        font-size:16px;

    }

    .btn-primary,
    .btn-outline{

        width:100%;

        justify-content:center;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .service-card,
    .portfolio-card,
    .testimonial-card{

        padding:25px;

    }

    .portfolio-card img{

        height:220px;

    }

    .hero-image img{

        max-width:300px;

    }

    .trust-logos{

        grid-template-columns:1fr;

    }

}

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

@media (max-width:360px){

    h1{

        font-size:30px;

    }

    h2{

        font-size:24px;

    }

    .logo{

        font-size:28px;

    }

}