html { scrollbar-gutter: stable; }
body { overflow-x: hidden; }


:root{
    --brand: #0d6efd;
    --brand-2: #3fa0ff;
    --ink: #222;
    --muted: #666;
    --card: #fff;
    --bg: #f8f9fb;
    --radius: 12px;
    --shadow-sm: 0 4px 16px rgba(0,0,0,.06);
    --shadow-lg: 0 10px 24px rgba(13,110,253,.12);
}

body{ background:#fff; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
.container{ max-width:1200px; margin:0 auto; padding:0 1rem; }


.services-hero{
    background: radial-gradient(1200px 300px at 10% 0%, rgba(13,110,253,.08), transparent 60%),
    linear-gradient(to bottom, #fff, #f9fbff 60%, #fff);
    border-bottom:1px solid #eef0f3;
}
.services-hero .container{ padding:2.4rem 1rem; }
.services-hero h1{ margin:0 0 .5rem; font-size:2.2rem; }
.services-hero .lead{ margin:0 0 1.25rem; color:#444; max-width:56ch; }
.btn.btn-primary{
    display:inline-block; background:var(--brand); color:#fff; padding:.65rem 1rem; border-radius:8px;
    box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); background:#0b5ed7; }


.services{ padding:2rem 0 3rem; }
.intro{ display:grid; grid-template-columns: 1.2fr .8fr; gap:1.25rem; align-items:start; }
.intro__copy h2{ margin:.25rem 0 .5rem; font-size:1.5rem; }
.intro__copy p{ margin:0 0 .75rem; color:#444; }
.bullets{ margin:.25rem 0 0 1.1rem; color:#333; }
.bullets li{ margin:.35rem 0; }


.feature-stack{ display:grid; gap:1rem; }
.feature{
    background:var(--card); border:1px solid #eef1f5; border-radius:12px; padding:1rem 1rem 1rem 1.1rem;
    box-shadow:var(--shadow-sm);
}
.feature h3{ margin:0 0 .4rem; font-size:1.05rem; }
.feature p{ margin:0; color:#555; }


.services-grid{
    margin-top:1.75rem;
    display:grid; gap:1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}
.card{
    background:var(--card); border:1px solid #eef1f5; border-radius:12px; padding:1rem;
    box-shadow:var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:#e3e8ef; }
.card .icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:12px;
    background:linear-gradient(135deg, #eef4ff, #f7fbff);
    color:var(--brand); font-size:24px; margin-bottom:.6rem; box-shadow: inset 0 0 0 1px #e5ecff;
}
.card h4{ margin:.15rem 0 .45rem; font-size:1.05rem; }
.card p{ margin:0; color:#555; }


.services-cta{ display:none !important; }


@media (max-width: 900px){
    .intro{ grid-template-columns:1fr; }
}

.services-hero{
    position: relative;
    /* Fallback JPEG; swap to your actual path/file names */
    background: url("/CSS/logistics.jpg?v=1") center/cover no-repeat;
    min-height: 420px;               /* height of the hero */
    border-bottom: none;             /* remove the old divider */
    color: #fff;                     /* make text white on photo */
    isolation: isolate;              /* ensure overlay blends only here */
}

/* Soft dark overlay for readability */
.services-hero::before{
    content: "";
    position: absolute; inset: 0;
    background:
            linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.15));
    z-index: -1;
}

.services-hero .container{
    padding: 3.5rem 1rem 4.25rem;    /* space inside the hero */
}

.services-hero h1{
    margin: 0 0 .5rem;
    font-size: 2.3rem;
    color: #fff;
}

.services-hero .lead{
    margin: 0 0 1.25rem;
    color: rgba(255,255,255,.92);
    max-width: 56ch;                 /* keep paragraph measure nice */
}

/* Make the button pop on photos */
.btn.btn-primary{
    display:inline-block;
    background: rgba(13,110,253,.95);
    color:#fff;
    padding:.65rem 1rem;
    border-radius:8px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn.btn-primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.24);
    background:#0b5ed7;
}

/* Responsive tweaks */
@media (max-width: 900px){
    .services-hero{ min-height: 340px; }
    .services-hero .container{ padding: 2.2rem 1rem 2.8rem; }
    .services-hero h1{ font-size: 1.9rem; }
    .services-hero .lead{ font-size: 1rem; }
}

.btn.btn-primary{
    display:inline-block;
    background: rgba(13,110,253,.95);
    color:#fff;
    padding:.65rem 1rem;
    border-radius:8px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn.btn-primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.24);
    background:#0b5ed7;
}

/* Responsive tweaks */
@media (max-width: 900px){
    .services-hero{ min-height: 340px; }
    .services-hero .container{ padding: 2.2rem 1rem 2.8rem; }
    .services-hero h1{ font-size: 1.9rem; }
    .services-hero .lead{ font-size: 1rem; }
}