/* =====================================================
   Shadow WolvesLogistic.NET
   responsive.css
   Version 1.0
===================================================== */


/* =====================================================
   1400px
===================================================== */

@media screen and (max-width:1400px){

    .container{

        width:94%;

    }

}


/* =====================================================
   1200px
===================================================== */

@media screen and (max-width:1200px){

    .hero h1{

        font-size:4.2rem;

    }

    .hero h2{

        font-size:2rem;

    }

    .hero-text{

        max-width:700px;

    }

    .about-grid{

        gap:50px;

    }

    .feature-grid{

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

    }

    .fleet-grid{

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

    }

    .gallery-grid{

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

    }

    .partners-grid{

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

    }

    .footer-grid{

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

        gap:40px;

    }

}


/* =====================================================
   992px
===================================================== */

@media screen and (max-width:992px){

    header{

        height:80px;

    }

    nav{

        position:fixed;

        top:80px;

        right:-100%;

        width:320px;

        height:calc(100vh - 80px);

        background:#090909;

        flex-direction:column;

        justify-content:flex-start;

        align-items:flex-start;

        padding:40px;

        transition:.4s;

        gap:30px;

        border-left:1px solid rgba(255,255,255,.08);

        z-index:9999;

    }

    nav.active{

        right:0;

    }

    #mobile-menu{

        display:block;

    }

    .hero{

        padding:120px 20px;

    }

    .hero-logo{

        width:180px;

    }

    .hero h1{

        font-size:3.5rem;

    }

    .hero h2{

        font-size:1.8rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-buttons a{

        width:320px;

    }

    .about-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .about-image{

        order:-1;

    }

    .feature-grid{

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

    }

    .fleet-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

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

    }

    .partners-grid{

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

    }

    .trucksbook-box{

        grid-template-columns:1fr;

        text-align:center;

    }

    .tb-action{

        justify-content:center;

    }

    .footer-grid{

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

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}


/* =====================================================
   Tablet Landscape
===================================================== */

@media screen and (max-width:900px){

    .section{

        padding:100px 0;

    }

    .section-title{

        margin-bottom:45px;

    }

    .section-title h2{

        font-size:2.5rem;

    }

    .section-intro{

        font-size:1rem;

    }

    .feature-card{

        padding:35px;

    }

    .fleet-content{

        padding:25px;

    }

    .partner-card{

        padding:35px;

    }

}
/* =====================================================
   768px
===================================================== */

@media screen and (max-width:768px){

    header{

        height:75px;

    }

    nav{

        top:75px;

        width:100%;

        height:calc(100vh - 75px);

        padding:35px 30px;

    }

    .logo span{

        font-size:1rem;

    }

    .logo img{

        width:48px;

    }

    .hero{

        min-height:auto;

        padding:140px 20px 100px;

    }

    .hero-logo{

        width:150px;

    }

    .hero h1{

        font-size:2.8rem;

        line-height:1.15;

    }

    .hero h2{

        font-size:1.5rem;

    }

    .hero-small{

        letter-spacing:4px;

        font-size:.8rem;

    }

    .hero-text{

        font-size:1rem;

    }

    .hero-buttons{

        gap:15px;

    }

    .hero-buttons a{

        width:100%;

        max-width:320px;

    }

    .scroll-indicator{

        margin-top:45px;

    }

    .section{

        padding:80px 0;

    }

    .section-title{

        margin-bottom:35px;

    }

    .section-title h2{

        font-size:2.2rem;

    }

    .section-intro{

        margin-bottom:40px;

    }

    .about-grid{

        gap:35px;

    }

    .feature-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .feature-card{

        padding:30px;

    }

    .feature-card i{

        font-size:40px;

    }

    .fleet-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .fleet-card img{

        height:220px;

    }

    .gallery-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .gallery-item img{

        height:220px;

    }

    .trucksbook-box{

        padding:30px;

    }

    .partners-grid{

        grid-template-columns:1fr;

    }

    .partner-card{

        padding:30px;

    }

    .contact-buttons{

        flex-direction:column;

        align-items:center;

    }

    .contact-buttons a{

        width:100%;

        max-width:320px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo{

        margin:0 auto 20px;

    }

    .footer-box ul{

        align-items:center;

    }

    .footer-bottom{

        text-align:center;

    }

}

/* =====================================================
   700px
===================================================== */

@media screen and (max-width:700px){

    .hero h1{

        font-size:2.5rem;

    }

    .hero h2{

        font-size:1.35rem;

    }

    .section-title h2{

        font-size:2rem;

    }

}

/* =====================================================
   600px
===================================================== */

@media screen and (max-width:600px){

    .container{

        width:95%;

    }

    .hero{

        padding:120px 15px 80px;

    }

    .hero-logo{

        width:135px;

    }

    .hero h1{

        font-size:2.2rem;

    }

    .hero-text{

        font-size:.95rem;

    }

    .btn-primary,

    .btn-secondary{

        padding:15px 25px;

        font-size:.95rem;

    }

    .feature-card{

        padding:25px;

    }

    .fleet-content{

        padding:20px;

    }

    .partner-card{

        padding:25px;

    }

    .cookie-content{

        flex-direction:column;

        align-items:flex-start;

    }

    .cookie-content button{

        width:100%;

    }

}
/* =====================================================
   480px
===================================================== */

@media screen and (max-width:480px){

    header{

        height:70px;

    }

    nav{

        top:70px;

        height:calc(100vh - 70px);

        padding:30px 25px;

    }

    .logo{

        gap:10px;

    }

    .logo img{

        width:42px;

    }

    .logo span{

        display:none;

    }

    .hero{

        padding:110px 15px 70px;

    }

    .hero-logo{

        width:120px;

    }

    .hero-small{

        letter-spacing:3px;

        font-size:.75rem;

    }

    .hero h1{

        font-size:2rem;

    }

    .hero h2{

        font-size:1.2rem;

    }

    .hero-text{

        font-size:.92rem;

    }

    .section{

        padding:70px 0;

    }

    .section-title{

        margin-bottom:30px;

    }

    .section-title h2{

        font-size:1.8rem;

    }

    .feature-card{

        padding:22px;

    }

    .feature-card h3{

        font-size:1.2rem;

    }

    .feature-card p{

        font-size:.95rem;

    }

    .fleet-card img{

        height:200px;

    }

    .fleet-content{

        padding:18px;

    }

    .fleet-content h3{

        font-size:1.25rem;

    }

    .gallery-item img{

        height:200px;

    }

    .partner-card{

        padding:22px;

    }

    .partner-card img{

        width:70px;

        height:70px;

    }

    .trucksbook-box{

        padding:25px;

    }

    .tb-info h3{

        font-size:1.5rem;

    }

    .tb-info li{

        font-size:.95rem;

    }

    .footer-grid{

        gap:30px;

    }

    .footer-box h3{

        font-size:1.3rem;

    }

    .footer-box h4{

        font-size:1.1rem;

    }

    .footer-box p,

    .footer-box a{

        font-size:.95rem;

    }

    #topButton{

        width:50px;

        height:50px;

        right:15px;

        bottom:15px;

    }

}

/* =====================================================
   400px
===================================================== */

@media screen and (max-width:400px){

    .hero h1{

        font-size:1.75rem;

    }

    .hero h2{

        font-size:1.05rem;

    }

    .hero-text{

        font-size:.9rem;

    }

    .btn-primary,

    .btn-secondary{

        width:100%;

        font-size:.9rem;

        padding:14px 20px;

    }

    .hero-buttons{

        width:100%;

    }

    .feature-card{

        padding:20px;

    }

    .gallery-item img{

        height:180px;

    }

}

/* =====================================================
   360px
===================================================== */

@media screen and (max-width:360px){

    .hero{

        padding-top:100px;

    }

    .hero-logo{

        width:100px;

    }

    .hero h1{

        font-size:1.55rem;

    }

    .hero h2{

        font-size:1rem;

    }

    .section-title h2{

        font-size:1.6rem;

    }

    .feature-card{

        padding:18px;

    }

    .fleet-card img{

        height:170px;

    }

    .gallery-item img{

        height:170px;

    }

    .partner-card{

        padding:18px;

    }

}

/* =====================================================
   LANDSCAPE SMARTPHONES
===================================================== */

@media screen and (max-height:600px) and (orientation:landscape){

    .hero{

        min-height:auto;

        padding:120px 20px 80px;

    }

    nav{

        overflow-y:auto;

    }

}

/* =====================================================
   LARGE SCREENS
===================================================== */

@media screen and (min-width:1600px){

    .container{

        max-width:1450px;

    }

    .hero h1{

        font-size:6rem;

    }

    .hero h2{

        font-size:2.6rem;

    }

    .hero-text{

        font-size:1.2rem;

        max-width:820px;

    }

    .section{

        padding:140px 0;

    }

}

/* =====================================================
   ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/* =====================================================
   PRINT
===================================================== */

@media print{

    header,
    footer,
    #loader,
    #progress-bar,
    #topButton,
    .cookie-banner{

        display:none !important;

    }

    body{

        background:#ffffff;

        color:#000000;

    }

}

/* =====================================================
   END OF responsive.css
===================================================== */