/* ==========================================================
   responsive.css
   Arinova Industries
   ========================================================== */


/* ==========================================================
   LARGE LAPTOPS
   ========================================================== */

@media (max-width:1200px){

    .hero h1{

        font-size:3.2rem;

    }

    .section h2{

        font-size:2.1rem;

    }

}


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

@media (max-width:992px){

    .nav{

        height:75px;

    }

    .phone-btn{

        display:none;

    }

    .hero{

        padding-top:130px;
        padding-bottom:70px;

    }

    .hero-grid,
    .two-column,
    .custom-box{

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

    }

    .hero-content{

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-features{

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

    }

    .hero-image{

        max-width:650px;

        margin:auto;

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

        gap:40px;

    }

    .timeline{

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

    }

}


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

@media (max-width:768px){

    .header{

        backdrop-filter:none;

    }

    .nav{

        position:relative;

    }

    .nav-links{

        position:absolute;

        left:0;
        right:0;

        top:75px;

        background:white;

        flex-direction:column;

        align-items:center;

        padding:25px;

        gap:22px;

        box-shadow:0 18px 35px rgba(0,0,0,.08);

        display:none;

    }

    .nav-links.active{

        display:flex;

    }

    .menu-toggle{

        display:flex;

        flex-direction:column;

        gap:5px;

        cursor:pointer;

    }

    .menu-toggle span{

        width:26px;
        height:3px;

        background:var(--primary);

        border-radius:10px;

    }

}


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

@media (max-width:768px){

    .section{

        padding:70px 0;

    }

    .hero{

        padding-top:120px;

    }

    .hero h1{

        font-size:2.4rem;

    }

    .page-hero h1{

        font-size:2.3rem;

    }

    .section h2{

        font-size:1.9rem;

    }

    .hero p,
    .page-hero p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn{

        width:100%;

        max-width:320px;

    }

    .hero-features{

        grid-template-columns:1fr;

    }

    .features-grid,
    .industry-grid,
    .products-grid{

        grid-template-columns:1fr;

    }

    .timeline{

        grid-template-columns:1fr;

    }

    .timeline::before{

        display:none;

    }

    .capacity-grid{

        justify-content:center;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo{

        margin:auto auto 25px;

    }

    .social-links{

        justify-content:center;

    }

}


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

@media (max-width:576px){

    body{

        font-size:15px;

    }

    .container{

        width:92%;

    }

    .hero h1{

        font-size:2rem;

    }

    .page-hero h1{

        font-size:2rem;

    }

    .section h2{

        font-size:1.7rem;

    }

    .hero-tag{

        font-size:.8rem;

        padding:8px 16px;

    }

    .btn{

        padding:15px 22px;

    }

    .feature-card,
    .product-card,
    .faq-item{

        padding:25px;

    }

    .product-card img{

        height:180px;

    }

    .industry-card img{

        height:180px;

    }

    .timeline div{

        padding:60px 20px 25px;

    }

    .cta{

        padding:70px 0;

    }

    .cta h2{

        font-size:2rem;

    }

}


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

@media (max-width:380px){

    .hero h1{

        font-size:1.8rem;

    }

    .section h2{

        font-size:1.5rem;

    }

    .btn{

        font-size:.9rem;

    }

    .hero-buttons{

        gap:15px;

    }

    .capacity-grid div{

        width:100%;

        text-align:center;

    }

}


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

@media (max-height:500px){

    .hero{

        padding-top:110px;

    }

}