/*==================================================
    RESPONSIVE CSS
    Mobile, Tablet & Small Desktop Adjustments
==================================================*/


/*==================================================
    Large Tablets / Small Laptops
    1200px and below
==================================================*/
@media (max-width:1200px){

    :root{
        --container:1000px;
    }

    .hero-grid{
        gap:40px;
    }

    .hero h1{
        font-size:3.2rem;
    }

    .about-grid,
    .quality-grid,
    .contact-grid{
        gap:50px;
    }

    .floating-card{
        transform:scale(.9);
    }

    .card1{
        left:-10px;
    }

    .card2{
        right:-10px;
    }

}


/*==================================================
    Tablets
    1024px and below
==================================================*/
@media (max-width:1024px){

    section{
        padding:70px 0;
    }


    /* Header */
    .header .container{
        height:70px;
    }


    /* Hero */
    .hero-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-content{
        order:1;
    }

    .hero-image{
        order:2;
        margin-top:40px;
    }

    .hero h1{
        font-size:2.8rem;
    }

    .hero-buttons,
    .hero-features{
        justify-content:center;
    }


    /* About */
    .about-grid{
        grid-template-columns:1fr;
    }

    .about-content{
        text-align:center;
    }

    .about-features{
        grid-template-columns:1fr 1fr;
    }


    /* Quality */
    .quality-grid{
        grid-template-columns:1fr;
        text-align:center;
    }


    /* Stats */
    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }


    /* Contact */
    .contact-grid{
        grid-template-columns:1fr;
    }


    /* Footer */
    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

}



/*==================================================
    Mobile Devices
    768px and below
==================================================*/
@media (max-width:768px){


    :root{
        --radius:12px;
    }


    body{
        font-size:.95rem;
    }


    section{
        padding:55px 0;
    }


    .container{
        width:92%;
    }


    /* Header */

    .nav-links{
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background:#fff;
        flex-direction:column;
        gap:20px;
        padding:25px;
        box-shadow:0 15px 30px rgba(0,0,0,.1);
        display:none;
    }

    .nav-links.active{
        display:flex;
    }


    .menu-toggle{
        display:block;
    }



    /* Typography */

    .section-header{
        margin-bottom:35px;
    }


    .section-title{
        font-size:1.8rem;
    }


    .section-subtitle{
        font-size:.85rem;
    }



    /* Hero */

    .hero{
        min-height:auto;
        padding-top:120px;
        padding-bottom:80px;
    }


    .hero h1{
        font-size:2.1rem;
    }


    .hero p{
        font-size:1rem;
    }


    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }


    .btn{
        width:100%;
        max-width:280px;
    }


    .hero-features{
        flex-direction:column;
        gap:15px;
    }


    .hero-image img{
        max-width:520px;
    }



    /* Floating Cards */

    .floating-card{
        display:none;
    }


    .shape{
        display:none;
    }



    /* About */

    .about-features{
        grid-template-columns:1fr;
    }


    .experience-card{
        width:140px;
        right:-10px;
        bottom:-20px;
        padding:15px;
    }


    .experience-card h2{
        font-size:2rem;
    }



    /* Product Cards */

    .category-card{
        height:380px;
    }


    .industry-card{
        padding:25px;
    }



    /* Sector */

    .sector-grid{
        grid-template-columns:repeat(2,1fr);
    }



    /* Stats */

    .stats-grid{
        grid-template-columns:1fr;
    }


    .stat-box h2{
        font-size:2.3rem;
    }



    /* Testimonials */

    .testimonial-grid{
        grid-template-columns:1fr;
    }



    /* FAQ */

    .faq details{
        padding:18px;
    }



    /* Contact */

    .contact-form{
        padding:25px;
    }



    /* Newsletter */

    .newsletter-box{
        flex-direction:column;
        text-align:center;
    }


    .newsletter-form{
        width:100%;
        flex-direction:column;
    }


    .newsletter-form input,
    .newsletter-form button{
        width:100%;
    }



    /* Footer */

    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
    }


    .footer h4::after{
        left:50%;
        transform:translateX(-50%);
    }


    .contact-info p{
        justify-content:center;
    }


    .social-links{
        justify-content:center;
    }



    /* Scroll Top */

    #scrollTop{
        width:42px;
        height:42px;
        right:20px;
        bottom:20px;
    }

}




/*==================================================
    Small Mobile
    480px and below
==================================================*/
@media (max-width:480px){


    .logo{
        font-size:1.5rem;
    }


    .hero h1{
        font-size:1.8rem;
    }


    .section-title{
        font-size:1.6rem;
    }


    .about-feature{
        padding:12px;
    }


    .wcard{
        padding:30px 20px;
    }


    .industry-card i{
        font-size:2.3rem;
    }


    .sector-grid{
        grid-template-columns:1fr;
    }


    .testimonial-card{
        padding:25px;
    }


    .contact-item{
        flex-direction:column;
        text-align:center;
    }


    .footer{
        padding-top:30px;
    }

}



/*==================================================
    Extra Small Devices
    360px and below
==================================================*/
@media (max-width:360px){

    .hero h1{
        font-size:1.6rem;
    }


    .btn{
        padding:12px 20px;
    }


    .stat-box h2{
        font-size:2rem;
    }

}