/* ==========================================
   CB WEB & GIS - BUSINESS MAP DEMO
========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #08111d;
    color: #ffffff;
    line-height: 1.6;
}

a {
    text-decoration: none;
}


/* ==========================================
   DEMO BANNER
========================================== */

.demo-banner {
    padding: 10px 6%;
    text-align: center;

    background: #59c3ff;
    color: #07111f;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.demo-banner span {
    margin: 0 8px;
}


/* ==========================================
   HEADER
========================================== */

.site-header {
    background: #0b1726;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.navbar {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 6%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
}

.navbar nav {
    display: flex;
    gap: 30px;
}

.navbar nav a {
    color: #a9bdd0;
    font-size: 14px;
    font-weight: 700;
}

.navbar nav a:hover {
    color: #59c3ff;
}


/* ==========================================
   BACK TO PORTFOLIO
========================================== */

.demo-back-bar {
    padding: 14px 6%;

    background: #0b1c2c;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.back-to-portfolio {
    color: #59c3ff;

    font-size: 14px;
    font-weight: 700;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.back-to-portfolio:hover {
    color: #ffffff;
}


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

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

.hero {
    min-height: 650px;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 80% 45%,
            rgba(32, 199, 183, 0.22),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #07111f,
            #0d2135
        );
}

.hero-content {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
    padding: 80px 7%;

    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(350px, 0.75fr);
    align-items: center;
    gap: 70px;
}

.hero-text {
    min-width: 0;
}

.hero-logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-logo-area a {
    display: block;
    width: 100%;
}

.hero-logo {
    display: block;

    width: 100%;
    max-width: 520px;
    height: auto;

    margin: 0 auto;

    object-fit: contain;

    filter:
        drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45));

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}

.hero-logo-area a:hover .hero-logo {
    transform: scale(1.04);

    filter:
        drop-shadow(0 24px 50px rgba(32, 199, 183, 0.28));
}

.hero-label {
    color: #59c3ff;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;

    margin-bottom: 18px;
}

.hero h1 {
    max-width: 760px;

    font-size: clamp(48px, 6vw, 82px);
    line-height: 0.98;
    letter-spacing: -3px;

    margin-bottom: 28px;
}

.hero h1 span {
    display: block;
    color: #20c7b7;
}

.hero-description {
    max-width: 650px;

    color: #a9bdd0;
    font-size: 19px;

    margin-bottom: 35px;
}
.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 15px 26px;

    background: #20c7b7;
    color: #07111f;

    border: 2px solid transparent;
    border-radius: 8px;

    font-size: 16px;
    font-weight: 800;
    line-height: 1;

    text-decoration: none;
    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(32, 199, 183, 0.22);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.hero-btn:hover {
    background: #7fffe9;
    color: #07111f;

    transform: translateY(-3px);

    box-shadow:
        0 14px 32px rgba(32, 199, 183, 0.32);
}
/* ==========================================
   MAP SECTION
========================================== */

.map-section {
    padding: 90px 6%;

    background: #f5f8fb;
    color: #102133;
}

.section-heading {
    max-width: 1400px;
    margin: 0 auto 35px;
}

.section-heading > p,
.section-label {
    color: #0b7fc2;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2.5px;

    margin-bottom: 10px;
}

.section-heading h2 {
    font-size: clamp(34px, 5vw, 52px);

    line-height: 1.05;

    margin-bottom: 12px;
}

.section-heading span {
    color: #617486;
}


/* IMPORTANT: gives Leaflet a visible height */

#map {
    width: 100%;
    max-width: 1400px;
    height: 620px;

    margin: 0 auto;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(0,0,0,0.18);

    border: 1px solid rgba(15,40,65,0.10);
}


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

.map-popup {
    min-width: 200px;
}

.map-popup strong {
    display: block;

    color: #102133;

    font-size: 16px;

    margin-bottom: 8px;
}

.map-popup p {
    margin-bottom: 8px;
    color: #4d6072;
}

.map-popup span {
    color: #0b7fc2;

    font-size: 12px;
    font-weight: 700;
}


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

.about-section {
    padding: 90px 7%;

    background: #0d1b2a;
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
}

.about-content h2 {
    font-size: clamp(34px, 5vw, 52px);

    line-height: 1.05;

    margin-bottom: 22px;
}

.about-content p:last-child {
    color: #a9bdd0;
    font-size: 18px;
}


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

.site-footer {
    padding: 28px 6%;

    text-align: center;

    background: #07111f;

    color: #7f96aa;

    border-top: 1px solid rgba(255,255,255,0.08);
}

.site-footer strong {
    color: #ffffff;
}


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

@media (max-width: 800px) {

    .navbar {
        flex-direction: column;
        gap: 18px;
    }

    .navbar nav {
        gap: 18px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero {
        min-height: auto;
    }

    .hero-content {
        padding: 70px 7%;
    }

    .hero h1 {
        font-size: 52px;
        letter-spacing: -2px;
    }

    #map {
        height: 500px;
        border-radius: 14px;
    }

}


@media (max-width: 500px) {

    .hero h1 {
        font-size: 40px;
    }

    .hero-content > p:not(.hero-label) {
        font-size: 16px;
    }

    #map {
        height: 430px;
    }

}
/* ==========================================
   WEB GIS GREEN / TURQUOISE THEME
========================================== */

:root {
    --gis-dark: #071a18;
    --gis-dark-2: #0d2b26;
    --gis-green: #146b5c;
    --gis-turquoise: #20c7b7;
    --gis-mint: #8ee3c8;
    --gis-light: #f1f7f5;
    --gis-text: #16332e;
}


/* TOP DEMO BANNER */

.demo-banner {
    background: var(--gis-turquoise);
    color: var(--gis-dark);
}


/* HEADER */

.site-header {
    background: var(--gis-dark);
}

.navbar nav a:hover {
    color: var(--gis-mint);
}


/* BACK TO PORTFOLIO */

.demo-back-bar {
    background: var(--gis-dark-2);
}

.back-to-portfolio {
    color: var(--gis-mint);
}

.back-to-portfolio:hover {
    color: #ffffff;
}


/* HERO */

.hero {
    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(32, 199, 183, 0.20),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(20, 107, 92, 0.22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #061613,
            #0b2924
        );
}

.hero-label {
    color: var(--gis-mint);
}

.hero h1 span {
    color: var(--gis-turquoise);
}

.hero-btn {
    background: var(--gis-turquoise);
    color: var(--gis-dark);
}

.hero-btn:hover {
    background: var(--gis-mint);
}


/* MAP AREA */

.map-section {
    background: var(--gis-light);
    color: var(--gis-text);
}

.section-heading > p,
.section-label {
    color: var(--gis-green);
}


/* MAP */

#map {
    border:
        1px solid rgba(20, 107, 92, 0.18);

    box-shadow:
        0 25px 70px rgba(7, 42, 35, 0.16);
}


/* POPUPS */

.map-popup strong {
    color: var(--gis-dark);
}

.map-popup span {
    color: var(--gis-green);
}


/* ABOUT */

.about-section {
    background:
        linear-gradient(
            135deg,
            #071a18,
            #10362f
        );
}


/* FOOTER */

.site-footer {
    background: #04110f;
}
/* ==========================================
   GIS APPLICATION LAYOUT
========================================== */

.map-layout {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 320px 1fr;

    gap: 24px;

    align-items: stretch;
}


/* ==========================================
   GIS CONTROL PANEL
========================================== */

.gis-panel {
    background: #0d2b26;
    color: #ffffff;

    border-radius: 18px;

    padding: 28px;

    box-shadow:
        0 20px 45px rgba(7, 42, 35, 0.18);

    border:
        1px solid rgba(142, 227, 200, 0.12);
}


.gis-panel-header {
    margin-bottom: 28px;
}

.panel-label {
    color: #8ee3c8;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 8px;
}

.gis-panel-header h3 {
    font-size: 27px;
    line-height: 1.1;

    margin-bottom: 12px;
}

.gis-panel-header p {
    color: #aac8bf;

    font-size: 14px;
}


/* ==========================================
   CONTROL GROUPS
========================================== */

.gis-control-group {
    padding: 22px 0;

    border-top:
        1px solid rgba(255,255,255,0.08);
}

.gis-control-group h4 {
    margin-bottom: 16px;

    color: #ffffff;

    font-size: 14px;

    letter-spacing: 0.5px;
}


.filter-option {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color: #d2e5df;

    font-size: 14px;

    cursor: pointer;
}


.filter-option input {
    width: 17px;
    height: 17px;

    accent-color: #20c7b7;

    cursor: pointer;
}


/* ==========================================
   GIS STATISTICS
========================================== */

.gis-stats {
    margin-top: 20px;

    padding: 18px;

    background:
        rgba(32, 199, 183, 0.10);

    border:
        1px solid rgba(32, 199, 183, 0.22);

    border-radius: 12px;
}


.gis-stats span {
    display: block;

    color: #9fc7bc;

    font-size: 12px;

    margin-bottom: 5px;
}


.gis-stats strong {
    display: block;

    color: #8ee3c8;

    font-size: 32px;

    line-height: 1;
}


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

.map-wrapper {
    min-width: 0;
}


/* Override previous map width */

.map-wrapper #map {
    width: 100%;
    max-width: none;

    height: 620px;

    margin: 0;
}


/* ==========================================
   MOBILE GIS LAYOUT
========================================== */

@media (max-width: 950px) {

    .map-layout {
        grid-template-columns: 1fr;
    }

    .gis-panel {
        padding: 24px;
    }

    .map-wrapper #map {
        height: 520px;
    }

}


@media (max-width: 500px) {

    .gis-panel-header h3 {
        font-size: 23px;
    }

    .map-wrapper #map {
        height: 430px;
    }

}
/* ==========================================
   GIS TOOL BUTTONS
========================================== */

.gis-tool-btn {
    width: 100%;

    padding: 12px 14px;

    background: #20c7b7;
    color: #071a18;

    border: none;
    border-radius: 9px;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.gis-tool-btn:hover {
    background: #8ee3c8;
    transform: translateY(-2px);
}


.coordinate-box {
    margin-top: 16px;

    padding: 14px;

    background: rgba(255,255,255,0.05);

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius: 10px;
}

.coordinate-box span {
    display: block;

    color: #9fc7bc;

    font-size: 11px;

    margin-bottom: 5px;
}

.coordinate-box strong {
    display: block;

    color: #ffffff;

    font-size: 12px;

    font-family: monospace;
}
/* ==========================================
   LEAFLET DRAW TOOLS - DARK GREEN THEME
========================================== */

/* Main tool buttons */
.leaflet-draw-toolbar a {
    background-color: #071a18 !important;
    border-color: #146b5c !important;
}

/* Hover */
.leaflet-draw-toolbar a:hover {
    background-color: #146b5c !important;
}

/* Edit / delete toolbar */
.leaflet-draw-toolbar {
    border-radius: 6px;
    overflow: hidden;

    box-shadow:
        0 4px 12px rgba(7, 26, 24, 0.25);
}

/* Border around each toolbar group */
.leaflet-draw-section {
    border-radius: 6px;
}

/* Keep the original Leaflet Draw icons visible */
.leaflet-draw-toolbar a {
    filter: none;
}
/* ==========================================
   BASEMAP SELECTOR - DARK GREEN
========================================== */

.leaflet-control-layers {
    background: #071a18 !important;
    color: #ffffff !important;

    border: 1px solid #146b5c !important;
    border-radius: 8px !important;

    box-shadow:
        0 4px 14px rgba(7, 26, 24, 0.28) !important;
}


/* Text inside layer selector */

.leaflet-control-layers label {
    color: #ffffff !important;
}


/* Spacing */

.leaflet-control-layers-expanded {
    padding: 12px 14px !important;
}


/* Radio buttons */

.leaflet-control-layers input[type="radio"] {
    accent-color: #20c7b7;
}


/* Checkbox buttons if we add overlays later */

.leaflet-control-layers input[type="checkbox"] {
    accent-color: #20c7b7;
}


/* Separator line */

.leaflet-control-layers-separator {
    border-top-color:
        rgba(142, 227, 200, 0.20) !important;
}
/* ==========================================
   GEOJSON CATEGORY COUNTS
========================================== */

.filter-option span {
    flex: 1;
}

.category-count {
    min-width: 27px;
    height: 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 8px;

    background: rgba(32, 199, 183, 0.12);
    color: #8ee3c8;

    border: 1px solid rgba(32, 199, 183, 0.24);
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
}
/* ==========================================
   BUSINESS SEARCH
========================================== */

.search-box {
    position: relative;
}

#business-search {
    width: 100%;

    padding: 12px 13px;

    background: rgba(255,255,255,0.05);
    color: #ffffff;

    border:
        1px solid rgba(255,255,255,0.10);

    border-radius: 9px;

    outline: none;

    font-size: 14px;
}

#business-search::placeholder {
    color: #8faea5;
}

#business-search:focus {
    border-color: #20c7b7;
}

.search-results {
    margin-top: 10px;

    display: grid;
    gap: 8px;
}

.search-result-item {
    width: 100%;

    padding: 10px 12px;

    background: rgba(32,199,183,0.08);
    color: #d9f5ec;

    border:
        1px solid rgba(32,199,183,0.18);

    border-radius: 8px;

    text-align: left;

    cursor: pointer;

    font-size: 13px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.search-result-item:hover {
    background: rgba(32,199,183,0.16);
    transform: translateX(3px);
}

.search-result-item strong {
    display: block;

    color: #8ee3c8;

    margin-bottom: 3px;
}

.search-result-item span {
    display: block;

    color: #aac8bf;

    font-size: 11px;
}
/* ==========================================
   SECONDARY GIS TOOL BUTTON
========================================== */

.secondary-tool {
    margin-top: 10px;

    background: transparent;
    color: #8ee3c8;

    border:
        1px solid rgba(32,199,183,0.35);
}

.secondary-tool:hover {
    background: rgba(32,199,183,0.10);
    color: #ffffff;
}
/* ==========================================
   PROXIMITY ANALYSIS
========================================== */

.analysis-label {
    display: block;

    margin-bottom: 8px;

    color: #aac8bf;

    font-size: 13px;
}

.analysis-select {
    width: 100%;

    margin-bottom: 12px;
    padding: 11px 12px;

    background: rgba(255,255,255,0.05);
    color: #ffffff;

    border:
        1px solid rgba(255,255,255,0.10);

    border-radius: 9px;

    outline: none;
}

.analysis-select:focus {
    border-color: #20c7b7;
}

.analysis-select option {
    color: #071a18;
}

.analysis-info {
    margin-top: 12px;

    padding: 12px;

    background: rgba(32,199,183,0.08);

    border:
        1px solid rgba(32,199,183,0.16);

    border-radius: 9px;

    color: #b8d9d0;

    font-size: 12px;
    line-height: 1.5;
}
/* ==========================================
   PROXIMITY ANALYSIS RESULTS
========================================== */

.analysis-info strong {
    display: block;

    color: #8ee3c8;

    margin-bottom: 3px;
}

.analysis-info > span {
    display: block;

    color: #aac8bf;

    font-size: 11px;
}

.analysis-result-list {
    margin-top: 12px;
    padding: 0;

    list-style: none;
}

.analysis-result-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 8px 0;

    border-top:
        1px solid rgba(255,255,255,0.08);
}

.analysis-result-list li strong {
    margin: 0;

    color: #ffffff;

    font-size: 12px;
}

.analysis-result-list li span {
    color: #8ee3c8;

    font-size: 11px;
    white-space: nowrap;
}
/* ==========================================
   CLICKABLE ANALYSIS RESULTS
========================================== */

.analysis-result-item {
    cursor: pointer;

    transition:
        background 0.2s ease,
        padding 0.2s ease;
}

.analysis-result-item:hover {
    background:
        rgba(32,199,183,0.08);

    padding-left: 6px;
    padding-right: 6px;
}
/* ==========================================
   TOOLS UNDER MAP - POLISHED DASHBOARD
========================================== */

.map-tools-bottom {
    display: grid;

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

    gap: 20px;

    margin-top: 20px;

    align-items: stretch;
}


/* ==========================================
   TOOL CARDS
========================================== */

.tool-card {
    display: flex;
    flex-direction: column;

    min-height: 250px;

    padding: 22px;

    background:
        linear-gradient(
            145deg,
            #07332d,
            #0a3c35
        );

    color: #ffffff;

    border:
        1px solid rgba(45, 212, 191, 0.16);

    border-radius: 18px;

    box-shadow:
        0 12px 30px
        rgba(7, 42, 35, 0.10);
}


.tool-card h4 {
    margin-bottom: 18px;

    color: #7ff7df;

    font-size: 18px;
    font-weight: 800;
}


/* ==========================================
   FORM ELEMENTS
========================================== */

.tool-card label {
    display: block;

    margin-bottom: 8px;

    color: #b8efe6;

    font-size: 13px;
}


.tool-card select {
    width: 100%;

    padding: 12px 13px;

    background: #0d433b;
    color: #ffffff;

    border:
        1px solid #1b6b60;

    border-radius: 10px;

    margin-bottom: 12px;

    outline: none;
}


.tool-card select:focus {
    border-color: #20c7b7;
}


/* ==========================================
   POSITION CARD
========================================== */

.tool-card .coordinate-box {
    margin-top: 16px;
}


/* ==========================================
   RESULT CARD
========================================== */

.tool-card .analysis-info {
    margin-top: 0;

    max-height: 230px;

    overflow-y: auto;
}


/* nicer scrollbar */

.tool-card .analysis-info::-webkit-scrollbar {
    width: 6px;
}

.tool-card .analysis-info::-webkit-scrollbar-track {
    background:
        rgba(255,255,255,0.04);

    border-radius: 20px;
}

.tool-card .analysis-info::-webkit-scrollbar-thumb {
    background: #20c7b7;

    border-radius: 20px;
}


/* ==========================================
   STATS INSIDE RESULT CARD
========================================== */

.tool-card .gis-stats {
    margin-top: 16px;
}


.tool-card .secondary-tool {
    margin-top: auto;
}


/* ==========================================
   BUTTON ALIGNMENT
========================================== */

.tool-card .gis-tool-btn {
    width: 100%;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1050px) {

    .map-tools-bottom {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 700px) {

    .map-tools-bottom {
        grid-template-columns: 1fr;
    }

    .tool-card {
        min-height: auto;
    }

}
/* ==========================================
   MAP + SIDEBAR FINAL ALIGNMENT
========================================== */

.map-layout {
    align-items: start;
}


/* Sidebar should not stretch to match
   the map + bottom dashboard */

.gis-panel {
    align-self: start;
    height: auto;
}


/* Right side */

.map-wrapper {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


/* Map keeps a strong desktop size */

.map-wrapper #map {
    width: 100%;
    height: 620px;

    border-radius: 18px;
}


/* Dashboard sits directly below map */

.map-tools-bottom {
    width: 100%;
    margin-top: 20px;
}
/* ==========================================
   MAP + SIDEBAR FINAL ALIGNMENT
========================================== */

.map-layout {
    align-items: start;
}


/* Sidebar should not stretch to match
   the map + bottom dashboard */

.gis-panel {
    align-self: start;
    height: auto;
}


/* Right side */

.map-wrapper {
    min-width: 0;
    display: flex;
    flex-direction: column;
}


/* Map keeps a strong desktop size */

.map-wrapper #map {
    width: 100%;
    height: 620px;

    border-radius: 18px;
}


/* Dashboard sits directly below map */

.map-tools-bottom {
    width: 100%;
    margin-top: 20px;
}
/* ==========================================
   RESPONSIVE MAP HEIGHT
========================================== */

@media (max-width: 1200px) {

    .map-wrapper #map {
        height: 560px;
    }

}


@media (max-width: 950px) {

    .map-layout {
        grid-template-columns: 1fr;
    }

    .gis-panel {
        width: 100%;
    }

    .map-wrapper #map {
        height: 520px;
    }

}


@media (max-width: 600px) {

    .map-wrapper #map {
        height: 430px;
        border-radius: 14px;
    }

}
@media (max-width: 900px) {

    .hero-content {
        grid-template-columns: 1fr;
        gap: 45px;

        padding-top: 70px;
        padding-bottom: 70px;
    }

    .hero-text {
        text-align: center;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-logo-area {
        order: -1;
    }

    .hero-logo {
        max-width: 340px;
    }
}
/* ==========================================
   GIS CONTACT CTA
========================================== */

.gis-contact-cta {
    padding: 100px 7%;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(142, 227, 200, 0.18),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #0d2b26,
            #146b5c
        );

    text-align: center;
}

.gis-contact-cta-content {
    width: min(850px, 100%);
    margin: 0 auto;
}

.gis-contact-label {
    margin-bottom: 14px;

    color: #8ee3c8;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2.5px;
}

.gis-contact-cta h2 {
    max-width: 760px;
    margin: 0 auto 22px;

    color: #ffffff;

    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.08;
}

.gis-contact-text {
    max-width: 680px;
    margin: 0 auto 32px;

    color: #c8e6de;

    font-size: 18px;
    line-height: 1.7;
}

.gis-contact-btn {
    display: inline-block;

    padding: 16px 28px;

    color: #071a18;
    background: #ffffff;

    border-radius: 8px;

    font-size: 15px;
    font-weight: 900;

    box-shadow: 0 15px 35px rgba(4, 17, 15, 0.25);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.gis-contact-btn:hover {
    background: #8ee3c8;

    transform: translateY(-3px);

    box-shadow: 0 20px 40px rgba(4, 17, 15, 0.35);
}

@media (max-width: 600px) {

    .gis-contact-cta {
        padding: 75px 6%;
    }

    .gis-contact-cta h2 {
        font-size: 34px;
    }

    .gis-contact-text {
        font-size: 16px;
    }

    .gis-contact-btn {
        width: 100%;
        max-width: 340px;
    }
}