/* =================================
GLOBAL RESET
================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    color:#1f2937;
    background:#ffffff;
    line-height:1.6;
}

/* =================================
ANIMATION SYSTEM
================================= */

.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

.reveal-left{
    opacity:0;
    transform:translateX(-60px);
    transition:all .8s ease;
}

.reveal-left.active{
    opacity:1;
    transform:translateX(0);
}

.reveal-right{
    opacity:0;
    transform:translateX(60px);
    transition:all .8s ease;
}

.reveal-right.active{
    opacity:1;
    transform:translateX(0);
}

/* =================================
CONTAINER SYSTEM
================================= */

.container{
    max-width:1100px;
    margin:auto;
    padding-left:20px;
    padding-right:20px;
}

/* =================================
SECTION SPACING
================================= */

section{
    padding:80px 0;
}

/* =================================
HEADER
================================= */

.header{
    background:white;
    border-bottom:1px solid #e5e7eb;
    padding:15px 0;
}

.header.scrolled{
    box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.nav-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* Logo */

.logo{
    height:85px;
}

.logo{
    height:85px;
    transition:transform .25s ease;
}

.logo:hover{
    transform:scale(1.03);
}

/* Navigation */

.nav-menu{
    list-style:none;
    display:flex;
    align-items:center;
    gap:36px;
}

.nav-menu a{
    text-decoration:none;
    color:#1f2937;
    font-weight:600;
    font-size:17px;
    position:relative;
    transition:color .25s ease;
}

.nav-menu a::after{
    content:"";
    position:absolute;
    width:0;
    height:2px;
    bottom:-6px;
    left:0;
    background:#1f4e8c;
    transition:width .25s ease;
}

.nav-menu a:hover{
    color:#1f4e8c;
}

.nav-menu a:hover::after{
    width:100%;
}
/* Login Button */

.login-btn{
    background:#1f4e8c;
    color:white;
    padding:10px 20px;
    border-radius:6px;
    font-weight:600;
    transition:all .25s ease;
}

.login-btn:hover{
    background:#163c6c;
}

/* =================================
HERO SECTION
================================= */

.hero{

    background-image:
    linear-gradient(
        to right,
        rgba(255,255,255,0.97) 0%,
        rgba(255,255,255,0.92) 30%,
        rgba(255,255,255,0.70) 45%,
        rgba(255,255,255,0.25) 65%,
        rgba(255,255,255,0.05) 80%
    ),
    url("../images/warehouse-bg.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    padding:140px 0;
}

/* HERO GRID */

.hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:60px;
}

/* TEXT SIDE */

.hero-left{
    max-width:520px;
}

.hero h1{
    font-size:48px;
    color:#1f4e8c;
    margin-bottom:20px;
}

.hero-subtext{
    font-size:18px;
    margin-bottom:30px;
}

/* HERO BUTTONS */

.hero-buttons{
    margin-top:20px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

/* =================================
BUTTONS
================================= */

.btn-primary{
    background:#1f4e8c;
    color:white;
    padding:14px 28px;
    border-radius:6px;
    text-decoration:none;
    font-weight:600;
    transition:all .25s ease;
}

.btn-secondary{
    border:2px solid #1f4e8c;
    padding:14px 28px;
    border-radius:6px;
    text-decoration:none;
    color:#1f4e8c;
    font-weight:600;
    transition:all .25s ease;
}

.btn-primary:hover{
    background:#163c6c;
    transform:translateY(-2px);
}

.btn-secondary:hover{
    background:#1f4e8c;
    color:white;
    transform:translateY(-2px);
}

.btn-primary:active,
.btn-secondary:active{
    transform:translateY(0);
}
/* HERO MAP */

.hero-right{
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-map{
    width:100%;
    max-width:720px;
    display:block;
    opacity:0.85;
    filter:drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}

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

@media (max-width:900px){

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

    .hero-left{
        margin:auto;
    }

    .hero-map{
        margin:auto;
        margin-top:40px;
    }
}

/* =================================
STATES BAR
================================= */

.states-bar{
    background:white;
    border-bottom:1px solid #e5e7eb;
    padding:40px 0;
    text-align:center;
}

.states-title{
    font-weight:600;
    margin-bottom:20px;
    color:#1f4e8c;
}

.states-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
}

.states-row span{
    background:#f6f8fb;
    padding:10px 18px;
    border-radius:6px;
    border:1px solid #e5e7eb;
    font-weight:500;
}

.state-btn{
    transition:all .25s ease;
}

.state-btn:hover{
    background:#2b5c9c;
    color:white;
    transform:translateY(-2px);
}

/* =================================
ABOUT
================================= */

.about{
    text-align:center;
    background:white;
}

.about h2{
    color:#1f4e8c;
    margin-bottom:20px;
    font-size:28px;
}

.mission-text{
    max-width:750px;
    margin:auto;
    font-size:17px;
}

/* =================================
PRODUCT SECTION
================================= */

.products-overview{
    background:#f6f8fb;
    text-align:center;
}

.section-intro{
    max-width:650px;
    margin:auto;
    margin-bottom:40px;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
    margin-top:30px;
}

.product-card{
    background:white;
    padding:30px;
    border-radius:8px;
    border:1px solid #e5e7eb;
    transition:all .3s ease;
}

.product-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 30px rgba(0,0,0,0.08);
}

.product-card h3{
    color:#1f4e8c;
    margin-bottom:10px;
}

.center-btn{
    margin-top:40px;
}

/* =================================
CTA SECTION
================================= */

.cta{
    background:#1f4e8c;
    color:white;
    text-align:center;
}

.cta h2{
    margin-bottom:20px;
}

.cta p{
    margin-bottom:30px;
}

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

.footer{
    border-top:1px solid #e5e7eb;
    text-align:center;
    padding:30px 0;
    background:white;
}