/*======================================
  RESPONSIVE DESIGN
======================================*/

/*========================
  Large Tablets
========================*/

@media (max-width:1200px){

    .container{
        width:92%;
    }

}

/*========================
  Tablets & Mobile
========================*/

@media (max-width:992px){

    section{
        padding:80px 0;
    }

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .nav-actions{
        display:none;
    }

    .navbar{

        position:fixed;

        top:90px;
        left:-100%;

        width:100%;
        height:calc(100vh - 90px);

        background:#111;

        display:flex;
        justify-content:center;
        align-items:center;

        transition:.35s ease;

        z-index:999;

    }

    .navbar.active{
        left:0;
    }

    .nav-links{

        flex-direction:column;
        gap:30px;

    }

    .nav-links a{

        font-size:22px;

    }

}
/*========================
  HERO RESPONSIVE
========================*/

@media (max-width:992px){

    .hero{

        text-align:center;

    }

    .hero-content{

        margin:auto;

    }

    .hero h1{

        font-size:48px;

    }

    .hero p{

        font-size:18px;

    }

    .hero-buttons,
    .hero-features{

        justify-content:center;

    }

}

@media (max-width:576px){

    .hero h1{

        font-size:34px;

    }

    .hero p{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn-primary,
    .btn-secondary{

        width:100%;

    }

}
/*========================
  ABOUT RESPONSIVE
========================*/

@media (max-width:992px){

    .about-container{

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

    }

    .about-content{

        text-align:center;

    }

    .about-image img{

        height:auto;

    }

}

@media (max-width:576px){

    .about-content h2{

        font-size:32px;

    }

    .about-features{

        grid-template-columns:1fr;

    }

}
/*========================
  WHY CHOOSE US
========================*/

@media (max-width:768px){

    .why-grid{

        grid-template-columns:1fr;

    }

}
/*========================
  FEATURED PRODUCTS
========================*/

@media (max-width:768px){

    .product-grid{

        grid-template-columns:1fr;

    }

}
/*========================
  GALLERY
========================*/

@media (max-width:768px){

    .gallery-grid{

        grid-template-columns:1fr;

    }

}
/*========================
  STATISTICS
========================*/

@media (max-width:768px){

    .stats-grid{

        grid-template-columns:1fr;

    }

}
/*========================
  CTA
========================*/

@media (max-width:768px){

    .cta h2{

        font-size:36px;

    }

}

@media (max-width:576px){

    .cta h2{

        font-size:30px;

    }

    .cta-buttons{

        flex-direction:column;

        align-items:center;

    }

    .cta-buttons a{

        width:100%;
        max-width:320px;

    }

}
/*========================
  FOOTER
========================*/

@media (max-width:992px){

    .footer-grid{

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

        gap:40px;

    }

}

@media (max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-social{

        justify-content:center;

    }

}
/*========================
  PAGE HERO
========================*/

@media (max-width:992px){

    .page-hero h1{

        font-size:46px;

    }

}

@media (max-width:768px){

    .section-header h2{

        font-size:34px;

    }

    .page-hero{

        padding:150px 20px 90px;

    }

    .page-hero h1{

        font-size:38px;

    }

}

@media (max-width:576px){

    .section-header h2{

        font-size:30px;

    }

    .page-hero h1{

        font-size:32px;

    }

    .page-hero p{

        font-size:16px;

    }

}