/* RESET */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, sans-serif;
    background: #ffffff;
    color: #0b1220;
    line-height: 1.6;
}

/* HERO */
.hero {
    background: #0d47a1;
    color: #ffffff;
    padding: 55px 20px;
    text-align: center;
}
.hero h1 {
    margin: 0 0 12px 0;
    font-size: 38px;
    font-weight: 800;
}
.hero p {
    margin: 0 auto;
    max-width: 700px;
    font-size: 18px;
    line-height: 1.5;
}

/* BREADCRUMB */
.breadcrumb {
    padding: 15px 20px;
    font-size: 15px;
}
.breadcrumb a {
    color: #0d47a1;
    text-decoration: none;
}
.breadcrumb strong { color: #000; }

/* PAGE WRAP */
.page-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px;
}

/* STATE SEARCH BAR */
.search-wrap {
    max-width: 700px;
    margin: 25px auto 10px auto;
    padding: 0 20px;
    text-align: center;
}
.search-box {
    width: 100%;
    padding: 14px 16px;
    font-size: 18px;
    border: 2px solid #0d47a1;
    border-radius: 6px;
    outline: none;
}
.search-box:focus {
    border-color: #08306d;
}

/* INDEX SEARCH BAR */
.search-section {
    max-width: 700px;
    margin: 30px auto;
    padding: 0 20px;
    text-align: center;
}
.search-section input {
    width: 100%;
    padding: 14px 16px;
    font-size: 18px;
    border: 2px solid #0d47a1;
    border-radius: 6px;
}

/* HIDDEN */
.hidden-section { display: none !important; }

/* STAT BOXES */
.stat-boxes {
    margin: 30px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.stat-box {
    padding: 18px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
}
.stat-box strong {
    font-size: 18px;
    display: block;
    margin-bottom: 6px;
}
@media (max-width: 900px) {
    .stat-boxes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .stat-boxes { grid-template-columns: repeat(1, 1fr); }
}

/* CONTACT BLOCKS */
.contact-block {
    border: 1px solid #d9d9d9;
    padding: 18px;
    border-radius: 6px;
    margin-bottom: 18px;
    background: #fff;
}

/* BROKER CARD SECTION */
.broker-card-section {
    margin: 50px auto;
    max-width: 1200px;
    padding: 0 20px;
}
.broker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 900px) { .broker-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .broker-grid { grid-template-columns: repeat(1, 1fr); } }

.broker-card {
    border: 1px solid #d9d9d9;
    padding: 18px;
    border-radius: 6px;
    background: #fff;
    text-decoration: none;
    color: #000;
    transition: 0.15s ease-in-out;
}
.broker-card:hover {
    background: #e8f0ff;
    border-color: #bcd3ff;
}
.broker-card strong {
    font-size: 18px;
    display: block;
    margin-bottom: 6px;
}

/* STATE GRID */
.states {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
@media (max-width: 900px) { .states { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .states { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .states { grid-template-columns: repeat(1, 1fr); } }

.state-box {
    border: 1px solid #d9d9d9;
    padding: 16px;
    background: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #000;
    transition: 0.15s;
}
.state-box:hover {
    background: #e8f0ff;
    border-color: #bcd3ff;
}

.truck-icon {
    width: 22px;
    height: 22px;
}

/* ============================================
   BROKER PAGE — TRUE 2-COLUMN LAYOUT
   ============================================ */

.two-col {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin-top: 20px;
}

/* left side (broker details) */
.left-col {
    flex: 1 1 70%;
}

/* right side (banner) */
.right-col {
    flex: 0 0 320px;       /* fixed-ish sidebar width */
    display: flex;
    justify-content: flex-end;
}

/* OLD text banner box (kept in case you reuse it) */
.banner-box {
    border: 1px solid #d9d9d9;
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    font-size: 16px;
    text-align: center;
}
.banner-box h3 {
    font-size: 20px;
    margin: 0 0 10px 0;
    font-weight: 700;
}
.banner-box p {
    margin: 0;
    line-height: 1.5;
}

/* NEW: IMAGE BANNER – controls size so it is not huge */
.banner-image {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* responsive: stack columns on smaller screens */
@media (max-width: 900px) {
    .two-col {
        flex-direction: row;
    }
}

}
/* ==== PERMANENT FIX: TRUE TWO-COLUMN LAYOUT ==== */

.two-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
}

.left-col {
    flex: 1 1 auto !important;
    max-width: 65% !important;
}

.right-col {
    flex: 0 0 300px !important;
    max-width: 300px !important;
    text-align: left !important;
}
.right-col img {
    width: 300px !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}