/* =====================================================
   FEUVOLTS GLOBAL REACH PAGE
   Page-specific CSS only. Master style.css remains unchanged.
===================================================== */

.global-page {
    background: #f7f4ef;
    color: #111;
}

.global-main {
    overflow: hidden;
}

.global-hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 76% 42%, rgba(244,81,32,.18), transparent 28%),
        radial-gradient(circle at 55% 80%, rgba(255,100,47,.08), transparent 35%),
        #070b10;
    color: #fff;
    isolation: isolate;
}

.global-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 55px 55px;
    mask-image: linear-gradient(to right, #000 0%, transparent 85%);
    z-index: -1;
}

.global-container {
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
}

.global-breadcrumb {
    position: absolute;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1180px, calc(100% - 64px));
    font-size: 13px;
    color: rgba(255,255,255,.62);
}

.global-breadcrumb span { margin: 0 9px; color: rgba(255,255,255,.28); }
.global-breadcrumb strong { color: #fff; }

.global-hero-grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    align-items: center;
    gap: 56px;
    padding: 118px 0 82px;
}

.global-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(244,81,32,.65);
    border-radius: 999px;
    padding: 8px 15px;
    color: #ff642f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.global-hero-copy h1 {
    margin: 24px 0 22px;
    max-width: 650px;
    font-size: clamp(46px, 6vw, 78px);
    line-height: .98;
    letter-spacing: -3px;
}

.global-hero-copy h1 span { color: #ff642f; }

.global-hero-copy p {
    max-width: 600px;
    margin: 0 0 32px;
    color: rgba(255,255,255,.76);
    font-size: 17px;
    line-height: 1.75;
}

.global-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: 40px;
    background: #f45120;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(244,81,32,.2);
}

.global-btn:hover { background: #ff642f; transform: translateY(-2px); }

.global-hero-tags {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    margin-top: 34px;
    color: rgba(255,255,255,.68);
    font-size: 13px;
}

.global-hero-tags span::first-letter { color: #ff642f; }

/* CSS globe */
.global-globe-wrap {
    position: relative;
    min-height: 430px;
    display: grid;
    place-items: center;
}

.global-globe {
    position: relative;
    width: min(470px, 72vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 36% 30%, rgba(255,255,255,.28), transparent 6%),
        radial-gradient(circle at 40% 38%, #253b4b 0%, #122331 36%, #071018 68%, #020508 100%);
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 70px rgba(244,81,32,.17), inset -35px -25px 80px rgba(0,0,0,.65);
    overflow: hidden;
}

.global-globe::before, .global-globe::after {
    content: "";
    position: absolute;
    inset: 8%;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 50%;
}
.global-globe::after { inset: 22%; border-left-color: rgba(244,81,32,.45); border-right-color: rgba(244,81,32,.3); }

.global-grid-line {
    position: absolute;
    background: rgba(255,255,255,.07);
}
.global-grid-line.h1,.global-grid-line.h2 { width: 100%; height: 1px; left: 0; }
.global-grid-line.h1 { top: 34%; } .global-grid-line.h2 { top: 66%; }
.global-grid-line.v1,.global-grid-line.v2 { height: 100%; width: 1px; top: 0; }
.global-grid-line.v1 { left: 34%; } .global-grid-line.v2 { left: 66%; }

.global-node {
    position: absolute;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #ff642f;
    box-shadow: 0 0 0 7px rgba(255,100,47,.12), 0 0 22px rgba(255,100,47,.9);
}

.n1 { left: 30%; top: 38%; } .n2 { left: 48%; top: 29%; }
.n3 { left: 61%; top: 45%; } .n4 { left: 52%; top: 63%; }
.n5 { left: 72%; top: 57%; } .n6 { left: 37%; top: 67%; }

.global-orbit {
    position: absolute;
    width: 580px; height: 210px;
    border: 1px solid rgba(244,81,32,.48);
    border-radius: 50%;
    transform: rotate(-24deg);
}
.global-orbit.o2 { transform: rotate(32deg); width: 520px; }
.global-orbit.o3 { transform: rotate(76deg); width: 430px; opacity: .65; }

.global-stats {
    background: #fff7f2;
    border-bottom: 1px solid #eadfd8;
}

.global-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.global-stat {
    padding: 34px 28px;
    border-right: 1px solid #e8ddd6;
}
.global-stat:last-child { border-right: 0; }
.global-stat strong { display: block; color: #111; font-size: 38px; line-height: 1; }
.global-stat span { display: block; margin-top: 7px; color: #f45120; font-size: 12px; font-weight: 900; letter-spacing: 1.2px; }
.global-stat p { margin: 8px 0 0; color: #777; font-size: 13px; }

.global-section { padding: 105px 0; }
.global-section.alt { background: #fff; }
.global-section-head { margin-bottom: 48px; }
.global-section-head .kicker { color: #f45120; font-size: 12px; font-weight: 900; letter-spacing: 1.7px; }
.global-section-head h2 { margin: 12px 0 18px; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: -2px; }
.global-section-head h2 span { color: #f45120; }
.global-section-head p { max-width: 680px; color: #666; line-height: 1.7; margin: 0; }

.footprint-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
}

.footprint-copy {
    max-width: 900px;
}

.footprint-copy h3 { font-size: 22px; margin: 0 0 16px; }
.footprint-copy p { color: #666; line-height: 1.75; }
.footprint-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.footprint-list li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 14px; }
.footprint-dot { width: 10px; height: 10px; border-radius: 50%; background: #f45120; box-shadow: 0 0 0 6px rgba(244,81,32,.1); }

.world-map {
    position: relative;
    min-height: 390px;
    border-radius: 20px;
    background: linear-gradient(145deg, #eef1f2, #fafafa);
    border: 1px solid #e1e4e5;
    overflow: hidden;
}
.world-map::before {
    content: "";
    position: absolute; inset: 12% 5%;
    opacity: .65;
    background: radial-gradient(ellipse at 25% 43%, #d7dcde 0 17%, transparent 17.5%),
                radial-gradient(ellipse at 46% 35%, #d7dcde 0 19%, transparent 19.5%),
                radial-gradient(ellipse at 67% 47%, #d7dcde 0 17%, transparent 17.5%),
                radial-gradient(ellipse at 80% 67%, #d7dcde 0 7%, transparent 7.5%);
    filter: blur(.3px);
}
.map-line { position:absolute; height:1px; background:#dfe3e5; left:7%; right:7%; }
.ml1 { top:30%; } .ml2 { top:50%; } .ml3 { top:70%; }
.map-dot { position:absolute; width:8px; height:8px; border-radius:50%; background:#f45120; box-shadow:0 0 0 6px rgba(244,81,32,.12); }
.md1 { left:47%; top:35%; } .md2 { left:57%; top:45%; } .md3 { left:68%; top:50%; } .md4 { left:36%; top:55%; } .md5 { left:75%; top:63%; }
.india-marker { position:absolute; left:60%; top:48%; transform:translate(-50%,-100%); color:#f45120; text-align:center; font-size:12px; font-weight:900; }
.india-marker i { display:block; width:15px; height:15px; margin:0 auto 5px; border-radius:50% 50% 50% 0; background:#f45120; transform:rotate(-45deg); }
.india-marker span { display:block; transform:none; color:#111; white-space:nowrap; }

.region-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.region-card { background:#fff; border:1px solid #e9e1dc; border-radius:16px; padding:30px 24px; min-height:235px; transition:.25s ease; box-shadow:0 8px 24px rgba(20,20,20,.04); }
.region-card:hover { transform:translateY(-5px); border-color:#f45120; box-shadow:0 16px 34px rgba(244,81,32,.1); }
.region-number { color:#f45120; font-size:12px; font-weight:900; letter-spacing:1.5px; }
.region-card h3 { margin:18px 0 8px; font-size:23px; }
.region-card p { margin:0; min-height:68px; color:#777; line-height:1.65; font-size:14px; }
.region-card a { display:inline-block; margin-top:24px; color:#f45120; font-size:13px; font-weight:800; text-decoration:none; }

.global-cta { padding:82px 0; background:#090d12; color:#fff; }
.global-cta-inner { display:flex; justify-content:space-between; align-items:center; gap:50px; }
.global-cta h2 { margin:8px 0 10px; font-size:clamp(34px,4vw,52px); line-height:1; }
.global-cta h2 span { color:#ff642f; }
.global-cta p { margin:0; max-width:650px; color:rgba(255,255,255,.7); line-height:1.7; }
.global-cta .kicker { color:#ff642f; font-size:12px; font-weight:900; letter-spacing:1.7px; }

@media (max-width: 900px) {
    .global-container, .global-breadcrumb { width: min(100% - 36px, 720px); }
    .global-hero-grid, .footprint-grid { grid-template-columns:1fr; }
    .global-hero { min-height:auto; }
    .global-globe-wrap { min-height:400px; }
    .global-stats-grid { grid-template-columns:repeat(2,1fr); }
    .global-stat:nth-child(2) { border-right:0; }
    .global-stat:nth-child(-n+2) { border-bottom:1px solid #e8ddd6; }
    .region-grid { grid-template-columns:repeat(2,1fr); }
    .global-cta-inner { flex-direction:column; align-items:flex-start; }
}

@media (max-width: 600px) {
    .global-hero-grid { padding:105px 0 55px; }
    .global-hero-copy h1 { letter-spacing:-1.5px; }
    .global-globe-wrap { min-height:310px; }
    .global-globe { width:290px; }
    .global-orbit { width:360px; height:140px; }
    .global-stats-grid, .region-grid { grid-template-columns:1fr; }
    .global-stat { border-right:0; border-bottom:1px solid #e8ddd6; }
    .global-stat:last-child { border-bottom:0; }
    .global-section { padding:68px 0; }
    .world-map { min-height:290px; }
}


/* =====================================================
   GLOBAL REACH HERO — NEW IMAGE
   ===================================================== */

.global-reach-hero-image {
    display: block;
    width: min(600px, 100%);
    max-height: 560px;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    filter: drop-shadow(0 18px 35px rgba(0,0,0,.28));
}

@media (max-width: 900px) {
    .global-reach-hero-image {
        width: min(500px, 100%);
        max-height: 480px;
    }
}

@media (max-width: 600px) {
    .global-reach-hero-image {
        width: min(360px, 100%);
        max-height: 360px;
    }
}

/* ================================
   WHATSAPP FLOATING BUTTON
================================ */

.whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 58px;
    height: 58px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.whatsapp-float svg {
    width: 32px;
    height: 32px;
    fill: #ffffff;
}

.whatsapp-float:hover {
    transform: scale(1.10);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

/* Mobile */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 52px;
        height: 52px;
        right: 18px;
        bottom: 18px;
    }

    .whatsapp-float svg {
        width: 29px;
        height: 29px;
    }
}

/* =========================================================
   FEUVOLTS — RESPONSIVE HAMBURGER + RIGHT SIDE DRAWER
   Added locally to this page. Existing page design untouched.
========================================================= */

.feuvolts-mobile-toggle {
    display: none;
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 42px;
    padding: 9px 10px;
    border: 1px solid rgba(244,81,32,.45);
    border-radius: 9px;
    background: rgba(0,0,0,.65);
    cursor: pointer;
    z-index: 10002;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.feuvolts-mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background: #fff;
    border-radius: 2px;
}

.feuvolts-mobile-toggle.is-open {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.feuvolts-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.58);
    z-index: 10000;
    opacity: 0;
    transition: opacity .28s ease;
}

.feuvolts-mobile-overlay.is-open {
    display: block;
    opacity: 1;
}

.feuvolts-mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(390px, 88vw);
    height: 100vh;
    height: 100dvh;
    background: #0b0b0b;
    border-left: 1px solid rgba(244,81,32,.28);
    box-shadow: -20px 0 60px rgba(0,0,0,.45);
    z-index: 10001;
    transform: translateX(105%);
    transition: transform .32s cubic-bezier(.22,.61,.36,1);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.feuvolts-mobile-drawer.is-open {
    transform: translateX(0);
}

.feuvolts-mobile-drawer-head {
    min-height: 82px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: #0b0b0b;
    position: sticky;
    top: 0;
    z-index: 2;
}

.feuvolts-mobile-drawer-head img {
    width: 150px;
    height: auto;
    display: block;
}

.feuvolts-mobile-close {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(244,81,32,.42);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.feuvolts-mobile-close:hover {
    background: #f45120;
    border-color: #f45120;
}

.feuvolts-mobile-nav {
    padding: 10px 18px 35px;
}

.feuvolts-mobile-nav > a,
.feuvolts-mobile-group > button {
    width: 100%;
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: transparent;
    color: #fff;
    text-decoration: none;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}

.feuvolts-mobile-nav > a:hover,
.feuvolts-mobile-group > button:hover {
    color: #f45120;
}

.feuvolts-mobile-group > button span {
    color: #f45120;
    font-size: 21px;
    font-weight: 400;
}

.feuvolts-mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    background: #111;
    border-radius: 0 0 10px 10px;
}

.feuvolts-mobile-submenu a {
    display: block;
    padding: 12px 12px 12px 22px;
    color: #aaa;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.35;
    border-bottom: 1px solid rgba(255,255,255,.045);
}

.feuvolts-mobile-submenu a:hover {
    color: #fff;
    background: rgba(244,81,32,.09);
}

.feuvolts-mobile-quote {
    margin-top: 18px;
    min-height: 50px !important;
    justify-content: center !important;
    gap: 12px;
    border: 0 !important;
    border-radius: 28px;
    background: #f45120 !important;
    color: #fff !important;
}

.feuvolts-mobile-quote:hover {
    background: #ff642f !important;
}

body.feuvolts-menu-open {
    overflow: hidden;
}

/* Switch before the desktop header starts getting crowded.
   This also prevents the hamburger from sitting on top of Get a Quote. */
@media (max-width: 1100px) {
    .site-header .main-nav {
        display: none !important;
    }

    .feuvolts-mobile-toggle {
        display: flex;
    }

    .site-header .header-inner {
        padding-right: 82px;
    }
}

@media (max-width: 650px) {
    .feuvolts-mobile-toggle {
        right: 15px;
        width: 43px;
        height: 40px;
    }

    .site-header .header-inner {
        padding-right: 70px;
    }

    .feuvolts-mobile-drawer {
        width: min(370px, 91vw);
    }

    .feuvolts-mobile-drawer-head img {
        width: 140px;
    }
}


/* =========================================================
   MOBILE DRAWER — WHITE VERSION
   Products show all 12 categories directly; other mobile groups retain dropdowns.
========================================================= */

.feuvolts-mobile-drawer {
    background: #ffffff;
    color: #111111;
}

.feuvolts-mobile-drawer-head {
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
}

.feuvolts-mobile-drawer-head img {
    /* Use the dark/orange logo on the white drawer. */
    content: url("assets/transparent_logo.png");
}

.feuvolts-mobile-close {
    color: #111111;
    border-color: #d8d8d8;
    background: #ffffff;
}

.feuvolts-mobile-nav > a,
.feuvolts-mobile-group > button {
    color: #111111;
    border-bottom-color: #e5e5e5;
}

.feuvolts-mobile-nav > a:hover,
.feuvolts-mobile-group > button:hover {
    color: #f45120;
}

.feuvolts-mobile-group > button span {
    color: #f45120;
}

.feuvolts-mobile-submenu {
    background: #ffffff;
}

.feuvolts-mobile-submenu a {
    color: #333333;
    border-bottom-color: #eeeeee;
}

.feuvolts-mobile-submenu a:hover {
    color: #f45120;
    background: #fff5f1;
}

/* Product category rows */
.feuvolts-product-menu {
    border-bottom: 1px solid #e7e7e7;
}

/* Product categories are direct links on mobile, not nested dropdowns. */
.feuvolts-product-menu > a {
    display: block;
    padding: 15px 22px;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    border-bottom: 1px solid #eeeeee;
}

.feuvolts-product-menu > a:hover {
    color: #f45120;
    background: #fff5f1;
}

.feuvolts-product-group > button {
    width: 100%;
    min-height: 54px;
    padding: 0 12px 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-bottom: 1px solid #eeeeee;
    background: #ffffff;
    color: #111111;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.feuvolts-product-group > button span {
    color: #f45120;
    font-size: 20px;
    font-weight: 400;
}

.feuvolts-product-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    background: #fafafa;
}

.feuvolts-product-submenu a {
    display: block;
    padding: 13px 20px 13px 42px;
    color: #333333;
    background: #fafafa;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    border-bottom: 1px solid #ededed;
}

.feuvolts-product-submenu a:hover {
    color: #f45120;
    background: #fff4ef;
}

.feuvolts-product-group.is-expanded > button {
    color: #f45120;
    background: #fffaf8;
}

.feuvolts-mobile-drawer .feuvolts-mobile-quote {
    color: #ffffff !important;
}



/* WhatsApp stays visible above the mobile menu and is positioned a little higher. */
.whatsapp-float {
    z-index: 10003;
    bottom: 80px;
}

@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 70px;
    }
}


/* =========================================================
   AFRICA MOBILE DRAWER — FINAL HOVER STANDARD
   Same hover treatment as the updated Asia drawer.
   Removes/overrides older hover backgrounds.
========================================================= */
@media (max-width: 1100px) {
    .feuvolts-mobile-nav > a:hover,
    .feuvolts-mobile-group > button:hover,
    .feuvolts-mobile-submenu a:hover,
    .feuvolts-product-group > button:hover,
    .feuvolts-product-submenu a:hover {
        color: #f45120 !important;
        background: #fff5f1 !important;
    }

    .feuvolts-mobile-nav > a,
    .feuvolts-mobile-group > button,
    .feuvolts-mobile-submenu a,
    .feuvolts-product-group > button,
    .feuvolts-product-submenu a {
        transition: background-color .2s ease, color .2s ease;
    }

    /* Expanded category keeps the same clean light-orange state. */
    .feuvolts-product-group.is-expanded > button {
        color: #f45120 !important;
        background: #fff5f1 !important;
    }

    /* Quote button keeps its solid orange and does not inherit hover styling. */
    .feuvolts-mobile-nav > .feuvolts-mobile-quote,
    .feuvolts-mobile-nav > .feuvolts-mobile-quote:hover,
    .feuvolts-mobile-nav > .feuvolts-mobile-quote:focus,
    .feuvolts-mobile-nav > .feuvolts-mobile-quote:active {
        color: #fff !important;
        background: #f45120 !important;
    }
}