/* =====================
   Reset & Base Styles
===================== */
:root {
    --wp--preset--aspect-ratio--square: 1;
    --wp--preset--aspect-ratio--4-3: 4 / 3;
    --wp--preset--aspect-ratio--3-4: 3 / 4;
    --wp--preset--aspect-ratio--3-2: 3 / 2;
    --wp--preset--aspect-ratio--2-3: 2 / 3;
    --wp--preset--aspect-ratio--16-9: 16 / 9;
    --wp--preset--aspect-ratio--9-16: 9 / 16;
    --wp--preset--color--black: #000000;
    --wp--preset--color--cyan-bluish-gray: #abb8c3;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--pale-pink: #f78da7;
    --wp--preset--color--vivid-red: #cf2e2e;
    --wp--preset--color--luminous-vivid-orange: #ff6900;
    --wp--preset--color--luminous-vivid-amber: #fcb900;
    --wp--preset--color--light-green-cyan: #7bdcb5;
    --wp--preset--color--vivid-green-cyan: #00d084;
    --wp--preset--color--pale-cyan-blue: #8ed1fc;
    --wp--preset--color--vivid-cyan-blue: #0693e3;
    --wp--preset--color--vivid-purple: #9b51e0;
    --wp--preset--color--base: #000000;
    --wp--preset--color--contrast: #ffffff;
    --wp--preset--color--accent-1: #001a33;
    --wp--preset--color--accent-2: #113768;
    --wp--preset--color--accent-3: #0598ce;
    --wp--preset--color--accent-4: #555555;
    --wp--preset--color--accent-5: #3a3a3a;
    --wp--preset--color--accent-6: #bebebe;
    --wp--preset--color--custom-blue-dark-1: #f0f4f8;
    --wp--preset--color--custom-color-1: #bcccdc;
    --wp--preset--color--custom-dark-blue-1: #001a33;
    --wp--preset--color--custom-blue-1: #113768;
    --wp--preset--color--custom-color-2: #414141;
    --wp--preset--color--custom-color-3: #6a6a6a;
    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
    --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
    --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
    --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
    --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
    --wp--preset--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
    --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
    --wp--preset--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
    --wp--preset--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
    --wp--preset--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
    --wp--preset--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
    --wp--preset--font-size--small: 0.875rem;
    --wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.196), 1.125rem);
    --wp--preset--font-size--large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);
    --wp--preset--font-size--x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.392), 2rem);
    --wp--preset--font-size--xx-large: clamp(2.15rem, 2.15rem + ((1vw - 0.2rem) * 1.333), 3rem);
    --wp--preset--font-family--manrope: Manrope, sans-serif;
    --wp--preset--font-family--fira-code: "Fira Code", monospace;
    --wp--preset--font-family--tinos: Tinos;
    --wp--preset--font-family--roboto: Roboto;
    --wp--preset--spacing--20: 10px;
    --wp--preset--spacing--30: 20px;
    --wp--preset--spacing--40: 30px;
    --wp--preset--spacing--50: clamp(30px, 5vw, 50px);
    --wp--preset--spacing--60: clamp(30px, 7vw, 70px);
    --wp--preset--spacing--70: clamp(50px, 7vw, 90px);
    --wp--preset--spacing--80: clamp(70px, 10vw, 140px);
    --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
    --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
    --wp-admin-theme-color: #007cba;
    --wp-admin-theme-color--rgb: 0, 124, 186;
    --wp-admin-theme-color-darker-10: #006ba1;
    --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
    --wp-admin-theme-color-darker-20: #005a87;
    --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
    --wp-admin-border-width-focus: 2px;
    --wp-block-synced-color: #7a00df;
    --wp-block-synced-color--rgb: 122, 0, 223;
    --wp-bound-block-color: var(--wp-block-synced-color);
    --wp--preset--font-size--normal: 16px;
    --wp--preset--font-size--huge: 42px;
}

@media (min-resolution: 192dpi) {
    :root {
        --wp-admin-border-width-focus: 1.5px;
    }
}

body {
    background: rgb(33, 32, 32) !important;
    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 300;
    letter-spacing: -0.1px;
    line-height: 1.4;
    --wp--style--root--padding-top: 0px;
    --wp--style--root--padding-right: var(--wp--preset--spacing--50);
    --wp--style--root--padding-bottom: 0px;
    --wp--style--root--padding-left: var(--wp--preset--spacing--50);
}

.footer_row, .btm_row, #mnnav {
    background: rgb(63, 63, 63) !important;
}
.nav-link:hover, .nav-link.active:hover {
    color: rgb(63, 63, 63)
!important; background-color: rgb(189, 214, 134) !important;
}
.nav-link.active {
    color: rgb(63, 63, 63) !important;
    background-color: rgb(149, 168, 104) !important;
}
a, #back-to-top {
    color: rgb(189, 214, 134) !important;
}

#back-to-top .fa-chevron-up {
    color: rgb(33, 32, 32) !important;
}
a:hover {
    color: rgb(149, 168, 104) !important;
}
.story_snippit::before {
    background: linear-gradient(transparent 75%, rgb(33, 32, 32)) !important;
}

/* =====================
   Hero Section
===================== */
.hero-section {
    background-color: #eaeff7;
    padding: 0;
}

.hero-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Container */
.container {

    margin: 0 auto;
    padding: 3rem 1rem;
}


/* =====================
   Intro Section
===================== */
.intro-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem;
    text-align: center;
}

.intro-content {
    max-width: 900px;
}

.intro-content h1 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

.intro-content p {
    font-size: clamp(1.1rem, 1.2vw + 0.8rem, 1.6rem);
    padding: 0 1rem;
}

/* =====================
   Split Layout Section
===================== */
.split-section {
    padding: 20px;
}

.split-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #ffffff !IMPORTANT
}

.split-container.reverse {
    flex-direction: row-reverse;
}

/* Ensure consistent width split */
.split-image,
.split-content {
    flex: 1 1 48%;
    box-sizing: border-box;
}

.split-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Content text */
.split-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.split-content p {
    margin-bottom: 1.2rem;
    font-size: 1.1rem;
}

/* Responsive stacking on small screens */
@media screen and (max-width: 900px) {
    .split-container {
        flex-direction: column;
        text-align: center;
    }

    .split-image,
    .split-content {
        flex: 1 1 100%;
    }

    .split-content h2 {
        font-size: 1.8rem;
    }

    .split-content p {
        font-size: 1rem;
    }
}
/* =====================
   Accent Section
===================== */
.accent-bg {
   /* background-color: #eaeff7; */
}

/* =====================
   Stages Section
===================== */
.stages-section {
    color: #ffffff;
}
.stages-section h2,
.vision-section h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.stages-section p:not(.stages-link),
.vision-section p {
    text-align: center;
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto 2rem;
}

.stage-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.stage-card {
    background-color: #cfe4f9;
    border: 1px solid #0072b5;
    border-radius: 8px;
    padding: 2rem 1rem;
    flex: 1 1 300px;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.stage-card h3 {
    font-size: 1.4rem;
    color: #003366;
    margin-bottom: 1rem;
}

.stage-card:hover {
    transform: translateY(-5px);
}

.stages-link {
    text-align: center;
    font-size: 1rem;
}

/* =====================
   Vision Section
===================== */
.vision-section {
    padding: 4rem 1rem;
    text-align: center;
    color: #ffffff;
}

/* =============================
   Find Out More Button Section
============================= */
.find-out-more-section {
    background-color: #f9f9f9;
    padding: 4rem 1rem;
    text-align: center;
}

.find-out-more-section .section-heading {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.button-link {
    display: inline-block;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.button-link:hover {
    background-color: #003080;
}

/* =====================
   Global Responsive Tweaks
===================== */
@media (max-width: 900px) {
    .split-container,
    .split-container.reverse {
        flex-direction: column;
        text-align: center;
    }

    .split-image,
    .split-content {
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
    .intro-section {
        padding: 2rem 1rem;
    }

    .intro-content h1 {
        font-size: 1.8rem;
    }

    .intro-content p {
        font-size: 1.1rem;
    }

    .stages-section h2,
    .vision-section h2 {
        font-size: 1.6rem;
    }

    .stage-grid {
        flex-direction: column;
        align-items: center;
    }

    .stage-card {
        width: 100%;
        max-width: 90%;
    }
}

@media (max-width: 600px) {
    .intro-content h1 {
        font-size: 1.5rem;
    }

    .intro-content p {
        font-size: 1rem;
    }

    .button-link {
        width: 100%;
        text-align: center;
    }
}

.available_carousel {

    color: white;
}

.carousel-inner {
    overflow: visible;
}

.carousel-item {
    display: flex;
    justify-content: center;
    gap: 30px; /* space between story cards */
    flex-wrap: wrap; /* wrap on small screens */
}

.story-card {
    max-width: 480px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: left;
    background: #fafafa;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease;
}

.story-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.posted-date {
    font-size: 0.85rem;
    color: #666;
}

.story-title-link {
    text-decoration: none;
    color: #222;
}

.story-title-link:hover .story-title,
.read-more-link:hover {
    color: #0073aa;
    text-decoration: underline;
}

.story-title {
    font-size: 1.6rem;
    margin: 0;
    line-height: 1.2;
}

.story-image-container {
    display: flex;
    justify-content: center; /* centers image */
}

.story-image-link {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: transform 0.25s ease;
    display: inline-block;
    max-width: 100%;
}

.story-image-link:hover {
    transform: scale(1.05);
}

.story-image {
    display: block;
    height: auto;
    border-radius: 8px;
    float: none !important;
    overflow: unset;
    margin-left: 0 !important;
    max-width: 100%;
    object-fit: cover;
}

.story-snippet {
    font-size: 1rem;
    color: #444;
}

.read-more-link {
    font-weight: 600;
    font-size: 1rem;
    color: #0073aa;
    text-decoration: none;
    align-self: flex-start;
    cursor: pointer;
}

/* Responsive for smaller screens */
@media (max-width: 1024px) {
    .carousel-item {
        justify-content: center;
        gap: 20px;
    }
    .story-card {
        max-width: 90%;
    }
}

@media (max-width: 600px) {
    .carousel-item {
        flex-direction: column;
        gap: 25px;
    }
    .story-card {
        max-width: 100%;
    }
}


.team {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.team-member {
    border: 1px solid var(--color-border);
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border-radius: 12px; /* Adjust the px value to make corners more or less rounded */
}

.team-photo {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 20px;
}

.profile-container h2 {
    font-family: var(--font-heading);
    margin-bottom: 8px;
    font-size: 1.25rem;
}

.profile-container h3 {
    color: var(--color-accent);
    margin-bottom: 8px;
    font-size: 1rem;
}

.affiliation {
    font-style: italic;
    margin-bottom: 12px;
}

.team-member p {
    margin-bottom: 12px;
    line-height: 1.5;
}

.profile-link {
    margin-top: auto;
    text-decoration: none;
    color: var(--color-accent);
    font-weight: bold;
    transition: color 0.2s ease;
}

.profile-link:hover {
    color: darken(var(--color-accent), 10%);
}



.home_container {


    color: white;

}
.home_container > p {
    display: block;
    unicode-bidi: isolate;
    letter-spacing: -0.1px;
}

.carousel-item.active > .row {
    gap: 2rem;
}
.profile-container {
    border: 1px solid #ccc;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
   max-width: 450px;

    color: white;
}

.view_all_story{
    border: 1px solid #ccc !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    color: white !important;
}

 .view_story{
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    color: white !important;
}

.profile-image img {
    width: 177px;
    height: auto;
    aspect-ratio: 0.75;
    object-fit: cover;
    border-radius: 4px;
}

.profile-name {
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.profile-role {
    font-size: 1.2rem;
    color: var(--accent-6-color);
    margin-bottom: 0.3rem;
}

.profile-institution {
    font-style: italic;
    margin-bottom: 1.5rem;
    font-family: Tinos;
    font-size: 20px;
}

.profile-description {
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 1.5rem;
}

.profile-link a {
    color: var(--link-color);
    text-decoration: none;
    font-size: 1rem;
}

.profile-link a:hover {
    text-decoration: underline;
}

#mnnav {
    border-bottom: 1px solid #ffffff !important;
}


#footer_div {
    border-top: 2px solid #607334 !important;
}

.row .footer_row {
    gap: 0px !important;
}