/* =====================================================
   OTERO GOVERNMENT SUPPLY LLC
   CAPABILITIES PAGE
   ===================================================== */

:root{
    --navy:#0B2343;
    --gold:#C9A227;
    --light:#F7F9FC;
    --dark:#172937;
    --gray:#6B7280;
    --shadow:0 15px 40px rgba(0,0,0,.08);
}

/* ---------- HERO ---------- */

.cap-hero{
    background:var(--navy);
    color:#fff;
    padding:150px 0 90px;
}

.cap-container{
    width:min(1200px,92%);
    margin:auto;
}

.cap-hero-grid{
    display:grid;
    grid-template-columns:280px 2px 1fr;
    gap:50px;
    align-items:center;
}

.cap-brand{
    text-align:center;
}

.cap-brand img{
    width:220px;
    margin-bottom:20px;
}

.cap-company{
    font-size:52px;
    font-weight:800;
    letter-spacing:3px;
    color:#fff;
    margin:0;
}

.cap-company-sub{
    color:var(--gold);
    font-size:18px;
    font-weight:700;
    letter-spacing:3px;
    margin-top:8px;
}

.cap-divider{
    width:2px;
    height:320px;
    background:var(--gold);
    justify-self:center;
}

.cap-main h5{
    color:var(--gold);
    letter-spacing:3px;
    margin-bottom:15px;
    font-size:15px;
}

.cap-main h1{
    font-size:56px;
    line-height:1.1;
    margin-bottom:25px;
}

.cap-main p{
    font-size:20px;
    line-height:1.8;
    color:#E7ECF5;
    max-width:700px;
}

/* ---------- BUTTONS ---------- */

.cap-buttons{
    display:flex;
    gap:20px;
    margin-top:40px;
    flex-wrap:wrap;
}

.cap-buttons .btn-primary,
.cap-buttons .btn-secondary{
    text-decoration:none;
}

/* ---------- CONTENT ---------- */

.cap-section{
    padding:90px 0 140px;
}

.cap-section h2{
    font-size:42px;
    margin-bottom:20px;
    color:var(--navy);
}

.cap-section p{
    font-size:18px;
    color:var(--gray);
    line-height:1.8;
}

/* ---------- CARDS ---------- */

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

.cap-card{
    background:#fff;
    border-radius:18px;
    padding:35px;
    box-shadow:var(--shadow);
    transition:.3s;
}

.cap-card:hover{
    transform:translateY(-8px);
}

.cap-card h3{
    color:var(--navy);
    margin-bottom:20px;
}

.cap-card ul{
    padding-left:20px;
    line-height:2;
}

.cap-card li{
    color:var(--gray);
}

/* ---------- CTA ---------- */

.cap-cta{
    background:var(--navy);
    color:#fff;
    text-align:center;
    padding:80px 0;
margin-top:40px;
}

.cap-cta h2{
    color:#fff;
    margin-bottom:20px;
}

.cap-cta p{
    color:#E6ECF7;
    margin-bottom:35px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width:900px){

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

.cap-divider{
    display:none;
}

.cap-brand{
    margin-bottom:30px;
}

.cap-main h1{
    font-size:40px;
}

.cap-buttons{
    justify-content:center;
}

.cap-company{
    font-size:40px;
}

}

/* ===== Hero Improvements ===== */
.hero-content{
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.hero-cap h1{
    max-width:900px;
    font-size:64px;
    line-height:1.1;
}

.hero-cap .lead{
    max-width:700px;
    margin:25px auto 40px;
    line-height:1.8;
}

.hero-buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 35px;
}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary{
    min-width: 230px;
}

.hero-cap{
    background: var(--navy);
    color:#fff;
    padding:120px 0 120px;
}