/*
=================================================================
|   pages.css - Styles for specific pages (About, Contact, etc.)
|   Author: Essam Hashem
|   Version: 1.0
=================================================================
*/
/*
=================================================================
|   pages.css - Homepage Full Redesign
|   Author: Essam Hashem
|   Version: 2.0 (Homepage Overhaul)
=================================================================
*/

/* ===== HERO SECTION ===== */
/* ===== INNOVATIVE HERO SECTION (INDEX PAGE) ===== */
.hero--home {
    min-height: 100vh;
    display: flex;
    align-items: center;
    color: var(--white);
    padding: 120px 0;
    text-align: center;

    /* Center align all text */
}

/* Make the content container wider */
.container--hero {
    max-width: 900px;
    /* Wider content area */
    margin: 0 auto;
}

.hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.hero__video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
}

/* Green Tint Overlay with Blend Mode */
.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* A simple dark gradient on the left for text contrast, fading to nothing */
    background: linear-gradient(9deg, rgba(0, 0, 0, 0.151) 25%, transparent 60%);
    mix-blend-mode: normal;
    /* Use the default blend mode for realism */
}



.hero__content {
    position: relative;
    z-index: 4;
    /* Content sits on top of everything */
}

.hero__subtitle {
    display: inline-block;
    /* ADDED: This makes the margin work */
    font-weight: 500;
    color: var(--primary-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-6);
    /* This will now be applied */
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.hero__title {
    margin-bottom: var(--space-6);
}

.hero__title-main {
    display: block;
    font-family: 'Cochocib Script Latin Pro', cursive;
    font-size: 7rem;
    font-weight: normal;
    line-height: 1;
    color: var(--white);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    margin-bottom: var(--space-4);
    /* This provides space below the name */
}

.hero__title-sub {
    display: block;
    font-size: var(--text-3xl);
    font-weight: 400;
    color: var(--gray-300);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero__description {
    font-size: var(--text-lg);
    color: var(--gray-200);
    line-height: 1.8;
    margin: 0 auto var(--space-8);
    max-width: 700px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.hero__stats {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    /* Center the stats bar */
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    max-width: 800px;
    margin: 0 auto;
}

.hero__stat {
    flex: 1;
    text-align: center;
    padding: 0 var(--space-4);
    position: relative;
}

.hero__stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

.hero__stat-number {
    display: block;
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--primary-light);
    line-height: 1;
}

.hero__stat-label {
    font-size: var(--text-sm);
    color: var(--gray-300);
    margin-top: var(--space-2);
}

/* ----- OVERVIEW SECTION ----- */
.overview__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.overview__highlights .highlight__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.overview__highlights .highlight__icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: var(--white);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl);
    box-shadow: var(--shadow-lg);
}

.overview__highlights .highlight__title {
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.overview__highlights .highlight__description {
    line-height: 1.7;
    color: var(--gray-600);
    margin: 0;
}

.overview__cta {
    margin-top: var(--space-8);
}

.overview__visual {
    position: relative;
}

.overview__image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.overview__image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

overview__image img,
.overview__image iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
    border: none;
    /* Add this to remove default iframe border */
}

.overview__image:hover img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.overview__image .image__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 10%, transparent);
    padding: var(--space-4);
    color: var(--white);
    font-size: var(--text-sm);
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition);
}

.overview__image:hover .image__overlay {
    opacity: 1;
    transform: translateY(0);
}

.overview__image--main {
    grid-column: 1 / 3;
    height: 350px;
}

.overview__image--secondary,
.overview__image--accent {
    height: 250px;
}

/* ===== ENHANCED FEATURED VENTURES (3-CARD GRID) ===== */
.featured-ventures {
    background-color: var(--gray-900);
}

.ventures__grid {
    display: grid;
    /* Creates the 3-column layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-8);
}

.venture-preview-card {
    position: relative;
    height: 450px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    border: 1px solid var(--gray-700);
}

.venture-preview__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.venture-preview__background::after {
    /* Permanent dark gradient overlay for text legibility */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.4) 0%, rgba(17, 24, 39, 0.8) 100%);
}

.venture-preview__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.venture-preview__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transition: var(--transition);
}

.venture-preview__logo img {
    max-width: 90%;
    height: auto;
}

.venture-preview__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--space-12) var(--space-6) var(--space-6);
    text-align: center;
    color: var(--white);
    background: linear-gradient(to top, rgba(17, 24, 39, 1) 40%, transparent);

    /* Initially hidden by moving it down */
    transform: translateY(100%);
    transition: transform 0.5s ease;
}

.overlay__title {
    font-size: var(--text-2xl);
    color: var(--white);
    margin: 0;
}

.overlay__description {
    color: var(--gray-300);
    margin: var(--space-2) 0 var(--space-6);
    height: 50px;
    /* Ensures consistent layout */
}

/* --- THE HOVER EFFECT --- */
.venture-preview-card:hover .venture-preview__background img {
    transform: scale(1.1);
    /* Zoom in the background image */
}

.venture-preview-card:hover .venture-preview__logo {
    opacity: 0;
    /* Hide the central logo */
    transform: translate(-50%, -50%) scale(0.8);
}

.venture-preview-card:hover .venture-preview__overlay {
    transform: translateY(0);
    /* Slide the details overlay up */
}

/* ----- IMPACT HIGHLIGHTS SECTION ----- */
.impact__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-8);
}

.impact__category {
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
}

.impact__category:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary);
}

.impact__icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: var(--space-4);
    background-color: var(--primary-light);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.impact__title {
    font-size: 1.75rem;
    margin-bottom: var(--space-6);
}

.impact__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.impact__stats .impact__number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1;
}

.impact__stats .impact__unit {
    font-size: 1.5rem;
    color: var(--primary);
    margin-left: var(--space-1);
}

.impact__stats .impact__label {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.impact__description {
    color: var(--gray-600);
    margin-bottom: var(--space-6);
}

.impact__link {
    font-weight: 600;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.impact__link:hover i {
    transform: translateX(5px);
}

.impact__link i {
    transition: var(--transition-fast);
}

/* ----- LATEST NEWS SECTION ----- */
.news__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
}

.news__card {
    background-color: var(--white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.news__card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.news__card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
    /* No gap as content/image touches */
}

.news__image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.news__card--featured .news__image {
    height: 100%;
}

.news__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news__card:hover .news__image img {
    transform: scale(1.05);
}

.news__category {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    background-color: var(--primary);
    color: var(--white);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
}

.news__date {
    position: absolute;
    bottom: var(--space-4);
    right: var(--space-4);
    background-color: var(--white);
    color: var(--gray-800);
    border-radius: var(--radius-lg);
    text-align: center;
    padding: var(--space-3);
    box-shadow: var(--shadow-md);
    font-weight: 700;
    line-height: 1;
    width: 60px;
}

.news__date .date__day {
    font-size: 1.75rem;
    display: block;
}

.news__date .date__month {
    font-size: 0.8rem;
    text-transform: uppercase;
    display: block;
}

.news__content {
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.news__title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: var(--space-4);
    line-height: 1.4;
}

.news__title a:hover {
    color: var(--primary);
}

.news__excerpt {
    color: var(--gray-600);
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: var(--space-6);
}

.news__meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--gray-500);
    margin-bottom: var(--space-6);
}

.news__meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.news__link {
    color: var(--primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
}

.news__link:hover i {
    transform: translateX(4px);
}

.news__link i {
    transition: var(--transition-fast);
}

/* ----- TESTIMONIALS SECTION ----- */
.testimonials-slider {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--gray-800);
    border: 1px solid var(--gray-700);
    padding: var(--space-12) var(--space-8);
}

.slider-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-item {
    min-width: 100%;
    padding: 0 var(--space-8);
    text-align: center;
}

.testimonial-rating {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    color: #f59e0b;
    /* Gold color for stars */
    font-size: var(--text-lg);
}

.testimonial-text {

    font-size: var(--text-2xl);
    line-height: 1.7;
    color: var(--gray-200);
    margin-bottom: var(--space-8);
    font-style: italic;
}

.testimonial-author-info {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}

.testimonial-author {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--white);
    margin: 0;
    text-align: center;
}

.testimonial-position {
    color: var(--gray-400);
    font-size: var(--text-sm);
    text-align: left;
    margin: 0;
}

.slider-controls {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-3);
    z-index: 10;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--gray-600);
    cursor: pointer;
    transition: var(--transition);
}

.slider-dot.active {
    background: var(--primary);
    transform: scale(1.2);
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    font-size: var(--text-lg);
    color: var(--white);
    z-index: 10;
}

.slider-nav:hover {
    background: var(--primary);
}

.slider-nav.prev {
    left: var(--space-6);
}

.slider-nav.next {
    right: var(--space-6);
}

.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--primary);
    z-index: 10;
    border-bottom-left-radius: var(--radius-xl);
}

.slide-counter {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: rgba(0, 0, 0, 0.3);
    color: var(--white);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    z-index: 10;
}


/* ----- RESPONSIVE STYLES FOR HOME PAGE ----- */
@media (max-width: 992px) {
    .hero__title-main {
        font-size: 5rem;
    }

    .hero__title-sub {
        font-size: 2rem;
    }

    .overview__content {
        grid-template-columns: 1fr;
    }

    .overview__visual {
        order: -1;
    }

    /* Move image to top */
    .news__card--featured {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero--home {
        text-align: center;
    }

    .hero__overlay {
        background: rgba(17, 24, 39, 0.7);
    }

    .hero__content {
        max-width: 100%;
    }

    .hero__description {
        margin: 0 auto var(--space-8);
    }

    .hero__stats {
        flex-direction: column;
        align-items: center;
        gap: var(--space-6);
    }

    .hero__stat {
        padding-right: 0;
    }

    .hero__stat:not(:last-child)::after {
        display: none;
    }

    .hero__title-main {
        font-size: 3.5rem;
    }

    .hero__title-sub {
        font-size: 1.5rem;
    }

    .venture__card {
        flex: 0 0 320px;
    }

    .ventures__navigation {
        display: none;
    }

    .impact__stats {
        grid-template-columns: 1fr;
    }

    .slider-nav {
        width: 40px;
        height: 40px;
        font-size: var(--text-base);
    }

    .slider-nav.prev {
        left: var(--space-3);
    }

    .slider-nav.next {
        right: var(--space-3);
    }

    .testimonial-text {
        font-size: var(--text-xl);
    }
}

@media (max-width: 480px) {
    .venture__card {
        flex: 0 0 90%;
    }

    .news__grid {
        grid-template-columns: 1fr;
    }
}

/* ===== UTILITIES ===== */
.section--no-padding {
    padding-top: 0;
    padding-bottom: 0;
}

.btn--text {
    background: none;
    color: var(--gray-400);
    border-color: transparent;
    padding: var(--space-3) var(--space-4);
}

.btn--text:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.1);
}

/* ===== PAGE HERO STYLES ===== */
.page-hero {
    text-align: left;
    justify-content: flex-start;
    align-items: flex-end;
    padding-bottom: var(--space-20);
}

.page-hero__background {
    opacity: 10;
    /* Override for a more prominent background */
}

.page-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.page-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(17, 24, 39, 0.9) 10%, rgba(17, 24, 39, 0.3) 100%);
}

.page-hero__content {
    text-align: left;
    max-width: 100%;
}

.page-hero__actions {
    justify-content: flex-start;
}

.breadcrumb {
    color: var(--gray-300);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.breadcrumb__link {
    color: var(--gray-100);
    transition: var(--transition-fast);
}

.breadcrumb__link:hover {
    color: var(--primary);
}

.breadcrumb__separator {
    margin: 0 var(--space-2);
    color: var(--gray-400);
}

.breadcrumb__current {
    color: var(--primary-light);
    font-weight: 500;
}

/* ===== HERO QUICK STATS (ABOUT PAGE) ===== */
/* This rule styles the stats grid when it's inside any page-hero */
.page-hero .stats__grid {
    display: flex;
    gap: var(--space-6);
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-8);
    /* Adds space between buttons and stats */
    justify-content: space-around;
    flex-wrap: wrap;

    /* Remove old positioning styles */
    transform: none;
    margin-bottom: 0;
    box-shadow: none;
}

/* Style individual stat items for the hero context */
.page-hero .stat__item {
    padding: 0;
    flex-grow: 1;
    justify-content: center;
    position: relative;
    min-width: 200px;
    /* Ensures items don't get too cramped */
}

/* Add a separator line between items for a polished look */
.page-hero .stat__item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: calc(-1 * var(--space-6) / 2);
    top: 50%;
    transform: translateY(-50%);
    height: 50px;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Restyle icons and text to be visible on the dark hero background */
.page-hero .stat__icon {
    background-color: transparent;
    color: var(--primary-light);
    width: auto;
    height: auto;
    font-size: var(--text-3xl);
}

.page-hero .stat__number {
    color: var(--white);
    font-size: var(--text-2xl);
}

.page-hero .stat__label {
    color: var(--gray-300);
    opacity: 0.9;
}

/* ===== BIOGRAPHY SECTION ===== */
.biography__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}

.biography__text {
    padding-right: var(--space-8);
}

.biography__lead {
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--gray-700);
    border-left: 3px solid var(--primary);
    padding-left: var(--space-6);
    margin-bottom: var(--space-8);
}

.biography__sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.biography__section-title {
    font-size: var(--text-xl);
    color: var(--gray-800);
    margin-bottom: var(--space-3);
}

.biography__visual {
    position: relative;
    padding-top: var(--space-8);
}

.biography__image-stack {
    position: relative;
    height: 500px;
    margin-bottom: var(--space-8);
}

.biography__image {
    position: absolute;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: var(--transition);
}

.biography__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.biography__image--main {
    width: 80%;
    height: 80%;
    top: 0;
    left: 0;
    z-index: 3;
}

.biography__image--secondary {
    width: 55%;
    height: 55%;
    bottom: 0;
    right: 0;
    z-index: 4;
    border: 4px solid var(--white);
}

.biography__image--accent {
    width: 40%;
    height: 40%;
    top: 5%;
    right: 5%;
    z-index: 2;
    transform: rotate(-5deg);
}

.image__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(17, 24, 39, 0.7);
    color: var(--white);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    opacity: 0;
    transform: translateY(100%);
    transition: var(--transition);
}

.biography__image:hover .image__caption {
    opacity: 1;
    transform: translateY(0);
}

.achievements__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

.achievements__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.achievement__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--gray-600);
}

.achievement__item i {
    color: var(--primary);
}

/* ===== VISION & MISSION SECTION ===== */
.vision-mission__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-8);
}

.vision-mission__card {
    background-color: var(--gray-800);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-700);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.vision-mission__card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.card__icon {
    font-size: var(--text-4xl);
    color: var(--primary);
    margin-bottom: var(--space-6);
}

.card__title {
    margin-bottom: var(--space-4);
    font-size: var(--text-2xl);
}

.card__description {
    flex-grow: 1;
    margin-bottom: var(--space-6);
}

.card__details h4 {
    color: var(--primary-light);
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.card__details ul {
    list-style: disc;
    padding-left: var(--space-5);
    color: var(--gray-300);
}

.card__details li {
    margin-bottom: var(--space-2);
}

/* ===== TIMELINE SECTION ===== */
.timeline__container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.timeline__line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--gray-200);
    transform: translateX(-50%);
}

.timeline__item {
    position: relative;
    width: 50%;
    padding: var(--space-4);
    margin-bottom: var(--space-8);
}

.timeline__item:nth-child(odd) {
    /* Left items */
    left: 0;
    padding-right: var(--space-8);
}

.timeline__item:nth-child(even) {
    /* Right items */
    left: 50%;
    padding-left: var(--space-8);
}

.timeline__content {
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    position: relative;
    box-shadow: var(--shadow);
}

/* Arrow */
.timeline__content::after {
    content: '';
    position: absolute;
    top: 20px;
    width: 0;
    height: 0;
    border-style: solid;
}

.timeline__item:nth-child(odd) .timeline__content::after {
    right: -15px;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent var(--white);
}

.timeline__item:nth-child(even) .timeline__content::after {
    left: -15px;
    border-width: 15px 15px 15px 0;
    border-color: transparent var(--white) transparent transparent;
}


.timeline__marker {
    position: absolute;
    top: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    z-index: 10;
    border: 4px solid var(--white);
    box-shadow: var(--shadow-md);
}

.timeline__item:nth-child(odd) .timeline__marker {
    right: -25px;
}

.timeline__item:nth-child(even) .timeline__marker {
    left: -25px;
}

.timeline__date {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--primary);
    margin-bottom: var(--space-2);
}

.timeline__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}

.timeline__achievements {
    margin-top: var(--space-4);
}

.achievement__tag {
    display: inline-block;
    background-color: var(--gray-100);
    color: var(--gray-600);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    margin-right: var(--space-2);
    margin-bottom: var(--space-2);
}


/* ===== PHILOSOPHY SECTION ===== */
.philosophy__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.philosophy__quote {
    background-color: var(--white);
    padding: var(--space-8);
    border-left: 5px solid var(--primary);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-md);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.philosophy__quote blockquote {
    font-family: 'Playfair Display', serif;
    font-size: var(--text-2xl);
    color: var(--gray-800);
    line-height: 1.5;
    margin-bottom: var(--space-4);
}

.philosophy__quote cite {
    font-weight: 600;
    color: var(--primary);
}

.philosophy__principles {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.principle__item {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
}

.principle__icon {
    font-size: var(--text-2xl);
    color: var(--primary);
    margin-top: var(--space-1);
}

.principle__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-1);
}

.philosophy__visual {
    position: relative;
}

.philosophy__image {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.philosophy__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--space-6);
    background: linear-gradient(to top, rgba(17, 24, 39, 0.8), transparent);
}

.philosophy__stats {
    display: flex;
    justify-content: space-around;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
    color: var(--white);
}

.philosophy__stat .stat__number {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--white);
}

.philosophy__stat .stat__label {
    font-size: var(--text-sm);
    color: var(--gray-300);
}

.philosophy__insights {
    margin-top: var(--space-8);
    background-color: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.insights__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

.insights__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.insight__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--gray-600);
}

.insight__item i {
    color: var(--primary);
}

/* ===== PERSONAL INTERESTS SECTION ===== */
.interests__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-8);
}

.interest__card {
    background-color: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.interest__card:hover {
    transform: translateY(-10px);
}

.interest__image {
    position: relative;
    height: 250px;
}

.interest__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.interest__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(34, 197, 94, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-4xl);
    color: var(--white);
    opacity: 0;
    transition: var(--transition);
}

.interest__card:hover .interest__overlay {
    opacity: 1;
}

.interest__content {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.interest__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}

.interest__description {
    flex-grow: 1;
    margin-bottom: var(--space-6);
}

.interest__tags {
    margin-top: auto;
}

.interest__tags .tag {
    display: inline-block;
    background-color: var(--gray-100);
    color: var(--gray-600);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    margin-right: var(--space-2);
    margin-bottom: var(--space-2);
}

/* =================================================== */
/* ===== MODIFIED OPTION 2: GREEN & MAIN FONTS ===== */
/* =================================================== */
.cta.section {
    position: relative;
    color: var(--white);
    padding: var(--space-24) 0;
    /* Darker overlay with a hint of green */
    background-image: linear-gradient(rgba(17, 24, 39, 0.85), rgba(17, 24, 39, 0.85)), url('../images/hero/sustainability-innovation.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Creates a cool parallax effect on scroll */
}

.cta__content {
    position: relative;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    /* Glassmorphism effect with a touch more darkness */
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
}

.cta__title {
    color: var(--primary);
    /* Use your primary green for the title */
    font-size: var(--text-5xl);
    font-weight: 700;
    /* Ensure it's bold */
    margin-bottom: var(--space-4);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.cta__description {
    color: var(--gray-300);
    font-size: var(--text-lg);
    max-width: 600px;
    margin: 0 auto var(--space-8);
}

.cta__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.cta__actions .btn--primary {
    background-color: var(--primary);
    /* Solid primary green */
    color: var(--white);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.cta__actions .btn--primary:hover {
    background-color: var(--primary-light);
    /* Lighter green on hover */
    border-color: var(--primary-light);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.cta__actions .btn--outline {
    border-color: var(--primary);
    /* Green outline */
    color: var(--primary);
}

.cta__actions .btn--outline:hover {
    background-color: rgba(var(--primary-rgb), 0.15);
    /* Subtle green background on hover */
    color: var(--primary-dark);
}

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

@media (max-width: 992px) {

    /* Biography */
    .biography__content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .biography__text {
        padding-right: 0;
    }

    .biography__visual {
        order: -1;
        /* Move image to top on mobile */
    }

    /* Philosophy */
    .philosophy__content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    /* Timeline */
    .timeline__line {
        left: 25px;
        /* Move line to the left */
    }

    .timeline__item {
        width: 100%;
        padding-left: var(--space-12);
        padding-right: 0;
    }

    .timeline__item:nth-child(even) {
        left: 0;
        padding-left: var(--space-12);
    }

    .timeline__marker {
        left: 0;
    }

    .timeline__content::after {
        left: -15px;
        border-width: 15px 15px 15px 0;
        border-color: transparent var(--white) transparent transparent !important;
    }
}

@media (max-width: 768px) {
    .quick-stats {
        transform: translateY(0);
        margin-bottom: 0;
        padding: var(--space-8) 0;
    }

    .stats__grid {
        box-shadow: none;
        padding: 0;
        gap: var(--space-8);
        grid-template-columns: 1fr;
    }

    .cta__title {
        font-size: var(--text-3xl);
    }

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

    .cta__actions .btn {
        width: 80%;
    }
}

@media (max-width: 480px) {
    .page-hero {
        padding-bottom: var(--space-16);
    }

    .page-hero__actions {
        flex-direction: column;
        width: 100%;
    }

    .page-hero__actions .btn {
        width: 100%;
    }

    .biography__image-stack {
        height: 400px;
    }
}

/*
=================================================================
|   IMPACT PAGE STYLES
=================================================================
*/

/* ===== HERO HIGHLIGHTS ===== */
.page-hero__highlight {
    display: flex;
    gap: var(--space-8);
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    justify-content: space-around;
    flex-wrap: wrap;
}

.highlight__item {
    text-align: center;
    color: var(--white);
}

.highlight__number,
.highlight__unit {
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: 1;
    color: var(--primary-light);
}

.highlight__unit {
    margin-left: var(--space-1);
}

.highlight__label {
    display: block;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
    margin-top: var(--space-2);
}


/* ===== IMPACT OVERVIEW SECTION ===== */
.impact__dimensions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-8);
}

.dimension__card {
    background-color: var(--gray-50);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    text-align: center;
    border: 1px solid var(--gray-200);
    transition: var(--transition);
}

.dimension__card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.dimension__icon {
    font-size: var(--text-4xl);
    color: var(--primary);
    margin-bottom: var(--space-4);
}

.dimension__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

.dimension__description {
    color: var(--gray-600);
    margin-bottom: var(--space-6);
    min-height: 80px;
    /* Ensures cards align nicely */
}

.dimension__metrics {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    text-align: left;
}

.dimension__metrics .metric__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--white);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
}

.metric__item .metric__number {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--gray-800);
}

.metric__item .metric__label {
    font-size: var(--text-sm);
    color: var(--gray-500);
}


/* ===== SHARED CHART & CASE STUDY STYLES ===== */
.chart__container {
    background-color: var(--gray-800);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
    border: 1px solid var(--gray-700);
}

.chart__title {
    color: var(--white);
    font-size: var(--text-lg);
    text-align: center;
    margin-bottom: var(--space-4);
}

.case-studies__title {
    color: var(--white);
    text-align: center;
    font-size: var(--text-2xl);
    margin-bottom: var(--space-8);
}

.case-studies__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-8);
}

.case-study__card {
    background-color: var(--gray-800);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--gray-700);
    transition: var(--transition);
}

.case-study__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.case-study__image img {
    height: 200px;
    width: 100%;
    object-fit: cover;
}

.case-study__content {
    padding: var(--space-6);
}

.case-study__title {
    color: var(--white);
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}

.case-study__description {
    color: var(--gray-300);
    margin-bottom: var(--space-4);
}

.case-study__results {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.result__item {
    background-color: var(--gray-700);
    color: var(--primary-light);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
}

/* ===== ENVIRONMENTAL IMPACT SECTION ===== */
.environmental__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    margin-bottom: var(--space-16);
}

.environmental__details .detail__title {
    color: var(--white);
    margin-bottom: var(--space-6);
}

.environmental__details .detail__section:not(:last-child) {
    margin-bottom: var(--space-10);
}

.environmental__details .achievement__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.environmental__details .achievement__item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.environmental__details .achievement__icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: var(--primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
}

.environmental__details .achievement__content h4 {
    color: var(--primary-light);
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

.environmental__details .achievement__content p {
    color: var(--gray-300);
    margin: 0;
}

.carbon__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    text-align: center;
}

.carbon__number {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--primary-light);
}

.carbon__unit {
    color: var(--gray-300);
    display: block;
    line-height: 1.2;
}

.carbon__label {
    color: var(--gray-400);
    font-size: var(--text-sm);
    margin-top: var(--space-1);
}


/* ===== ECONOMIC IMPACT SECTION ===== */
.economic__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    margin-bottom: var(--space-16);
}

.economic__overview .overview__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}

.economic__overview .overview__description {
    margin-bottom: var(--space-8);
}

.economic__metrics {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.economic__metrics .metric__card {
    display: flex;
    gap: var(--space-5);
    background-color: var(--gray-50);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.economic__metrics .metric__icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background-color: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius-full);
    font-size: var(--text-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.economic__metrics .metric__number {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--gray-800);
}

.economic__metrics .metric__label {
    font-weight: 600;
    color: var(--gray-600);
}

.economic__metrics .metric__description {
    font-size: var(--text-sm);
    color: var(--gray-500);
    margin: 0;
    margin-top: var(--space-1);
}

.economic__breakdown .breakdown__title {
    text-align: center;
    font-size: var(--text-2xl);
    margin-bottom: var(--space-8);
}

.economic__breakdown .breakdown__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
}

.sector__card {
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.sector__header {
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
}

.sector__title {
    font-size: var(--text-lg);
    font-weight: 700;
}

.sector__company {
    color: var(--primary);
    font-weight: 500;
    font-size: var(--text-sm);
}

.sector__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}

.sector__metric .metric__label {
    font-size: var(--text-xs);
    color: var(--gray-500);
    text-transform: uppercase;
    display: block;
}

.sector__metric .metric__value {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--gray-800);
}


/* ===== SOCIAL IMPACT SECTION ===== */
.social__content {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-12);
    margin-bottom: var(--space-16);
}

.social__overview .overview__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}

.social__overview .overview__description {
    margin-bottom: var(--space-8);
}

.social__programs {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.program__item {
    display: flex;
    gap: var(--space-5);
}

.program__icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background-color: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius-lg);
    font-size: var(--text-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.program__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

.program__description {
    margin-bottom: var(--space-3);
}

.program__stats {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--gray-500);
    font-weight: 500;
}

.social__visual .visual__container {
    background-color: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
}

.social__visual .visual__title {
    text-align: center;
    margin-bottom: var(--space-4);
    font-size: var(--text-lg);
}

.impact__testimonials .testimonials__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

.impact__testimonials .testimonial__item {
    background-color: var(--white);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary);
}

.impact__testimonials .testimonial__item:not(:last-child) {
    margin-bottom: var(--space-4);
}

.impact__testimonials .testimonial__quote {
    font-style: italic;
    color: var(--gray-600);
    margin-bottom: var(--space-2);
}

.impact__testimonials .testimonial__author {
    font-weight: 600;
    color: var(--gray-800);
}

.social__initiatives .initiatives__title {
    text-align: center;
    font-size: var(--text-2xl);
    margin-bottom: var(--space-8);
}

.initiatives__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-8);
}

.initiative__card {
    background-color: var(--white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.initiative__image img {
    height: 200px;
    width: 100%;
    object-fit: cover;
}

.initiative__content {
    padding: var(--space-6);
}

.initiative__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}

.initiative__description {
    margin-bottom: var(--space-4);
}

.initiative__impact {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--gray-600);
}

.initiative__impact .impact__metric {
    font-weight: 500;
    color: var(--primary);
}


/* ===== GLOBAL IMPACT SECTION ===== */
.global__map .map__title {
    color: var(--white);
    text-align: center;
    margin-bottom: var(--space-8);
    font-size: var(--text-2xl);
}

.global__map .map__container {
    background-image: url('../images/impact/world-map.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    position: relative;
    margin-bottom: var(--space-16);
}

/* Note: For a real map, use JS. This is a conceptual layout */
.map__regions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4);
}

.region__item {
    background-color: var(--gray-800);
    border: 1px solid var(--gray-700);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    width: 220px;
    text-align: left;
    transition: var(--transition);
}

.region__item:hover {
    transform: scale(1.05);
    border-color: var(--primary);
}

.region__name {
    color: var(--white);
    font-size: var(--text-lg);
}

.region__type {
    font-size: var(--text-sm);
    font-weight: 500;
}

.region__item--headquarters .region__type {
    color: var(--primary);
}

.region__item--franchise .region__type {
    color: #f59e0b;
}

.region__item--export .region__type {
    color: #3b82f6;
}

.region__item--partnership .region__type {
    color: #8b5cf6;
}

.region__stats {
    margin-top: var(--space-3);
    border-top: 1px solid var(--gray-700);
    padding-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--gray-300);
}

.global__achievements .achievements__title {
    color: var(--white);
    text-align: center;
    margin-bottom: var(--space-8);
    font-size: var(--text-2xl);
}

.achievements__timeline {
    display: flex;
    position: relative;
    justify-content: space-between;
}

.achievements__timeline::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--gray-700);
}

.achievements__timeline .timeline__item {
    text-align: center;
    position: relative;
    padding-top: var(--space-8);
}

.timeline__year {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary);
    color: var(--white);
    font-weight: 700;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
}

.timeline__content {
    color: var(--gray-300);
}

.timeline__content h4 {
    color: var(--white);
    font-size: var(--text-lg);
}


/* ===== FUTURE GOALS SECTION ===== */
.goals__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-8);
}

.goal__card {
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    text-align: center;
}

.goal__icon {
    font-size: var(--text-4xl);
    color: var(--primary);
    margin-bottom: var(--space-4);
}

.goal__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-6);
}

.goal__metrics {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    text-align: center;
}

.goal__metric .metric__number {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--gray-800);
}

.goal__metric .metric__label {
    color: var(--gray-500);
}

.goal__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: left;
}

.goal__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: 500;
}

.goal__item i {
    color: var(--primary);
}


/* ===== RESPONSIVE STYLES FOR IMPACT PAGE ===== */
@media (max-width: 992px) {

    .environmental__content,
    .economic__content {
        grid-template-columns: 1fr;
    }

    .social__content {
        grid-template-columns: 1fr;
    }

    .social__visual {
        order: -1;
    }

    .map__regions {
        flex-direction: column;
        align-items: center;
        gap: var(--space-6);
    }

    .global__map .map__container {
        height: auto;
        background-image: none;
    }
}

@media (max-width: 768px) {
    .achievements__timeline {
        flex-direction: column;
        gap: var(--space-8);
    }

    .achievements__timeline::before {
        left: 20px;
        top: 0;
        bottom: 0;
        width: 3px;
        height: 100%;
    }

    .achievements__timeline .timeline__item {
        text-align: left;
        padding-left: 60px;
        padding-top: 0;
    }

    .timeline__year {
        left: 0;
        transform: none;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/*
=================================================================
|   VENTURES PAGE STYLES
=================================================================
*/

/* ===== HERO STATS ===== */
.page-hero__stats {
    display: flex;
    gap: var(--space-8);
    margin-top: var(--space-8);
    justify-content: flex-start;
    /* Aligns with hero content */
    flex-wrap: wrap;
}

.hero-stat {
    text-align: left;
    color: var(--white);
    padding-right: var(--space-8);
    position: relative;
}

/* Vertical separator line */
.hero-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.3);
}

.hero-stat__number {
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: 1;
    color: var(--primary-light);
}

.hero-stat__label {
    display: block;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
    margin-top: var(--space-2);
}


/* ===== PORTFOLIO OVERVIEW SECTION ===== */
.portfolio__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-8);
}

.portfolio__card {
    background-color: var(--gray-50);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    transition: var(--transition);
    text-align: center;
}

.portfolio__card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.portfolio__icon {
    font-size: var(--text-4xl);
    color: var(--primary);
    margin-bottom: var(--space-4);
}

.portfolio__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

.portfolio__description {
    color: var(--gray-600);
    margin-bottom: var(--space-6);
    min-height: 110px;
    /* Align cards */
}

.portfolio__companies {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
}

.company-tag {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
}


/* ===== VENTURE DETAIL SECTION (GENERAL STYLES) ===== */
.venture-detail {
    padding: var(--space-24) 0;
}

.venture__header {
    display: flex;
    gap: var(--space-8);
    align-items: center;
    margin-bottom: var(--space-12);
    text-align: left;
}

.venture__logo-container {
    flex-shrink: 0;
    background-color: var(--white);
    border-radius: var(--radius-2xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.venture__logo {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.venture__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-2);
}

.section--dark .venture__title {
    color: var(--white);
}

.venture__tagline {
    font-size: var(--text-xl);
    color: var(--gray-500);
    margin-bottom: var(--space-4);
}

.section--dark .venture__tagline {
    color: var(--gray-400);
}

.venture__badges {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.badge {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-full);
}

.badge--primary {
    background-color: var(--primary);
    color: var(--white);
}

.badge--success {
    background-color: #10b981;
    color: var(--white);
}

.badge--info {
    background-color: #3b82f6;
    color: var(--white);
}

/* Main Content Grid */
.venture__content {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-12);
    align-items: start;
}

.venture__description .content__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}

.section--dark .venture__description .content__title {
    color: var(--white);
}

.venture__description .content__text {
    margin-bottom: var(--space-6);
}

.section--dark .venture__description .content__text {
    color: var(--gray-300);
}

/* Visual Column */
.venture__visual {
    position: sticky;
    top: 120px;
    /* Offset for sticky header */
}

.venture__image-gallery .gallery__main {
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-4);
}

.venture__image-gallery .gallery__image {
    height: 350px;
    width: 100%;
    object-fit: cover;
}

.venture__image-gallery .image__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    padding: var(--space-4);
}

.venture__image-gallery .image__caption {
    color: var(--white);
    font-weight: 500;
}

.gallery__thumbnails {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.gallery__thumb {
    border-radius: var(--radius-lg);
    cursor: pointer;
    opacity: 0.7;
    transition: var(--transition);
    border: 2px solid transparent;
}

.gallery__thumb:hover,
.gallery__thumb.active {
    opacity: 1;
    transform: scale(1.05);
    border-color: var(--primary);
}


/* ===== DR. WEEE SPECIFIC STYLES ===== */
.venture__achievements .achievements__title {
    font-size: var(--text-lg);
    color: var(--white);
    margin-bottom: var(--space-4);
}

.achievements__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.achievements__grid .achievement__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--gray-800);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
}

.achievement__icon {
    font-size: var(--text-2xl);
    color: var(--primary);
}

.achievement__number {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--white);
}

.achievement__label {
    font-size: var(--text-sm);
    color: var(--gray-400);
}

.venture__services .services__title {
    font-size: var(--text-lg);
    color: var(--white);
    margin-bottom: var(--space-4);
}

.services__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.service__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--gray-800);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    color: var(--gray-200);
}

.service__item i {
    color: var(--primary);
}

/* Tabs */
.venture__details {
    margin-top: var(--space-16);
}

.details__tabs {
    display: flex;
    gap: var(--space-2);
    border-bottom: 2px solid var(--gray-700);
    margin-bottom: var(--space-8);
}

.tab__button {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--gray-400);
    border-bottom: 4px solid transparent;
    transform: translateY(2px);
    transition: var(--transition);
}

.tab__button.active,
.tab__button:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.tab__panel {
    display: none;
}

.tab__panel.active {
    display: block;
}

.panel__title {
    font-size: var(--text-xl);
    color: var(--white);
    margin-bottom: var(--space-6);
}

.panel__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.panel__item {
    background: var(--gray-800);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
}

.panel__item h5 {
    color: var(--primary-light);
    margin-bottom: var(--space-2);
}

.panel__item p {
    color: var(--gray-300);
    margin: 0;
}

.process__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.process__step {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.step__number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--white);
}

.step__content h5 {
    color: var(--primary-light);
    margin-bottom: 0;
}

.step__content p {
    color: var(--gray-300);
    margin: 0;
}

.impact__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

.metric__category h5 {
    color: var(--primary-light);
    margin-bottom: var(--space-4);
}

.metric__category ul {
    list-style: disc;
    padding-left: var(--space-5);
    color: var(--gray-300);
}

.metric__category li {
    margin-bottom: var(--space-2);
}

.future__roadmap {
    position: relative;
    padding-left: var(--space-8);
    border-left: 3px solid var(--gray-700);
}

.roadmap__item {
    position: relative;
    padding-bottom: var(--space-8);
}

.roadmap__item:last-child {
    padding-bottom: 0;
}

.roadmap__timeline {
    position: absolute;
    left: calc(-1 * var(--space-8) - 1.5px);
    transform: translateX(-50%);
    background: var(--gray-900);
    padding: var(--space-2);
    border: 3px solid var(--primary);
    border-radius: var(--radius-lg);
    color: var(--white);
    font-weight: 600;
}

.roadmap__content h5 {
    color: var(--primary-light);
}

.roadmap__content p {
    color: var(--gray-300);
    margin: 0;
}


/* ===== ECOO & SPEAR INK & KAYAN & REG SPECIFIC STYLES ===== */
/* Ecoo */
.venture__products .products__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

.products__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.product__item {
    background-color: var(--gray-50);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
}

.product__icon {
    font-size: var(--text-2xl);
    color: var(--primary);
    margin-bottom: var(--space-2);
}

.product__name {
    font-size: var(--text-lg);
    font-weight: 600;
}

.product__description {
    font-size: var(--text-sm);
    color: var(--gray-500);
    margin: 0;
}

.venture__metrics .metrics__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

.metrics__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    text-align: center;
}

.metrics__grid .metric__item {
    background-color: var(--gray-50);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
}

.metrics__grid .metric__number {
    font-size: var(--text-3xl);
    font-weight: 700;
}

.metrics__grid .metric__label {
    color: var(--gray-500);
}

/* Spear Ink */
.venture__global-presence .presence__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

.presence__map .map__regions {
    display: flex;
    gap: var(--space-4);
    justify-content: space-around;
}

.presence__map .region__item {
    text-align: center;
}

.region__flag {
    font-size: var(--text-3xl);
}

.region__name {
    font-weight: 600;
}

.region__status {
    font-size: var(--text-sm);
    color: var(--gray-500);
    display: block;
}

.venture__franchise-benefits .benefits__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

.benefits__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.benefit__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background-color: var(--gray-50);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
}

.benefit__item i {
    color: var(--primary);
}

/* Kayan */
.venture__regional-map .map__title {
    font-size: var(--text-lg);
    color: var(--white);
    margin-bottom: var(--space-4);
}

.map__countries {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.country__item {
    background: var(--gray-800);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
}

.country__item.active {
    background: var(--primary);
}

.country__name {
    color: var(--white);
    font-weight: 600;
    display: block;
}

.country__status {
    color: var(--gray-300);
    font-size: var(--text-sm);
}

.country__item.active .country__status {
    color: var(--primary-light);
}

/* R.E.G Italy */
.venture__partnership-network .network__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

.network__connections {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--gray-50);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
}

.connection__item {
    text-align: center;
}

.connection__flag {
    font-size: var(--text-3xl);
}

.connection__name {
    font-weight: 600;
}

.connection__type {
    font-size: var(--text-sm);
    color: var(--gray-500);
    display: block;
}

.connection__arrow {
    font-size: var(--text-3xl);
    color: var(--primary);
}


/* ===== INVESTMENT OPPORTUNITIES SECTION ===== */
.opportunities__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-8);
    align-items: stretch;
}

.opportunity__card {
    background-color: var(--white);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    text-align: center;
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
}

.opportunity__icon {
    font-size: var(--text-4xl);
    color: var(--primary);
    margin-bottom: var(--space-4);
}

.opportunity__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

.opportunity__description {
    color: var(--gray-600);
    margin-bottom: var(--space-6);
    flex-grow: 1;
}

.opportunity__benefits {
    list-style: disc;
    padding-left: var(--space-6);
    text-align: left;
    margin-bottom: var(--space-8);
    color: var(--gray-600);
}

.opportunity__benefits li {
    margin-bottom: var(--space-2);
}

.opportunity__card .btn {
    margin-top: auto;
    /* Push button to the bottom */
}


/* ===== RESPONSIVE STYLES FOR VENTURES PAGE ===== */
@media (max-width: 992px) {
    .venture__header {
        flex-direction: column;
        text-align: center;
    }

    .venture__content {
        grid-template-columns: 1fr;
    }

    .venture__visual {
        position: static;
        margin-top: var(--space-8);
    }
}

@media (max-width: 768px) {
    .page-hero__stats {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .hero-stat {
        padding-right: 0;
    }

    .hero-stat::after {
        display: none;
    }

    .achievements__grid,
    .panel__grid,
    .impact__metrics,
    .products__grid {
        grid-template-columns: 1fr;
    }

    .network__connections {
        flex-direction: column;
        gap: var(--space-4);
    }

    .connection__arrow {
        transform: rotate(90deg);
    }
}

/*
=================================================================
|   RECOGNITION PAGE STYLES
=================================================================
*/

/* ===== HERO BADGES ===== */
.page-hero__badges {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-8);
    justify-content: flex-start;
    flex-wrap: wrap;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--white);
}

.hero-badge i {
    color: var(--primary-light);
    font-size: var(--text-lg);
}


/* ===== RECOGNITION OVERVIEW SECTION ===== */
.recognition__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-8);
}

.stat__card {
    background-color: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    gap: var(--space-5);
    border: 1px solid var(--gray-100);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.stat__card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.stat__card .stat__icon {
    font-size: var(--text-3xl);
    color: var(--primary);
    background-color: var(--primary-light);
    width: 70px;
    height: 70px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat__card .stat__number {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1;
}

.stat__card .stat__label {
    font-size: var(--text-base);
    color: var(--gray-500);
    font-weight: 500;
}


/* ===== EDUCATION & CREDENTIALS SECTION ===== */
.education__content {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-12);
    align-items: start;
}

.education__highlight {
    background-color: var(--white);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.highlight__logo {
    flex-shrink: 0;
    width: 120px;
}

.highlight__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-1);
}

.highlight__subtitle {
    color: var(--primary);
    font-weight: 600;
}

.highlight__location {
    color: var(--gray-500);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.highlight__achievements {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-6);
    border-top: 1px solid var(--gray-100);
    padding-top: var(--space-4);
}

.highlight__achievements .achievement__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-600);
    font-weight: 500;
}

.highlight__achievements .achievement__item i {
    color: var(--primary);
}


.education__additional .additional__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-6);
}

.qualifications__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.qualification__item {
    background-color: var(--white);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    box-shadow: var(--shadow);
}

.qualification__icon {
    font-size: var(--text-2xl);
    color: var(--primary);
    margin-top: var(--space-1);
}

.qualification__content h4 {
    font-size: var(--text-base);
    margin-bottom: var(--space-1);
}

.qualification__content p {
    font-size: var(--text-sm);
    color: var(--gray-500);
    margin: 0;
}

.qualification__year {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--primary);
    margin-top: var(--space-2);
}

.education__visual .visual__container {
    background-color: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.education__image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-6);
}

.education__testimonial {
    border-left: 3px solid var(--primary);
    padding-left: var(--space-4);
}


/* ===== AWARDS & HONORS SECTION ===== */
.awards__timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.awards__timeline .timeline__line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--gray-200);
    transform: translateX(-50%);
}

.award__item {
    position: relative;
    display: flex;
    margin-bottom: var(--space-8);
}

.award__year {
    background-color: var(--primary);
    color: var(--white);
    font-size: var(--text-xl);
    font-weight: 700;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    position: relative;
    z-index: 10;
}

.award__content {
    background-color: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    width: calc(100% - 150px);
    /* Adjust based on year width */
    display: flex;
    gap: var(--space-6);
    position: relative;
}

.award__item:nth-child(odd) {
    justify-content: flex-start;
}

.award__item:nth-child(odd) .award__content {
    margin-left: -20px;
    /* Overlap effect */
    padding-left: 40px;
}

.award__item:nth-child(odd) .award__year {
    order: 1;
}

.award__item:nth-child(odd) .award__content {
    order: 2;
}


.award__item:nth-child(even) {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.award__item:nth-child(even) .award__content {
    margin-right: -20px;
    /* Overlap effect */
    padding-right: 40px;
}

.award__item:nth-child(even) .award__year {
    order: 1;
}

.award__item:nth-child(even) .award__content {
    order: 2;
}


.award__icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background-color: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius-full);
    font-size: var(--text-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.award__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
}

.award__organization {
    color: var(--primary);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.award__impact {
    margin-top: var(--space-4);
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.impact__tag {
    background-color: var(--gray-100);
    color: var(--gray-600);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
}

/* ===== MEDIA COVERAGE SECTION ===== */
.media__tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.media__tabs .tab__button {
    background-color: var(--gray-800);
    color: var(--gray-300);
    border: 1px solid var(--gray-700);
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-6);
    font-weight: 500;
}

.media__tabs .tab__button.active,
.media__tabs .tab__button:hover {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.media__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

.media__item {
    background-color: var(--gray-800);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    gap: var(--space-6);
    align-items: center;
}

.media__logo {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    background-color: var(--white);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
}

.media__logo img {
    max-width: 100%;
    height: auto;
}

.media__title {
    font-size: var(--text-xl);
    color: var(--white);
    margin-bottom: var(--space-2);
}

.media__publication {
    color: var(--primary-light);
    font-weight: 500;
}

.media__date {
    color: var(--gray-400);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

.media__excerpt {
    color: var(--gray-300);
    margin-bottom: var(--space-4);
}

.media__link {
    color: var(--primary);
    font-weight: 600;
}


/* ===== SPEAKING ENGAGEMENTS SECTION ===== */
.speaking__content {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-12);
}

.featured__title,
.list__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-6);
}

.keynote__item {
    background-color: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.keynote__item:not(:last-child) {
    margin-bottom: var(--space-8);
}

.keynote__image {
    position: relative;
    cursor: pointer;
}

.keynote__image img {
    height: 250px;
    width: 100%;
    object-fit: cover;
}

.keynote__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(34, 197, 94, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: var(--text-2xl);
    transition: var(--transition);
}

.keynote__item:hover .keynote__play {
    transform: translate(-50%, -50%) scale(1.1);
}

.keynote__content {
    padding: var(--space-6);
}

.keynote__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
}

.keynote__event {
    color: var(--primary);
    font-weight: 600;
}

.keynote__date {
    color: var(--gray-500);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.keynote__stats {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--gray-100);
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.engagement__timeline {
    border-left: 3px solid var(--gray-200);
    padding-left: var(--space-6);
}

.engagement__item {
    position: relative;
    padding-bottom: var(--space-6);
}

.engagement__item::before {
    content: '';
    position: absolute;
    left: -29px;
    top: 5px;
    width: 12px;
    height: 12px;
    background-color: var(--primary);
    border-radius: 50%;
    border: 3px solid var(--gray-50);
}

.engagement__date {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: var(--space-1);
}

.engagement__title {
    font-size: var(--text-base);
    font-weight: 600;
}

.engagement__topic {
    font-style: italic;
    color: var(--gray-600);
}

.engagement__location {
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.speaking__testimonials {
    margin-top: var(--space-8);
}


/* ===== PROFESSIONAL MEMBERSHIPS SECTION ===== */
.memberships__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
}

.membership__card {
    background-color: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    display: flex;
    gap: var(--space-6);
    align-items: center;
    box-shadow: var(--shadow-md);
}

.membership__logo {
    flex-shrink: 0;
    width: 100px;
    text-align: center;
}

.membership__logo img {
    max-width: 100%;
    height: auto;
}

.membership__title {
    font-size: var(--text-lg);
}

.membership__role {
    font-weight: 600;
    color: var(--primary);
}

.membership__description {
    font-size: var(--text-sm);
    color: var(--gray-600);
}

.membership__year {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-500);
    margin-top: var(--space-2);
}


/* ===== RESPONSIVE STYLES FOR RECOGNITION PAGE ===== */
@media (max-width: 992px) {

    .education__content,
    .speaking__content {
        grid-template-columns: 1fr;
    }

    .education__visual {
        margin-top: var(--space-8);
    }

    .award__item,
    .award__item:nth-child(even) {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .award__item:nth-child(odd) .award__content,
    .award__item:nth-child(even) .award__content {
        margin: 0;
        padding: var(--space-6);
        width: 100%;
    }

    .awards__timeline .timeline__line {
        left: 50%;
    }

    .award__year {
        margin-bottom: -20px;
    }
}

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

    .media__item {
        flex-direction: column;
        text-align: center;
    }

    .awards__timeline .timeline__line {
        left: 20px;
    }

    .award__item,
    .award__item:nth-child(even) {
        align-items: flex-start;
        text-align: left;
        padding-left: 50px;
    }

    .award__year {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        padding: var(--space-2);
        font-size: var(--text-base);
    }
}

/*
=================================================================
|   CONTACT PAGE STYLES
=================================================================
*/

/* ===== HERO QUICK CONTACT ===== */
.page-hero__quick-contact {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-8);
    justify-content: flex-start;
    flex-wrap: wrap;
}

.quick-contact__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    font-weight: 500;
    color: var(--white);
    transition: var(--transition);
}

.quick-contact__item:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-3px);
}

.quick-contact__item i {
    color: var(--primary-light);
}

/* ===== CONTACT OPTIONS SECTION ===== */
.contact-options__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
}

.contact-option__card {
    background-color: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: var(--transition);
    border: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
}

.contact-option__card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary);
}

.option__icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
    font-size: var(--text-3xl);
    color: var(--white);
    box-shadow: 0 5px 15px rgba(34, 197, 94, 0.3);
}

.option__title {
    font-size: var(--text-2xl);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.option__description {
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: var(--space-6);
    flex-grow: 1;
    /* Ensures cards have same height */
}

.option__details {
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.detail__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-size: var(--text-base);
    color: var(--gray-600);
}

.detail__item i {
    color: var(--primary);
    font-size: var(--text-lg);
}

.contact-option__card .btn {
    margin-top: auto;
    /* Push button to the bottom */
}


/* ===== CONTACT FORMS SECTION ===== */
.contact-form__wrapper {
    background-color: var(--white);
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-12);
}

.form__header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.form__title {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.form__description {
    color: var(--gray-600);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

.form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.form__group {
    position: relative;
}

.form__label {
    display: block;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--space-2);
}

.form__input,
.form__textarea,
.form__select {
    width: 100%;
    padding: var(--space-4);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    transition: var(--transition-fast);
    background-color: var(--gray-50);
}

.form__input::placeholder,
.form__textarea::placeholder {
    color: var(--gray-400);
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
    outline: none;
    border-color: var(--primary);
    background-color: var(--white);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
}

.form__textarea {
    resize: vertical;
    min-height: 150px;
}

.contact-form button[type="submit"] {
    width: 100%;
}

/* Checkbox styles */
.checkbox__group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.checkbox__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    position: relative;
    user-select: none;
}

.checkbox__item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox__checkmark {
    position: relative;
    height: 24px;
    width: 24px;
    background-color: var(--gray-200);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.checkbox__item:hover input~.checkbox__checkmark {
    background-color: var(--gray-300);
}

.checkbox__item input:checked~.checkbox__checkmark {
    background-color: var(--primary);
}

.checkbox__checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.checkbox__item input:checked~.checkbox__checkmark:after {
    display: block;
}


/* ===== OFFICE LOCATIONS SECTION ===== */
.offices__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
}

.office__card {
    background-color: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.office__card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.office__header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: var(--space-6);
}

.office__flag {
    font-size: 3rem;
}

.office__name {
    font-size: var(--text-2xl);
    font-weight: 700;
}

.office__type {
    color: var(--primary);
    font-weight: 600;
}

.office__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.office__details .detail__item {
    justify-content: flex-start;
}

.office__companies {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray-100);
}

.companies__title {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.companies__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.company__tag {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
}


/* ===== SOCIAL MEDIA SECTION ===== */
.social__platforms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.platform__card {
    background-color: var(--gray-800);
    border: 1px solid var(--gray-700);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.platform__icon {
    font-size: var(--text-4xl);
    color: var(--white);
    margin-bottom: var(--space-4);
}

.platform__card:hover .platform__icon {
    color: var(--primary);
}

.platform__name {
    color: var(--white);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

.platform__description {
    color: var(--gray-300);
    flex-grow: 1;
    margin-bottom: var(--space-6);
}

.platform__stats {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    color: var(--gray-400);
    font-size: var(--text-sm);
}

.platform__card .btn {
    margin-top: auto;
    border-color: var(--gray-600);
    color: var(--gray-300);
}

.platform__card .btn:hover {
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--white);
}

.social__newsletter {
    background-color: var(--gray-800);
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
    text-align: center;
}

.newsletter__title {
    color: var(--white);
    font-size: var(--text-3xl);
}

.newsletter__description {
    color: var(--gray-300);
    max-width: 600px;
    margin: 0 auto var(--space-6);
}

.newsletter__form .form__group {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter__form .form__input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.newsletter__form .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.newsletter__form .form__note {
    font-size: var(--text-sm);
    color: var(--gray-500);
    margin-top: var(--space-4);
}


/* ===== FAQ SECTION ===== */
.faq__content {
    max-width: 800px;
    margin: 0 auto;
}

.faq__item {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}

.faq__question {
    padding: var(--space-6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition-fast);
}

.faq__item.active .faq__question,
.faq__question:hover {
    background-color: var(--gray-50);
}

.faq__question h3 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
}

.faq__question i {
    color: var(--primary);
    transition: var(--transition-fast);
    font-size: var(--text-xl);
}

.faq__item.active .faq__question i {
    transform: rotate(180deg);
}

.faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
}

.faq__item.active .faq__answer {
    padding-bottom: var(--space-6);
}

.faq__answer p {
    padding: 0 var(--space-6);
    margin: 0;
    color: var(--gray-600);
    line-height: 1.7;
    border-top: 1px solid var(--gray-200);
    padding-top: var(--space-6);
}

/* ===== INNOVATIVE CONTACT FORM TABS ===== */
.forms__tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    border-bottom: 2px solid var(--gray-200);
}

.form__tab-button {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--gray-500);
    border-bottom: 4px solid transparent;
    transition: var(--transition);
    margin-bottom: -2px;
    /* Aligns with the bottom border */
}

.form__tab-button:hover {
    color: var(--primary);
    background-color: var(--gray-50);
}

.form__tab-button.active {
    color: var(--primary);
    border-color: var(--primary);
}

.form__panel {
    display: none;
    /* Hide all form panels by default */
    animation: fadeIn 0.6s ease-in-out;
    /* Add a smooth fade-in */
}

.form__panel.active {
    display: block;
    /* Show only the active panel */
}

/* Keyframe for the fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== RESPONSIVE STYLES FOR CONTACT PAGE ===== */
@media (max-width: 768px) {
    .contact-form__wrapper {
        padding: var(--space-8);
    }

    .form__row {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }

    .form__group {
        margin-bottom: var(--space-6);
    }

    .social__platforms {
        grid-template-columns: 1fr;
    }
}