:root {
    --geolink-blue: #1DA1FF;
    --geolink-blue-dark: #0B63D1;
    --geolink-navy: #0F172A;
    --geolink-light: #E2E8F0;
}

/* Primary Arolax neon accent -> Geolink blue */
.wc-btn-primary,
.wc-btn-circle,
.header-area .wc-btn-primary,
.header-area .wc-btn-circle,
.hero-area .wc-btn-primary,
.hero-area .wc-btn-circle,
.blog-area .wc-btn-primary,
.blog-area .wc-btn-circle,
.work-area .wc-btn-primary,
.work-area .wc-btn-circle,
.services-area .wc-btn-primary,
.services-area .wc-btn-circle {
    background: var(--geolink-blue) !important;
    border-color: var(--geolink-blue) !important;
    color: #fff !important;
}

.wc-btn-primary:hover,
.wc-btn-circle:hover {
    background: var(--geolink-blue-dark) !important;
    border-color: var(--geolink-blue-dark) !important;
    color: #fff !important;
}

/* Arolax lime decorative areas */
.image-area,
.image-area-inner,
.image-wrapper-box {
    background-color: transparent !important;
}

.image-area::before,
.image-area::after,
.image-area-inner::before,
.image-area-inner::after {
    background: transparent !important;
}

/* Some template blocks use lime as direct background/custom variables. */
.bg-theme,
.bg-lime,
.bg-primary,
[class*="bg-lime"],
[class*="bg-theme"] {
    background-color: var(--geolink-blue) !important;
}

/* Keep larger decorative surfaces subtle so the page doesn't become too blue. */
.image-area {
    background: #f5f8fb !important;
}

/* Links / accents */
a:hover,
.main-menu li a:hover,
.footer-nav-list a:hover {
    color: var(--geolink-blue-dark);
}

/* Selected small lines / icon accents */
.section-subtitle::before,
.section-subtitle::after,
.activity-dot {
    border-color: var(--geolink-blue) !important;
}

/* Header CTA */
.header-area .wc-btn-primary {
    background: var(--geolink-blue) !important;
}

.header-area .wc-btn-circle {
    background: var(--geolink-blue) !important;
}

/* Language selector remains neutral */
.geolink-lang,
.mobile-lang {
    color: var(--geolink-navy) !important;
}

/* Mobile hero CTA */
@media (max-width: 1199px) {
    .hero-area .hero-mobile-cta .wc-btn-primary,
    .hero-area .hero-mobile-cta .wc-btn-circle {
        background: var(--geolink-blue) !important;
        color: #fff !important;
    }
}


/* =========================================================
   GEOLINK BLUE MEDIA + FEATURE BAND
   Restores the strong visual block from the Arolax composition,
   but in Geolink brand blue instead of neon lime.
   ========================================================= */

.image-area {
    background: var(--geolink-blue) !important;
    padding-bottom: 0 !important;
}

.image-area .container {
    position: relative;
    z-index: 2;
}

.image-area-inner,
.image-wrapper-box {
    background: transparent !important;
}

.geolink-feature-band {
    background: var(--geolink-blue) !important;
    color: #fff;
    padding: 72px 0 78px;
}

.geolink-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px;
}

.geolink-feature-item {
    min-width: 0;
}

.geolink-feature-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 64px;
    margin-bottom: 26px;
    font-size: 38px;
    color: #fff;
}

.geolink-feature-item h3 {
    margin: 0 0 14px;
    max-width: 360px;
    color: #fff;
    font-size: clamp(25px, 2vw, 36px);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.geolink-feature-item p {
    margin: 0;
    max-width: 390px;
    color: rgba(255,255,255,.86);
    font-size: 16px;
    line-height: 1.6;
}

/* Keep the image visually inset, like the original Arolax block. */
.image-area .image-wrapper-box {
    margin-left: 0;
    margin-right: 0;
}

/* Service section starts clearly after the blue band. */
.services-area {
    background: #fff;
}

@media (max-width: 991px) {
    .geolink-feature-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .geolink-feature-band {
        padding: 54px 0 60px;
    }

    .geolink-feature-icon {
        margin-bottom: 18px;
    }

    .geolink-feature-item h3,
    .geolink-feature-item p {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .image-area {
        padding-top: 0 !important;
    }

    .geolink-feature-band {
        padding: 44px 0 50px;
    }

    .geolink-feature-grid {
        gap: 36px;
    }

    .geolink-feature-icon {
        height: 48px;
        font-size: 30px;
    }

    .geolink-feature-item h3 {
        font-size: 28px;
    }

    .geolink-feature-item p {
        font-size: 15px;
    }
}