/* =================================================================================================
   GEOGUARDIAN GHARBIA
   COMPLETE WEBSITE STYLE
   VERSION 04.1
   PREMIUM UI + REAL WEBGIS + CLEAN MAP BACKGROUND
================================================================================================= */


/* =================================================================================================
   ROOT
================================================================================================= */

:root {

    --bg: #06131f;
    --bg2: #0b1e2c;
    --bg3: #102a3b;

    --surface: #102331;
    --surface2: #152d3d;

    --green: #2d7a60;
    --green-light: #91b868;

    --gold: #ddb43b;
    --orange: #ef823b;
    --red: #d94d42;

    --blue: #3f83aa;

    --white: #ffffff;

    --text: #17262e;
    --muted: #6e7d85;

    --line: #dfe5e7;

}


/* =================================================================================================
   GLOBAL
================================================================================================= */

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    overflow-x: hidden;

    background: #f5f6f3;

    color: var(--text);

    font-family:
        "Inter",
        Arial,
        sans-serif;

}


a {

    text-decoration: none;

}


button,
input,
select {

    font: inherit;

}


/* =================================================================================================
   PAGE PROGRESS
================================================================================================= */

#pageProgress {

    position: fixed;

    top: 0;
    left: 0;

    width: 0%;
    height: 3px;

    z-index: 99999;

    background:
        linear-gradient(
            90deg,
            var(--green-light),
            var(--gold)
        );

}


/* =================================================================================================
   NAVBAR
================================================================================================= */

.navbar {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: 76px;

    z-index: 9999;

    padding:
        0
        4.5vw;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        rgba(
            4,
            15,
            25,
            0.82
        );

    backdrop-filter: blur(18px);

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );

    transition:
        height .25s ease,
        background .25s ease;

}


.navbar.scrolled {

    height: 64px;

    background:
        rgba(
            4,
            15,
            25,
            0.96
        );

}


.nav-brand {

    display: flex;

    align-items: center;

    gap: 12px;

}


.brand-icon,
.footer-logo {

    width: 40px;
    height: 40px;

    border-radius: 11px;

    display: grid;

    place-items: center;

    background:
        linear-gradient(
            135deg,
            #276b56,
            #d8b33d
        );

    color: white;

    font-weight: 800;

    box-shadow:
        0
        8px
        25px
        rgba(
            45,
            122,
            96,
            0.25
        );

}


.brand-text {

    display: flex;

    flex-direction: column;

}


.brand-main {

    color: white;

    font-size: 15px;

    font-weight: 700;

}


.brand-sub {

    margin-top: 3px;

    color: #7e97a6;

    font-size: 10px;

}


.nav-links {

    display: flex;

    align-items: center;

    gap: 30px;

}


.nav-links a {

    position: relative;

    padding: 10px 0;

    color: #a7b7c1;

    font-size: 12px;

    font-weight: 500;

}


.nav-links a:after {

    content: "";

    position: absolute;

    left: 0;
    right: 100%;

    bottom: 2px;

    height: 2px;

    background: var(--green-light);

    transition: right .25s ease;

}


.nav-links a:hover {

    color: white;

}


.nav-links a:hover:after {

    right: 0;

}


.nav-button {

    display: flex;

    gap: 10px;

    align-items: center;

    padding:
        11px
        17px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #2d7a60,
            #306a5a
        );

    color: white;

    font-size: 12px;

    font-weight: 600;

    box-shadow:
        0
        8px
        25px
        rgba(
            45,
            122,
            96,
            0.22
        );

}


/* =================================================================================================
   HERO
================================================================================================= */

.hero {

    position: relative;

    min-height: 100vh;

    padding:
        130px
        6vw
        70px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 42%,
            rgba(
                33,
                108,
                92,
                0.22
            ),
            transparent 34%
        ),

        linear-gradient(
            135deg,
            #04101b,
            #092233 56%,
            #0c3038
        );

}


.hero-grid-lines {

    position: absolute;

    inset: 0;

    opacity: .08;

    background-image:

        linear-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size:
        80px
        80px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 45%,
            black
        );

}


.hero-orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(1px);

}


.orb-1 {

    width: 640px;
    height: 640px;

    right: -180px;
    top: 80px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .06
        );

    box-shadow:

        0 0 0 80px rgba(255,255,255,.012),

        0 0 0 160px rgba(255,255,255,.008);

}


.orb-2 {

    width: 380px;
    height: 380px;

    right: 12%;
    bottom: -220px;

    background:
        rgba(
            112,
            148,
            79,
            0.05
        );

}


.hero-shell {

    position: relative;

    z-index: 3;

    width:
        min(
            1450px,
            100%
        );

    margin: auto;

    display: grid;

    grid-template-columns:
        1.15fr
        .85fr;

    gap: 75px;

    align-items: center;

}


.hero-copy {

    min-width: 0;

}


.hero-kicker {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: #85c5aa;

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 600;

}


.pulse-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #7dcba6;

    box-shadow:
        0
        0
        0
        0
        rgba(
            125,
            203,
            166,
            .5
        );

    animation:
        pulse
        2s
        infinite;

}


@keyframes pulse {

    70% {

        box-shadow:
            0
            0
            0
            9px
            rgba(
                125,
                203,
                166,
                0
            );

    }

    100% {

        box-shadow:
            0
            0
            0
            0
            rgba(
                125,
                203,
                166,
                0
            );

    }

}


.hero h1 {

    margin: 0;

    line-height: .86;

    letter-spacing: -6px;

}


.hero-main {

    display: block;

    color: white;

    font-size:
        clamp(
            64px,
            7.5vw,
            116px
        );

}


.hero-accent {

    display: block;

    color: var(--green-light);

    font-size:
        clamp(
            62px,
            7vw,
            108px
        );

}


.project-title-ar {

    max-width: 900px;

    margin-top: 40px;

    color: white;

    font-family:
        "Cairo",
        sans-serif;

    font-size:
        clamp(
            20px,
            1.8vw,
            28px
        );

    font-weight: 600;

    line-height: 1.8;

    text-align: right;

}


.project-title-en {

    max-width: 900px;

    margin-top: 11px;

    color: #aebfca;

    font-size: 15px;

    line-height: 1.75;

}


.student-block {

    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-top: 24px;

}


.student-block span {

    color: #6d8797;

    font-size: 10px;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.student-block strong {

    color: white;

    font-size: 14px;

}


.hero-actions {

    display: flex;

    gap: 12px;

    margin-top: 31px;

}


.btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        14px
        20px;

    border-radius: 9px;

    font-size: 13px;

    font-weight: 600;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.btn:hover {

    transform:
        translateY(-2px);

}


.btn-primary {

    color: white;

    background:
        linear-gradient(
            135deg,
            #2f8064,
            #286d58
        );

    box-shadow:
        0
        12px
        30px
        rgba(
            45,
            122,
            96,
            .25
        );

}


.btn-secondary {

    color: white;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .18
        );

    background:
        rgba(
            255,
            255,
            255,
            .03
        );

}


.hero-tech {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 29px;

}


.hero-tech span {

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius: 30px;

    color: #8097a5;

    background:
        rgba(
            255,
            255,
            255,
            .025
        );

    font-size: 10px;

}


/* =================================================================================================
   HERO VISUAL
================================================================================================= */

.hero-visual {

    position: relative;

}


.visual-card {

    position: relative;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    border-radius: 22px;

    overflow: hidden;

    background:
        rgba(
            6,
            22,
            33,
            .62
        );

    backdrop-filter:
        blur(18px);

    box-shadow:
        0
        40px
        90px
        rgba(
            0,
            0,
            0,
            .34
        );

}


.visual-toolbar {

    height: 48px;

    padding:
        0
        18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #78909f;

    font-size: 9px;

    letter-spacing: 1px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .06
        );

}


.toolbar-dot {

    display: inline-block;

    width: 7px;
    height: 7px;

    margin-right: 4px;

    border-radius: 50%;

}


.toolbar-dot.red {
    background: #b95f55;
}


.toolbar-dot.yellow {
    background: #c6a658;
}


.toolbar-dot.green {
    background: #5b9b76;
}


.mock-map {

    position: relative;

    height: 470px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(
                23,
                58,
                68,
                .5
            ),
            rgba(
                8,
                22,
                32,
                .8
            )
        ),

        repeating-linear-gradient(
            30deg,
            rgba(255,255,255,.015) 0,
            rgba(255,255,255,.015) 1px,
            transparent 1px,
            transparent 22px
        );

}


.map-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(12px);

    opacity: .5;

}


.map-glow-1 {

    width: 180px;
    height: 180px;

    top: 100px;
    left: 130px;

    background:
        rgba(
            109,
            157,
            88,
            .30
        );

}


.map-glow-2 {

    width: 130px;
    height: 130px;

    right: 70px;
    bottom: 90px;

    background:
        rgba(
            222,
            114,
            54,
            .34
        );

}


.map-glow-3 {

    width: 90px;
    height: 90px;

    right: 150px;
    top: 80px;

    background:
        rgba(
            218,
            62,
            54,
            .24
        );

}


.map-outline {

    position: absolute;

    width: 52%;
    height: 72%;

    left: 26%;
    top: 12%;

    border:
        1px solid
        rgba(
            201,
            224,
            188,
            .55
        );

    clip-path:
        polygon(
            45% 0,
            72% 10%,
            92% 33%,
            82% 61%,
            68% 86%,
            35% 100%,
            12% 80%,
            0 47%,
            18% 18%
        );

    background:
        rgba(
            83,
            120,
            72,
            .07
        );

}


.mock-zone {

    position: absolute;

    border-radius: 50%;

}


.z1 {

    width: 40px;
    height: 40px;

    top: 24%;
    left: 35%;

    background:
        rgba(
            233,
            90,
            57,
            .60
        );

}


.z2 {

    width: 70px;
    height: 70px;

    top: 48%;
    left: 54%;

    background:
        rgba(
            227,
            155,
            53,
            .50
        );

}


.z3 {

    width: 26px;
    height: 26px;

    top: 65%;
    left: 28%;

    background:
        rgba(
            213,
            61,
            54,
            .65
        );

}


.z4 {

    width: 62px;
    height: 62px;

    top: 28%;
    right: 15%;

    background:
        rgba(
            117,
            155,
            78,
            .40
        );

}


.z5 {

    width: 36px;
    height: 36px;

    bottom: 16%;
    right: 30%;

    background:
        rgba(
            232,
            107,
            46,
            .45
        );

}


.floating-map-card {

    position: absolute;

    min-width: 125px;

    padding:
        11px
        13px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    border-radius: 9px;

    background:
        rgba(
            6,
            21,
            31,
            .78
        );

    backdrop-filter:
        blur(12px);

    box-shadow:
        0
        12px
        30px
        rgba(
            0,
            0,
            0,
            .15
        );

}


.floating-map-card small {

    display: block;

    color: #708b9a;

    font-size: 8px;

}


.floating-map-card strong {

    display: block;

    margin-top: 4px;

    color: white;

    font-size: 12px;

}


.fc-1 {

    left: 18px;
    top: 28px;

}


.fc-2 {

    right: 19px;
    top: 160px;

}


.fc-3 {

    left: 24px;
    bottom: 25px;

}


.visual-legend {

    padding:
        16px
        20px
        20px;

}


.visual-legend > span {

    color: #8096a4;

    font-size: 9px;

}


.legend-gradient {

    height: 7px;

    margin-top: 9px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #8cae63,
            #d1be4f,
            #e39c43,
            #df673f,
            #c53a38
        );

}


.legend-labels {

    display: flex;

    justify-content: space-between;

    margin-top: 5px;

    color: #677f8d;

}


/* =================================================================================================
   HERO STATS
================================================================================================= */

.hero-stats {

    position: relative;

    z-index: 3;

    width:
        min(
            1450px,
            100%
        );

    margin:
        50px
        auto
        0;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

}


.hero-stat {

    padding:
        24px
        20px
        0
        0;

}


.hero-stat-number {

    display: block;

    color: white;

    font-size: 20px;

    font-weight: 700;

}


.hero-stat-label {

    display: block;

    margin-top: 4px;

    color: #6d8797;

    font-size: 10px;

}


.scroll-indicator {

    position: absolute;

    right: 35px;
    bottom: 28px;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: #67818f;

    font-size: 9px;

    letter-spacing: 1px;

}


.scroll-line {

    width: 1px;
    height: 35px;

    background:
        linear-gradient(
            white,
            transparent
        );

    opacity: .4;

}


/* =================================================================================================
   GENERAL SECTIONS
================================================================================================= */

.section {

    padding:
        115px
        6vw;

}


.section-inner {

    width:
        min(
            1400px,
            100%
        );

    margin: auto;

}


.section-light {

    background:
        linear-gradient(
            180deg,
            #f6f7f4,
            #f1f3ef
        );

}


.section-heading {

    display: grid;

    grid-template-columns:
        70px
        minmax(
            0,
            900px
        );

    gap: 15px;

    margin-bottom: 65px;

}


.section-index {

    padding-top: 6px;

    color: #87979e;

    font-size: 12px;

    font-weight: 800;

}


.light-index {

    color: #637c8d;

}


.eyebrow {

    margin-bottom: 12px;

    color: var(--green);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

}


.eyebrow.light {

    color: #91c9b2;

}


.eyebrow.orange {

    color: var(--orange);

}


.section h2,
.results-section h2,
.webgis-section h2,
.about-section h2 {

    margin:
        0
        0
        18px;

    font-size:
        clamp(
            38px,
            4vw,
            62px
        );

    line-height: 1.05;

    letter-spacing: -2.5px;

}


.section-lead {

    margin: 0;

    max-width: 850px;

    color: #687780;

    font-size: 15px;

    line-height: 1.85;

}


.white-heading {

    color: white;

}


.dark-lead {

    color: #8fa3b0;

}


/* =================================================================================================
   FEATURE CARDS
================================================================================================= */

.feature-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 16px;

}


.feature-card {

    position: relative;

    min-height: 290px;

    padding: 29px;

    overflow: hidden;

    border:
        1px solid
        #e3e8e8;

    border-radius: 16px;

    background:
        rgba(
            255,
            255,
            255,
            .86
        );

    box-shadow:
        0
        15px
        40px
        rgba(
            24,
            50,
            60,
            .04
        );

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.feature-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0
        22px
        50px
        rgba(
            24,
            50,
            60,
            .09
        );

}


.feature-card-highlight {

    color: white;

    border-color:
        rgba(
            255,
            255,
            255,
            .07
        );

    background:
        linear-gradient(
            145deg,
            #102a37,
            #0b1c28
        );

}


.feature-icon {

    width: 37px;
    height: 37px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    color: #436456;

    background: #e8efe7;

    font-size: 10px;

    font-weight: 800;

}


.feature-card-highlight
.feature-icon {

    color: #b9d99e;

    background:
        rgba(
            145,
            184,
            104,
            .13
        );

}


.feature-tag {

    margin-top: 28px;

    color: var(--green);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.feature-card-highlight
.feature-tag {

    color: #8fb66c;

}


.feature-card h3 {

    margin:
        10px
        0
        12px;

    font-size: 20px;

}


.feature-card p {

    margin: 0;

    color: #6b7980;

    font-size: 12px;

    line-height: 1.75;

}


.feature-card-highlight p {

    color: #8fa2ae;

}


.feature-footer {

    position: absolute;

    bottom: 27px;

    left: 29px;
    right: 29px;

    padding-top: 14px;

    border-top:
        1px solid #e4e9e9;

    color: #77878e;

    font-size: 9px;

}


.feature-card-highlight
.feature-footer {

    border-color:
        rgba(
            255,
            255,
            255,
            .08
        );

    color: #75909f;

}


/* =================================================================================================
   RESULTS SECTION
================================================================================================= */

.results-section {

    position: relative;

    padding:
        100px
        6vw;

    overflow: hidden;

    color: white;

    background: #0a1d2b;

}


.results-background {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 15% 30%,
            rgba(
                55,
                131,
                99,
                .18
            ),
            transparent 27%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(
                216,
                157,
                52,
                .08
            ),
            transparent 26%
        );

}


.results-heading {

    position: relative;

    z-index: 2;

    max-width: 850px;

}


.results-heading h2 {

    font-size:
        clamp(
            35px,
            3.8vw,
            58px
        );

}


.results-grid {

    position: relative;

    z-index: 2;

    margin-top: 45px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 14px;

}


.result-card {

    min-height: 225px;

    padding: 28px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius: 14px;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    backdrop-filter: blur(10px);

}


.result-label {

    display: block;

    min-height: 30px;

    color: #849ba9;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1.2px;

}


.result-value {

    display: inline-block;

    margin-top: 22px;

    color: white;

    font-size:
        clamp(
            32px,
            3vw,
            48px
        );

    letter-spacing: -2px;

}


.result-unit {

    display: block;

    margin-top: 4px;

    color: #9ab58c;

    font-size: 10px;

}


.result-card p {

    margin-top: 20px;

    color: #7e94a2;

    font-size: 11px;

    line-height: 1.65;

}


/* =================================================================================================
   MAP ANALYSIS CARDS
================================================================================================= */

.maps-section {

    background:
        linear-gradient(
            180deg,
            #07131f,
            #091924
        );

}


.analysis-card {

    position: relative;

    margin-bottom: 18px;

    padding: 32px;

    display: grid;

    grid-template-columns:
        55px
        minmax(0, 1fr)
        330px;

    gap: 25px;

    align-items: stretch;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .065
        );

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                .035
            ),
            rgba(
                255,
                255,
                255,
                .015
            )
        );

    overflow: hidden;

    transition:
        border-color .25s ease,
        transform .25s ease;

}


.analysis-card:hover {

    transform:
        translateX(4px);

    border-color:
        rgba(
            145,
            184,
            104,
            .22
        );

}


.analysis-card-number {

    color: #587080;

    font-size: 10px;

    font-weight: 800;

    padding-top: 8px;

}


.analysis-tag {

    color: var(--orange);

    font-size: 9px;

    letter-spacing: 1.5px;

    font-weight: 700;

}


.analysis-card h3 {

    margin:
        9px
        0
        11px;

    color: white;

    font-size:
        clamp(
            24px,
            2.3vw,
            36px
        );

    letter-spacing: -1.2px;

}


.analysis-card-main > p {

    max-width: 780px;

    margin: 0;

    color: #8da0ab;

    font-size: 12px;

    line-height: 1.7;

}


.analysis-details {

    margin-top: 25px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 10px;

}


.analysis-details > div {

    padding:
        13px
        14px;

    border-radius: 8px;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

}


.analysis-details span {

    display: block;

    color: #607b8b;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: .8px;

}


.analysis-details strong {

    display: block;

    margin-top: 6px;

    color: #d7e0e5;

    font-size: 10px;

    font-weight: 600;

}


.analysis-warning {

    margin-top: 18px;

    padding:
        11px
        13px;

    max-width: 790px;

    border-left:
        2px solid var(--gold);

    color: #7f929e;

    background:
        rgba(
            221,
            180,
            59,
            .035
        );

    font-size: 9px;

    line-height: 1.6;

}


.analysis-visual {

    min-height: 180px;

    padding: 24px;

    border-radius: 12px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        rgba(
            0,
            0,
            0,
            .12
        );

}


.landcover-visual {

    background:
        linear-gradient(
            140deg,
            rgba(
                96,
                134,
                74,
                .15
            ),
            rgba(
                62,
                105,
                126,
                .08
            )
        );

}


.mini-legend {

    display: grid;

    grid-template-columns:
        14px
        1fr;

    gap:
        10px
        7px;

    align-items: center;

    color: #9aabb4;

    font-size: 10px;

}


.legend-dot {

    width: 11px;
    height: 11px;

    border-radius: 3px;

}


.legend-dot.agriculture {

    background: #7fa858;

}


.legend-dot.built {

    background: #c7644e;

}


.legend-dot.water {

    background: #4387ad;

}


.legend-dot.other {

    background: #a9a49a;

}


.change-arrow {

    display: flex;

    align-items: center;

    gap: 11px;

    color: #95a9b4;

    font-size: 9px;

    letter-spacing: 1px;

}


.change-arrow span {

    color: var(--orange);

    font-size: 32px;

}


.thermal-visual {

    align-items: stretch;

}


.thermal-scale {

    height: 18px;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            #3280ad,
            #46a8b1,
            #d2ca55,
            #eda049,
            #e05d3c,
            #b62e35
        );

}


.thermal-scale-labels {

    display: flex;

    justify-content: space-between;

    margin-top: 7px;

    color: #6f8694;

    font-size: 8px;

}


.pollution-visual {

    position: relative;

}


.pollution-ring {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            104,
            164,
            186,
            .35
        );

}


.ring-a {

    width: 80px;
    height: 80px;

}


.ring-b {

    width: 130px;
    height: 130px;

}


.ring-c {

    width: 185px;
    height: 185px;

}


.auc-circle {

    width: 135px;
    height: 135px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border:
        10px solid
        rgba(
            145,
            184,
            104,
            .18
        );

    box-shadow:
        inset
        0
        0
        0
        3px
        rgba(
            145,
            184,
            104,
            .65
        );

}


.auc-circle strong {

    color: white;

    font-size: 31px;

}


.auc-circle span {

    color: #748d9c;

    font-size: 9px;

}


.scenario-row {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 9px;

    margin-top: 21px;

}


.scenario-chip {

    padding: 13px;

    border-radius: 8px;

    border-top:
        3px solid;

    background:
        rgba(
            255,
            255,
            255,
            .03
        );

}


.scenario-chip.low {

    border-color: var(--gold);

}


.scenario-chip.baseline {

    border-color: var(--orange);

}


.scenario-chip.high {

    border-color: var(--red);

}


.scenario-chip small {

    display: block;

    color: #738a98;

    font-size: 8px;

}


.scenario-chip strong {

    display: block;

    margin-top: 6px;

    color: white;

    font-size: 18px;

}


.scenario-chip span {

    color: #6b8391;

    font-size: 8px;

}


.scenario-visual {

    flex-direction: row;

    gap: 8px;

}


.scenario-year {

    padding:
        9px
        10px;

    border-radius: 7px;

    color: white;

    background:
        rgba(
            255,
            255,
            255,
            .055
        );

    font-size: 9px;

}


.scenario-line {

    width: 36px;
    height: 1px;

    background:
        rgba(
            255,
            255,
            255,
            .17
        );

}


.risk-weight-row {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 9px;

    margin-top: 22px;

}


.risk-weight-row > div {

    padding: 12px;

    border-radius: 8px;

    background:
        rgba(
            255,
            255,
            255,
            .04
        );

}


.risk-weight-row strong {

    display: block;

    color: white;

    font-size: 19px;

}


.risk-weight-row span {

    display: block;

    margin-top: 5px;

    color: #708795;

    font-size: 8px;

}


.final-analysis-card {

    border-color:
        rgba(
            145,
            184,
            104,
            .14
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                82,
                121,
                70,
                .085
            ),
            rgba(
                255,
                255,
                255,
                .015
            )
        );

}


.risk-stack {

    display: flex;

    gap: 8px;

    align-items: flex-end;

}


.risk-block {

    width: 23px;

    border-radius:
        4px
        4px
        0
        0;

}


.r1 {

    height: 35px;

    background: #7ca55f;

}


.r2 {

    height: 55px;

    background: #b2b653;

}


.r3 {

    height: 78px;

    background: #d5ae47;

}


.r4 {

    height: 105px;

    background: #e57b42;

}


.r5 {

    height: 140px;

    background: #cc3e39;

}


.risk-caption {

    margin-top: 13px;

    color: #6c8391;

    font-size: 8px;

}


/* =================================================================================================
   METHODOLOGY
================================================================================================= */

.methodology-section {

    background: #f4f6f2;

}


.timeline {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        16px
        20px;

}


.timeline:before {

    content: "";

    position: absolute;

    left: 3%;
    right: 3%;

    top: 24px;

    height: 1px;

    background: #d8dfdc;

}


.timeline-step {

    position: relative;

    padding-top: 60px;

}


.timeline-number {

    position: absolute;

    top: 6px;
    left: 0;

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    z-index: 2;

    background: #f4f6f2;

    border:
        1px solid #cbd5d1;

    color: #557568;

    font-size: 9px;

    font-weight: 800;

}


.timeline-content {

    min-height: 175px;

    padding: 23px;

    border:
        1px solid #e1e6e4;

    border-radius: 13px;

    background: white;

    box-shadow:
        0
        12px
        35px
        rgba(
            26,
            53,
            61,
            .035
        );

}


.timeline-content small {

    color: var(--green);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.timeline-content h3 {

    margin:
        12px
        0
        9px;

    font-size: 16px;

}


.timeline-content p {

    margin: 0;

    color: #74828a;

    font-size: 10px;

    line-height: 1.7;

}


/* =================================================================================================
   WEBGIS SECTION
================================================================================================= */

.webgis-section {

    position: relative;

    padding:
        105px
        4.5vw
        80px;

    overflow: hidden;

    color: white;

    background:
        linear-gradient(
            160deg,
            #04101a,
            #08202d
        );

}


.webgis-glow {

    position: absolute;

    width: 680px;
    height: 680px;

    right: -230px;
    top: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                48,
                126,
                94,
                .13
            ),
            transparent 65%
        );

}


.webgis-shell {

    position: relative;

    width:
        min(
            1500px,
            100%
        );

    margin: auto;

    z-index: 2;

}


.webgis-heading {

    margin-bottom: 32px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

}


.webgis-heading p {

    max-width: 720px;

    margin: 0;

    color: #8297a4;

    font-size: 12px;

    line-height: 1.7;

}


.live-badge {

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        8px
        12px;

    border-radius: 40px;

    color: #95ae9e;

    background:
        rgba(
            255,
            255,
            255,
            .045
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );

    font-size: 9px;

}


.live-badge span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #70b88c;

}


/* =================================================================================================
   WEBGIS APP
================================================================================================= */

.map-app {

    height: 730px;

    display: grid;

    grid-template-columns:
        285px
        1fr;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    border-radius: 17px;

    box-shadow:
        0
        35px
        90px
        rgba(
            0,
            0,
            0,
            .32
        );

}


.map-sidebar {

    padding: 25px;

    background:
        linear-gradient(
            180deg,
            #0b1d2a,
            #071720
        );

    overflow-y: auto;

}


.sidebar-header small {

    color: #607988;

    font-size: 8px;

    letter-spacing: 1.4px;

}


.sidebar-header h3 {

    margin:
        8px
        0
        22px;

    font-size: 20px;

}


.theme-list {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.theme-button {

    width: 100%;

    padding:
        11px
        12px;

    display: flex;

    align-items: center;

    gap: 12px;

    text-align: left;

    border: 0;

    border-radius: 9px;

    cursor: pointer;

    color: #92a3ad;

    background: transparent;

    transition:
        background .2s ease,
        transform .2s ease;

}


.theme-button:hover {

    background:
        rgba(
            255,
            255,
            255,
            .045
        );

}


.theme-button.active {

    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(
                50,
                112,
                91,
                .38
            ),
            rgba(
                255,
                255,
                255,
                .035
            )
        );

    border:
        1px solid
        rgba(
            101,
            159,
            132,
            .17
        );

}


.theme-icon {

    width: 33px;
    height: 33px;

    flex:
        0 0
        33px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    background:
        rgba(
            255,
            255,
            255,
            .045
        );

    color: #729081;

    font-size: 8px;

    font-weight: 800;

}


.theme-button strong {

    display: block;

    font-size: 11px;

    font-weight: 600;

}


.theme-button small {

    display: block;

    margin-top: 3px;

    color: #58717f;

    font-size: 8px;

}


/* =================================================================================================
   DATASET SELECTOR
================================================================================================= */

.dataset-selector-panel {

    margin-top: 24px;

    padding: 16px;

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .065
        );

}


.selector-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;

}


.selector-heading span {

    color: #5f7987;

    font-size: 7px;

    letter-spacing: 1.2px;

}


.selector-heading strong {

    color: #aebdc5;

    font-size: 9px;

    font-weight: 500;

}


.dataset-select {

    width: 100%;

    height: 38px;

    padding:
        0
        11px;

    outline: none;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    border-radius: 8px;

    color: #e2e9ec;

    background: #0b202d;

    font-size: 10px;

    cursor: pointer;

}


.dataset-select option {

    color: white;

    background: #0b202d;

}


.study-area-button {

    width: 100%;

    margin-top: 8px;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(
            111,
            160,
            135,
            .15
        );

    border-radius: 8px;

    color: #8fb3a0;

    background:
        rgba(
            49,
            116,
            91,
            .09
        );

    cursor: pointer;

    font-size: 9px;

    transition:
        background .2s ease,
        color .2s ease;

}


.study-area-button:hover {

    color: white;

    background:
        rgba(
            49,
            116,
            91,
            .22
        );

}


/* =================================================================================================
   THEME DESCRIPTION + OPACITY
================================================================================================= */

.theme-description {

    margin-top: 28px;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );

}


.theme-description span {

    color: #597483;

    font-size: 8px;

    letter-spacing: 1.2px;

}


.theme-description p {

    color: #8296a2;

    font-size: 9px;

    line-height: 1.7;

}


.opacity-control {

    margin-top: 25px;

}


.opacity-label {

    display: flex;

    justify-content: space-between;

    color: #6c8492;

    font-size: 8px;

}


.opacity-control input {

    width: 100%;

    margin-top: 12px;

    accent-color: #4a9678;

}


/* =================================================================================================
   CLEAN MAP CONTAINER - NO BASEMAP
================================================================================================= */

.map-container {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #edf2ed,
            #e4ebe6
        );

}


#map,
.leaflet-container {

    width: 100%;
    height: 100%;

    background:
        radial-gradient(
            circle at 50% 45%,
            #f8faf7 0%,
            #eef3ee 62%,
            #e5ebe6 100%
        ) !important;

}


/* Prevent any map panes from forcing white backgrounds */

.leaflet-pane,
.leaflet-map-pane,
.leaflet-tile-pane,
.leaflet-overlay-pane {

    background: transparent !important;

}


/* No external raster/tile watermark */

.leaflet-tile-pane {

    display: none !important;

}


/* =================================================================================================
   MAP FLOATING TITLE
================================================================================================= */

.map-floating-title {

    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 700;

    padding:
        10px
        13px;

    border-radius: 9px;

    background:
        rgba(
            7,
            21,
            29,
            .86
        );

    backdrop-filter: blur(12px);

    box-shadow:
        0
        9px
        30px
        rgba(
            0,
            0,
            0,
            .15
        );

}


.map-floating-title small {

    display: block;

    color: #75909e;

    font-size: 7px;

    letter-spacing: 1.2px;

}


.map-floating-title strong {

    display: block;

    margin-top: 4px;

    color: white;

    font-size: 11px;

}


/* =================================================================================================
   MAP LEGEND
================================================================================================= */

.map-legend-card {

    position: absolute;

    right: 17px;
    bottom: 32px;

    z-index: 700;

    width: 160px;

    max-height: 310px;

    overflow-y: auto;

    padding: 13px;

    border-radius: 9px;

    background:
        rgba(
            8,
            22,
            30,
            .88
        );

    backdrop-filter: blur(12px);

    color: white;

    box-shadow:
        0
        12px
        35px
        rgba(
            0,
            0,
            0,
            .18
        );

}


.legend-header {

    margin-bottom: 9px;

    color: #8da0aa;

    font-size: 8px;

}


.legend-subtitle {

    margin:
        -3px
        0
        10px;

    color: #607a89;

    font-size: 7px;

    line-height: 1.4;

}


.legend-row {

    display: flex;

    align-items: center;

    gap: 8px;

    margin:
        6px
        0;

    color: #c1ccd2;

    font-size: 8px;

}


.legend-color {

    width: 11px;
    height: 11px;

    flex:
        0 0
        11px;

    border-radius: 3px;

}


/* Risk */

.risk1 {

    background: #7da75f;

}


.risk2 {

    background: #b1b952;

}


.risk3 {

    background: #d6ad46;

}


.risk4 {

    background: #e27a40;

}


.risk5 {

    background: #c93e3a;

}


/* Land Cover */

.legend-color.land-other {

    background:
        rgb(
            180,
            175,
            165
        );

}


.legend-color.land-agriculture {

    background:
        rgb(
            105,
            155,
            77
        );

}


.legend-color.land-built {

    background:
        rgb(
            196,
            87,
            67
        );

}


.legend-color.land-water {

    background:
        rgb(
            55,
            126,
            170
        );

}


/* Agriculture -> Built */

.legend-color.change-built {

    background:
        rgb(
            235,
            81,
            47
        );

}


/* =================================================================================================
   REAL PROJECT DATA BADGE
================================================================================================= */

.real-data-badge {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-top: 7px;

    padding:
        4px
        7px;

    border-radius: 20px;

    color: #9ec3af;

    background:
        rgba(
            54,
            125,
            94,
            .14
        );

    font-size: 7px;

    letter-spacing: .4px;

}


.real-data-badge:before {

    content: "";

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #76bc91;

}


/* =================================================================================================
   MAP LOADING
================================================================================================= */

.map-loading {

    position: absolute;

    inset: 0;

    z-index: 850;

    display: none;

    align-items: center;

    justify-content: center;

    background:
        rgba(
            5,
            18,
            26,
            .18
        );

    backdrop-filter: blur(2px);

    pointer-events: none;

}


.map-loading.visible {

    display: flex;

}


.map-loading-box {

    padding:
        10px
        14px;

    border-radius: 9px;

    color: white;

    background:
        rgba(
            5,
            18,
            26,
            .88
        );

    font-size: 9px;

    box-shadow:
        0
        12px
        30px
        rgba(
            0,
            0,
            0,
            .20
        );

}


/* =================================================================================================
   LEAFLET CONTROLS
================================================================================================= */

.leaflet-control-zoom {

    border: 0 !important;

    box-shadow:
        0
        8px
        25px
        rgba(
            0,
            0,
            0,
            .12
        ) !important;

}


.leaflet-control-zoom a {

    color: #17352c !important;

    background:
        rgba(
            255,
            255,
            255,
            .95
        ) !important;

    border-color:
        rgba(
            0,
            0,
            0,
            .08
        ) !important;

}


.leaflet-control-scale-line {

    border:
        1px solid
        rgba(
            20,
            55,
            45,
            .45
        ) !important;

    border-top: none !important;

    color: #183b30 !important;

    background:
        rgba(
            255,
            255,
            255,
            .72
        ) !important;

    backdrop-filter: blur(4px);

}


/* =================================================================================================
   EXACT BOUNDARY
================================================================================================= */

.leaflet-overlay-pane svg path {

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =================================================================================================
   POPUPS
================================================================================================= */

.leaflet-popup-content-wrapper {

    border-radius: 10px;

    box-shadow:
        0
        14px
        40px
        rgba(
            0,
            0,
            0,
            .15
        );

}


.geoguardian-popup {

    min-width: 180px;

    font-family:
        "Inter",
        sans-serif;

}


.geoguardian-popup small {

    color: #73828a;

    font-size: 8px;

    letter-spacing: .8px;

}


.geoguardian-popup strong {

    display: block;

    margin-top: 5px;

    color: #17262e;

    font-size: 12px;

}


.geoguardian-popup p {

    margin:
        8px
        0
        0;

    color: #66757d;

    font-size: 9px;

    line-height: 1.5;

}


/* =================================================================================================
   WEBGIS NOTE
================================================================================================= */

.webgis-note {

    display: flex;

    gap: 13px;

    margin-top: 18px;

    color: #728995;

    font-size: 9px;

}


.webgis-note span {

    color: #9bb189;

    font-weight: 700;

}


.webgis-note p {

    margin: 0;

}


/* =================================================================================================
   ABOUT
================================================================================================= */

.about-section {

    padding:
        105px
        6vw;

    color: white;

    background:
        linear-gradient(
            135deg,
            #113041,
            #071520
        );

}


.about-shell {

    width:
        min(
            1400px,
            100%
        );

    margin: auto;

    display: grid;

    grid-template-columns:
        1.3fr
        .7fr;

    gap: 70px;

    align-items: center;

}


.about-copy p {

    max-width: 820px;

    color: #91a4af;

    font-size: 13px;

    line-height: 1.8;

}


.developer-card {

    padding: 30px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius: 16px;

    background:
        rgba(
            255,
            255,
            255,
            .04
        );

    backdrop-filter: blur(12px);

}


.developer-card small {

    color: #718b99;

    font-size: 8px;

    letter-spacing: 1.3px;

}


.developer-card strong {

    display: block;

    margin-top: 12px;

    color: white;

    font-size: 18px;

    line-height: 1.45;

}


.developer-divider {

    height: 1px;

    margin:
        22px
        0;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

}


.developer-card span {

    display: block;

    margin-top: 5px;

    color: #778f9c;

    font-size: 9px;

}


/* =================================================================================================
   FOOTER
================================================================================================= */

.footer {

    padding:
        40px
        6vw;

    display: grid;

    grid-template-columns:
        1fr
        1.4fr
        1fr;

    gap: 40px;

    align-items: center;

    color: #778b97;

    background: #02090f;

}


.footer-brand {

    display: flex;

    align-items: center;

    gap: 12px;

}


.footer-brand strong {

    color: white;

    font-size: 12px;

}


.footer-brand p {

    margin:
        3px
        0
        0;

    font-size: 8px;

}


.footer-center {

    text-align: center;

    font-family:
        "Cairo",
        sans-serif;

    direction: rtl;

}


.footer-center p {

    margin: 0;

    color: #738995;

    font-size: 9px;

    line-height: 1.8;

}


.footer-right {

    display: flex;

    flex-direction: column;

    gap: 4px;

    text-align: right;

    font-size: 8px;

}


.footer-right strong {

    color: #ccd5d9;

    font-size: 9px;

}


/* =================================================================================================
   REVEAL ANIMATION
================================================================================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(22px);

    transition:
        opacity .75s ease,
        transform .75s ease;

}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


.delay-1 {

    transition-delay: .08s;

}


.delay-2 {

    transition-delay: .16s;

}


.delay-3 {

    transition-delay: .24s;

}


/* =================================================================================================
   RESPONSIVE - LARGE TABLET
================================================================================================= */

@media (
    max-width: 1200px
) {

    .nav-links {

        display: none;

    }


    .hero-shell {

        grid-template-columns:
            1fr
            .72fr;

        gap: 35px;

    }


    .analysis-card {

        grid-template-columns:
            45px
            1fr;

    }


    .analysis-visual {

        display: none;

    }


    .feature-grid,
    .results-grid,
    .timeline {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .timeline:before {

        display: none;

    }

}


/* =================================================================================================
   RESPONSIVE - TABLET
================================================================================================= */

@media (
    max-width: 900px
) {

    .hero {

        padding-left: 25px;

        padding-right: 25px;

    }


    .hero-shell {

        grid-template-columns:
            1fr;

    }


    .hero-visual {

        display: none;

    }


    .hero-stats {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .section {

        padding-left: 25px;

        padding-right: 25px;

    }


    .section-heading {

        grid-template-columns:
            1fr;

    }


    .map-app {

        grid-template-columns:
            1fr;

        height: auto;

    }


    .map-sidebar {

        display: block;

        max-height: 430px;

    }


    .map-container {

        height: 620px;

    }


    .about-shell {

        grid-template-columns:
            1fr;

    }


    .footer {

        grid-template-columns:
            1fr;

        text-align: left;

    }


    .footer-center,
    .footer-right {

        text-align: left;

    }

}


/* =================================================================================================
   RESPONSIVE - MOBILE
================================================================================================= */

@media (
    max-width: 620px
) {

    .navbar {

        padding:
            0
            18px;

    }


    .nav-button {

        display: none;

    }


    .hero h1 {

        letter-spacing: -3px;

    }


    .hero-main,
    .hero-accent {

        font-size: 58px;

    }


    .project-title-ar {

        font-size: 19px;

    }


    .hero-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .hero-tech {

        display: none;

    }


    .feature-grid,
    .results-grid,
    .timeline,
    .analysis-details,
    .scenario-row,
    .risk-weight-row {

        grid-template-columns:
            1fr;

    }


    .analysis-card {

        grid-template-columns:
            1fr;

    }


    .analysis-card-number {

        display: none;

    }


    .hero-stats {

        grid-template-columns:
            1fr
            1fr;

    }


    .map-container {

        height: 560px;

    }


    .map-legend-card {

        width: 140px;

        right: 10px;

        bottom: 42px;

    }


    .map-floating-title {

        top: 10px;

        left: 10px;

    }

}

/* ================================================================================================
   GEOGUARDIAN MAP CLICK QUERY
================================================================================================ */

.gg-query-popup {

    min-width: 250px;

    padding: 3px;

    font-family:
        "Inter",
        Arial,
        sans-serif;

}


.gg-query-label {

    max-width: 270px;

    color: #688078;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .7px;

    text-transform: uppercase;

    line-height: 1.4;

}


.gg-query-value {

    margin-top: 8px;

    color: #14372d;

    font-size: 27px;

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1px;

}


.gg-query-title {

    margin-top: 8px;

    color: #172c27;

    font-size: 15px;

    font-weight: 700;

}


.gg-query-description {

    margin-top: 7px;

    color: #6e7e78;

    font-size: 10px;

    line-height: 1.6;

}


.gg-query-divider {

    height: 1px;

    margin:
        13px
        0;

    background: #e2e8e5;

}


.gg-query-coordinates {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 8px;

}


.gg-query-coordinates > div {

    padding:
        7px
        8px;

    border-radius: 6px;

    background: #f1f5f2;

}


.gg-query-coordinates span {

    display: block;

    color: #83908b;

    font-size: 7px;

}


.gg-query-coordinates strong {

    display: block;

    margin-top: 3px;

    color: #2c4b40;

    font-size: 9px;

}


.gg-query-note {

    margin-top: 10px;

    color: #9aa5a1;

    font-size: 7px;

}


.gg-query-loading {

    padding:
        10px
        0;

    color: #557a69;

    font-size: 10px;

    font-weight: 600;

}


.leaflet-popup-content {

    margin:
        15px
        17px;

}


.leaflet-popup-content-wrapper {

    border-radius: 12px !important;

    background:
        rgba(
            255,
            255,
            255,
            .97
        ) !important;

    box-shadow:
        0
        18px
        50px
        rgba(
            5,
            30,
            22,
            .18
        ) !important;

}



/* ================================================================================================
   GEOGUARDIAN V06 LOCATION INTELLIGENCE PANEL
================================================================================================ */

.gg-location-panel {

    position: absolute;

    top: 16px;
    right: 16px;

    z-index: 950;

    width: 315px;

    max-height:
        calc(
            100% - 32px
        );

    overflow-y: auto;

    padding: 22px;

    transform:
        translateX(
            calc(
                100% + 40px
            )
        );

    opacity: 0;

    pointer-events: none;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius: 14px;

    color: white;

    background:
        rgba(
            6,
            24,
            32,
            .95
        );

    backdrop-filter:
        blur(18px);

    box-shadow:
        0
        24px
        65px
        rgba(
            0,
            0,
            0,
            .30
        );

    transition:
        transform .35s ease,
        opacity .35s ease;

}


.gg-location-panel.visible {

    transform:
        translateX(0);

    opacity: 1;

    pointer-events: auto;

}


.gg-location-close {

    position: absolute;

    top: 10px;
    right: 11px;

    width: 27px;
    height: 27px;

    border: 0;

    border-radius: 50%;

    color: #8299a5;

    background:
        rgba(
            255,
            255,
            255,
            .05
        );

    cursor: pointer;

    font-size: 17px;

}


.gg-profile-kicker {

    color: #75af91;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.gg-location-panel h3 {

    margin:
        7px
        0
        3px;

    color: white;

    font-size: 20px;

}


.gg-profile-coordinates {

    margin-bottom: 19px;

    color: #718b98;

    font-size: 8px;

}


.gg-profile-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 7px;

}


.gg-profile-card {

    padding:
        11px
        10px;

    border-radius: 9px;

    background:
        rgba(
            255,
            255,
            255,
            .045
        );

}


.gg-profile-card span {

    display: block;

    color: #78909c;

    font-size: 7px;

}


.gg-profile-card strong {

    display: block;

    margin-top: 5px;

    color: #e7edef;

    font-size: 12px;

}


.gg-profile-emphasis {

    margin-top: 10px;

    padding: 13px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(
                188,
                74,
                47,
                .18
            ),
            rgba(
                255,
                255,
                255,
                .035
            )
        );

    border:
        1px solid
        rgba(
            223,
            114,
            69,
            .13
        );

}


.gg-profile-emphasis span {

    display: block;

    color: #93877e;

    font-size: 7px;

}


.gg-profile-emphasis strong {

    display: block;

    margin-top: 5px;

    color: white;

    font-size: 16px;

}


.gg-profile-row {

    margin-top: 8px;

    padding:
        9px
        10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .06
        );

}


.gg-profile-row span {

    color: #718994;

    font-size: 8px;

}


.gg-profile-row strong {

    color: #d9e1e5;

    font-size: 9px;

}


.gg-profile-core {

    margin-top: 13px;

    padding: 10px;

    border-radius: 8px;

    color: #83959e;

    background:
        rgba(
            255,
            255,
            255,
            .04
        );

    font-size: 8px;

}


.gg-profile-core.active {

    color: #ffc5bd;

    background:
        rgba(
            185,
            48,
            42,
            .17
        );

    border:
        1px solid
        rgba(
            211,
            72,
            62,
            .18
        );

}


.gg-profile-note {

    margin-top: 14px;

    padding-top: 11px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .06
        );

    color: #607983;

    font-size: 7px;

    line-height: 1.6;

}


@media (
    max-width: 900px
) {

    .gg-location-panel {

        width:
            min(
                310px,
                calc(
                    100% - 30px
                )
            );

        right: 15px;

    }

}



/* =================================================================================================
   GEOGUARDIAN V07 FINAL POLISH
================================================================================================= */


/* -------------------------------------------------------------------------------------------------
   MAP APP DEPTH
------------------------------------------------------------------------------------------------- */

.map-app {

    position: relative;

    border:
        1px solid
        rgba(
            113,
            169,
            141,
            .13
        );

    box-shadow:

        0
        40px
        100px
        rgba(
            0,
            0,
            0,
            .34
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .03
        );

}


/* -------------------------------------------------------------------------------------------------
   SIDEBAR
------------------------------------------------------------------------------------------------- */

.map-sidebar {

    scrollbar-width: thin;

    scrollbar-color:
        rgba(
            111,
            159,
            137,
            .28
        )
        transparent;

}


.map-sidebar::-webkit-scrollbar {

    width: 5px;

}


.map-sidebar::-webkit-scrollbar-thumb {

    border-radius: 20px;

    background:
        rgba(
            111,
            159,
            137,
            .26
        );

}


/* -------------------------------------------------------------------------------------------------
   THEME BUTTON
------------------------------------------------------------------------------------------------- */

.theme-button {

    position: relative;

    overflow: hidden;

}


.theme-button:before {

    content: "";

    position: absolute;

    left: 0;
    top: 16%;
    bottom: 16%;

    width: 2px;

    border-radius: 4px;

    opacity: 0;

    background: #76b992;

    transform:
        scaleY(.4);

    transition:
        opacity .2s ease,
        transform .2s ease;

}


.theme-button.active:before {

    opacity: 1;

    transform:
        scaleY(1);

}


.theme-button.active {

    box-shadow:
        inset
        0
        0
        30px
        rgba(
            89,
            153,
            124,
            .045
        );

}


/* -------------------------------------------------------------------------------------------------
   DATASET SELECTOR
------------------------------------------------------------------------------------------------- */

.dataset-selector-panel {

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .025
        );

}


.dataset-select {

    transition:
        border-color .2s ease,
        background .2s ease;

}


.dataset-select:hover,
.dataset-select:focus {

    border-color:
        rgba(
            110,
            169,
            140,
            .28
        );

    background: #0d2432;

}


/* -------------------------------------------------------------------------------------------------
   V07 THEME INFORMATION
------------------------------------------------------------------------------------------------- */

.v07-theme-info {

    margin-top: 22px;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .065
        );

}


.v07-info-top {

    display: flex;

    align-items: center;

    gap: 11px;

}


.v07-info-number {

    width: 31px;
    height: 31px;

    flex:
        0 0
        31px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    color: #77a68e;

    background:
        rgba(
            82,
            139,
            111,
            .10
        );

    border:
        1px solid
        rgba(
            92,
            151,
            122,
            .10
        );

    font-size: 8px;

    font-weight: 800;

}


.v07-info-kicker {

    color: #5d7583;

    font-size: 6px;

    letter-spacing: 1.2px;

}


.v07-theme-info h4 {

    margin:
        3px
        0
        0;

    color: #e8edef;

    font-size: 11px;

    font-weight: 650;

}


.v07-method-badge {

    display: inline-flex;

    align-items: center;

    margin-top: 12px;

    padding:
        5px
        8px;

    border-radius: 20px;

    font-size: 7px;

    letter-spacing: .25px;

}


.v07-method-badge.observed {

    color: #96cbb1;

    background:
        rgba(
            70,
            145,
            106,
            .12
        );

}


.v07-method-badge.environment {

    color: #89bed0;

    background:
        rgba(
            57,
            125,
            150,
            .12
        );

}


.v07-method-badge.validation {

    color: #c3bd83;

    background:
        rgba(
            190,
            169,
            76,
            .11
        );

}


.v07-method-badge.scenario {

    color: #efb37b;

    background:
        rgba(
            214,
            122,
            52,
            .12
        );

}


.v07-method-badge.predictive {

    color: #e99a8c;

    background:
        rgba(
            190,
            62,
            48,
            .12
        );

}


.v07-info-summary {

    margin:
        12px
        0
        0;

    color: #80949f;

    font-size: 8px;

    line-height: 1.65;

}


.v07-info-block {

    margin-top: 13px;

}


.v07-info-block > span {

    display: block;

    margin-bottom: 4px;

    color: #58717e;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.1px;

}


.v07-info-block p {

    margin: 0;

    color: #8396a0;

    font-size: 7.5px;

    line-height: 1.62;

}


.v07-info-warning {

    margin-top: 14px;

    padding:
        9px
        10px;

    display: grid;

    grid-template-columns:
        17px
        1fr;

    gap: 6px;

    border-left:
        2px solid
        rgba(
            218,
            169,
            65,
            .7
        );

    border-radius:
        0
        6px
        6px
        0;

    background:
        rgba(
            206,
            165,
            59,
            .035
        );

}


.v07-info-warning > span {

    width: 15px;
    height: 15px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #d9b45e;

    background:
        rgba(
            218,
            180,
            74,
            .10
        );

    font-size: 7px;

    font-weight: 900;

}


.v07-info-warning p {

    margin: 0;

    color: #7c8c92;

    font-size: 7px;

    line-height: 1.55;

}


/* -------------------------------------------------------------------------------------------------
   ACTIVE LAYER STATUS
------------------------------------------------------------------------------------------------- */

.v07-layer-status {

    position: absolute;

    top: 16px;
    left: 50%;

    z-index: 690;

    max-width: 330px;

    padding:
        8px
        11px;

    display: flex;

    align-items: center;

    gap: 8px;

    transform:
        translateX(-50%);

    border-radius: 9px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    background:
        rgba(
            6,
            22,
            30,
            .82
        );

    backdrop-filter:
        blur(12px);

    box-shadow:
        0
        8px
        30px
        rgba(
            0,
            0,
            0,
            .13
        );

}


.v07-status-dot {

    width: 7px;
    height: 7px;

    flex:
        0 0
        7px;

    border-radius: 50%;

    background: #74ba91;

    box-shadow:
        0
        0
        0
        4px
        rgba(
            116,
            186,
            145,
            .08
        );

}


.v07-layer-status small {

    display: block;

    color: #63808c;

    font-size: 5px;

    letter-spacing: 1px;

}


.v07-layer-status strong {

    display: block;

    max-width: 265px;

    margin-top: 2px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #dfe7ea;

    font-size: 8px;

    font-weight: 600;

}


/* -------------------------------------------------------------------------------------------------
   CLICK GUIDE
------------------------------------------------------------------------------------------------- */

.v07-click-guide {

    position: absolute;

    left: 18px;
    bottom: 18px;

    z-index: 690;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        8px
        11px;

    border-radius: 9px;

    color: #5d776c;

    background:
        rgba(
            255,
            255,
            255,
            .88
        );

    backdrop-filter:
        blur(10px);

    box-shadow:
        0
        8px
        28px
        rgba(
            0,
            0,
            0,
            .09
        );

    transition:
        opacity .3s ease,
        transform .3s ease;

}


.v07-click-guide.used {

    opacity: .28;

    transform:
        translateY(5px);

}


.v07-click-icon {

    width: 24px;
    height: 24px;

    display: grid;

    place-items: center;

    border-radius: 7px;

    color: white;

    background: #3d8167;

    font-size: 16px;

    line-height: 1;

}


.v07-click-guide strong {

    display: block;

    color: #244b3e;

    font-size: 7px;

}


.v07-click-guide small {

    display: block;

    margin-top: 2px;

    color: #789087;

    font-size: 6px;

}


/* -------------------------------------------------------------------------------------------------
   MAP TITLE
------------------------------------------------------------------------------------------------- */

.map-floating-title {

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                7,
                25,
                34,
                .94
            ),
            rgba(
                13,
                43,
                49,
                .90
            )
        );

}


/* -------------------------------------------------------------------------------------------------
   LEGEND
------------------------------------------------------------------------------------------------- */

.map-legend-card {

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .07
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                8,
                26,
                34,
                .94
            ),
            rgba(
                11,
                37,
                42,
                .91
            )
        );

}


/* -------------------------------------------------------------------------------------------------
   LOCATION INTELLIGENCE HEADER
------------------------------------------------------------------------------------------------- */

.v07-location-header {

    margin:
        -2px
        0
        14px;

    padding-bottom: 10px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .06
        );

}


.v07-location-header span {

    display: block;

    color: #65a786;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.4px;

}


.v07-location-header strong {

    display: block;

    margin-top: 3px;

    color: #edf2f3;

    font-size: 10px;

}


/* -------------------------------------------------------------------------------------------------
   SYSTEM LABEL
------------------------------------------------------------------------------------------------- */

.v07-system-label {

    position: absolute;

    right: 15px;
    top: -31px;

    display: flex;

    align-items: center;

    gap: 7px;

    color: #526d7a;

    font-size: 6px;

}


.v07-system-label span {

    color: #6ca288;

    letter-spacing: 1px;

}


.v07-system-label strong {

    color: #667f8b;

    font-weight: 500;

}


/* -------------------------------------------------------------------------------------------------
   POPUP POLISH
------------------------------------------------------------------------------------------------- */

.gg-query-value {

    color: #123e32;

}


.leaflet-popup-content-wrapper {

    border:
        1px solid
        rgba(
            32,
            84,
            66,
            .08
        );

}


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

@media (
    max-width: 1100px
) {

    .v07-layer-status {

        left: auto;
        right: 15px;

        transform: none;

        max-width: 250px;

    }


    .v07-system-label {

        display: none;

    }

}


@media (
    max-width: 700px
) {

    .v07-layer-status {

        display: none;

    }


    .v07-click-guide {

        left: 10px;
        bottom: 10px;

    }


    .v07-click-guide small {

        display: none;

    }

}


/* =================================================================================================
   END GEOGUARDIAN V07
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.1 ARABIC MAP INFO
================================================================================================= */


/* Prevent background scroll while modal is open */

body.gg-modal-open {

    overflow: hidden;

}


/* -------------------------------------------------------------------------------------------------
   MODAL
------------------------------------------------------------------------------------------------- */

.gg-map-info-modal {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;

}


.gg-map-info-modal.visible {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


.gg-map-info-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(
            1,
            10,
            15,
            .78
        );

    backdrop-filter:
        blur(10px);

}


.gg-map-info-dialog {

    position: relative;

    z-index: 2;

    width:
        min(
            780px,
            100%
        );

    max-height:
        calc(
            100vh - 50px
        );

    overflow-y: auto;

    padding:
        35px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    border-radius: 19px;

    color: white;

    background:
        linear-gradient(
            145deg,
            #071b26,
            #0b2a31
        );

    box-shadow:
        0
        40px
        120px
        rgba(
            0,
            0,
            0,
            .48
        );

}


.gg-map-info-dialog::-webkit-scrollbar {

    width: 6px;

}


.gg-map-info-dialog::-webkit-scrollbar-thumb {

    border-radius: 20px;

    background:
        rgba(
            117,
            170,
            144,
            .30
        );

}


.gg-map-info-close {

    position: absolute;

    top: 14px;
    left: 14px;

    width: 34px;
    height: 34px;

    border: 0;

    border-radius: 50%;

    color: #8fa5af;

    background:
        rgba(
            255,
            255,
            255,
            .055
        );

    cursor: pointer;

    font-size: 21px;

    transition:
        background .2s ease,
        color .2s ease;

}


.gg-map-info-close:hover {

    color: white;

    background:
        rgba(
            255,
            255,
            255,
            .10
        );

}


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

.gg-info-ar {

    direction: rtl;

    text-align: right;

    font-family:
        "Cairo",
        Arial,
        sans-serif;

}


.gg-info-tag {

    display: inline-flex;

    padding:
        5px
        9px;

    border-radius: 30px;

    color: #8ec0a7;

    background:
        rgba(
            70,
            145,
            107,
            .12
        );

    font-size: 8px;

    font-weight: 700;

}


.gg-info-active-layer {

    margin-top: 16px;

    color: #69828d;

    font-size: 9px;

}


.gg-info-active-layer strong {

    color: #a5bbc3;

    font-weight: 600;

}


.gg-info-ar h2 {

    margin:
        11px
        0
        2px;

    color: white;

    font-size:
        clamp(
            25px,
            3vw,
            37px
        );

    line-height: 1.5;

}


.gg-info-subtitle {

    direction: ltr;

    text-align: right;

    color: #66828e;

    font-family:
        "Inter",
        sans-serif;

    font-size: 10px;

}


/* -------------------------------------------------------------------------------------------------
   INFORMATION SECTION
------------------------------------------------------------------------------------------------- */

.gg-info-section {

    margin-top: 16px;

    padding: 17px;

    display: grid;

    grid-template-columns:
        1fr
        33px;

    gap: 12px;

    border-radius: 11px;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .045
        );

}


.gg-info-icon {

    width: 31px;
    height: 31px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    color: #7cad95;

    background:
        rgba(
            77,
            143,
            112,
            .11
        );

    font-family:
        "Inter",
        sans-serif;

    font-size: 8px;

    font-weight: 800;

}


.gg-info-section h3 {

    margin: 0;

    color: #dce7e3;

    font-size: 12px;

}


.gg-info-section p {

    margin:
        7px
        0
        0;

    color: #92a5aa;

    font-size: 10px;

    line-height: 2;

}


/* -------------------------------------------------------------------------------------------------
   CAUTION
------------------------------------------------------------------------------------------------- */

.gg-info-caution {

    margin-top: 17px;

    padding: 16px;

    display: grid;

    grid-template-columns:
        1fr
        35px;

    gap: 12px;

    border-right:
        3px solid #d4ac4f;

    border-radius: 9px;

    background:
        rgba(
            213,
            172,
            75,
            .05
        );

}


.gg-caution-icon {

    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #e0bc63;

    background:
        rgba(
            222,
            184,
            88,
            .11
        );

    font-weight: 800;

}


.gg-info-caution strong {

    color: #dfc379;

    font-size: 10px;

}


.gg-info-caution p {

    margin:
        5px
        0
        0;

    color: #8f9c9c;

    font-size: 9px;

    line-height: 1.9;

}


/* -------------------------------------------------------------------------------------------------
   ACTIONS
------------------------------------------------------------------------------------------------- */

.gg-info-actions {

    margin-top: 22px;

    display: flex;

    gap: 9px;

    flex-wrap: wrap;

}


.gg-start-explore,
.gg-open-guide {

    min-height: 42px;

    padding:
        0
        17px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    cursor: pointer;

    font-family:
        "Cairo",
        sans-serif;

    font-size: 10px;

    font-weight: 600;

    text-decoration: none;

}


.gg-start-explore {

    border: 0;

    color: white;

    background:
        linear-gradient(
            135deg,
            #347d62,
            #286954
        );

    box-shadow:
        0
        10px
        30px
        rgba(
            43,
            119,
            89,
            .20
        );

}


.gg-open-guide {

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    color: #a4b8c0;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

}


.gg-info-help {

    margin-top: 13px;

    color: #607983;

    font-size: 8px;

    line-height: 1.8;

}


/* -------------------------------------------------------------------------------------------------
   SIDEBAR GUIDE BUTTON
------------------------------------------------------------------------------------------------- */

.gg-map-guide-button {

    margin:
        0
        0
        20px;

    padding:
        11px
        12px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(
            102,
            157,
            131,
            .12
        );

    border-radius: 9px;

    color: inherit;

    background:
        rgba(
            62,
            127,
            96,
            .07
        );

    text-decoration: none;

}


.gg-map-guide-button > span {

    width: 31px;
    height: 31px;

    flex:
        0 0
        31px;

    display: grid;

    place-items: center;

    border-radius: 8px;

    color: #84b49b;

    background:
        rgba(
            90,
            156,
            124,
            .10
        );

    font-weight: 800;

}


.gg-map-guide-button strong {

    display: block;

    color: #b4c4ca;

    font-family:
        "Cairo",
        sans-serif;

    font-size: 9px;

}


.gg-map-guide-button small {

    display: block;

    margin-top: 2px;

    color: #58727e;

    font-family:
        "Cairo",
        sans-serif;

    font-size: 6px;

}


/* -------------------------------------------------------------------------------------------------
   MAP INFO BUTTON
------------------------------------------------------------------------------------------------- */

.gg-map-info-button {

    position: absolute;

    top: 64px;
    left: 18px;

    z-index: 720;

    height: 35px;

    padding:
        0
        11px;

    display: flex;

    align-items: center;

    gap: 7px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    border-radius: 8px;

    color: #d7e1e4;

    background:
        rgba(
            7,
            25,
            33,
            .88
        );

    backdrop-filter:
        blur(12px);

    cursor: pointer;

    font-family:
        "Cairo",
        sans-serif;

    font-size: 8px;

    box-shadow:
        0
        8px
        25px
        rgba(
            0,
            0,
            0,
            .12
        );

}


.gg-map-info-button span {

    width: 19px;
    height: 19px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #91bca5;

    border:
        1px solid
        rgba(
            130,
            186,
            156,
            .28
        );

    font-family:
        Georgia,
        serif;

    font-weight: bold;

}


/* -------------------------------------------------------------------------------------------------
   MOBILE
------------------------------------------------------------------------------------------------- */

@media (
    max-width: 650px
) {

    .gg-map-info-modal {

        padding: 10px;

    }


    .gg-map-info-dialog {

        max-height:
            calc(
                100vh - 20px
            );

        padding:
            25px
            18px;

        border-radius: 14px;

    }


    .gg-info-section {

        grid-template-columns:
            1fr;

    }


    .gg-info-icon {

        display: none;

    }


    .gg-info-caution {

        grid-template-columns:
            1fr;

    }


    .gg-caution-icon {

        display: none;

    }


    .gg-info-actions {

        flex-direction: column;

    }


    .gg-start-explore,
    .gg-open-guide {

        width: 100%;

    }

}


/* =================================================================================================
   END V07.1 ARABIC MAP INFO
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.2 RTL MODAL FIX
================================================================================================= */


/* -------------------------------------------------------------------------------------------------
   MODAL SIZE
------------------------------------------------------------------------------------------------- */

.gg-map-info-dialog {

    width:
        min(
            900px,
            calc(
                100vw - 50px
            )
        ) !important;

    max-height:
        calc(
            100vh - 55px
        ) !important;

    padding:
        36px
        40px
        32px !important;

}


/* -------------------------------------------------------------------------------------------------
   MAIN ARABIC CONTENT
------------------------------------------------------------------------------------------------- */

.gg-info-ar {

    direction: rtl !important;

    text-align: right !important;

    width: 100% !important;

    font-family:
        "Cairo",
        "Tahoma",
        "Arial",
        sans-serif !important;

}


.gg-info-ar h2 {

    width: 100% !important;

    margin:
        10px
        0
        2px !important;

    font-size:
        clamp(
            28px,
            3vw,
            42px
        ) !important;

    line-height: 1.4 !important;

    text-align: right !important;

}


.gg-info-subtitle {

    direction: ltr !important;

    text-align: right !important;

    width: 100% !important;

}


/* -------------------------------------------------------------------------------------------------
   FIX INFORMATION SECTIONS
------------------------------------------------------------------------------------------------- */

.gg-info-section {

    direction: ltr !important;

    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        38px !important;

    grid-template-areas:
        "content icon" !important;

    column-gap: 16px !important;

    align-items: start !important;

    margin-top: 15px !important;

    padding:
        18px
        19px !important;

}


.gg-info-section > div:not(.gg-info-icon) {

    grid-area: content !important;

    direction: rtl !important;

    text-align: right !important;

    min-width: 0 !important;

    width: 100% !important;

}


.gg-info-section .gg-info-icon {

    grid-area: icon !important;

    direction: ltr !important;

    width: 36px !important;

    height: 36px !important;

    min-width: 36px !important;

    display: grid !important;

    place-items: center !important;

    justify-self: end !important;

}


.gg-info-section h3 {

    display: block !important;

    width: 100% !important;

    margin:
        0
        0
        7px !important;

    color: #e8eeec !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    line-height: 1.7 !important;

    text-align: right !important;

    white-space: normal !important;

}


.gg-info-section p {

    display: block !important;

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    color: #9eb0b5 !important;

    font-size: 11px !important;

    line-height: 2.1 !important;

    text-align: right !important;

    white-space: normal !important;

    overflow-wrap: normal !important;

    word-break: normal !important;

}


/* -------------------------------------------------------------------------------------------------
   FIX CAUTION SECTION
------------------------------------------------------------------------------------------------- */

.gg-info-caution {

    direction: ltr !important;

    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        40px !important;

    grid-template-areas:
        "cautionContent cautionIcon" !important;

    column-gap: 15px !important;

    align-items: start !important;

    margin-top: 17px !important;

    padding:
        17px
        18px !important;

}


.gg-info-caution > div:not(.gg-caution-icon) {

    grid-area: cautionContent !important;

    direction: rtl !important;

    text-align: right !important;

    min-width: 0 !important;

}


.gg-info-caution .gg-caution-icon {

    grid-area: cautionIcon !important;

    width: 35px !important;

    height: 35px !important;

    min-width: 35px !important;

    justify-self: end !important;

}


.gg-info-caution strong {

    display: block !important;

    width: 100% !important;

    font-size: 12px !important;

    text-align: right !important;

}


.gg-info-caution p {

    display: block !important;

    width: 100% !important;

    margin:
        6px
        0
        0 !important;

    font-size: 10px !important;

    line-height: 2 !important;

    text-align: right !important;

    word-break: normal !important;

}


/* -------------------------------------------------------------------------------------------------
   ACTIVE LAYER
------------------------------------------------------------------------------------------------- */

.gg-info-active-layer {

    display: block !important;

    width: 100% !important;

    margin-top: 14px !important;

    direction: rtl !important;

    text-align: right !important;

    font-size: 10px !important;

}


.gg-info-active-layer strong {

    display: inline !important;

}


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

.gg-info-actions {

    direction: rtl !important;

    width: 100% !important;

    justify-content: flex-start !important;

    margin-top: 21px !important;

}


.gg-start-explore,
.gg-open-guide {

    min-width: 175px !important;

    min-height: 44px !important;

    font-size: 11px !important;

}


/* -------------------------------------------------------------------------------------------------
   HELP
------------------------------------------------------------------------------------------------- */

.gg-info-help {

    width: 100% !important;

    direction: rtl !important;

    text-align: right !important;

    font-size: 9px !important;

    line-height: 1.9 !important;

}


/* -------------------------------------------------------------------------------------------------
   CLOSE BUTTON
------------------------------------------------------------------------------------------------- */

.gg-map-info-close {

    top: 14px !important;

    left: 14px !important;

    right: auto !important;

}


/* -------------------------------------------------------------------------------------------------
   MOBILE
------------------------------------------------------------------------------------------------- */

@media (
    max-width: 700px
) {

    .gg-map-info-dialog {

        width:
            calc(
                100vw - 20px
            ) !important;

        max-height:
            calc(
                100vh - 20px
            ) !important;

        padding:
            28px
            18px
            22px !important;

    }


    .gg-info-section {

        grid-template-columns:
            minmax(
                0,
                1fr
            )
            31px !important;

        column-gap: 10px !important;

    }


    .gg-info-section .gg-info-icon {

        width: 30px !important;

        height: 30px !important;

        min-width: 30px !important;

    }


    .gg-info-section h3 {

        font-size: 12px !important;

    }


    .gg-info-section p {

        font-size: 10px !important;

        line-height: 1.95 !important;

    }


    .gg-info-caution {

        grid-template-columns:
            minmax(
                0,
                1fr
            )
            31px !important;

    }


    .gg-info-caution .gg-caution-icon {

        width: 30px !important;

        height: 30px !important;

        min-width: 30px !important;

    }


    .gg-info-actions {

        flex-direction: column !important;

    }


    .gg-start-explore,
    .gg-open-guide {

        width: 100% !important;

    }

}


/* =================================================================================================
   END GEOGUARDIAN V07.2 RTL MODAL FIX
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.3 TYPOGRAPHY
================================================================================================= */


.gg-map-info-dialog {

    width:
        min(
            940px,
            calc(
                100vw - 48px
            )
        ) !important;

    padding:
        38px
        42px
        34px !important;

}


.gg-info-ar {

    color: #edf4f1 !important;

}


.gg-info-tag {

    font-size: 10px !important;

    padding:
        6px
        11px !important;

}


.gg-info-active-layer {

    margin-top: 17px !important;

    color: #9ab0b7 !important;

    font-size: 12px !important;

    line-height: 1.8 !important;

}


.gg-info-active-layer strong {

    color: #d8e3df !important;

}


.gg-info-ar h2 {

    margin-top: 10px !important;

    color: #ffffff !important;

    font-size:
        clamp(
            32px,
            3.5vw,
            46px
        ) !important;

    font-weight: 800 !important;

    line-height: 1.35 !important;

    letter-spacing: -.5px !important;

}


.gg-info-subtitle {

    margin-top: 2px !important;

    color: #8ba2ac !important;

    font-size: 12px !important;

}


.gg-info-section {

    margin-top: 15px !important;

    padding:
        20px
        21px !important;

    border-color:
        rgba(
            255,
            255,
            255,
            .07
        ) !important;

    background:
        rgba(
            255,
            255,
            255,
            .045
        ) !important;

}


.gg-info-section h3 {

    color: #f0f5f3 !important;

    font-size: 16px !important;

    font-weight: 750 !important;

    line-height: 1.7 !important;

}


.gg-info-section p {

    color: #b4c3c6 !important;

    font-size: 13px !important;

    font-weight: 400 !important;

    line-height: 2.05 !important;

}


.gg-info-icon {

    width: 39px !important;

    height: 39px !important;

    min-width: 39px !important;

    color: #9bc7ae !important;

    background:
        rgba(
            75,
            150,
            113,
            .16
        ) !important;

    font-size: 9px !important;

}


.gg-info-purpose {

    background:
        linear-gradient(
            135deg,
            rgba(
                66,
                133,
                102,
                .075
            ),
            rgba(
                255,
                255,
                255,
                .035
            )
        ) !important;

    border-color:
        rgba(
            96,
            166,
            132,
            .13
        ) !important;

}


.gg-info-caution {

    margin-top: 18px !important;

    padding:
        18px
        20px !important;

    background:
        rgba(
            215,
            170,
            63,
            .07
        ) !important;

}


.gg-info-caution strong {

    color: #efd18a !important;

    font-size: 14px !important;

}


.gg-info-caution p {

    color: #b8b6a7 !important;

    font-size: 12px !important;

    line-height: 2 !important;

}


.gg-caution-icon {

    width: 38px !important;

    height: 38px !important;

    color: #f0ce76 !important;

    background:
        rgba(
            224,
            178,
            67,
            .14
        ) !important;

}


.gg-start-explore,
.gg-open-guide {

    min-height: 47px !important;

    padding:
        0
        21px !important;

    font-size: 12px !important;

}


.gg-info-help {

    margin-top: 15px !important;

    color: #819aa3 !important;

    font-size: 10px !important;

    line-height: 1.9 !important;

}


/* Scrollbar clearer */

.gg-map-info-dialog::-webkit-scrollbar {

    width: 7px !important;

}


.gg-map-info-dialog::-webkit-scrollbar-thumb {

    background:
        rgba(
            120,
            177,
            147,
            .42
        ) !important;

}


/* Mobile */

@media (
    max-width: 700px
) {

    .gg-map-info-dialog {

        padding:
            27px
            17px
            23px !important;

    }


    .gg-info-ar h2 {

        font-size: 27px !important;

    }


    .gg-info-section h3 {

        font-size: 14px !important;

    }


    .gg-info-section p {

        font-size: 11px !important;

        line-height: 2 !important;

    }


    .gg-info-active-layer {

        font-size: 10px !important;

    }


    .gg-info-caution strong {

        font-size: 12px !important;

    }


    .gg-info-caution p {

        font-size: 10px !important;

    }

}


/* =================================================================================================
   END GEOGUARDIAN V07.3 TYPOGRAPHY
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.4 LANGUAGE SWITCHER
================================================================================================= */


/* -------------------------------------------------------------------------------------------------
   LANGUAGE CONTROL
------------------------------------------------------------------------------------------------- */

.gg-language-control {

    display: flex;

    align-items: center;

    gap: 3px;

    margin-left: 16px;

    padding: 4px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

    backdrop-filter:
        blur(10px);

}


.gg-lang-option {

    min-width: 65px;

    height: 31px;

    padding:
        0
        10px;

    border: 0;

    border-radius: 7px;

    color: #758d98;

    background: transparent;

    cursor: pointer;

    font-size: 9px;

    font-weight: 600;

    transition:
        color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.gg-lang-option[data-lang="ar"] {

    font-family:
        "Cairo",
        "Tahoma",
        sans-serif;

}


.gg-lang-option[data-lang="en"] {

    font-family:
        "Inter",
        Arial,
        sans-serif;

}


.gg-lang-option:hover {

    color: #c7d5d8;

}


.gg-lang-option.active {

    color: #eff7f3;

    background:
        linear-gradient(
            135deg,
            rgba(
                57,
                133,
                99,
                .88
            ),
            rgba(
                42,
                105,
                82,
                .88
            )
        );

    box-shadow:
        0
        5px
        16px
        rgba(
            20,
            91,
            66,
            .18
        );

}


.gg-lang-divider {

    width: 1px;

    height: 17px;

    background:
        rgba(
            255,
            255,
            255,
            .07
        );

}


/* -------------------------------------------------------------------------------------------------
   ARABIC GLOBAL TYPOGRAPHY
------------------------------------------------------------------------------------------------- */

body.gg-language-ar {

    font-family:
        "Cairo",
        "Tahoma",
        Arial,
        sans-serif;

}


body.gg-language-ar .theme-button,
body.gg-language-ar .dataset-selector-panel,
body.gg-language-ar .map-sidebar {

    text-align: right;

}


body.gg-language-ar .theme-button {

    direction: rtl;

}


body.gg-language-ar .theme-button > div {

    direction: rtl;

}


body.gg-language-ar .dataset-selector-panel {

    direction: rtl;

}


body.gg-language-ar #datasetSelect {

    direction: rtl;

    text-align: right;

}


/* Keep scientific map legend values readable */

body.gg-language-ar .map-legend-card {

    direction: rtl;

}


/* -------------------------------------------------------------------------------------------------
   ENGLISH MAP MODAL
------------------------------------------------------------------------------------------------- */

.gg-info-english {

    direction: ltr !important;

    text-align: left !important;

    font-family:
        "Inter",
        Arial,
        sans-serif !important;

}


.gg-info-english h2,
.gg-info-english h3,
.gg-info-english p,
.gg-info-english .gg-info-active-layer,
.gg-info-english .gg-info-help {

    text-align: left !important;

}


.gg-info-english .gg-info-subtitle {

    text-align: left !important;

}


.gg-info-english .gg-info-section {

    direction: ltr !important;

    grid-template-columns:
        39px
        minmax(
            0,
            1fr
        ) !important;

    grid-template-areas:
        "icon content" !important;

}


.gg-info-english .gg-info-section .gg-info-icon {

    grid-area: icon !important;

    justify-self: start !important;

}


.gg-info-english .gg-info-section > div:not(.gg-info-icon) {

    grid-area: content !important;

    direction: ltr !important;

    text-align: left !important;

}


.gg-info-english .gg-info-caution {

    direction: ltr !important;

    grid-template-columns:
        40px
        minmax(
            0,
            1fr
        ) !important;

    grid-template-areas:
        "cautionIcon cautionContent" !important;

    border-right: 0 !important;

    border-left:
        3px solid
        #d4ac4f !important;

}


.gg-info-english .gg-info-caution .gg-caution-icon {

    grid-area:
        cautionIcon !important;

    justify-self: start !important;

}


.gg-info-english .gg-info-caution > div:not(.gg-caution-icon) {

    grid-area:
        cautionContent !important;

    direction: ltr !important;

    text-align: left !important;

}


.gg-info-english .gg-info-actions {

    direction: ltr !important;

    justify-content: flex-start !important;

}


.gg-info-english .gg-info-active-layer {

    direction: ltr !important;

}


/* -------------------------------------------------------------------------------------------------
   ARABIC MODAL
------------------------------------------------------------------------------------------------- */

.gg-info-arabic {

    direction: rtl !important;

    text-align: right !important;

    font-family:
        "Cairo",
        "Tahoma",
        sans-serif !important;

}


/* -------------------------------------------------------------------------------------------------
   RESPONSIVE LANGUAGE CONTROL
------------------------------------------------------------------------------------------------- */

@media (
    max-width: 900px
) {

    .gg-language-control {

        position: fixed;

        top: 72px;
        right: 12px;

        z-index: 9998;

        margin: 0;

        background:
            rgba(
                5,
                22,
                30,
                .94
            );

    }


    .gg-lang-option {

        min-width: 58px;

        height: 29px;

        font-size: 8px;

    }

}


@media (
    max-width: 520px
) {

    .gg-language-control {

        top: 65px;

    }


    .gg-lang-option {

        min-width: 52px;

        padding:
            0
            7px;

    }

}


/* =================================================================================================
   END GEOGUARDIAN V07.4 LANGUAGE SWITCHER
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.5 FULL WEBSITE I18N
================================================================================================= */


/* -------------------------------------------------------------------------------------------------
   LANGUAGE SWITCHER
------------------------------------------------------------------------------------------------- */

.gg-language-control {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 40px;

    margin-inline-start: 10px;

    padding:
        4px
        7px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            .045
        );

    backdrop-filter:
        blur(12px);

}


.gg-lang-option {

    min-width: 70px;

    height: 31px;

    padding:
        0
        11px;

    border: 0;

    border-radius: 7px;

    cursor: pointer;

    color: #8299a5;

    background: transparent;

    font-size: 9px;

    font-weight: 700;

    transition:
        .2s ease;

}


.gg-lang-option[data-lang="ar"] {

    font-family:
        "Cairo",
        "Tahoma",
        Arial,
        sans-serif;

}


.gg-lang-option[data-lang="en"] {

    font-family:
        "Inter",
        Arial,
        sans-serif;

}


.gg-lang-option:hover {

    color: white;

}


.gg-lang-option.active {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #3a8568,
            #296a55
        );

    box-shadow:
        0
        5px
        18px
        rgba(
            30,
            113,
            82,
            .23
        );

}


.gg-lang-separator {

    color:
        rgba(
            255,
            255,
            255,
            .12
        );

    font-size: 10px;

}


/* =================================================================================================
   ARABIC PAGE
================================================================================================= */

html[dir="rtl"] body {

    font-family:
        "Cairo",
        "Tahoma",
        Arial,
        sans-serif;

}


/* -------------------------------------------------------------------------------------------------
   NAV
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .nav-links,
html[dir="rtl"] .navbar,
html[dir="rtl"] nav {

    direction: rtl;

}


html[dir="rtl"] .nav-actions {

    direction: rtl;

}


/* -------------------------------------------------------------------------------------------------
   GENERIC TEXT
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] section,
html[dir="rtl"] .section-header,
html[dir="rtl"] .section-copy,
html[dir="rtl"] .hero-copy,
html[dir="rtl"] .about-copy {

    text-align: right;

}


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

html[dir="rtl"] .hero-content {

    direction: rtl;

}


html[dir="rtl"] .hero-actions {

    direction: rtl;

    justify-content: flex-start;

}


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

html[dir="rtl"] .analysis-card,
html[dir="rtl"] .story-card,
html[dir="rtl"] .metric-card,
html[dir="rtl"] .result-card,
html[dir="rtl"] .method-card {

    direction: rtl;

    text-align: right;

}


/* -------------------------------------------------------------------------------------------------
   METHODOLOGY
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .methodology-timeline,
html[dir="rtl"] .timeline {

    direction: rtl;

}


/* =================================================================================================
   WEBGIS ARABIC
================================================================================================= */

html[dir="rtl"] .map-sidebar {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] .sidebar-header {

    text-align: right;

}


html[dir="rtl"] .theme-button {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] .theme-button > div {

    text-align: right;

}


html[dir="rtl"] .dataset-selector-panel {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] #datasetSelect {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] .map-legend-card {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] .legend-row {

    direction: rtl;

}


html[dir="rtl"] .map-floating-title {

    direction: rtl;

    text-align: right;

}


/* -------------------------------------------------------------------------------------------------
   QUERY POPUP
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .gg-query-popup {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] .gg-query-coordinates {

    direction: rtl;

}


/* -------------------------------------------------------------------------------------------------
   LOCATION PANEL
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .gg-location-panel {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] .gg-profile-grid,
html[dir="rtl"] .gg-profile-row {

    direction: rtl;

}


/* -------------------------------------------------------------------------------------------------
   V07 INFO PANEL
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .v07-theme-info {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] .v07-info-top {

    direction: rtl;

}


/* =================================================================================================
   ENGLISH PAGE
================================================================================================= */

html[dir="ltr"] body {

    font-family:
        "Inter",
        Arial,
        sans-serif;

}


/* -------------------------------------------------------------------------------------------------
   Do not reverse the Leaflet map coordinate system.
------------------------------------------------------------------------------------------------- */

.leaflet-container,
.leaflet-map-pane,
.leaflet-overlay-pane,
.leaflet-control-container {

    direction: ltr !important;

}


/* =================================================================================================
   MOBILE
================================================================================================= */

@media (
    max-width: 900px
) {

    .gg-language-control {

        position: fixed;

        top: 70px;

        right: 12px;

        z-index: 99990;

        margin: 0;

        background:
            rgba(
                4,
                19,
                27,
                .95
            );

        box-shadow:
            0
            10px
            35px
            rgba(
                0,
                0,
                0,
                .20
            );

    }


    html[dir="rtl"] .gg-language-control {

        right: auto;

        left: 12px;

    }

}


@media (
    max-width: 520px
) {

    .gg-lang-option {

        min-width: 58px;

        padding:
            0
            7px;

        font-size: 8px;

    }

}


/* =================================================================================================
   END GEOGUARDIAN V07.5 FULL WEBSITE I18N
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.6 FULL BILINGUAL
================================================================================================= */


/* -------------------------------------------------------------------------------------------------
   LANGUAGE SWITCH
------------------------------------------------------------------------------------------------- */

.gg-language-control {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 42px;

    padding:
        5px
        7px;

    margin-inline-start: 12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    border-radius: 11px;

    background:
        rgba(
            255,
            255,
            255,
            .035
        );

}


.gg-lang-option {

    height: 31px;

    min-width: 70px;

    padding:
        0
        11px;

    border: 0;

    border-radius: 7px;

    cursor: pointer;

    background: transparent;

    color: #879ca6;

    font-size: 9px;

    font-weight: 700;

}


.gg-lang-option.active {

    color: white;

    background:
        linear-gradient(
            135deg,
            #3b8669,
            #2d725b
        );

}


.gg-lang-separator {

    color:
        rgba(
            255,
            255,
            255,
            .15
        );

}


/* -------------------------------------------------------------------------------------------------
   ARABIC GLOBAL
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] body {

    font-family:
        "Cairo",
        "Tahoma",
        Arial,
        sans-serif !important;

}


/* Main readable Arabic */

html[dir="rtl"] p,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {

    direction: rtl;

}


/* -------------------------------------------------------------------------------------------------
   NAVBAR
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] nav,
html[dir="rtl"] .navbar,
html[dir="rtl"] .nav-container {

    direction: rtl;

}


html[dir="rtl"] .nav-links {

    direction: rtl;

}


html[dir="rtl"] .nav-actions {

    direction: rtl;

}


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

html[dir="rtl"] .hero,
html[dir="rtl"] .hero-content,
html[dir="rtl"] .hero-copy,
html[dir="rtl"] .story-section,
html[dir="rtl"] .story-copy {

    direction: rtl;

    text-align: right;

}


/* -------------------------------------------------------------------------------------------------
   SECTION HEADINGS
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .section-header,
html[dir="rtl"] .section-heading,
html[dir="rtl"] .section-intro {

    direction: rtl;

    text-align: right;

}


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

html[dir="rtl"] .analysis-card,
html[dir="rtl"] .story-card,
html[dir="rtl"] .metric-card,
html[dir="rtl"] .result-card,
html[dir="rtl"] .method-card,
html[dir="rtl"] .theme-card {

    direction: rtl;

    text-align: right;

}


/* -------------------------------------------------------------------------------------------------
   ANALYTICAL VIEWS
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .analysis-detail,
html[dir="rtl"] .analysis-content,
html[dir="rtl"] .analysis-panel {

    direction: rtl;

    text-align: right;

}


/* -------------------------------------------------------------------------------------------------
   METRIC / FEATURE CELLS
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .metric-label,
html[dir="rtl"] .metric-description,
html[dir="rtl"] .mini-stat,
html[dir="rtl"] .feature-value {

    direction: rtl;

    text-align: right;

}


/* -------------------------------------------------------------------------------------------------
   METHODOLOGY
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .methodology,
html[dir="rtl"] .methodology-grid,
html[dir="rtl"] .methodology-timeline,
html[dir="rtl"] .timeline {

    direction: rtl;

}


html[dir="rtl"] .method-card {

    text-align: right;

}


/* -------------------------------------------------------------------------------------------------
   WEBGIS
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .map-sidebar {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] .sidebar-header {

    text-align: right;

}


html[dir="rtl"] .theme-button {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] .theme-button > div {

    text-align: right;

}


html[dir="rtl"] .dataset-selector-panel {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] #datasetSelect {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] .map-floating-title {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] .map-legend-card {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] .legend-row {

    direction: rtl;

}


/* -------------------------------------------------------------------------------------------------
   POPUP
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .gg-query-popup {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] .gg-query-coordinates {

    direction: rtl;

}


/* -------------------------------------------------------------------------------------------------
   LOCATION INTELLIGENCE
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .gg-location-panel {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] .gg-profile-grid {

    direction: rtl;

}


html[dir="rtl"] .gg-profile-row {

    direction: rtl;

}


/* -------------------------------------------------------------------------------------------------
   V07 EXPLANATION
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .v07-theme-info {

    direction: rtl;

    text-align: right;

}


html[dir="rtl"] .v07-info-top {

    direction: rtl;

}


/* -------------------------------------------------------------------------------------------------
   FOOTER / ABOUT
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] footer,
html[dir="rtl"] .footer,
html[dir="rtl"] .about-section,
html[dir="rtl"] .about-copy {

    direction: rtl;

    text-align: right;

}


/* -------------------------------------------------------------------------------------------------
   Keep actual Leaflet coordinate system LTR
------------------------------------------------------------------------------------------------- */

.leaflet-container,
.leaflet-map-pane,
.leaflet-overlay-pane,
.leaflet-control-container {

    direction: ltr !important;

}


/* -------------------------------------------------------------------------------------------------
   Numeric/scientific visual direction
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .metric-value,
html[dir="rtl"] .gg-query-value,
html[dir="rtl"] .gg-profile-card strong {

    unicode-bidi: plaintext;

}


/* -------------------------------------------------------------------------------------------------
   MOBILE
------------------------------------------------------------------------------------------------- */

@media (
    max-width: 900px
) {

    .gg-language-control {

        position: fixed;

        top: 70px;

        right: 12px;

        z-index: 999999;

        margin: 0;

        background:
            rgba(
                4,
                18,
                26,
                .96
            );

    }


    html[dir="rtl"] .gg-language-control {

        right: auto;

        left: 12px;

    }

}


/* =================================================================================================
   END GEOGUARDIAN V07.6 FULL BILINGUAL
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.7 HARD I18N
================================================================================================= */


html[dir="rtl"] body {

    font-family:
        "Cairo",
        "Tahoma",
        Arial,
        sans-serif !important;

}


/* Main content */

html[dir="rtl"] main,
html[dir="rtl"] section,
html[dir="rtl"] article {

    direction: rtl;

}


/* Cards and descriptions */

html[dir="rtl"] .story-card,
html[dir="rtl"] .analysis-card,
html[dir="rtl"] .metric-card,
html[dir="rtl"] .method-card,
html[dir="rtl"] .result-card {

    direction: rtl;

    text-align: right;

}


/* WebGIS */

html[dir="rtl"] .map-sidebar,
html[dir="rtl"] .dataset-selector-panel,
html[dir="rtl"] .theme-button,
html[dir="rtl"] .map-legend-card,
html[dir="rtl"] .gg-location-panel,
html[dir="rtl"] .gg-query-popup {

    direction: rtl;

    text-align: right;

}


/* Arabic paragraph readability */

html[dir="rtl"] p {

    line-height: 1.9;

}


/* Do not reverse actual Leaflet canvas */

.leaflet-container,
.leaflet-map-pane,
.leaflet-overlay-pane,
.leaflet-control-container {

    direction: ltr !important;

}


/* -------------------------------------------------------------------------------------------------
   TRANSLATION AUDIT
   Any English text that remains while Arabic is selected will receive a subtle red outline.
------------------------------------------------------------------------------------------------- */


body.gg-language-ar .gg-i18n-missing {
    outline: none !important;
}



/* =================================================================================================
   END GEOGUARDIAN V07.7 HARD I18N
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.8 FINAL LANGUAGE POLISH
================================================================================================= */


/* Remove translation debugging borders */

.gg-i18n-missing {

    outline: none !important;

}


/* Arabic readability */

html[dir="rtl"] body {

    font-family:
        "Cairo",
        "Tahoma",
        Arial,
        sans-serif !important;

}


html[dir="rtl"] p {

    line-height: 1.9 !important;

}


/* Arabic titles */

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {

    letter-spacing: 0 !important;

}


/* WebGIS interpretation text */

html[dir="rtl"] .v07-info-summary,
html[dir="rtl"] .v07-info-block p,
html[dir="rtl"] .v07-info-warning p {

    font-size: 9px !important;

    line-height: 1.85 !important;

}


/* About text */

html[dir="rtl"] .about-copy,
html[dir="rtl"] .about-section p {

    text-align: right !important;

}


/* Keep scientific numbers LTR */

html[dir="rtl"] .metric-value,
html[dir="rtl"] .stat-value,
html[dir="rtl"] .gg-query-value {

    direction: ltr !important;

    unicode-bidi: isolate !important;

}


/* =================================================================================================
   END GEOGUARDIAN V07.8
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.9 TYPOGRAPHY
================================================================================================= */


/* -------------------------------------------------------------------------------------------------
   WEBGIS THEME ORDER
   Backup CSS order in addition to JavaScript DOM ordering.
------------------------------------------------------------------------------------------------- */

.theme-button[data-theme="landcover"] {
    order: 1 !important;
}

.theme-button[data-theme="change"] {
    order: 2 !important;
}

.theme-button[data-theme="temperature"] {
    order: 3 !important;
}

.theme-button[data-theme="pollution"] {
    order: 4 !important;
}

.theme-button[data-theme="validation"] {
    order: 5 !important;
}

.theme-button[data-theme="scenarios"] {
    order: 6 !important;
}

.theme-button[data-theme="risk"] {
    order: 7 !important;
}


/* -------------------------------------------------------------------------------------------------
   SIDEBAR MAIN THEME TITLES
------------------------------------------------------------------------------------------------- */

.theme-button {

    min-height: 58px !important;

}


.theme-button strong,
.theme-button h3,
.theme-button h4,
.theme-button .theme-title {

    font-size: 12px !important;

    font-weight: 700 !important;

    line-height: 1.45 !important;

    color: #b8d1dc !important;

}


.theme-button.active strong,
.theme-button.active h3,
.theme-button.active h4,
.theme-button.active .theme-title {

    color: #ffffff !important;

}


/* -------------------------------------------------------------------------------------------------
   SIDEBAR SMALL SUBTITLES
------------------------------------------------------------------------------------------------- */

.theme-button small,
.theme-button .theme-subtitle,
.theme-button .theme-meta {

    font-size: 8px !important;

    font-weight: 500 !important;

    line-height: 1.5 !important;

    color: #6f9aab !important;

    opacity: 1 !important;

}


.theme-button.active small,
.theme-button.active .theme-subtitle,
.theme-button.active .theme-meta {

    color: #84acb7 !important;

}


/* -------------------------------------------------------------------------------------------------
   THEME NUMBER
------------------------------------------------------------------------------------------------- */

.theme-number,
.theme-index,
.theme-id,
.theme-code,
.theme-button [data-theme-number] {

    font-size: 8px !important;

    font-weight: 800 !important;

    color: #80ae9a !important;

}


/* -------------------------------------------------------------------------------------------------
   DATASET PANEL
------------------------------------------------------------------------------------------------- */

.dataset-selector-panel {

    font-size: 9px !important;

}


.dataset-selector-panel small,
.dataset-selector-panel label {

    font-size: 8px !important;

    font-weight: 600 !important;

    color: #7894a0 !important;

}


#datasetSelect {

    font-size: 10px !important;

    font-weight: 600 !important;

    color: #edf5f3 !important;

}


/* -------------------------------------------------------------------------------------------------
   CURRENT VIEW
------------------------------------------------------------------------------------------------- */

.current-view,
.current-view p,
.theme-description,
#themeDescription {

    font-size: 9px !important;

    line-height: 1.8 !important;

    color: #8ca8b3 !important;

}


/* -------------------------------------------------------------------------------------------------
   V07 INTERPRETATION GUIDE
------------------------------------------------------------------------------------------------- */

.v07-info-kicker {

    font-size: 7px !important;

    font-weight: 800 !important;

    letter-spacing: .8px !important;

    color: #7195a2 !important;

}


.v07-theme-info h4 {

    font-size: 11px !important;

    font-weight: 750 !important;

    color: #f0f5f3 !important;

}


.v07-method-badge {

    font-size: 8px !important;

    font-weight: 650 !important;

}


.v07-info-summary {

    font-size: 9px !important;

    line-height: 1.85 !important;

    color: #9aafb7 !important;

}


.v07-info-block > span {

    font-size: 7px !important;

    font-weight: 800 !important;

    color: #7294a0 !important;

}


.v07-info-block p {

    font-size: 9px !important;

    line-height: 1.8 !important;

    color: #98abb2 !important;

}


.v07-info-warning p {

    font-size: 8.5px !important;

    line-height: 1.8 !important;

    color: #a8aaa2 !important;

}


/* -------------------------------------------------------------------------------------------------
   LEGEND
------------------------------------------------------------------------------------------------- */

.map-legend-card {

    font-size: 9px !important;

}


.map-legend-card .legend-title,
.map-legend-card strong {

    font-size: 9px !important;

    font-weight: 700 !important;

    color: #dce8e4 !important;

}


.map-legend-card small,
.map-legend-card span,
.legend-row {

    font-size: 8px !important;

    line-height: 1.55 !important;

    color: #a5b9bf !important;

}


/* -------------------------------------------------------------------------------------------------
   MAP FLOATING TITLE
------------------------------------------------------------------------------------------------- */

.map-floating-title small {

    font-size: 7px !important;

    color: #81a0ab !important;

}


.map-floating-title strong {

    font-size: 10px !important;

    font-weight: 750 !important;

}


/* -------------------------------------------------------------------------------------------------
   QUERY POPUP
------------------------------------------------------------------------------------------------- */

.leaflet-popup-content {

    font-size: 11px !important;

}


.gg-query-popup h3,
.gg-query-popup h4 {

    font-size: 16px !important;

    font-weight: 750 !important;

}


.gg-query-popup small,
.gg-query-popup .gg-query-label {

    font-size: 9px !important;

    color: #788c8b !important;

}


.gg-query-popup .gg-query-value {

    font-size: 12px !important;

    font-weight: 700 !important;

}


/* -------------------------------------------------------------------------------------------------
   LOCATION INTELLIGENCE
------------------------------------------------------------------------------------------------- */

.gg-location-panel {

    font-size: 9px !important;

}


.gg-location-panel small {

    font-size: 8px !important;

}


.gg-location-panel strong {

    font-size: 10px !important;

}


/* -------------------------------------------------------------------------------------------------
   GENERAL SMALL TEXT
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .eyebrow,
html[dir="rtl"] .kicker,
html[dir="rtl"] .card-label,
html[dir="rtl"] .metric-label {

    font-weight: 700 !important;

}


/* -------------------------------------------------------------------------------------------------
   DIRECTIONAL SYMBOLS
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .urban-arrow,
html[dir="rtl"] [data-urban-arrow] {

    transform: scaleX(-1);

}


/* -------------------------------------------------------------------------------------------------
   MOBILE
------------------------------------------------------------------------------------------------- */

@media (
    max-width: 700px
) {

    .theme-button strong,
    .theme-button .theme-title {

        font-size: 11px !important;

    }


    .theme-button small,
    .theme-button .theme-subtitle {

        font-size: 8px !important;

    }


    .v07-info-summary,
    .v07-info-block p {

        font-size: 8.5px !important;

    }

}


/* =================================================================================================
   END GEOGUARDIAN V07.9 TYPOGRAPHY
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.10 SAFE WEBGIS
================================================================================================= */


/* -------------------------------------------------------------------------------------------------
   CRITICAL:
   Never reverse the actual map interface.
------------------------------------------------------------------------------------------------- */

.leaflet-container,
.leaflet-map-pane,
.leaflet-overlay-pane,
.leaflet-marker-pane,
.leaflet-popup-pane,
.leaflet-control-container {

    direction: ltr !important;

}


/* -------------------------------------------------------------------------------------------------
   WEBGIS SIDEBAR
------------------------------------------------------------------------------------------------- */

.map-sidebar {

    display: flex !important;

    flex-direction: column !important;

}


/* If themes have a dedicated wrapper */

.theme-list,
.analysis-theme-list,
.map-theme-list {

    display: flex !important;

    flex-direction: column !important;

}


/* -------------------------------------------------------------------------------------------------
   ORDER 01 -> 07
   CSS only. NO DOM movement.
------------------------------------------------------------------------------------------------- */

.theme-button[data-theme="landcover"] {

    order: 1 !important;

}


.theme-button[data-theme="change"] {

    order: 2 !important;

}


.theme-button[data-theme="temperature"] {

    order: 3 !important;

}


.theme-button[data-theme="pollution"] {

    order: 4 !important;

}


.theme-button[data-theme="validation"] {

    order: 5 !important;

}


.theme-button[data-theme="scenarios"] {

    order: 6 !important;

}


.theme-button[data-theme="risk"] {

    order: 7 !important;

}


/* -------------------------------------------------------------------------------------------------
   KEEP THEME BUTTONS CLICKABLE
------------------------------------------------------------------------------------------------- */

.theme-button {

    position: relative !important;

    z-index: 5 !important;

    pointer-events: auto !important;

    cursor: pointer !important;

}


.theme-button * {

    pointer-events: none;

}


/* Dataset selector must remain clickable */

.dataset-selector-panel,
#datasetSelect {

    position: relative;

    z-index: 6;

    pointer-events: auto !important;

}


/* -------------------------------------------------------------------------------------------------
   THEME TITLES
------------------------------------------------------------------------------------------------- */

.theme-button {

    min-height: 62px !important;

}


.theme-button strong,
.theme-button h3,
.theme-button h4,
.theme-button .theme-title {

    color: #bcd2db !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    line-height: 1.5 !important;

}


.theme-button.active strong,
.theme-button.active h3,
.theme-button.active h4,
.theme-button.active .theme-title {

    color: #ffffff !important;

}


/* -------------------------------------------------------------------------------------------------
   THEME SMALL TEXT
------------------------------------------------------------------------------------------------- */

.theme-button small,
.theme-button .theme-subtitle,
.theme-button .theme-meta {

    color: #75a1b2 !important;

    font-size: 8.5px !important;

    font-weight: 500 !important;

    line-height: 1.5 !important;

    opacity: 1 !important;

}


/* -------------------------------------------------------------------------------------------------
   NUMBERS 01..07
------------------------------------------------------------------------------------------------- */

.theme-number,
.theme-index,
.theme-id,
.theme-code,
.theme-button [data-theme-number] {

    color: #7fae9a !important;

    font-size: 8px !important;

    font-weight: 800 !important;

}


/* -------------------------------------------------------------------------------------------------
   TEMPERATURE LEGEND
   DO NOT MIRROR SCIENTIFIC COLOR SCALE
------------------------------------------------------------------------------------------------- */

.gg-fixed-scientific-direction {

    direction: ltr !important;

    flex-direction: row !important;

}


/*
Gradient stays:
BLUE -> CYAN -> YELLOW -> ORANGE -> RED

Arabic changes text only.
*/

.gg-temperature-gradient-fixed {

    direction: ltr !important;

    transform: none !important;

}


/* Common thermal legend wrappers */

.thermal-legend,
.temperature-legend,
.lst-legend {

    direction: ltr !important;

}


.thermal-legend *,
.temperature-legend *,
.lst-legend * {

    unicode-bidi: isolate;

}


/* -------------------------------------------------------------------------------------------------
   MAP LEGEND
------------------------------------------------------------------------------------------------- */

.map-legend-card {

    font-size: 9px !important;

}


.map-legend-card .legend-title,
.map-legend-card strong {

    color: #dce8e5 !important;

    font-size: 9.5px !important;

    font-weight: 700 !important;

}


.map-legend-card small,
.map-legend-card span,
.legend-row {

    color: #a4b8bf !important;

    font-size: 8.5px !important;

    line-height: 1.55 !important;

}


/* -------------------------------------------------------------------------------------------------
   LOCATION INTELLIGENCE
------------------------------------------------------------------------------------------------- */

.gg-location-panel {

    font-size: 9px !important;

}


.gg-location-panel h3,
.gg-location-panel h4 {

    color: #edf4f1 !important;

    font-size: 17px !important;

    font-weight: 750 !important;

}


.gg-location-panel small,
.gg-location-panel .label {

    color: #829da7 !important;

    font-size: 8.5px !important;

}


.gg-location-panel strong {

    color: #edf4f1 !important;

    font-size: 10.5px !important;

}


/* -------------------------------------------------------------------------------------------------
   POPUP
------------------------------------------------------------------------------------------------- */

.leaflet-popup-content {

    font-size: 11px !important;

}


.gg-query-popup h3,
.gg-query-popup h4 {

    font-size: 17px !important;

    font-weight: 750 !important;

}


.gg-query-popup small {

    font-size: 9px !important;

}


/* -------------------------------------------------------------------------------------------------
   INTERPRETATION GUIDE
------------------------------------------------------------------------------------------------- */

.v07-theme-info h4 {

    font-size: 12px !important;

    line-height: 1.55 !important;

}


.v07-info-summary {

    color: #9fb2b9 !important;

    font-size: 9px !important;

    line-height: 1.9 !important;

}


.v07-info-block > span {

    font-size: 7.5px !important;

    font-weight: 800 !important;

}


.v07-info-block p {

    color: #9bafb7 !important;

    font-size: 9px !important;

    line-height: 1.85 !important;

}


.v07-info-warning p {

    font-size: 8.5px !important;

    line-height: 1.8 !important;

}


/* -------------------------------------------------------------------------------------------------
   ARABIC SIDEBAR
------------------------------------------------------------------------------------------------- */

html[dir="rtl"] .map-sidebar,
html[dir="rtl"] .theme-button,
html[dir="rtl"] .dataset-selector-panel {

    direction: rtl;

    text-align: right;

}


/* But numeric/scientific strings stay stable */

html[dir="rtl"] .theme-button small,
html[dir="rtl"] .map-legend-card,
html[dir="rtl"] .gg-location-panel {

    unicode-bidi: plaintext;

}


/* =================================================================================================
   END GEOGUARDIAN V07.10 SAFE WEBGIS
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.11 GUIDE FIX
================================================================================================= */


/* -------------------------------------------------------------------------------------------------
   REMOVE BOTTOM-LEFT INSPECT WIDGET
------------------------------------------------------------------------------------------------- */

#v07ClickGuide {

    display: none !important;

    visibility: hidden !important;

    pointer-events: none !important;

}


/* -------------------------------------------------------------------------------------------------
   INTERPRETATION GUIDE
------------------------------------------------------------------------------------------------- */

.v07-theme-info {

    direction: inherit;

}


.v07-info-top {

    display: flex !important;

    align-items: flex-start !important;

    justify-content: space-between !important;

    gap: 12px !important;

}


.v07-info-heading {

    min-width: 0 !important;

    flex: 1 !important;

}


.v07-info-kicker {

    margin-bottom: 7px !important;

    color: #78a7b4 !important;

    font-size: 8px !important;

    font-weight: 800 !important;

    letter-spacing: .7px !important;

    line-height: 1.5 !important;

}


html[dir="rtl"] .v07-info-kicker {

    letter-spacing: 0 !important;

}


.v07-theme-info h4 {

    margin:
        0
        0
        9px !important;

    color: #f0f7f4 !important;

    font-size: 15px !important;

    font-weight: 750 !important;

    line-height: 1.5 !important;

}


.v07-info-number {

    width: 34px !important;

    height: 34px !important;

    min-width: 34px !important;

    display: grid !important;

    place-items: center !important;

    border-radius: 9px !important;

    background:
        rgba(
            76,
            139,
            112,
            .12
        ) !important;

    color: #7cad98 !important;

    font-size: 8px !important;

    font-weight: 800 !important;

}


.v07-method-badge {

    display: inline-flex !important;

    align-items: center !important;

    min-height: 27px !important;

    padding:
        0
        10px !important;

    border-radius: 999px !important;

    background:
        rgba(
            203,
            137,
            41,
            .10
        ) !important;

    color: #d7a04b !important;

    font-size: 8px !important;

    font-weight: 700 !important;

}


.v07-info-summary {

    margin:
        17px
        0
        18px !important;

    color: #a7bdc4 !important;

    font-size: 10px !important;

    font-weight: 450 !important;

    line-height: 1.9 !important;

}


.v07-info-block {

    margin-top: 16px !important;

}


.v07-info-block > span {

    display: block !important;

    margin-bottom: 6px !important;

    color: #79a7b4 !important;

    font-size: 8px !important;

    font-weight: 800 !important;

    line-height: 1.5 !important;

}


.v07-info-block p {

    margin: 0 !important;

    color: #9fb5bd !important;

    font-size: 9.5px !important;

    font-weight: 450 !important;

    line-height: 1.85 !important;

}


.v07-info-warning {

    position: relative !important;

    display: grid !important;

    grid-template-columns:
        1fr
        22px !important;

    gap: 8px !important;

    margin-top: 18px !important;

    padding:
        13px
        12px !important;

    border-inline-start:
        2px solid
        #d9b548 !important;

    background:
        rgba(
            217,
            181,
            72,
            .045
        ) !important;

}


.v07-info-warning p {

    margin: 0 !important;

    color: #aeb8b6 !important;

    font-size: 9px !important;

    line-height: 1.85 !important;

}


.v07-warning-symbol {

    width: 20px !important;

    height: 20px !important;

    display: grid !important;

    place-items: center !important;

    border-radius: 50% !important;

    background:
        rgba(
            215,
            178,
            64,
            .13
        ) !important;

    color: #d8b64a !important;

    font-size: 8px !important;

    font-weight: 800 !important;

}


/* -------------------------------------------------------------------------------------------------
   ENGLISH GUIDE
------------------------------------------------------------------------------------------------- */

.v07-theme-info[dir="ltr"] {

    text-align: left !important;

}


.v07-theme-info[dir="ltr"] .v07-info-top {

    direction: ltr !important;

}


.v07-theme-info[dir="ltr"] .v07-info-warning {

    grid-template-columns:
        22px
        1fr !important;

}


.v07-theme-info[dir="ltr"] .v07-warning-symbol {

    grid-column: 1 !important;

    grid-row: 1 !important;

}


.v07-theme-info[dir="ltr"] .v07-info-warning p {

    grid-column: 2 !important;

    grid-row: 1 !important;

}


/* -------------------------------------------------------------------------------------------------
   ARABIC GUIDE
------------------------------------------------------------------------------------------------- */

.v07-theme-info[dir="rtl"] {

    text-align: right !important;

}


.v07-theme-info[dir="rtl"] .v07-info-top {

    direction: rtl !important;

}


.v07-theme-info[dir="rtl"] .v07-info-warning {

    direction: rtl !important;

}


/* =================================================================================================
   END GEOGUARDIAN V07.11 GUIDE FIX
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.12 GUIDE NOTE FIX
================================================================================================= */


/* -------------------------------------------------------------------------------------------------
   MAIN GUIDE WIDTH
------------------------------------------------------------------------------------------------- */

.v07-theme-info {

    width: 100% !important;

    max-width: none !important;

    box-sizing: border-box !important;

    overflow: visible !important;

}


/* -------------------------------------------------------------------------------------------------
   SCIENTIFIC NOTE
------------------------------------------------------------------------------------------------- */

.v07-info-warning {

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    display: flex !important;

    align-items: flex-start !important;

    gap: 12px !important;

    margin-top: 18px !important;

    padding:
        14px
        14px !important;

    border-inline-start:
        3px solid
        #d6b343 !important;

    border-radius:
        0
        8px
        8px
        0 !important;

    background:
        rgba(
            215,
            180,
            70,
            .055
        ) !important;

}


/* -------------------------------------------------------------------------------------------------
   ARABIC WARNING
------------------------------------------------------------------------------------------------- */

.v07-theme-info[dir="rtl"] .v07-info-warning {

    direction: rtl !important;

    flex-direction: row !important;

    text-align: right !important;

}


.v07-theme-info[dir="rtl"] .v07-info-warning p {

    direction: rtl !important;

    text-align: right !important;

}


/* -------------------------------------------------------------------------------------------------
   ENGLISH WARNING
------------------------------------------------------------------------------------------------- */

.v07-theme-info[dir="ltr"] .v07-info-warning {

    direction: ltr !important;

    flex-direction: row !important;

    text-align: left !important;

}


.v07-theme-info[dir="ltr"] .v07-info-warning p {

    direction: ltr !important;

    text-align: left !important;

}


/* -------------------------------------------------------------------------------------------------
   WARNING TEXT
------------------------------------------------------------------------------------------------- */

.v07-info-warning p {

    flex: 1 1 auto !important;

    min-width: 0 !important;

    width: auto !important;

    max-width: none !important;

    margin: 0 !important;

    color: #b6c0bd !important;

    font-size: 10px !important;

    font-weight: 450 !important;

    line-height: 1.95 !important;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: break-word !important;

}


/* -------------------------------------------------------------------------------------------------
   WARNING ICON
------------------------------------------------------------------------------------------------- */

.v07-warning-symbol {

    flex:
        0
        0
        22px !important;

    width: 22px !important;

    height: 22px !important;

    min-width: 22px !important;

    display: grid !important;

    place-items: center !important;

    border-radius: 50% !important;

    background:
        rgba(
            215,
            180,
            70,
            .14
        ) !important;

    color: #d8b548 !important;

    font-size: 9px !important;

    font-weight: 800 !important;

}


/* -------------------------------------------------------------------------------------------------
   GUIDE PARAGRAPHS
------------------------------------------------------------------------------------------------- */

.v07-info-summary,
.v07-info-block p {

    width: 100% !important;

    max-width: none !important;

    min-width: 0 !important;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: break-word !important;

}


/* -------------------------------------------------------------------------------------------------
   ARABIC TEXT SIZE
------------------------------------------------------------------------------------------------- */

.v07-theme-info[dir="rtl"] .v07-info-summary {

    font-size: 10px !important;

    line-height: 2 !important;

}


.v07-theme-info[dir="rtl"] .v07-info-block p {

    font-size: 10px !important;

    line-height: 1.95 !important;

}


.v07-theme-info[dir="rtl"] .v07-info-block > span {

    font-size: 8.5px !important;

    font-weight: 800 !important;

}


/* -------------------------------------------------------------------------------------------------
   MOBILE
------------------------------------------------------------------------------------------------- */

@media (
    max-width: 700px
) {

    .v07-info-warning {

        gap: 9px !important;

        padding:
            12px
            11px !important;

    }


    .v07-info-warning p {

        font-size: 9.5px !important;

        line-height: 1.9 !important;

    }

}


/* =================================================================================================
   END GEOGUARDIAN V07.12 GUIDE NOTE FIX
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.20 TYPOGRAPHY RESTORED

   Typography overrides from V07.13 through V07.19 were removed.
   Website typography is now restored to the state before the font-size experiments.

   V07.12 and earlier functional/layout fixes remain active.
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.21 URBAN TRANSITION GRAPHIC
================================================================================================= */

.gg-urban-transition-graphic {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

}


.gg-transition-line {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 18px !important;

    width: 100% !important;

    direction: ltr !important;

}


.gg-transition-agri,
.gg-transition-built {

    color: #83a7b5 !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    white-space: nowrap !important;

}


.gg-transition-arrow {

    color: #ff7a2a !important;

    font-size: 34px !important;

    font-weight: 400 !important;

    line-height: 1 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-width: 45px !important;

}


/* Arabic text stays readable while graphic positions remain fixed */

html[dir="rtl"] .gg-transition-agri,
html[dir="rtl"] .gg-transition-built {

    direction: rtl !important;

}


/* =================================================================================================
   END GEOGUARDIAN V07.21 URBAN TRANSITION GRAPHIC
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.23 MOBILE FINAL FIX
================================================================================================= */


/* -------------------------------------------------------------------------------------------------
   GLOBAL SAFETY
------------------------------------------------------------------------------------------------- */

html,
body {

    max-width: 100% !important;

    overflow-x: hidden !important;

}

img,
svg,
canvas,
video {

    max-width: 100% !important;

}


/* =================================================================================================
   MOBILE + TABLET
================================================================================================= */

@media (max-width: 900px) {


    /* =============================================================================================
       GLOBAL
    ============================================================================================= */

    html {

        font-size: 15px !important;

    }

    body {

        width: 100% !important;

        min-width: 0 !important;

        overflow-x: hidden !important;

    }

    body *,
    body *::before,
    body *::after {

        box-sizing: border-box !important;

    }


    /* =============================================================================================
       MAIN CONTAINERS
    ============================================================================================= */

    .container,
    .section-inner,
    .section-container,
    .content-container {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        padding-left: 18px !important;

        padding-right: 18px !important;

    }


    section {

        width: 100% !important;

        max-width: 100% !important;

        overflow: hidden !important;

    }


    /* =============================================================================================
       NAVBAR
    ============================================================================================= */

    nav,
    .navbar {

        min-height: 72px !important;

        padding:
            9px
            12px !important;

    }


    .nav-container {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        padding: 0 !important;

    }


    .nav-brand,
    .brand {

        min-width: 0 !important;

        flex:
            1
            1
            auto !important;

    }


    .nav-brand strong,
    .brand-title {

        font-size: 14px !important;

        line-height: 1.3 !important;

        white-space: nowrap !important;

    }


    .nav-brand small,
    .brand-subtitle {

        font-size: 9px !important;

        line-height: 1.3 !important;

        white-space: nowrap !important;

    }


    .nav-links {

        position: fixed !important;

        z-index: 999999 !important;

        top: 72px !important;

        left: 12px !important;

        right: 12px !important;

        display: none !important;

        flex-direction: column !important;

        gap: 3px !important;

        padding: 10px !important;

        border-radius: 14px !important;

        background:
            rgba(
                5,
                21,
                30,
                .985
            ) !important;

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                .09
            ) !important;

        box-shadow:
            0
            18px
            50px
            rgba(
                0,
                0,
                0,
                .30
            ) !important;

    }


    body.gg-mobile-menu-open .nav-links {

        display: flex !important;

    }


    .nav-links a {

        width: 100% !important;

        padding:
            11px
            12px !important;

        font-size: 12px !important;

        border-radius: 8px !important;

    }


    .gg-mobile-menu-button {

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        flex:
            0
            0
            42px !important;

        width: 42px !important;

        height: 42px !important;

        padding: 9px !important;

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                .12
            ) !important;

        border-radius: 10px !important;

        background:
            rgba(
                255,
                255,
                255,
                .035
            ) !important;

    }


    .gg-mobile-menu-button span {

        display: block !important;

        width: 20px !important;

        height: 2px !important;

        margin: 2.5px 0 !important;

        border-radius: 5px !important;

        background: #dfe9e6 !important;

    }


    .gg-language-control {

        flex:
            0
            0
            auto !important;

        position: static !important;

        margin: 0 !important;

    }


    .gg-lang-option {

        min-width: 50px !important;

        height: 31px !important;

        padding:
            0
            8px !important;

        font-size: 9px !important;

    }


    /* =============================================================================================
       SECTION TITLES
    ============================================================================================= */

    .section-heading {

        width: 100% !important;

        max-width: 100% !important;

    }


    section h2,
    .section-title,
    .section-heading h2 {

        max-width: 100% !important;

        font-size:
            clamp(
                29px,
                8vw,
                40px
            ) !important;

        line-height: 1.18 !important;

        overflow-wrap: normal !important;

        word-break: normal !important;

    }


    .section-intro,
    .section-description,
    .section-heading p {

        max-width: 100% !important;

        font-size: 13px !important;

        line-height: 1.8 !important;

    }


    /* =============================================================================================
       PROJECT / STORY CARDS
    ============================================================================================= */

    .story-grid,
    .cards-grid,
    .features-grid,
    .results-grid,
    .metrics-grid,
    .methodology-grid {

        display: grid !important;

        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;

        gap: 16px !important;

    }


    .story-card,
    .theme-card,
    .feature-card,
    .metric-card,
    .result-card,
    .method-card {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        min-height: 0 !important;

        height: auto !important;

        padding:
            26px
            24px !important;

    }


    .story-card h3,
    .theme-card h3,
    .feature-card h3 {

        font-size: 22px !important;

        line-height: 1.35 !important;

        margin-bottom: 14px !important;

    }


    .story-card p,
    .theme-card p,
    .feature-card p {

        font-size: 13px !important;

        line-height: 1.75 !important;

        margin-bottom: 14px !important;

    }


    /* Fix footer/meta overlap */

    .story-card .story-meta,
    .story-card .card-meta,
    .story-card .meta,
    .analysis-card .story-meta,
    .analysis-card .card-meta,
    .analysis-card .meta {

        position: static !important;

        inset: auto !important;

        width: 100% !important;

        margin-top: 14px !important;

        padding-top: 10px !important;

        font-size: 9px !important;

        line-height: 1.4 !important;

    }


    /* =============================================================================================
       ANALYTICAL STORY CARDS
    ============================================================================================= */

    #maps .section-inner {

        padding-left: 16px !important;

        padding-right: 16px !important;

    }


    #maps .analysis-card,
    .analysis-card {

        display: grid !important;

        grid-template-columns:
            minmax(
                0,
                1fr
            ) !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        min-height: 0 !important;

        margin:
            0
            0
            16px !important;

        padding:
            24px
            20px !important;

        gap: 20px !important;

        overflow: hidden !important;

    }


    .analysis-card > * {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        position: relative !important;

        left: auto !important;

        right: auto !important;

        top: auto !important;

        bottom: auto !important;

    }


    .analysis-card h2,
    .analysis-card h3 {

        font-size: 22px !important;

        line-height: 1.35 !important;

        margin-bottom: 12px !important;

    }


    .analysis-card p {

        font-size: 13px !important;

        line-height: 1.75 !important;

        margin-bottom: 12px !important;

    }


    .analysis-visual {

        min-height: 230px !important;

        height: auto !important;

    }


    /* Prevent duplicated graphic looking oversized */

    .analysis-card .gg-urban-transition-graphic {

        min-height: 200px !important;

        height: auto !important;

    }


    /* =============================================================================================
       RTL TEXT
    ============================================================================================= */

    html[dir="rtl"] .story-card,
    html[dir="rtl"] .analysis-card,
    html[dir="rtl"] .metric-card,
    html[dir="rtl"] .result-card,
    html[dir="rtl"] .method-card {

        direction: rtl !important;

        text-align: right !important;

    }


    html[dir="rtl"] p,
    html[dir="rtl"] h1,
    html[dir="rtl"] h2,
    html[dir="rtl"] h3,
    html[dir="rtl"] h4 {

        word-break: normal !important;

        overflow-wrap: break-word !important;

    }


    /* =============================================================================================
       WEBGIS
    ============================================================================================= */

    #webgis {

        width: 100% !important;

        max-width: 100% !important;

        overflow: hidden !important;

    }


    .webgis-layout,
    .webgis-container,
    .map-explorer-layout,
    .map-layout {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        min-height: 0 !important;

        overflow: visible !important;

    }


    /* =============================================================================================
       WEBGIS SIDEBAR
    ============================================================================================= */

    .map-sidebar {

        order: 1 !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        max-height: none !important;

        padding:
            18px
            16px !important;

        overflow: visible !important;

    }


    .sidebar-header h2,
    .sidebar-header h3 {

        font-size: 24px !important;

        line-height: 1.35 !important;

    }


    /* =============================================================================================
       THEME SCROLLER
       Keep spatial scrolling LTR even on Arabic.
    ============================================================================================= */

    .theme-list,
    .analysis-theme-list,
    .map-theme-list {

        direction: ltr !important;

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        gap: 9px !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        padding:
            3px
            2px
            12px !important;

        overflow-x: auto !important;

        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch !important;

        scroll-snap-type:
            x
            proximity !important;

    }


    .theme-button {

        flex:
            0
            0
            168px !important;

        width: 168px !important;

        min-width: 168px !important;

        max-width: 168px !important;

        min-height: 82px !important;

        padding:
            11px
            12px !important;

        scroll-snap-align: start !important;

    }


    html[dir="rtl"] .theme-button {

        direction: rtl !important;

        text-align: right !important;

    }


    html[dir="ltr"] .theme-button {

        direction: ltr !important;

        text-align: left !important;

    }


    .theme-button strong,
    .theme-button .theme-title {

        font-size: 12px !important;

        line-height: 1.45 !important;

    }


    .theme-button small,
    .theme-button .theme-subtitle,
    .theme-button .theme-meta {

        font-size: 9px !important;

        line-height: 1.4 !important;

    }


    /* =============================================================================================
       DATASET
    ============================================================================================= */

    .dataset-selector-panel {

        width: 100% !important;

        max-width: 100% !important;

        margin-top: 12px !important;

        padding:
            14px !important;

    }


    #datasetSelect {

        width: 100% !important;

        min-height: 44px !important;

        font-size: 12px !important;

    }


    /* =============================================================================================
       CURRENT VIEW / OPACITY
    ============================================================================================= */

    .current-view,
    .theme-description,
    #themeDescription {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        font-size: 11px !important;

        line-height: 1.8 !important;

        white-space: normal !important;

        overflow: visible !important;

        word-break: normal !important;

        overflow-wrap: break-word !important;

    }


    /* =============================================================================================
       MAP
    ============================================================================================= */

    .map-wrapper,
    .map-panel,
    .map-stage,
    .map-container-wrapper {

        order: 2 !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        overflow: hidden !important;

    }


    #map,
    .leaflet-container {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: 520px !important;

        min-height: 520px !important;

        max-height: none !important;

    }


    .leaflet-map-pane {

        width: 100% !important;

    }


    /* =============================================================================================
       MAP TITLE
    ============================================================================================= */

    .map-floating-title {

        top: 12px !important;

        max-width:
            calc(
                100%
                -
                90px
            ) !important;

        padding:
            9px
            11px !important;

    }


    html[dir="ltr"] .map-floating-title {

        left: 12px !important;

        right: auto !important;

    }


    html[dir="rtl"] .map-floating-title {

        right: 12px !important;

        left: auto !important;

        text-align: right !important;

    }


    /* =============================================================================================
       MAP LEGEND
    ============================================================================================= */

    .map-legend-card {

        max-width: 180px !important;

        max-height: 250px !important;

        overflow-y: auto !important;

        padding: 10px !important;

    }


    .map-legend-card .legend-title,
    .map-legend-card strong {

        font-size: 10px !important;

    }


    .map-legend-card span,
    .map-legend-card small,
    .legend-row {

        font-size: 9px !important;

    }


    /* =============================================================================================
       LOCATION INTELLIGENCE
    ============================================================================================= */

    .gg-location-panel {

        position: static !important;

        order: 3 !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        max-height: none !important;

        margin: 0 !important;

        padding:
            20px
            16px !important;

        overflow: visible !important;

        border-radius: 0 !important;

    }


    .gg-location-panel h3,
    .gg-location-panel h4 {

        font-size: 19px !important;

    }


    .gg-location-panel small,
    .gg-location-panel .label {

        font-size: 10px !important;

    }


    .gg-location-panel strong {

        font-size: 12px !important;

    }


    /* =============================================================================================
       INTERPRETATION GUIDE
    ============================================================================================= */

    .v07-theme-info {

        position: static !important;

        order: 4 !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        max-height: none !important;

        padding:
            22px
            18px !important;

        margin: 0 !important;

        overflow: visible !important;

    }


    .v07-theme-info h4 {

        font-size: 19px !important;

        line-height: 1.45 !important;

    }


    .v07-info-kicker {

        font-size: 9px !important;

    }


    .v07-method-badge {

        font-size: 9px !important;

    }


    .v07-info-summary {

        font-size: 12px !important;

        line-height: 1.9 !important;

        width: 100% !important;

    }


    .v07-info-block > span {

        font-size: 10px !important;

        line-height: 1.5 !important;

    }


    .v07-info-block p {

        width: 100% !important;

        font-size: 12px !important;

        line-height: 1.9 !important;

        white-space: normal !important;

        word-break: normal !important;

        overflow-wrap: break-word !important;

    }


    .v07-info-warning {

        width: 100% !important;

        max-width: 100% !important;

    }


    .v07-info-warning p {

        width: auto !important;

        min-width: 0 !important;

        font-size: 11.5px !important;

        line-height: 1.9 !important;

        word-break: normal !important;

        overflow-wrap: break-word !important;

    }


    /* =============================================================================================
       POPUP
    ============================================================================================= */

    .leaflet-popup {

        max-width:
            calc(
                100vw
                -
                30px
            ) !important;

    }


    .leaflet-popup-content-wrapper {

        max-width:
            calc(
                100vw
                -
                30px
            ) !important;

        border-radius: 14px !important;

    }


    .leaflet-popup-content {

        width:
            min(
                300px,
                calc(
                    100vw
                    -
                    65px
                )
            ) !important;

        max-width: 100% !important;

        margin:
            15px !important;

        font-size: 12px !important;

    }


    .gg-query-popup h3,
    .gg-query-popup h4 {

        font-size: 19px !important;

    }


    /* =============================================================================================
       NOTE BELOW WEBGIS
    ============================================================================================= */

    #webgis .note,
    #webgis .webgis-note,
    .webgis-section .note {

        width: 100% !important;

        max-width: 100% !important;

        padding:
            14px
            16px !important;

        font-size: 10px !important;

        line-height: 1.75 !important;

    }

}


/* =================================================================================================
   PHONE 600PX
================================================================================================= */

@media (max-width: 600px) {


    .container,
    .section-inner,
    .section-container,
    .content-container {

        padding-left: 14px !important;

        padding-right: 14px !important;

    }


    .story-card,
    .analysis-card,
    .metric-card,
    .result-card,
    .method-card {

        padding:
            22px
            18px !important;

    }


    .story-card h3,
    .analysis-card h3 {

        font-size: 20px !important;

    }


    .story-card p,
    .analysis-card p {

        font-size: 12.5px !important;

    }


    .theme-button {

        flex-basis: 155px !important;

        width: 155px !important;

        min-width: 155px !important;

        max-width: 155px !important;

    }


    #map,
    .leaflet-container {

        height: 470px !important;

        min-height: 470px !important;

    }


    .gg-profile-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;

    }

}


/* =================================================================================================
   VERY SMALL PHONE
================================================================================================= */

@media (max-width: 420px) {


    nav,
    .navbar {

        padding:
            8px
            9px !important;

    }


    .nav-brand strong,
    .brand-title {

        font-size: 13px !important;

    }


    .nav-brand small,
    .brand-subtitle {

        font-size: 8px !important;

    }


    .gg-lang-option {

        min-width: 45px !important;

        padding:
            0
            5px !important;

        font-size: 8px !important;

    }


    .theme-button {

        flex-basis: 148px !important;

        width: 148px !important;

        min-width: 148px !important;

        max-width: 148px !important;

    }


    #map,
    .leaflet-container {

        height: 450px !important;

        min-height: 450px !important;

    }


    .v07-theme-info {

        padding:
            20px
            16px !important;

    }

}


/* =================================================================================================
   END GEOGUARDIAN V07.23 MOBILE FINAL FIX
================================================================================================= */



/* =================================================================================================
   GEOGUARDIAN V07.29 NATIVE MOBILE SELECT
================================================================================================= */

@media (max-width: 900px) {


    /* ---------------------------------------------------------------------------------------------
       RESTORE ORIGINAL SELECT
    --------------------------------------------------------------------------------------------- */

    #datasetSelect {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;

        min-height: 50px !important;

        margin-top: 8px !important;

        padding:
            0
            42px
            0
            14px !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        clip: auto !important;

        clip-path: none !important;

        overflow: visible !important;

        appearance: auto !important;

        -webkit-appearance: menulist !important;

        border:
            1px solid
            rgba(
                77,
                148,
                127,
                .28
            ) !important;

        border-radius:
            10px !important;

        background:
            #0b2a39 !important;

        color:
            #eef5f3 !important;

        font-family:
            inherit !important;

        font-size:
            13px !important;

        font-weight:
            650 !important;

        line-height:
            1.4 !important;

        cursor:
            pointer !important;

        touch-action:
            manipulation !important;

        z-index:
            20 !important;

    }


    /* Arabic */

    html[dir="rtl"] #datasetSelect {

        direction: rtl !important;

        text-align: right !important;

        padding:
            0
            14px
            0
            42px !important;

    }


    /* English */

    html[dir="ltr"] #datasetSelect {

        direction: ltr !important;

        text-align: left !important;

    }


    /* ---------------------------------------------------------------------------------------------
       OPTIONS
    --------------------------------------------------------------------------------------------- */

    #datasetSelect option {

        background:
            #0b2a39 !important;

        color:
            #eef5f3 !important;

        font-size:
            13px !important;

    }


    /* ---------------------------------------------------------------------------------------------
       REMOVE CUSTOM UI IF ANY OLD SCRIPT LEFT IN CACHE
    --------------------------------------------------------------------------------------------- */

    .gg-mobile-dataset-select,
    #ggDatasetSheetTrigger,
    #ggDatasetSheetOverlay,
    .gg-dataset-sheet-overlay {

        display: none !important;

        visibility: hidden !important;

        pointer-events: none !important;

    }


    /* ---------------------------------------------------------------------------------------------
       PANEL
    --------------------------------------------------------------------------------------------- */

    .dataset-selector-panel {

        position: relative !important;

        z-index: 10 !important;

        overflow: visible !important;

    }

}


/* =================================================================================================
   END GEOGUARDIAN V07.29 NATIVE MOBILE SELECT
================================================================================================= */