.export-hub-section{background:#f7f8f5;}
.agents-heading{max-width:760px;margin:0 auto 32px;}
.agents-kicker{display:inline-block;margin-bottom:10px;color:#0b7a36;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
.agents-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;}
.map-container{position:relative;overflow:hidden;background:#fff;border:1px solid rgba(16,52,37,.09);border-radius:22px;padding:18px;}
.agents-world-map{display:block;width:100%;height:auto;}
.agents-world-map path{fill:#e7ebe8;stroke:#fff;stroke-width:.8;transition:fill .2s ease,filter .2s ease,opacity .2s ease;}
.agents-world-map path.agent-market{fill:#a8c9b5;cursor:pointer;outline:none;}
.agents-world-map path.agent-market:hover,
.agents-world-map path.agent-market:focus{fill:#eab308;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));}
.agents-world-map path.agent-market.is-active{fill:#0b7a36;}
.agent-card{position:sticky;top:110px;min-height:290px;background:#103425;color:#fff;border-radius:22px;box-shadow:0 18px 50px rgba(16,52,37,.18);padding:26px;}
.agent-card-empty{min-height:238px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:rgba(255,255,255,.75);}
.agent-card-icon{font-size:2.4rem;color:#eab308;}
.agent-card h3{margin:8px 0 6px;color:#fff;font-size:1.45rem;}
.agent-card p{margin:0;}
.agent-card-topline{display:flex;justify-content:space-between;align-items:center;}
.agent-country-code{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 10px;border-radius:999px;background:#eab308;color:#103425;font-weight:900;font-size:.78rem;}
.agent-close{border:0;background:transparent;color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;}
.agent-company{color:#eab308;font-weight:700;margin-bottom:20px!important;}
.agent-details{display:grid;gap:15px;margin:22px 0 0;}
.agent-details div{border-top:1px solid rgba(255,255,255,.12);padding-top:12px;}
.agent-details dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.55);margin-bottom:4px;}
.agent-details dd{margin:0;line-height:1.55;overflow-wrap:anywhere;}
.agent-details a{color:#fff;text-decoration:none;}
.agent-details a:hover{color:#eab308;}
@media(max-width:991px){.agents-layout{grid-template-columns:1fr;}.agent-card{position:relative;top:auto;min-height:auto;}}
@media(max-width:575px){.map-container{padding:8px;border-radius:16px;}.agent-card{padding:20px;border-radius:16px;}}






/* ==========================================================================
   1. CONTACT PAGE - GRID LAYOUT SYSTEM
   ========================================================================== */
.contact-grid { 
    display: grid; 
    grid-template-columns: 1fr 1.5fr; 
    gap: 40px; 
    align-items: start; 
}

/* Tablet & Mobile Responsiveness Breakpoint */
@media (max-width: 992px) { 
    .contact-grid { 
        grid-template-columns: 1fr; 
        gap: 30px; 
    } 
}

/* ==========================================================================
   2. CONTACT INFO & FORM CARD BLOCKS
   ========================================================================== */
.contact-info-block, 
.contact-form-block {
    background: #fff; 
    padding: 30px; 
    border-radius: 10px; 
    box-shadow: var(--box-shadow-medium); 
    height: 100%; 
    display: flex; 
    flex-direction: column;
}

/* Section Headings with Primary Color Underlines */
.contact-info-block h3, 
.contact-form-block h3 {
    color: var(--secondary-color); 
    font-size: 2em; 
    margin-bottom: 25px; 
    position: relative;
}

.contact-info-block h3::after, 
.contact-form-block h3::after {
    content: ''; 
    position: absolute; 
    left: 0; 
    bottom: -8px; 
    width: 60px; 
    height: 3px; 
    background: var(--primary-color); 
    border-radius: 2px;
}

.contact-subheading { 
    font-family: var(--font-alt); 
    color: var(--primary-color); 
    font-size: 1.2em; 
    margin-top: 25px; 
    margin-bottom: 10px; 
    font-weight: 600; 
}

.contact-details-group { 
    margin-bottom: 20px; 
}

/* ==========================================================================
   3. CONTACT DETAILS & SOCIAL INTERACTIONS
   ========================================================================== */
.contact-info-block .info-item { 
    display: flex; 
    align-items: flex-start; 
    margin-bottom: 10px; 
    line-height: 1.5; 
}

.contact-info-block .info-item i { 
    font-size: 1.2em; 
    color: var(--primary-color); 
    margin-inline-end: 15px; /* RTL & LTR Safe Spacing */
    margin-top: 3px; 
    flex-shrink: 0; 
}

.contact-info-block .info-item p { 
    margin-bottom: 0; 
    color: var(--text-color); 
    font-size: .95em; 
}

.contact-info-block .info-item p small { 
    display: block; 
    font-size: .8em; 
    color: var(--light-text-color); 
}

/* Social Icon Link Wrappers */
.contact-info-block .social-links { 
    margin-top: 20px; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
}

.contact-info-block .social-links a {
    display: inline-flex; 
    justify-content: center; 
    align-items: center; 
    color: var(--secondary-color); 
    background: var(--light-bg-color);
    width: 45px; 
    height: 45px; 
    text-align: center; 
    border-radius: 50%; 
    font-size: 1.3em; 
    box-shadow: var(--box-shadow-light);
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   4. CONTACT FORM ELEMENTS & CONTROLS
   ========================================================================== */
.contact-form { 
    margin-top: 20px; 
}

.contact-form .form-group { 
    margin-bottom: 20px; 
}

.contact-form label { 
    display: block; 
    margin-bottom: 8px; 
    font-weight: 600; 
    color: var(--text-color); 
    font-size: .95em; 
}

.contact-form .form-control {
    width: 100%; 
    padding: 12px; 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    font-family: var(--font-body); 
    font-size: 1em; 
    box-sizing: border-box; 
    background: #fff; 
    color: var(--text-color);
    transition: border-color .2s, box-shadow .2s;
}

.contact-form .form-control:focus { 
    border-color: var(--primary-color); 
    box-shadow: 0 0 0 3px rgba(107, 142, 35, .2); 
    outline: none; 
}

.contact-form textarea.form-control { 
    min-height: 120px; 
    resize: vertical; 
}

.contact-form .btn-primary.btn-lg { 
    width: auto; 
    padding: 12px 30px; 
    font-size: 1.1em; 
    margin-top: 15px; 
}

/* ==========================================================================
   5. ALTERNATIVE HERO SECTION HEADER
   ========================================================================== */
.page-hero-alt {
    background-color: #55728a; 
    background-image: none; 
    background-attachment: scroll; 
    color: #fff; 
    padding: 120px 0 80px; 
    min-height: 280px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    position: relative; 
    overflow: hidden;
}

.page-hero-alt .hero-content h1 { 
    font-size: 3.5em; 
    margin-bottom: 5px; 
    color: #fff; 
    text-shadow: 1px 1px 3px rgba(0,0,0,.4); 
}

.page-hero-alt .hero-content p { 
    font-size: 1.2em; 
    margin-bottom: 5px; 
    color: rgba(255, 255, 255, 0.9); 
    text-shadow: 1px 1px 2px rgba(0,0,0,.3); 
}

.page-hero-alt .hero-content .lead-text { 
    font-size: 1em; 
    max-width: 600px; 
    margin: 0 auto; 
}

/* ==========================================================================
   6. HIGH-END MINIMALIST INTERACTIVE MAP
   ========================================================================== */
/* Standard Basemap Vector Paths */
svg path {
    fill: #f5f5f5 !important;
    stroke: #ffffff !important;
    stroke-width: 0.6;
    transition: all 0.3s ease-in-out;
}

/* Active Distribution Export Markets (Light Green Glow) */
.export-market, .Canada, .Australia, .Angola, .United Kingdom,
#KW, #IQ, #PT, #GB, #AU, #CA {
    fill: #86efac !important;
    filter: drop-shadow(0 0 4px rgba(134, 239, 172, 0.4));
    cursor: pointer;
}

/* Hover Interaction Strategy - Shifting to Deep Brand Green */
.export-market:hover, .Canada:hover, .Australia:hover, .Angola:hover, 
.United Kingdom:hover, #KW:hover, #IQ:hover, #PT:hover, #GB:hover, #AU:hover, #CA:hover {
    fill: #05a503 !important;
    filter: drop-shadow(0 0 10px rgba(5, 165, 3, 0.4));
}

/* Main Beirut HQ Core Base Hub */
.hub-country, #LB {
    fill: #05a503 !important;
}

/* ==========================================================================
   7. MAP ANIMATION ARCH ENGNEERS
   ========================================================================== */
/* SVG Logistic Path Curvature Flow Connections */
.arch-line {
    fill: none !important;
    stroke: #05a503 !important; /* Brand Corporate Green */
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 6;
    animation: archFlow 4s infinite linear;
}

/* Infinite Dash-Array SVG Progress Motion */
@keyframes archFlow {
    from { stroke-dashoffset: 48; }
    to   { stroke-dashoffset: 0; }
}