/* ===========================================
   Pull Station
   Responsive Styles
=========================================== */

/* ---------- Large Screens ---------- */

@media (min-width:1600px){

    section{

        width:min(1500px,88%);

    }

    h1{

        font-size:5rem;

    }

    h2{

        font-size:3.2rem;

    }

}

/* ---------- Laptops ---------- */

@media (max-width:1200px){

    .hero{

        gap:40px;

    }

    .two-column{

        gap:50px;

    }

}

/* ---------- Tablets ---------- */

@media (max-width:992px){

    h1{

        font-size:3.2rem;

    }

    h2{

        font-size:2.3rem;

    }

    section{

        padding:80px 0;

    }

    .hero{

        grid-template-columns:1fr;

        text-align:center;

        padding-top:140px;

    }

    .hero-content{

        margin:auto;

    }

    .hero p{

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

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-cards{

        height:420px;

        margin-top:40px;

    }

    .two-column{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .steps{

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

    }

    .stats{

        grid-template-columns:1fr;

    }

    .timeline::before{

        display:none;

    }

    .timeline-item{

        width:100%;

        margin-left:0 !important;

    }

}

/* ---------- Mobile Navigation ---------- */

@media (max-width:768px){

    .navbar{

        height:75px;

    }

    .hamburger{

        display:flex;

        flex-direction:column;

        gap:6px;

        cursor:pointer;

    }

    .hamburger span{

        width:28px;

        height:3px;

        background:white;

        border-radius:10px;

        transition:.3s;

    }

    .nav-links{

        position:fixed;

        top:75px;

        right:-100%;

        width:280px;

        height:calc(100vh - 75px);

        background:#0d1320;

        flex-direction:column;

        justify-content:flex-start;

        align-items:center;

        padding-top:50px;

        transition:.35s;

        gap:30px;

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

    }

    .nav-links.active{

        right:0;

    }

    .nav-links a{

        font-size:1.1rem;

    }

    h1{

        font-size:2.7rem;

    }

    h2{

        font-size:2rem;

    }

    .page-hero{

        padding-top:130px;

    }

    .business-content{

        padding:40px 25px;

    }

    .feature-grid,
    .product-grid,
    .about-grid,
    .benefits,
    .location-grid,
    .testimonials{

        grid-template-columns:1fr;

    }

    .steps{

        grid-template-columns:1fr;

    }

    .footer-links{

        flex-direction:column;

        gap:18px;

    }

    .logo-strip{

        gap:25px;

    }

    .logo-strip img{

        height:36px;

    }

}

/* ---------- Small Phones ---------- */

@media (max-width:576px){

    section{

        width:92%;

        padding:70px 0;

    }

    h1{

        font-size:2.2rem;

    }

    h2{

        font-size:1.8rem;

    }

    p{

        font-size:1rem;

    }

    .btn{

        width:100%;

        text-align:center;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-cards{

        display:none;

    }

    .feature,
    .product-card,
    .about-card,
    .benefit,
    .contact-card,
    .testimonial{

        padding:25px;

    }

    .map{

        height:320px;

    }

    input,
    textarea,
    select{

        padding:16px;

    }

    .footer-logo{

        flex-direction:column;

    }

}

/* ---------- Landscape Phones ---------- */

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

    .hero{

        min-height:auto;

        padding-top:150px;

    }

    .hero-cards{

        display:none;

    }

}

/* ---------- Ultra Wide ---------- */

@media (min-width:2200px){

    body{

        font-size:18px;

    }

    section{

        width:min(1800px,85%);

    }

}