/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2) var(--spacing-6);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: var(--font-size-xs);
    transition: all var(--transition-fast);
    text-transform: uppercase;
}

.btn-outline {
    border: 1px solid var(--color-text-dark);
    color: var(--color-text-dark);
}

.btn-outline:hover {
    background-color: var(--color-text-dark);
    color: var(--color-text-white);
}

/* Hero Section Specifics */
.hero-section {
    height: 100vh;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5rem; /* 80px at base - Account for sticky header */
    padding-bottom: 7.5rem; /* 120px at base - Space for scroll indicator */
    box-sizing: border-box;
    /*
       Arc layout - centered in viewport with fixed image sizes
       Content height: ~700px (arcs + text)
       Formula: center of available space minus half content height
       Available space = 100vh - 80px (header) - 120px (scroll)
       Center = (100vh - 200px) / 2 = 50vh - 100px
       Arc base = center - 300px (offset to position arc-3 at top of centered block)
    */
    --arc-base-top: max(0.3125rem, calc(50vh - 28.75rem)); /* 5px, 460px */
    --arc-height: 15.0625rem; /* 241px at base */
    --arc-gap: 1rem; /* 16px at base */
    --arc-offset-15: 0.9375rem; /* 15px at base */
    --arc-offset-62: 3.875rem; /* 62px at base */
    --arc-offset-87: 5.4375rem; /* 87px at base */
    --arc-offset-107: 6.6875rem; /* 107px at base */
    --arc-offset-100: 6.25rem; /* 100px at base - Gap to text */
}

/* Hero container is the positioning context for all elements */
.hero-container {
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 1920px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1; /* Above .bg-decoration (z-index: 0) */
}

.hero-content {
    max-width: 43.75rem; /* 700px at base */
    margin: 0 auto;
    position: absolute;
    top: calc(var(--arc-base-top) + var(--arc-offset-62) + var(--arc-height) + var(--arc-offset-100));
    /* base + 62px offset + image height + 100px gap */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 1.25rem 2.5rem; /* 20px 40px at base */
}

.hero-title {
    font-family: 'Onest', sans-serif;
    font-size: 4rem; /* 64px at base */
    font-style: normal;
    font-weight: 400;
    line-height: 105%;
    color: #041A31;
    margin-bottom: 1.125rem; /* 18px at base */
}

.hero-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: var(--spacing-8);
}

.scroll-indicator {
    display: flex;
    justify-content: center;
    animation: bounce 2s infinite;
    z-index: 20;
}

/* Position scroll indicator at bottom of hero section */
.hero-section .scroll-indicator {
    position: absolute;
    bottom: 3.75rem; /* 60px at base */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 1200px) {
    .hero-section .scroll-indicator {
        bottom: 5rem; /* 80px at base */
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* Background Decoration (Dots Pattern) */
.bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: radial-gradient(#E5E7EB 2px, transparent 2px);
    background-size: 2rem 2rem; /* 32px at base */
    opacity: 0.5;
    pointer-events: none;
}

/* Hero Images - positioned absolutely within hero-container */
.hero-img {
    background-color: #f0f0f0;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-default);
    position: absolute;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15);
    border: 0.25rem solid white; /* 4px at base */
    z-index: 1;
    width: 11.3125rem; /* 181px at base */
    height: 15.0625rem; /* 241px at base */
}

/*
   13-Photo Arc Layout - 9 columns
   Column structure: 2-2-1-1-1-1-1-2-2 rows
   Image size: 181 x 241px
   Gap between stacked images: 16px
   Gap between columns: 27px
   Columns 2 & 8 are highest - top at 191px from viewport top
   Note: hero-section has padding-top: 80px for header, so relative top = 191 - 80 = 111px
*/

/*
   Arc Layout Calculations:
   - 9 columns × 181px = 1629px
   - 8 gaps × 28px = 224px
   - Total width = 1853px
   - Centered with whitespace on left/right edges

   Column positions from center:
   - Col 5 (center): 50% - 90.5px (half of 181px)
   - Each column left/right: + (image width + gap) from previous
*/

/* Column 1 (far left) - 2 rows - 87px lower than col 2 */
/* Arc positioning uses rem for proportional scaling: 90.5px = 5.65625rem, 28px = 1.75rem, 181px = 11.3125rem */
.arc-1 {
    left: calc(50% - 5.65625rem - (1.75rem * 4) - (11.3125rem * 4));
    top: calc(var(--arc-base-top) + var(--arc-offset-87));
    background-image: url('../assets/about/arc1.png');
}

.arc-2 {
    left: calc(50% - 5.65625rem - (1.75rem * 4) - (11.3125rem * 4));
    top: calc(var(--arc-base-top) + var(--arc-offset-87) + var(--arc-height) + var(--arc-gap));
    background-image: url('../assets/about/arc2.png');
}

/* Column 2 - 2 rows - HIGHEST column (base position) */
.arc-3 {
    left: calc(50% - 5.65625rem - (1.75rem * 3) - (11.3125rem * 3));
    top: var(--arc-base-top);
    background-image: url('../assets/about/arc3.png');
}

.arc-4 {
    left: calc(50% - 5.65625rem - (1.75rem * 3) - (11.3125rem * 3));
    top: calc(var(--arc-base-top) + var(--arc-height) + var(--arc-gap));
    background-image: url('../assets/about/arc4.png');
}

/* Column 3 - 1 row - 107px lower than col 2 */
.arc-5 {
    left: calc(50% - 5.65625rem - (1.75rem * 2) - (11.3125rem * 2));
    top: calc(var(--arc-base-top) + var(--arc-offset-107));
    background-image: url('../assets/about/arc5.png');
}

/* Column 4 - 1 row - 15px lower than col 2 */
.arc-6 {
    left: calc(50% - 5.65625rem - 1.75rem - 11.3125rem);
    top: calc(var(--arc-base-top) + var(--arc-offset-15));
    background-image: url('../assets/about/arc6.png');
}

/* Column 5 (center) - 1 row - 62px lower than col 2 */
.arc-7 {
    left: calc(50% - 5.65625rem);
    top: calc(var(--arc-base-top) + var(--arc-offset-62));
    background-image: url('../assets/about/arc7.png');
}

/* Column 6 - 1 row - 15px lower than col 8 (mirrors col 4) */
.arc-8 {
    left: calc(50% + 5.65625rem + 1.75rem);
    top: calc(var(--arc-base-top) + var(--arc-offset-15));
    background-image: url('../assets/about/arc8.png');
}

/* Column 7 - 1 row - 107px lower than col 8 */
.arc-9 {
    left: calc(50% + 5.65625rem + (1.75rem * 2) + 11.3125rem);
    top: calc(var(--arc-base-top) + var(--arc-offset-107));
    background-image: url('../assets/about/arc9.png');
}

/* Column 8 - 2 rows - HIGHEST column (base position) */
.arc-10 {
    left: calc(50% + 5.65625rem + (1.75rem * 3) + (11.3125rem * 2));
    top: var(--arc-base-top);
    background-image: url('../assets/about/arc10.png');
}

.arc-11 {
    left: calc(50% + 5.65625rem + (1.75rem * 3) + (11.3125rem * 2));
    top: calc(var(--arc-base-top) + var(--arc-height) + var(--arc-gap));
    background-image: url('../assets/about/arc11.png');
}

/* Column 9 (far right) - 2 rows - 87px lower than col 8 */
.arc-12 {
    left: calc(50% + 5.65625rem + (1.75rem * 4) + (11.3125rem * 3));
    top: calc(var(--arc-base-top) + var(--arc-offset-87));
    background-image: url('../assets/about/arc12.png');
}

.arc-13 {
    left: calc(50% + 5.65625rem + (1.75rem * 4) + (11.3125rem * 3));
    top: calc(var(--arc-base-top) + var(--arc-offset-87) + var(--arc-height) + var(--arc-gap));
    background-image: url('../assets/about/arc13.png');
}

/* Responsive adjustments for arc images */
/* Arc layout is kept intact; overflow:hidden on .hero-section clips edges naturally */
/* Hero container scaling for viewports 769px-1440px is handled by scaling.js */

@media (max-width: 768px) {
    .hero-img {
        display: none;
    }
}

/* Culture Section Specifics */
.culture-section {
    background: linear-gradient(0deg, rgba(4, 26, 49, 0.40) 0%, rgba(4, 26, 49, 0.40) 100%), url('../assets/about/our-culture-background.jpg') lightgray 0px -426px / 100% 199.17% no-repeat;
    position: relative;
    padding: 5rem 0; /* 80px at base */
    height: 723px;
}

.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(4, 26, 49, 0.8);
    z-index: 1;
}

.culture-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    align-items: stretch;
    padding: 0 var(--spacing-8);
}

@media (min-width: 768px) {
    .culture-container {
        flex-direction: row;
        gap: var(--spacing-12);
        padding: 0 var(--spacing-12);
    }
}

@media (min-width: 1024px) {
    .culture-container {
        gap: 300px;
        padding: 0 300px 0 0;
    }

    .culture-left {
        padding-left: 300px;
    }
}

.culture-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.culture-title {
    color: #FFFFFF;
    text-align: center;
    font-family: 'Onest', sans-serif;
    font-size: 4rem; /* 64px at base */
    font-style: normal;
    font-weight: 400;
    line-height: 105%;
}

@media (max-width: 768px) {
    .culture-section {
        height: auto;
    }

    .culture-title {
        font-size: 3rem; /* 48px at base */
    }
}

.culture-right {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

@media (min-width: 768px) {
    .culture-right {
        gap: var(--spacing-8);
    }
}

.culture-item {
    color: var(--color-text-white);
}

.culture-heading {
    color: #FFFFFF;
    font-family: 'Onest', sans-serif;
    font-size: 1.875rem; /* 30px at base */
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem; /* 30px at base */
    margin-bottom: var(--spacing-1);
}

.culture-desc {
    color: #FFFFFF;
    font-family: 'Onest', sans-serif;
    font-size: 1.125rem; /* 18px at base */
    font-style: normal;
    font-weight: 400;
    line-height: 1.5625rem; /* 25px at base */
}

/* Culture Section V2 - With Background Image */
.culture-section-v2 {
    padding: 100px 0;
    background-color: var(--color-bg-light, #FFFFFF);
    background-image: url('../assets/about/our-culture-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.culture-divider {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}

.culture-divider svg {
    width: 100%;
    height: 80px;
}

.culture-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    align-items: center;
}

.culture-left-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.culture-title-v2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    color: #041A31;
    text-align: center;
}

.culture-values-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.culture-value-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.culture-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 4px;
}

.culture-icon svg {
    width: 100%;
    height: 100%;
}

.culture-value-content h3 {
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #F9A01B;
    margin-bottom: 4px;
}

.culture-value-content p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #666666;
}

@media (max-width: 1024px) {
    .culture-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .culture-left-v2 {
        padding: 20px;
    }

    .culture-title-v2 {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .culture-section-v2 {
        padding: 60px 0;
    }

    .culture-divider svg {
        height: 50px;
    }

    .culture-divider {
        margin-bottom: 40px;
    }
}

/* Journey Section - Scroll Lock */
.journey-section {
    position: relative;
    /* Height will be set by JavaScript based on number of slides */
}

.journey-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.timeline-nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    position: relative;
    margin-bottom: var(--spacing-12);
}

/* Years container - displayed above timeline */
.timeline-years {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 3.375rem; /* 54px at base */
    box-sizing: border-box;
}

/* Year buttons styling */
.timeline-year {
    background: none;
    border: none;
    color: #2D368F;
    font-family: 'Onest', sans-serif;
    font-size: 2rem; /* 32px at base */
    font-style: normal;
    font-weight: 500;
    line-height: 105%;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    text-align: center;
}

.timeline-year:hover {
    color: var(--color-primary);
    transform: scale(1.05);
}

.timeline-year.active {
    color: var(--color-primary);
    font-weight: 600;
}

/* Timeline track - contains line and dots */
.timeline-track {
    position: relative;
    width: 100%;
    height: 1.5rem; /* 24px at base */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3.375rem; /* 54px at base */
    box-sizing: border-box;
}

.timeline-line {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 5px;
    border-radius: 200px;
    background: #041A31;
    z-index: 0;
}

/* Timeline dots - positioned along the line */
.timeline-dot {
    position: relative;
    height: 28px;
    background: transparent;
    border: none;
    z-index: 1;
    cursor: pointer;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeline-dot::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: transparent;
    transition: all 0.3s ease;
    opacity: 0;
}

.timeline-dot:hover::before {
    transform: scale(1.2);
}

.timeline-dot.active::before {
    opacity: 1;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background:
        /* Top highlight - curved light */
        radial-gradient(ellipse 80% 50% at 50% 0%,
            rgba(255, 255, 255, 0.4) 0%,
            transparent 50%),
        /* Left edge - transparent to show timeline */
        radial-gradient(ellipse 40% 90% at 5% 50%,
            transparent 0%,
            rgba(255, 255, 255, 0.15) 100%),
        /* Right edge - transparent to show timeline */
        radial-gradient(ellipse 40% 90% at 95% 50%,
            transparent 0%,
            rgba(255, 255, 255, 0.1) 100%),
        /* Center glass body - more transparent */
        radial-gradient(circle at 30% 30%,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(255, 255, 255, 0.05) 40%,
            transparent 100%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        /* Outer glow */
        0 2px 8px 0 rgba(0, 0, 0, 0.15),
        /* Bottom reflection/caustic */
        0 4px 6px -2px rgba(255, 255, 255, 0.15),
        /* Inner depth - top light */
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        /* Inner depth - bottom shadow */
        inset 0 -2px 6px rgba(0, 0, 0, 0.08),
        /* Left edge subtle highlight */
        inset 3px 0 4px -2px rgba(255, 255, 255, 0.2),
        /* Right edge subtle highlight */
        inset -3px 0 4px -2px rgba(255, 255, 255, 0.15);
}

/* Dots now use flexbox space-between, no individual positioning needed */


.timeline-content {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--spacing-8);
    margin-top: var(--spacing-8);
    align-items: center;
}

@media (min-width: 768px) {
    .timeline-content {
        flex-direction: row;
        gap: var(--spacing-12);
    }
}

.timeline-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 var(--spacing-4);
}

@media (min-width: 768px) {
    .timeline-text-col {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1024px) {
    .timeline-text-col {
        padding-left: 80px;
        padding-right: 80px;
    }
}

.timeline-img-col {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeline-img-placeholder {
    width: 100%;
    max-width: 30.25rem; /* 484px at base */
    aspect-ratio: 121/68;
    background-color: lightgray;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 1rem; /* 16px at base */
    transition: opacity 0.3s ease;
}

@media (min-width: 768px) {
    .timeline-img-placeholder {
        border-radius: var(--radius-default);
    }
}

.timeline-desc {
    color: #041A31;
    font-family: 'Onest', sans-serif;
    font-size: 1rem; /* 16px at base */
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
    transition: opacity 0.3s ease;
    min-height: auto;
}

@media (min-width: 768px) {
    .timeline-desc {
        font-size: 1.25rem; /* 20px at base */
        line-height: 1.8;
    }
}

@media (min-width: 1024px) {
    .timeline-desc {
        font-size: 1.5rem; /* 24px at base */
        line-height: 3.125rem; /* 50px at base */
        height: 12.5rem; /* 200px at base */
        overflow: hidden;
    }
}

.nav-arrows {
    display: flex;
    gap: var(--spacing-16);
    margin-bottom: 44px;
}

.nav-arrow {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-arrow:hover {
    transform: scale(1.1);
}

.nav-arrow svg {
    display: block;
}

/* Footprint Section */
.footprint-section {
    background-color: #FFFFFF;
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: var(--spacing-6);
    margin: 0 auto var(--spacing-12);
    flex-wrap: wrap;
    padding: var(--spacing-6) var(--spacing-4);
    width: 100%;
    max-width: 75.8125rem; /* 1213px at base */

    /* Styling */
    border-radius: 1rem; /* 16px at base */
    background: rgba(0, 0, 0, 0.00);
    mix-blend-mode: plus-darker;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
    .stats-grid {
        gap: var(--spacing-8);
        padding: var(--spacing-8) var(--spacing-8);
        margin-bottom: var(--spacing-16);
        border-radius: var(--radius-default);
    }
}

@media (min-width: 1024px) {
    .stats-grid {
        gap: var(--spacing-12);
        padding: var(--spacing-8) var(--spacing-12);
    }
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-4);
    flex: 1 1 calc(50% - var(--spacing-6));
    min-width: 140px;
}

@media (min-width: 768px) {
    .stat-item {
        padding: var(--spacing-6);
        flex: 1;
        min-width: 200px;
    }
}

.stat-value {
    white-space: nowrap;
    margin-bottom: var(--spacing-2);
}

.stat-number {
    color: #F5953A;
    font-family: 'Onest', sans-serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 105%;
    display: inline;
}

.stat-suffix {
    color: #F5953A;
    font-family: 'Onest', sans-serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 105%;
    display: inline;
}

@media (min-width: 768px) {
    .stat-number,
    .stat-suffix {
        font-size: 80px;
    }
}

.stat-label {
    color: #041A31;
    font-family: 'Onest', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 105%;
    margin-top: var(--spacing-2);
}

@media (min-width: 768px) {
    .stat-label {
        font-size: 18px;
    }
}

.map-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.map-image {
    width: 100%;
    max-width: 1200px;
    height: auto;
    border-radius: 20px;
    object-fit: contain;
}

/* Team Section */
.team-carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-2);
}

@media (min-width: 768px) {
    .team-carousel {
        gap: var(--spacing-8);
        padding: 0;
    }
}

@media (min-width: 1024px) {
    .team-carousel {
        gap: 100px;
    }
}

.team-carousel-track {
    overflow: hidden;
    width: 100%;
    max-width: 17.5rem; /* 280px at base */
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .team-carousel-track {
        max-width: 36.25rem; /* 580px at base - 2 cards */
    }
}

@media (min-width: 1024px) {
    .team-carousel-track {
        /* Use vw to ensure 3 cards always fit regardless of rem scaling */
        max-width: 60vw; /* ~802px at 1336px, ~1152px at 1920px */
    }
}

.team-grid {
    display: flex;
    gap: 0.75rem; /* 12px at base */
    scroll-behavior: smooth;
    transition: transform 0.5s ease;
}

@media (min-width: 768px) {
    .team-grid {
        gap: 1.0625rem; /* 17px at base */
    }
}

.team-card {
    position: relative;
    border-radius: 0.625rem; /* 10px at base */
    overflow: hidden;
    width: 16.25rem; /* 260px at base */
    height: 22.8125rem; /* 365px at base */
    flex-shrink: 0;
    border: 2px solid white;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .team-card {
        width: 17.5rem; /* 280px at base */
        height: 24.5rem; /* 392px at base */
    }
}

@media (min-width: 1024px) {
    .team-card {
        /* Use vw for consistent 3-card display: (60vw - 2 gaps) / 3 */
        /* Gap is 1.0625rem, so 2 gaps = 2.125rem */
        width: calc((60vw - 2.125rem) / 3);
        height: auto;
        aspect-ratio: 260 / 365; /* Maintain original card proportions */
    }
}

.team-img {
    position: absolute;
    inset: 0;
    background-color: #ddd;
    background-size: cover;
    background-position: center top;
}

/* Specific Team Images via nth-child or helper classes */
.team-card:nth-child(1) .team-img {
    background-image: url('../assets/about/Will.svg');
    /* Will - Managing Director */
}

.team-card:nth-child(2) .team-img {
    background-image: url('../assets/about/Zamani.svg');
    /* Zamani - Managing Director */
}

.team-card:nth-child(3) .team-img {
    background-image: url('../assets/about/Eve.svg');
    /* Eve - Business Development Manager */
}

.team-card:nth-child(4) .team-img {
    background-image: url('../assets/about/Sharon.svg');
    /* Sharon - Finance Manager */
}

.team-card:nth-child(5) .team-img {
    background-image: url('../assets/about/Amy.svg');
    /* Amy - Marketing Manager */
}


.team-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 69.64%;
    border-radius: var(--radius-default);
    background: linear-gradient(180deg,
            rgba(45, 54, 143, 0.00) 0%,
            rgba(45, 54, 143, 0.50) 100%);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    padding: 1rem 1.25rem; /* 16px 20px at base */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

@media (min-width: 1024px) {
    .team-info {
        border-radius: 1.5625rem; /* 25px at base */
        padding: 1.5rem 1.875rem; /* 24px 30px at base */
    }
}

.team-name {
    color: #FFF;
    text-shadow: 0 4px 4px rgba(4, 26, 49, 0.10);
    font-family: Onest, sans-serif;
    font-size: 1.75rem; /* 28px at base */
    font-style: normal;
    font-weight: 500;
    line-height: 105%;
}

@media (min-width: 640px) {
    .team-name {
        font-size: 2rem; /* 32px at base */
    }
}

@media (min-width: 1024px) {
    .team-name {
        font-size: 2.5rem; /* 40px at base */
    }
}

@media (min-width: 1440px) {
    .team-name {
        font-size: 3.125rem; /* 50px at base */
    }
}

.team-role {
    color: #EEE;
    text-shadow: 0 4px 4px rgba(4, 26, 49, 0.10);
    font-family: Onest, sans-serif;
    font-size: 0.875rem; /* 14px at base */
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

@media (min-width: 640px) {
    .team-role {
        font-size: 1rem; /* 16px at base */
    }
}

@media (min-width: 1440px) {
    .team-role {
        font-size: 1.25rem; /* 20px at base */
    }
}

.carousel-arrow {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.carousel-arrow:hover {
    transform: scale(1.1);
}

.carousel-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.carousel-arrow:disabled:hover {
    transform: none;
}

/* === SUSTAINABILITY PAGE STYLES === */

/* Sustainability Hero Section */
/* Sustainability Hero Section */
.sustainability-hero {
    height: 1010px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(40, 56, 146, 0.05) 100%);
}

.sustainability-hero .hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-4);
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-6);
    max-height: 100%;
}

.sustainability-hero .hero-content {
    max-width: 800px;
    padding-top: 0;
}

.sustainability-hero .hero-title {
    font-size: 44px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-2);
    text-align: center;
}

.sustainability-hero .hero-description {
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin-bottom: 0;
    text-align: center;
}

.sustainability-hero .hero-illustration {
    width: 100%;
    max-width: 350px;
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-2);
}

.sustainability-hero .hero-illustration img {
    width: 100%;
    height: auto;
}

.sustainability-hero .scroll-indicator {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-3);
}

.sustainability-hero .scroll-indicator svg {
    color: var(--color-primary-orange);
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* Content Sections */
.content-section {
    padding: var(--spacing-24) 0;
}

.content-section.dark-section {
    background-color: #041A31;
    background-image: url('https://images.unsplash.com/photo-1605218439355-7b0b2b58c547?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    position: relative;
}

.content-section.dark-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(4, 26, 49, 0.92);
    z-index: 1;
}

.content-section.dark-section .container {
    position: relative;
    z-index: 2;
}

/* Two Column Layout */
.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
    align-items: center;
}

.two-column-layout.reverse {
    direction: rtl;
}

.two-column-layout.reverse>* {
    direction: ltr;
}

/* Content Column */
.content-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.section-intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: var(--spacing-4);
}

.section-intro.text-white {
    color: rgba(255, 255, 255, 0.9);
}

/* Sustainability List */
.sustainability-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    list-style: none;
    padding: 0;
}

.sustainability-list li {
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: var(--color-text-dark);
    padding-left: 48px;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
}

/* Glassmorphism bullet circle */
.sustainability-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    flex-shrink: 0;

    /* Glassmorphism styling */
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.50);
    background: linear-gradient(136deg, rgba(65, 179, 228, 0.35) 0%, rgba(65, 179, 228, 0.00) 100%);
    box-shadow: 0 10px 40px 0 rgba(65, 179, 228, 0.10);
    backdrop-filter: blur(12.5px);
}

.sustainability-list.text-white li {
    color: rgba(255, 255, 255, 0.9);
}

.sustainability-list li strong {
    color: var(--color-text-dark);
    font-weight: 600;
}

.sustainability-list.text-white li strong {
    color: #FFFFFF;
}

.section-note {
    color: #041A31;
    font-family: Onest, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    margin-top: var(--spacing-6);
}

.section-note.text-white {
    color: rgba(255, 255, 255, 0.8);
}

/* Illustration Column */
.illustration-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.illustration-column img {
    width: 100%;
    max-width: 500px;
    height: auto;
}

/* Responsive Styles for Sustainability Page */
@media (max-width: 1024px) {
    .sustainability-hero .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .sustainability-hero .hero-content {
        padding-top: 0px;
        max-width: 100%;
    }

    .sustainability-hero .hero-illustration {
        order: -1;
    }

    .two-column-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }

    .two-column-layout.reverse {
        direction: ltr;
    }

    .illustration-column {
        order: -1;
    }

    .illustration-column img {
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .content-section {
        padding: var(--spacing-16) 0;
    }

    .section-title {
        font-size: 48px;
    }

    .sustainability-hero {
        min-height: 60vh;
    }

    .sustainability-hero .hero-illustration img {
        max-width: 300px;
    }

    .illustration-column img {
        max-width: 320px;
    }

    .section-intro {
        font-size: var(--font-size-base);
    }
}

/* === COURSES PAGE STYLES === */

/* Courses Hero */
.courses-hero {
    padding-top: var(--spacing-8);
    padding-bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(40, 56, 146, 0.03) 100%);
}

.courses-hero .section-header {
    margin-bottom: var(--spacing-8);
}

.courses-hero .section-title {
    font-size: 48px;
    margin-bottom: var(--spacing-4);
}

.courses-hero .section-subtitle {
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Category Tabs */
.category-tabs {
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
    flex-wrap: wrap;
}

.category-tab {
    padding: 12px 24px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: transparent;
    border: 1.5px solid #E5E7EB;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all var(--transition-base);
}

.category-tab:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

.category-tab.active {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: white;
}

/* Search & Filters */
.courses-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-12);
    flex-wrap: wrap;
}

.search-wrapper {
    position: relative;
}

.search-input {
    width: 200px;
    padding: 12px 16px;
    border: 1.5px solid #E5E7EB;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    background: white;
    transition: all var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(40, 56, 146, 0.1);
}

.search-input::placeholder {
    color: #9CA3AF;
}

.filter-wrapper {
    position: relative;
}

.filter-dropdown {
    width: 280px;
    padding: 12px 40px 12px 16px;
    border: 1.5px solid #E5E7EB;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    background: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    transition: all var(--transition-fast);
}

.filter-dropdown:focus {
    outline: none;
    border-color: var(--color-secondary);
}

.clear-btn {
    padding: 12px 20px;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.clear-btn:hover {
    color: var(--color-secondary);
}

/* Courses Section */
.courses-section {
    padding-top: 0;
}

/* Courses Grid */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-12);
}

@media (max-width: 1200px) {
    .courses-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Course Card */
.course-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}

.course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.course-card-image {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.course-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.course-card:hover .course-card-image img {
    transform: scale(1.05);
}

.course-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.course-card-content {
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.course-card-category {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-2);
}

.course-card-title {
    font-family: 'Onest', sans-serif;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #041A31;
    line-height: 1.4;
    margin-bottom: var(--spacing-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-card-description {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: var(--spacing-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.course-card-link {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-fast);
}

.course-card-link span {
    font-size: 16px;
    transition: transform var(--transition-fast);
}

.course-card-link:hover {
    color: var(--color-primary);
}

.course-card-link:hover span {
    transform: translateX(4px);
}

/* Load More Button */
.load-more-wrapper {
    display: flex;
    justify-content: center;
    padding-bottom: var(--spacing-8);
}

.load-more-btn {
    padding: 14px 32px;
    border: 1.5px solid #E5E7EB;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-dark);
    background: white;
    cursor: pointer;
    transition: all var(--transition-base);
}

.load-more-btn:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    background: rgba(40, 56, 146, 0.02);
}

/* Courses Page Responsive Adjustments */
@media (max-width: 768px) {
    .courses-hero .section-title {
        font-size: 32px;
    }

    .category-tabs {
        gap: var(--spacing-2);
    }

    .category-tab {
        padding: 10px 16px;
        font-size: 10px;
    }

    .courses-filters {
        flex-direction: column;
        gap: var(--spacing-3);
    }

    .search-input,
    .filter-dropdown {
        width: 100%;
        max-width: 320px;
    }
}

/* === COURSE DETAIL PAGE STYLES === */

/* Breadcrumb */
.breadcrumb-section {
    padding: var(--spacing-4) 0;
    background: transparent;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.breadcrumb a {
    color: var(--color-secondary);
    transition: color var(--transition-fast);
}

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

.breadcrumb-separator {
    color: #9CA3AF;
    font-size: 12px;
}

.breadcrumb-current {
    color: var(--color-text-light);
}

/* Course Detail Hero */
.course-detail-hero {
    padding-top: 0;
    padding-bottom: var(--spacing-16);
}

.course-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
}

.course-detail-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.course-detail-title {
    font-family: 'Onest', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.25;
    color: #041A31;
}

.course-detail-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.7;
}

.course-meta {
    display: flex;
    gap: var(--spacing-8);
    margin: var(--spacing-2) 0;
}

.course-meta-item {
    display: flex;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.meta-label {
    color: var(--color-text-light);
}

.meta-value {
    font-weight: 600;
    color: var(--color-text-dark);
}

/* Primary Button */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: var(--font-size-sm);
    background: var(--color-primary);
    color: white;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    width: fit-content;
}

.btn-primary:hover {
    background: #E8900F;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 160, 27, 0.3);
}

.btn-lg {
    padding: 16px 40px;
    font-size: var(--font-size-base);
}

.course-detail-image {
    border-radius: 20px;
    overflow: hidden;
}

.course-detail-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

/* Training Information Section */
.training-info-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(40, 56, 146, 0.03) 100%);
}

.training-info-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-16);
    align-items: start;
}

.training-info-title {
    font-family: 'Onest', sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.1;
    color: #041A31;
}

/* Accordion Styles */
.accordion-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.accordion-item {
    border-bottom: 1px solid #E5E7EB;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--spacing-6) 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Onest', sans-serif;
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: #041A31;
    text-align: left;
    transition: color var(--transition-fast);
}

.accordion-header:hover {
    color: var(--color-secondary);
}

.accordion-icon {
    transition: transform var(--transition-base);
    color: var(--color-secondary);
    flex-shrink: 0;
}

.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.accordion-content p {
    padding-bottom: var(--spacing-6);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.7;
}

/* Objectives Section */
.objectives-section {
    padding: var(--spacing-16) 0;
}

.objectives-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--spacing-16);
    align-items: start;
}

.objectives-title {
    font-family: 'Onest', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    color: #041A31;
}

.objectives-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.objectives-list li {
    display: flex;
    gap: var(--spacing-4);
    align-items: flex-start;
}

.objective-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
    border-radius: 50%;
    background: linear-gradient(136deg, rgba(249, 160, 27, 0.3) 0%, rgba(249, 160, 27, 0.1) 100%);
    border: 2px solid rgba(249, 160, 27, 0.5);
    position: relative;
}

.objective-icon::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: var(--color-primary);
    font-weight: 700;
}

.objective-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.7;
}

/* CTA Section */
.cta-section {
    position: relative;
    padding: var(--spacing-24) 0;
    background-image: url('https://images.unsplash.com/photo-1505118380757-91f5f5632de0?q=80&w=2000&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    text-align: center;
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(4, 26, 49, 0.7) 0%, rgba(4, 26, 49, 0.85) 100%);
    z-index: 1;
}

.cta-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-6);
}

.cta-title {
    font-family: 'Onest', sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: white;
}

.cta-description {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    max-width: 600px;
}

/* Course Thumbnails Grid Section */
.courses-thumbnails-section {
    padding: var(--spacing-16) 0;
    background: #F9FAFB;
}

.thumbnails-category-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-4);
}

.thumbnails-categories {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.thumbnails-category {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.course-thumbnails-grid {
    display: grid;
    grid-template-columns: 120px repeat(5, 1fr);
    gap: var(--spacing-3);
    align-items: start;
}

.thumbnail-row-header {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-secondary);
    padding: var(--spacing-2) 0;
    display: flex;
    align-items: center;
    min-height: 80px;
}

.thumbnail-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all var(--transition-base);
}

.thumbnail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.thumbnail-card.empty {
    background: transparent;
    box-shadow: none;
}

.thumbnail-card img {
    width: 100%;
    height: 60px;
    object-fit: cover;
}

.thumbnail-label {
    display: block;
    padding: var(--spacing-2);
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-dark);
    text-align: center;
    line-height: 1.3;
}

/* Course Detail Responsive */
@media (max-width: 1024px) {
    .course-detail-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }

    .course-detail-image {
        order: -1;
    }

    .training-info-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }

    .objectives-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }

    .course-thumbnails-grid {
        grid-template-columns: 100px repeat(4, 1fr);
    }

    .thumbnail-card.extra {
        display: none;
    }
}

@media (max-width: 768px) {
    .course-detail-title {
        font-size: 24px;
    }

    .training-info-title {
        font-size: 36px;
    }

    .cta-title {
        font-size: 32px;
    }

    .course-thumbnails-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-4);
    }

    .thumbnail-row-header {
        grid-column: 1 / -1;
        min-height: auto;
        padding: var(--spacing-4) 0 var(--spacing-2);
        border-bottom: 1px solid #E5E7EB;
    }
}

/* === SUSTAINABILITY PAGE V2 STYLES === */

/* Hero Section V2 - Dark background with image overlay */
.sustainability-hero-v2 {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 80px;
}

.sustainability-hero-v2 .hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/sustainability/sustainability-hero-bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.sustainability-hero-v2 .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(4, 26, 49, 0.85) 0%, rgba(4, 26, 49, 0.75) 100%);
    z-index: 1;
}

.sustainability-hero-v2 .hero-dot-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 58px 58px;
    z-index: 2;
    pointer-events: none;
}

.sustainability-hero-v2 .container {
    position: relative;
    z-index: 3;
}

.hero-content-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-16) var(--spacing-4);
}

.hero-icon {
    width: 537px;
    max-width: 100%;
    height: auto;
    margin-bottom: var(--spacing-8);
}

@media (max-width: 768px) {
    .hero-icon {
        width: 300px;
        margin-bottom: var(--spacing-6);
    }
}

.hero-title-white {
    font-family: 'Onest', sans-serif;
    font-size: 56px;
    font-weight: 400;
    line-height: 1.15;
    color: #FFFFFF;
    margin-bottom: var(--spacing-6);
}

.hero-subtitle-white {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    max-width: 700px;
    margin-bottom: var(--spacing-12);
}

.scroll-indicator-white {
    animation: bounce 2s infinite;
}

.scroll-indicator-white svg {
    display: block;
}

/* Sustainability Section Base */
.sustainability-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 0;
    position: relative;
}

.sustainability-section.light-section {
    background-color: #FFFFFF;
}

/* Dark Section V2 with background image */
.sustainability-section.dark-section-v2 {
    position: relative;
    overflow: hidden;
}

.sustainability-section .section-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.sustainability-section .section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(4, 26, 49, 0.85) 0%, rgba(4, 26, 49, 0.75) 100%);
    z-index: 1;
}

.sustainability-section .section-overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(4, 26, 49, 0.85) 0%, rgba(4, 26, 49, 0.75) 100%);
    z-index: 1;
}

.sustainability-section.dark-section-v2 .container,
.sustainability-section.operational-section .container {
    position: relative;
    z-index: 2;
}

/* Section Title V2 */
.section-title-v2 {
    font-family: 'Onest', sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.1;
    color: #041A31;
    margin-bottom: var(--spacing-4);
}

.section-title-v2.text-white {
    color: #FFFFFF;
}

.section-title-v2.text-center {
    text-align: center;
}

/* Section Subtitle V2 */
.section-subtitle-v2 {
    font-family: 'Onest', sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 30px;
    color: #041A31;
    margin-bottom: var(--spacing-6);
}

.section-subtitle-v2.text-white {
    color: rgba(255, 255, 255, 0.9);
}

.section-subtitle-v2.text-center {
    text-align: center;
}

/* Section Intro Text */
.section-intro-text {
    font-family: 'Onest', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: #041A31;
    margin-bottom: var(--spacing-4);
}

.section-intro-text.text-white {
    color: rgba(255, 255, 255, 0.9);
}

/* Sustainability List V2 */
.sustainability-list-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0 0 var(--spacing-6) 0;
}

.sustainability-list-v2 li {
    font-family: 'Onest', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: #041A31;
}

.sustainability-list-v2.text-white li {
    color: rgba(255, 255, 255, 0.9);
}

.sustainability-list-v2.text-white {
    color: rgba(255, 255, 255, 0.9);
}

/* Section Note V2 */
.section-note-v2 {
    font-family: 'Onest', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: #041A31;
    margin-top: var(--spacing-4);
}

.section-note-v2.text-white {
    color: rgba(255, 255, 255, 0.7);
}

/* Operational Section */
.operational-section {
    position: relative;
    overflow: hidden;
}

.operational-content {
    max-width: 1200px;
    margin: 0 auto;
}

.operational-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
    margin-top: var(--spacing-8);
}

.operational-list-col {
    display: flex;
    flex-direction: column;
}

.operational-image-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.operational-image {
    width: 100%;
    max-width: 500px;
    height: auto;
}

/* Utility Classes */
.text-white {
    color: #FFFFFF;
}

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

/* Responsive Styles for Sustainability V2 */
@media (max-width: 1024px) {
    .hero-title-white {
        font-size: 42px;
    }

    .section-title-v2 {
        font-size: 36px;
    }

    .operational-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }

    .operational-image-col {
        order: -1;
    }
}

@media (max-width: 768px) {
    .sustainability-hero-v2 {
        min-height: auto;
        padding: 120px 0 80px;
    }

    .hero-title-white {
        font-size: 32px;
    }

    .hero-subtitle-white {
        font-size: 16px;
    }

    .sustainability-section {
        min-height: auto;
        padding: 60px 0;
    }

    .section-title-v2 {
        font-size: 28px;
    }

    .section-subtitle-v2 {
        font-size: 20px;
    }

    .sustainability-list-v2 li {
        font-size: 14px;
    }

    .operational-image {
        max-width: 100%;
    }
}