/* ==========================================
   GLOBAL TYPOGRAPHY (EIAR STYLING)
   ========================================== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #334155;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .eiar-heading {
    font-family: 'Outfit', sans-serif;
    color: #0f172a;
    letter-spacing: -0.02em;
}

/* Section Title */
.eiar-heading {
    color: #1b4332;
    font-weight: 700;
}

.dg-title-line {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #2d6a4f, #52b788);
    margin: 12px auto 0;
    border-radius: 2px;
}

/* Category Badge */
.eiar-badge {
    display: inline-block;
    background-color: #e8f5e9;
    color: #1b4332;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid #c8e6c9;
}

/* History Tag Box */
.eiar-history-tag {
    background-color: #f8fafc;
    border-left: 4px solid #2d6a4f;
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.5;
}

/* Subtitles & Names */
.dg-name-subtitle {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #1b4332;
    font-size: 1.25rem;
}

.dg-name-title {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

/* Quote Card Styling */
.dg-quote-card {
    background: #f0fdf4;
    border-radius: 12px;
    padding: 20px 24px;
    position: relative;
    border: 1px solid #dcfce7;
}

.italic-quote {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #166534;
    font-weight: 500;
}

.quote-icon {
    font-size: 1.25rem;
    color: #22c55e;
    margin-bottom: 8px;
    display: block;
}

/* Body Text inside Collapsible Box */
.dg-text-preview p {
    font-size: 0.98rem;
    line-height: 1.75;
    color: #475569;
    margin-bottom: 1rem;
}

/* Button Customization */
.btn-eiar-primary {
    background-color: #2d6a4f;
    color: #ffffff;
    border: 2px solid #2d6a4f;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.btn-eiar-primary:hover {
    background-color: #1b4332;
    border-color: #1b4332;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27, 67, 50, 0.2);
}
/* =====================================================
   RESEARCH AREAS - PREMIUM VISUAL SECTION
===================================================== */

.research-section {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: #f1faf6;

}


/* =====================================================
   BACKGROUND IMAGE
===================================================== */

.research-section-bg {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            rgba(164, 184, 175, 0.94),
            rgba(225, 227, 226, 0.9)
        ),

        url("../images/research-bg1.jpg");

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    z-index: 0;

}


/* =====================================================
   CONTENT
===================================================== */

.research-container {

    position: relative;

    z-index: 2;

}


/* =====================================================
   SECTION SUBTITLE
===================================================== */

.research-subtitle {

    display: inline-block;

    color: #2d6a4f;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 15px;

}


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

.research-section .eiar-section-title {

    color: #ffffff;

    font-size: 42px;

    font-weight: 800;

    margin-bottom: 25px;

}


.research-section-description {

    max-width: 750px;

    margin: 0 auto;

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

    font-size: 17px;

    line-height: 1.8;

}


/* =====================================================
   RESEARCH LINK
===================================================== */

.research-area-link {

    display: block;

    height: 100%;

    text-decoration: none;

}


/* =====================================================
   RESEARCH CARD
===================================================== */

.research-visual-card {

    position: relative;

    height: 390px;

    border-radius: 20px;

    overflow: hidden;

    background: #1d5138;

    box-shadow:

        0 20px 45px rgba(0,0,0,.22);

    transition:

        transform .45s ease,
        box-shadow .45s ease;

}


.research-visual-card:hover {

    transform: translateY(-12px);

    box-shadow:

        0 30px 65px rgba(0,0,0,.38);

}


/* =====================================================
   CARD IMAGE
===================================================== */

.research-card-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform .8s cubic-bezier(.2,.8,.2,1);

}


.research-visual-card:hover
.research-card-image {

    transform: scale(1.15);

}


/* =====================================================
   IMAGE OVERLAY
===================================================== */

.research-card-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,

            rgba(8,30,20,.10) 0%,

            rgba(8,35,23,.35) 45%,

            rgba(7,32,21,.96) 100%
        );

    transition:

        background .4s ease;

}


.research-visual-card:hover
.research-card-overlay {

    background:

        linear-gradient(
            180deg,

            rgba(13,65,42,.15),

            rgba(9,50,31,.60),

            rgba(7,35,23,.98)
        );

}


/* =====================================================
   CARD NUMBER
===================================================== */

.research-card-number {

    position: absolute;

    top: 22px;

    right: 25px;

    z-index: 3;

    font-size: 48px;

    font-weight: 900;

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

    transition:

        color .4s ease,
        transform .4s ease;

}


.research-visual-card:hover
.research-card-number {

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

    transform: scale(1.1);

}


/* =====================================================
   CARD CONTENT
===================================================== */

.research-card-content {

    position: absolute;

    z-index: 4;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 30px;

    color: white;

}


/* =====================================================
   ICON
===================================================== */

.research-card-icon {

    width: 52px;

    height: 40px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        rgba(255,255,255,.14);

    border:

        1px solid rgba(255,255,255,.25);

    backdrop-filter:

        blur(8px);

    font-size: 22px;

    color: #2d6a4f;

    margin-bottom: 18px;

    transition:

        transform .4s ease,
        background .4s ease;

}


.research-visual-card:hover
.research-card-icon {

    transform:

        rotate(8deg)
        scale(1.08);

    background:

        rgba(243,180,56,.20);

}


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

.research-card-content h3 {

    font-size: 23px;

    font-weight: 750;

    line-height: 1.35;

    margin-bottom: 0;

    color: white;

    transition:

        transform .4s ease;

}


.research-visual-card:hover
.research-card-content h3 {

    transform:

        translateY(-6px);

}


/* =====================================================
   DESCRIPTION
===================================================== */

.research-card-content p {

    font-size: 14px;

    line-height: 1.7;

    color:

        rgba(255,255,255,.80);

    margin:

        15px 0 0;

    max-height: 0;

    opacity: 0;

    overflow: hidden;

    transform:

        translateY(15px);

    transition:

        max-height .5s ease,
        opacity .4s ease,
        transform .4s ease;

}


.research-visual-card:hover
.research-card-content p {

    max-height: 130px;

    opacity: 1;

    transform:

        translateY(0);

}


/* =====================================================
   EXPLORE AREA
===================================================== */

.research-explore {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 20px;

    opacity: 0;

    transform:

        translateY(15px);

    transition:

        opacity .4s ease,
        transform .4s ease;

}


.research-visual-card:hover
.research-explore {

    opacity: 1;

    transform:

        translateY(0);

}


.research-explore span {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .5px;

    text-transform: uppercase;

}


.research-arrow {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #0c905b;

    color: #173f2c;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    transition:

        transform .3s ease;

}


.research-visual-card:hover
.research-arrow {

    transform:

        rotate(45deg);

}


/* =====================================================
   BOTTOM ANIMATION LINE
===================================================== */

.research-card-line {

    position: absolute;

    bottom: 0;

    left: 0;

    height: 5px;

    width: 0;

    background:

        linear-gradient(
            90deg,
            #f0a91f,
            #f6cf66
        );

    z-index: 5;

    transition:

        width .6s ease;

}


.research-visual-card:hover
.research-card-line {

    width: 100%;

}


/* =====================================================
   VIEW ALL BUTTON
===================================================== */

.research-view-all {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 28px;

    border-radius: 50px;

    border:

        1px solid rgba(255,255,255,.45);

    color: white;

    font-weight: 700;

    text-decoration: none;

    transition: .35s ease;

}


.research-view-all:hover {

    background: white;

    color: #1f6b45;

    transform:

        translateY(-3px);

}


.research-view-all i {

    transition:

        transform .3s ease;

}


.research-view-all:hover i {

    transform:

        translateX(5px);

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 991px) {

    .research-section {

        padding: 80px 0;

    }

    .research-section .eiar-section-title {

        font-size: 36px;

    }

    .research-visual-card {

        height: 360px;

    }

}


@media (max-width: 576px) {

    .research-section {

        padding: 65px 0;

    }

    .research-section .eiar-section-title {

        font-size: 30px;

    }

    .research-section-description {

        font-size: 15px;

    }

    .research-visual-card {

        height: 340px;

    }

}
/* =========================================================
   EIAR RESEARCH CENTERS MAP
========================================================= */

.centers-map-section {
    position: relative;
    padding: 90px 0;
    background:
        linear-gradient(
            135deg,
            #f5f9f3,
            #eef5ed
        );
}


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

.centers-map-header {
    max-width: 750px;
    margin: 0 auto 50px;
}


.map-kicker {
    display: block;

    margin-bottom: 12px;

    color: #d98b17;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.centers-map-header h1 {
    margin: 0;

    color: #263b35;

    font-size: clamp(38px, 5vw, 58px);

    font-weight: 500;
}


.centers-map-header h1 span {
    color: #14613c;

    font-weight: 800;
}


.centers-map-header p {
    margin-top: 18px;

    color: #617069;

    font-size: 17px;

    line-height: 1.8;
}


/* TITLE DECORATION */

.map-title-decoration {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin: 20px 0;
}


.map-title-decoration span {
    width: 80px;

    height: 3px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #17663e,
        #e49a1b
    );
}


.map-title-decoration i {
    color: #e49a1b;

    font-size: 22px;
}


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

.eiar-map-wrapper {
    position: relative;

    overflow: hidden;

    border-radius: 24px;

    background: #ffffff;

    border: 1px solid rgba(20, 97, 60, 0.10);

    box-shadow:
        0 20px 60px rgba(15, 74, 42, 0.15);
}


/* =========================================================
   TOP INFORMATION BAR
========================================================= */

.map-side-info {
    display: flex;

    align-items: center;

    gap: 18px;

    padding: 20px 30px;

    background:
        linear-gradient(
            135deg,
            #14613c,
            #0b4a2a
        );

    color: #ffffff;
}


.map-info-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 52px;

    height: 52px;

    border-radius: 50%;

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

    font-size: 23px;
}


.map-side-info h4 {
    margin: 0 0 4px;

    font-size: 18px;

    font-weight: 750;
}


.map-side-info p {
    margin: 0;

    font-size: 14px;

    opacity: 0.85;
}


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

#eiarMap {
    width: 100%;

    height: 650px;

    z-index: 1;
}


/* =========================================================
   CUSTOM EIAR MARKER
========================================================= */

.eiar-map-marker {
    background: transparent;

    border: none;
}


.marker-pulse {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 50px;

    height: 50px;
}


.marker-pulse::before {
    content: "";

    position: absolute;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: rgba(20, 97, 60, 0.28);

    animation: markerPulse 2s infinite;
}


.marker-pin {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border-radius: 50% 50% 50% 0;

    background:
        linear-gradient(
            135deg,
            #1c7a4b,
            #0a4c2a
        );

    color: #ffffff;

    font-size: 17px;

    border: 4px solid #ffffff;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.25);

    transform: rotate(-45deg);

    transition: all 0.3s ease;
}


.marker-pin i {
    transform: rotate(45deg);
}


.marker-pulse:hover .marker-pin {
    transform:
        rotate(-45deg)
        scale(1.15);

    background:
        linear-gradient(
            135deg,
            #0c3f0b,
            #0d6d3b
        );
}


@keyframes markerPulse {

    0% {
        transform: scale(0.7);
        opacity: 0.8;
    }

    70% {
        transform: scale(1.4);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }

}


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

.leaflet-popup-content-wrapper {
    padding: 0;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 15px 45px rgba(0,0,0,0.22);
}


.leaflet-popup-content {
    margin: 0;

    width: auto !important;
}


.eiar-popup {
    padding: 22px;
}


.popup-header {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 16px;
}


.popup-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 50px;

    height: 50px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #e9f4eb,
            #d8ebdc
        );

    color: #14613c;

    font-size: 20px;
}


.popup-header h3 {
    margin: 0 0 5px;

    color: #163e2b;

    font-size: 17px;

    font-weight: 800;

    line-height: 1.35;
}


.popup-header span {
    color: #7a857f;

    font-size: 12px;
}


.popup-header span i {
    color: #e4ede2;
}


.eiar-popup p {
    margin-bottom: 18px;

    color: #5e6b64;

    font-size: 13px;

    line-height: 1.7;
}


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

.popup-button {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 16px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #17663e,
            #0c4829
        );

    color: #ffffff !important;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    transition: all 0.3s ease;
}


.popup-button:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #e49a1b,
            #c97a00
        );
}


.popup-button i {
    transition: transform 0.3s ease;
}


.popup-button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .centers-map-section {
        padding: 60px 0;
    }


    #eiarMap {
        height: 500px;
    }


    .map-side-info {
        padding: 18px;
    }


    .map-side-info h4 {
        font-size: 16px;
    }


    .map-side-info p {
        font-size: 12px;
    }

}


@media (max-width: 576px) {

    #eiarMap {
        height: 450px;
    }


    .map-side-info {
        align-items: flex-start;
    }


    .centers-map-header h1 {
        font-size: 38px;
    }

}

/* =====================================================
   RESEARCH CENTERS MAP
===================================================== */

.research-centers-intro {
    padding: 35px 0 10px;
    text-align: center;
}


/* EXPLORE BUTTON */

.explore-centers-btn {
    background: linear-gradient(
        135deg,
        #008a3c,
        #005826
    );

    color: #ffffff !important;

    border: none;

    border-radius: 50px;

    padding: 14px 30px;

    font-weight: 700;

    font-size: 14px;

    box-shadow:
        0 10px 25px rgba(0, 138, 60, 0.25);

    transition: all 0.35s ease;
}


.explore-centers-btn:hover {
    background: linear-gradient(
        135deg,
        #ff8c00,
        #e87500
    );

    transform: translateY(-4px);

    box-shadow:
        0 16px 35px rgba(255, 140, 0, 0.25);
}


.explore-centers-btn i {
    margin: 0 6px;
}


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

.research-centers-map-section {

    position: relative;

    padding: 80px 0;

    background:
        linear-gradient(
            rgba(245, 250, 246, 0.94),
            rgba(232, 242, 235, 0.96)
        );

    overflow: hidden;
}


/* HEADER BADGE */

.research-map-badge {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 18px;

    border-radius: 50px;

    background: #e4f3e8;

    color: #008a3c;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

    margin-bottom: 18px;
}


/* TITLE */

.research-map-title {

    font-size: 42px;

    font-weight: 800;

    color: #163b2a;

    margin-bottom: 15px;
}


/* DESCRIPTION */

.research-map-description {

    max-width: 720px;

    margin: auto;

    color: #667085;

    font-size: 16px;

    line-height: 1.8;
}


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

.eiar-map-wrapper {

    background: #ffffff;

    border-radius: 24px;

    padding: 12px;

    box-shadow:
        0 20px 60px rgba(0, 80, 35, 0.15);

    border:
        1px solid rgba(0, 138, 60, 0.12);

    overflow: hidden;
}


/* ACTUAL MAP */

#ethiopia-map {

    width: 100%;

    height: 650px;

    border-radius: 16px;

    z-index: 1;
}


/* =====================================================
   CUSTOM MARKER
===================================================== */

.eiar-map-marker {

    background: transparent;

    border: none;
}


.marker-pin {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #008a3c,
            #005826
        );

    color: #ffffff;

    border-radius:
        50% 50% 50% 0;

    transform: rotate(-45deg);

    box-shadow:
        0 6px 18px rgba(0, 90, 40, 0.35);

    border: 3px solid #ffffff;

    transition: all 0.3s ease;
}


.marker-pin i {

    transform: rotate(45deg);

    font-size: 16px;
}


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

.eiar-map-popup {

    padding: 8px;

    min-width: 220px;
}


.eiar-map-popup h4 {

    font-size: 16px;

    font-weight: 800;

    color: #005826;

    margin-bottom: 10px;
}


.eiar-map-popup p {

    color: #667085;

    font-size: 13px;

    margin-bottom: 14px;
}


.eiar-map-popup p i {

    color: #ff8c00;

    margin-right: 5px;
}he


/* LOCATION BUTTON */

.map-direction-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 15px;

    background: #008a3c;

    color: #ffffff !important;

    text-decoration: none;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 700;

    transition: all 0.3s ease;
}


.map-direction-btn:hover {

    background: #ff8c00;

    transform: translateY(-2px);
}


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

@media (max-width: 768px) {

    .research-centers-map-section {

        padding: 60px 0;
    }


    .research-map-title {

        font-size: 30px;
    }


    .research-map-description {

        font-size: 14px;

        padding: 0 15px;
    }


   #ethiopia-map {
    width: 100%;
    height: 600px;
    min-height: 500px;
}


    .eiar-map-wrapper {

        padding: 7px;

        border-radius: 16px;
    }

    /* =========================================================
   CENTER NAVIGATION
========================================================= */

.center-navigation-section {

    padding: 45px 0;

    background: #ffffff;

    border-top: 1px solid #e5ebe7;

}


.center-navigation {

    display: grid;

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

    align-items: center;

    gap: 30px;

}


.center-navigation-side {

    min-width: 0;

}


.center-navigation-next {

    text-align: right;

}


.center-nav-link {

    display: flex;

    align-items: center;

    gap: 15px;

    color: #075c36;

    text-decoration: none;

    transition: .3s ease;

}


.center-navigation-next .center-nav-link {

    justify-content: flex-end;

}


.center-nav-link small {

    display: block;

    margin-bottom: 5px;

    color: #89958f;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


.center-nav-link strong {

    display: block;

    color: #173f2c;

    font-size: 14px;

}


.center-nav-arrow {

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #edf5ef;

    color: #277147;

    border-radius: 50%;

    transition: .3s ease;

}


.center-nav-link:hover .center-nav-arrow {

    color: #ffffff;

    background: #277147;

    transform: scale(1.08);

}


.center-navigation-number {

    padding: 10px 20px;

    color: #ffffff;

    background: #075c36;

    border-radius: 30px;

    font-size: 14px;

}


.center-navigation-number strong {

    font-weight: 800;

}


.center-navigation-disabled {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #b4bcb6;

    font-size: 14px;

}


@media (max-width: 768px) {

    .center-navigation {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .center-navigation-next {

        text-align: center;

    }


    .center-nav-link,
    .center-navigation-next .center-nav-link {

        justify-content: center;

    }


    .center-navigation-number {

        justify-self: center;

        order: -1;

    }


    .center-navigation-disabled {

        justify-content: center;

    }
    /* =========================================================
   EIAR SYSTEM CARD
   ========================================================= */

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

.ei-card {
    background: #ffffff;
    border: 1px solid #e3ebe6;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ei-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.10);
}

.ei-card-image {
    height: 180px;
    position: relative;
    overflow: hidden;
    background: #eaf4ed;
}

.ei-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ei-card-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    background: linear-gradient(135deg, #e7f5eb, #cfe8d6);
}

.ei-status {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 6px 11px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    background: white;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}

.ei-status-active {
    color: #16713a;
}

.ei-status-maintenance {
    color: #9a6500;
}

.ei-status-coming_soon {
    color: #59636d;
}

.ei-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ei-card-type {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #247a42;
    margin-bottom: 8px;
}

.ei-card-body h3 {
    margin: 0 0 10px;
    color: #163d27;
    font-size: 20px;
    line-height: 1.3;
}

.ei-card-body p {
    color: #64736a;
    line-height: 1.6;
    margin: 0 0 18px;
}

.ei-card-unit {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #59675f;
    font-size: 13px;
    margin-bottom: 18px;
}

.ei-card-button {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 15px;
    border-radius: 10px;
    background: #176b38;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    transition: background .2s ease;
}

.ei-card-button:hover {
    background: #0e5129;
    color: #ffffff;
}

.ei-card-disabled {
    background: #e8ece9;
    color: #69736d;
    cursor: default;
}

@media (max-width: 1000px) {
    .ei-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .ei-grid {
        grid-template-columns: 1fr;
    }
}

}
}