/*
 * ROOT VARIABLES AND GENERAL STYLES
 */
:root {
    --color-black: rgb(0, 0, 0);
    --color-white: hsla(0, 0%, 100%, 1);
    --color-purple: hsla(278, 100%, 75%, 1);
    --tst: bottom 0.5s ease 0s;
    --dark: #E6E6E6EE;
    --accent-red: #E22B2F; 
    --accent-gold: #C99C6A;
    --text-dark: #121212;
    --map-fill-light: #EBEBEB;
    --map-stroke-light: #A8A8A8;
    --card-bg-light: #FBF6F0; /* Used for the Operations section background */
    --color-white: hsla(0, 0%, 100%, 1); 
    --text-grey: #4A4A4A; 
}


    
body, html {
    box-sizing: border-box;
}

body {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: Roboto, sans-serif;
     /* Removed for compatibility */
    margin: 0;
    padding: 0;
    transition: all 1000ms;
    
     /* Removed to allow scrolling if needed */
}
.min-h-screen {
  min-height: 100vh;
}

main {
    margin: 0;
    padding: 0;
}
#smooth-wrapper {
    position: relative; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* --- GLOBAL STICKY NAVIGATION STYLES (HORIZONTAL TOP BAR) --- */

#global-sticky-nav {
    position: fixed;
    top: 0; /* Stick to the top */
    left: 0; /* Span the full width */
    width: 100%;
    z-index: 1000; /* Ensure it stays above all content */
    pointer-events: none; /* Default to none to allow clicking through empty space */
}

.sticky-nav-container {
    background-color: rgba(0, 0, 0, 0.641); /* White/light background with transparency */
    border-radius: 0 0 10px 10px; /* Rounded corners only at the bottom */
    padding: 10px 40px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1); /* Subtle box shadow below the bar */
    width: 100%;
    max-width: 1400px; /* Limit the width and center it */
    margin: 0 auto;
    backdrop-filter: blur(10px); /* Optional: Adds a blur effect to the background
    
    /* Flexbox for Horizontal Layout */
    display: flex;
    justify-content: space-between; /* Space out the logo and the links */
    align-items: center;
    pointer-events: auto; /* Enable interaction within the container */
    font-family: 'Roboto', sans-serif;
}

.nav-logo {
    /* Logo remains on the left */
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border-bottom: none; /* Remove separator line */
}

.nav-harmony-logo {
    max-width: 100px; /* Smaller logo for the top bar */
    height: auto;
    filter: brightness(0.9);
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* Flexbox for Horizontal Links */
    display: flex;
    gap: 25px; /* Space between links */
}

.nav-list li {
    margin-bottom: 0;
}

.nav-list a {
    text-decoration: none;
    color: #ffffff;
    font-size: clamp(1.2rem, 1.2rem + 1vw, 1.4rem); /* Smaller font for horizontal bar */
    font-weight: 500;
    padding: 5px 0;
    transition: color 0.2s ease, font-weight 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap; /* Prevent links from wrapping */
}

.nav-list a:hover {
    color: #E22B2F;
    font-weight: 700;
}

/* --- ADJUST MAIN CONTENT TO NOT SIT BEHIND FIXED NAV --- */
/* You need to add top padding to the smooth-content wrapper or header 
   to prevent content from being hidden behind the sticky nav bar. */
#smooth-content {
    /* Use a calculated value slightly larger than the nav bar height (approx 70px) */
    padding-top: 80px; 
}

/*
 * SWIPER COVERFLOW STYLES
 */

.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    min-height: 250px;
}



.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
}
.swiper-pagination {
    /* Critical: Set position to absolute within the .swiper container */
    position: absolute;
    /* Ensure it is horizontally centered */
    left: 50% !important;
    transform: translateX(-50%); /* Center it precisely */
    /* Place it clearly above the slides */
    z-index: 10; 
    /* Set the bottom margin */
    bottom: 10px !important; /* Use !important if Swiper's internal styles are aggressive */
}

/* Coverflow Shadows */
.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, #323232, #fff0);
    border-right: 1px solid #000;
    border-radius: 10px;
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, #000, #fff0);
    box-shadow: 0 0 0 1px #000;
    border-radius: 10px;
}

/* Pagination */
.swiper-pagination-bullet {
    background: #696969;
    transition: all 0.5s ease 0s;
    border-radius: 8px;
}

.swiper-pagination-bullet-active {
    background: #C99C6A;
    width: 30px;
    border-radius: 15px;
}

/* Info Box */
.info {
    position: absolute;
    width: calc(100% + 2px);
    height: calc(30% + 2px);
    text-align: center;
    background: linear-gradient(180deg, #fff0 0, #0008 50px), linear-gradient(180deg, #fff0, #0009);
    padding: 15px;
    padding-top: 70px;
    left: 0;
    bottom: calc(-100% - 3px);
    box-sizing: border-box;
    transition: var(--tst);
}

.swiper-slide-active .info {
    bottom: 0;
    transition: var(--tst);
}

.info span {
    width: 100%;
    margin: 0.25em 0 0.25em 0;
    display: inline-block;
    padding: 0.55em 0.5em 0.55em 4em;
    box-sizing: border-box;
    color: var(--dark);
    text-align: center;
    position: relative;
    text-transform: uppercase;
    font-size: 16px;
    border-radius: 2em;
}

.info span:hover {
    background: #0008;
    filter: invert(1);
}

.info span:before,
.info span:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: #fff8;
    height: 100%;
    width: 2em;
}

/* download */
.info span:nth-child(1):before {
    content: ""; /* Must be present */
    background: none;
    width: 0;
    height: 0;
    border: 8px solid transparent; /* Set a base transparent border */
    border-top: 8px solid var(--dark); /* Create the downward arrow tip */
    border-bottom: none;
    
    left: 17px; /* Position horizontally */
    top: 10px;  /* Position vertically */
    
    border-radius: 0;
    transform: none; /* Remove previous rotation */
}.info span:nth-child(1):after { background: linear-gradient(180deg, var(--dark) 1px, #fff0 1px 150%); width: 4px; height: 7px; border-radius: 100% 50% 100% 0%; left: 15px; top: 13px; border: 3px solid var(--dark); border-bottom-color: #fff0; background-repeat: no-repeat; transform: rotate(-1deg); }
.info span:nth-child(1):after {
    content: ""; /* Must be present */
    background: var(--dark);
    width: 17px; /* Width of the line */
    height: 3px; /* Thickness of the line */
    border: none;
    
    left: 17px; /* Position horizontally */
    top: 21px; /* Position vertically (below the arrow) */
    
    border-radius: 0;
    transform: none; /* Remove previous rotation */
}
.info span:nth-child(2):before { background: radial-gradient(circle at 50% 42%, var(--dark) 2px, #fff0 3px 4px, var(--dark) 5px 100%); width: 20px; height: 13px; left: 11px; top: 8px; border-radius: 2px; }
.info span:nth-child(2):after { border: 10px solid #fff0; border-width: 0px 2px 4px 2px; border-bottom-color: var(--dark); width: 10px; background: #fff0; height: 0px; left: 14px; top: 5px; }
.info span:nth-child(3):before { width: 22px; height: 22px; left: 11px; top: 3px; background: radial-gradient(circle at 60% 50%, var(--dark) 1px, #fff0 2px 100%), radial-gradient(circle at 37% 70%, var(--dark) 1px, #fff0 2px 100%), radial-gradient(circle at 52% 64%, var(--dark) 1px, #fff0 2px 100%), radial-gradient(circle at 45% 42%, var(--dark) 1px, #fff0 2px 100%), radial-gradient(circle at 49% 25%, var(--dark) 1px, #fff0 2px 100%), radial-gradient(circle at 61% 15%, var(--dark) 1px, #fff0 2px 100%), radial-gradient(circle at 18% 84%, #fff0 1px, var(--dark) 2px 3px, #fff0 4px 100%), radial-gradient(circle at 85% 16%, #fff0 1px, var(--dark) 2px 3px, #fff0 4px 100%); }
.info span:nth-child(4):before { border: 10px solid #fff0; height: 0; border-bottom-color: var(--dark); border-width: 0 6px 10px 6px; left: 12px; top: 10px; background: #fff0; }
.info span:nth-child(4):after { border: 10px solid #fff0; height: 0; border-bottom-color: var(--dark); border-width: 0 6px 15px 6px; left: 18px; top: 5px; background: #fff0; }
.info span:nth-child(5):before { width: 16px; height: 16px; border-radius: 100%; left: 13px; top: 3px; background: radial-gradient(circle at 50% 50%, var(--dark) 2px, #fff0 3px 4px, var(--dark) 5px 100%); }
.info span:nth-child(5):after { border: 10px solid #fff0; height: 0; border-top-color: var(--dark); border-width: 8px 6px 0 6px; left: 15px; top: 16px; background: #fff0; }


/*
 * GSAP ZOOM SECTION STYLES
 */

.zoom-container {
    height: 100vh;
    overflow: hidden;
    position: relative;
    perspective: 1000px;
    width: 100vw;
    background-color: var(--color-black);
    /* ?? CRITICAL FIX for 3D transforms ?? */
    transform-style: preserve-3d;
}
.zoom-item.heading {
    /* Responsive font-size and line-height using min(max(...)) clamp pattern for scaling between defined limits */
    font-size: min(max(3.125rem, 3.464vw + 2.229rem), 8rem);
    line-height: min(max(4.688rem, 3.349vw + 3.821rem), 8.5rem);
    margin: 0;
    text-align: center;
    opacity: 0.1;
    position: absolute;
    left: 50%;
    top: 53%;
    transform: translate3d(-50%, -50%, -2000px);
    white-space: nowrap;
    color: var(--color-white);
    z-index: 100;
}

.zoom-item {
    position: absolute;
    transform-origin: center center;
}

/* Initial layer opacity */
.zoom-item[data-layer="3"] { opacity: 0.6; z-index: 3; }
.zoom-item[data-layer="2"] { opacity: 0.4; z-index: 2; }
.zoom-item[data-layer="1"] { opacity: 0.2; z-index: 1; }

/* Positional Styles */
.zoom-item:nth-child(2) { left: 5%; top: 21%; width: 80vw; }
.zoom-item:nth-child(3) { left: 18%; top: 10%; width: 15vw; }
.zoom-item:nth-child(4) { left: 42%; top: 3%; width: 40vw; }
.zoom-item:nth-child(5) { right: 18%; top: 11%; width: 20vw; }
.zoom-item:nth-child(6) { bottom: auto; right: 14%; top: 28%; width: 13.2vw; }
.zoom-item:nth-child(7) { bottom: 32%; right: 3.5%; width: 17vw; }
.zoom-item:nth-child(8) { bottom: 13.5%; left: 16%; width: 13vw; }
.zoom-item:nth-child(9) { bottom: 21%; left: 29%; width: 18vw; }
.zoom-item:nth-child(10) { bottom: 46%; left: 7.5%; top: auto; width: 19vw; }
.zoom-item:nth-child(11) { bottom: 5.5%; right: 15%; width: 15vw; }
.zoom-item:nth-child(12) { bottom: 2%; left: auto; right: 38%; width: 23vw; }
.zoom-item:nth-child(13) { right: 4%; top: 5%; width: 18vw; }
.zoom-item:nth-child(14) { right: 41%; top: 35%; width: 27vw; }
/* Standardize max dimensions to vw for consistency with nth-child rules */
.zoom-item:not(.heading) {
    max-width: 20vw;
    max-height: 20vw;
}


.zoom-item img {
    width: 100%;
    display: block;
}

/* GSAP Text Reveal Section */
.section-stick {
    min-height: 100vh;
    background-color: var(--color-black);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    padding: 2rem;
}

.opacity-reveal {
    font-size: 2.5rem; 
    text-align: center;
    width: 100%; 
    line-height: 1.2;
    white-space: nowrap;
}


  h2 {
    text-align: center;
    letter-spacing: 0.025em;
    font-size: clamp(2rem, 1.8125rem + 0.75vw, 2.6rem);
    color:#000;
  }
  h3 {
    text-align: center;
    letter-spacing: 0.025em;
    font-size: clamp(1.5rem, 1.3125rem + 0.75vw, 2.1rem);
    color:#ffffff;
  }

  a {
    display: inline-block;
    text-decoration: none;
  }

  /* CARD GRID (flattened from nested SCSS) */
.container {
  margin-top: 5em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
  justify-content: center;
}

.container .card:nth-child(1) .box .icon .iconBox { background: var(--accent-red); }
.container .card:nth-child(2) .box .icon .iconBox { background: var(--accent-red); }
.container .card:nth-child(3) .box .icon .iconBox { background: #d05fa2; }

.container .card ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.container .card ul li {
  text-transform: uppercase;
  background: var(--clr-tag, transparent);
  color: #282828;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.188rem;
}

.container .card .content { padding: 0.938rem 0.625rem; }
.container .card .content h3 {
  text-transform: capitalize;
  font-size: clamp(1.5rem, 1.3909rem + 0.4364vw, 1.8rem);
  color: var(--accent-gold);
}
.container .card .content p {
  margin: 0.625rem 0 1.25rem;
  font-size: clamp(0.875rem, 0.7727rem + 0.2273vw, 1rem);
  line-height: 1.5rem;
  color: #565656;
}

.card-inner {
  position: relative;
  width: inherit;
  height: 18.75rem;
  background: var(--clr, transparent);
  border-radius: 1.25rem;
  border-bottom-right-radius: 0;
  overflow: hidden;
}
.card-inner .box {
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  overflow: hidden;
}
.card-inner .box .imgBox {
  position: absolute;
  inset: 0;
}
.card-inner .box .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-inner .box .icon {
  position: absolute;
  bottom: -0.375rem;
  right: -0.375rem;
  width: 6rem; height: 6rem;
  background: var(--clr, transparent);
  border-top-left-radius: 50%;
}
.card-inner .box .icon:hover .iconBox { transform: scale(1.1); }
.card-inner .box .icon::before {
  position: absolute;
  content: "";
  bottom: 0.375rem;
  left: -1.25rem;
  background: transparent;
  width: 1.25rem; height: 1.25rem;
  border-bottom-right-radius: 1.25rem;
  box-shadow: 0.313rem 0.313rem 0 0.313rem #fff;
}
.card-inner .box .icon::after {
  position: absolute;
  content: "";
  top: -1.25rem;
  right: 0.375rem;
  background: transparent;
  width: 1.25rem; height: 1.25rem;
  border-bottom-right-radius: 1.25rem;
  box-shadow: 0.313rem 0.313rem 0 0.313rem var(--clr, transparent);
}
.card-inner .box .icon .iconBox {
  position: absolute;
  inset: 0.625rem;
  background: #282828;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.card-inner .box .icon .iconBox span {
  color: #fff;
  font-size: 1.5rem;
}
/* Styling the image container and the image itself */
.section-stick .content-wrapper {
    /* Use CSS Grid for the wrapper to handle vertical alignment and stacking 
       while remaining centered by the parent section's flexbox */
    display: flex; 
    flex-direction: column;
    align-items: center; /* Center the image and text horizontally */
    text-align: center;
    width: 100%; /* Ensure wrapper takes full width for text alignment */
    max-width: 1000px; /* Constrain content width if needed */
    padding: 20px;
}

.section-stick .section-image {
    /* Style the image to appear below the text */
    margin-top: 50px; /* Space between text and image */
    max-width: 80%; /* Set a maximum width for the image */
    height: auto;
    
    /* Ensure the image starts in the correct state for the GSAP timeline */
}
/* Style for the new heading above the Swiper carousel */
.section-heading {
    /* Centering */
    text-align: center;
    width: 100%;
    
    /* Appearance */
    color: var(--color-white); /* Assuming your sections use a white text color */
    font-family: 'Roboto', sans-serif;
    font-size: 2.5rem; /* Adjust size as needed */
    font-weight: bold;
    
    /* Spacing */
    margin: 40px 0 20px 0; /* Top, Right, Bottom, Left margin */
    padding: 0 20px;
}
/* --- HIGHLIGHTS SECTION (SECTION 2) --- */
#section-2 {
    background-color: #f8f8f800; /* Light background as in the image */
    padding: 60px 20px; /* Ample padding around the section */
    min-height: 100vh; /* Ensure it takes at least full viewport height */
    display: flex; /* Use flex to center content if needed */
    align-items: center; /* Vertically center content if section is taller */
    justify-content: center; /* Horizontally center content */
}
#section-1 {
    background: #000000;
    height: auto;
    padding: 30px 0;
}
.figures-card-section {
    max-width: 1200px; /* Constrain width of the entire highlights block */
    width: 100%;
    margin: 0 auto; /* Center the section content */
}

.figures-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center everything inside */
    text-align: center;
}

.figures-intro {
    max-width: 100vw; /* Constrain width of the intro text */
    margin-bottom: 50px; /* Space before nav buttons */
    color: #000;
}

.figures-heading {
    font-size: clamp(2rem, 2rem + 1vw, 3rem); /* Larger heading as in the image */
    text-align: center;
    font-weight: 700;
    color: #121212;
    margin-bottom: 20px;
}

.figures-blurb {
    font-size: clamp(1.4rem, 1.4rem + 1vw, 1.8rem); /* Larger blurb text */
    font-weight: 500; /* Medium weight */
    color: #E22B2F; /* Red color as in the image */
    line-height: 1.5;
    margin-bottom: 20px;
}

.figures-blurb-sub {
    font-size: clamp(1.2rem, 1.2rem + 1vw, 1.6rem);
    font-weight: 400;
    color: #4A4A4A; /* Grey color for sub text */
    line-height: 1.6;
}

/* Card Navigation Bar */
.card-navigation-bar {
    display: flex;
    justify-content: center;
    gap: 10px; /* Space between buttons */
    margin-bottom: 40px; /* Space before the card display area */
    background-color: #F2E9DF; /* Match section background */
    border-radius: 50px; /* Rounded corners for the entire nav bar look */
    padding: 8px; /* Padding inside the nav bar container */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05); /* Subtle inner shadow */
}

.nav-card-button {
    background-color: #F2E9DF; /* Default background */
    color: #4A4A4A; /* Default text color */
    border: none;
    padding: 12px 25px; /* Comfortable button size */
    border-radius: 50px; /* Pill shape */
    font-size: clamp(1.2rem, 1.2rem + 1vw, 1.4rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-grow: 1; /* Allow buttons to grow and fill space evenly */
    text-align: center;
    max-width: 150px; /* Limit individual button width */
}

.nav-card-button:hover {
    background-color: #C3A071; /* Slight hover effect */
    color: #121212;
}

.nav-card-button.active {
    background-color: #E22B2F; /* Active button background */
    color: #ffffff; /* Active button text color */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Prominent shadow for active button */
    font-weight: 700;
}

/* Card Display Area */
.card-display-area {
    width: 100%;
}

.large-card-content {
    background-color: #FFFFFF; /* White background for the card */
    border-radius: 20px; /* Rounded corners for the card */
    box-shadow: 0 8px 30px rgba(0,0,0,0.08); /* Soft shadow for the card */
    padding: 10px 60px; /* Internal padding */
    border:#000 1px solid;
    text-align: left; /* Text alignment within the card */
}

.large-card-content h3 {
    font-size: clamp(1.4rem, 1.4rem + 1vw, 1.8rem);
    font-weight: 700;
    color: #121212;
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #E22B2F; /* Separator line */
}

.large-card-content.hidden {
    display: none;
}

/* Figures Grid Layout */
.card-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
    gap: 15px 20px; /* Space between figure items */
    margin-bottom: 40px;
}

.figure-item {
    padding: 5px 0;
}

.figure-heading {
    font-size: clamp(1.2rem, 1.2rem + 1vw, 1.4rem);
    font-weight: 500;
    color: #4A4A4A; /* Grey for headings */
    margin-bottom: 4px;
    line-height: 1;
}

.figure-value {
    font-size: clamp(1.4rem, 1.4rem + 1vw, 1.8rem); /* Large value text */
    font-weight: 700;
    color: #E22B2F; /* Darker for value */
    line-height: 1.3;
}

.figure-value span {
    display: block;
    font-size: clamp(1.0rem, 1.0rem + 1vw, 1.2rem);
    font-weight: 400;
    font-style: italic;
    color: #777777;
    margin-top: 5px;
}

/* Footnote and Read Report Button */
.footnote {
    font-size: clamp(1.2rem, 1.2rem + 1vw, 1.4rem);
    color: #4A4A4A;
    margin-top: 30px;
    text-align: center; /* Center the footnote */
}

.footnote a {
    color: #E22B2F; /* Red link color */
    text-decoration: none;
    font-weight: 500;
}

/* Read Financial Report Button */
.large-card-content .read-report-button {
    display: block; /* Make it a block element to center */
    width: fit-content; /* Adjust width to content */
    margin: 30px auto 0 auto; /* Center the button below figures */
    background-color: #E22B2F; /* Red background */
    color: #FFFFFF; /* White text */
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    transition: background-color 0.3s ease;
}

.large-card-content .read-report-button:hover {
    background-color: #C02528; /* Slightly darker red on hover */
}


/* Adjustments for environmental and social grids if they were custom */
/* You might already have these, but ensure they fit the new styling */
.environmental-grid, .social-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjust column size for different content types */
}

.figure-item-large {
    grid-column: span 2; /* Make this item span two columns if needed */
    text-align: center; /* Center content for large items */
}
.figure-item-large .figure-value {
    font-size: 2.5rem; /* Even larger for "Zero" */
    color: #E22B2F; /* Red for "Zero" */
}
.figure-item-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: #E22B2F;
    padding: 15px 0;
    line-height: 1.5;
}



/* Update the styles for the Trusted Companies section */
#section-3 {
    /* Retains background and height rules */
    
    /* ?? ADD PADDING HERE ?? */
    padding: 60px 40px; /* Example: 60px top/bottom, 40px left/right */
    
    box-sizing: border-box; /* Ensures padding is included within the 100vh height */
    
    /* You may need to remove height: 100vh; if padding is pushing content off-screen. 
       A safer approach for content is min-height: 100vh; */
    min-height: 100vh; /* Use min-height to accommodate padding */
    height: auto !important; /* Override the inline style */
}

/* Ensure the inner container respects the new padding */
#section-3 .container {
    /* If this container had negative margins or full viewport width, reset it */
    max-width: 1200px; /* Example max-width for content centering */
    margin: 0 auto; /* Center the container horizontally */
}


/* --- OPERATIONS SECTION (SECTION 5) --- */

#section-operations {
    padding: 60px 20px;
    background-color: #fff;
    color: var(--text-dark);
    display: flex;
    justify-content: center;
}

.operations-content-wrapper {
    max-width: 1200px; /* Consistent max-width */
    width: 100%;
    position: relative;
}

.operations-heading {
    font-size: 3rem; 
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 50px;
    text-align: center;
}

.map-card-container {
    position: relative;
    z-index: 2;;
display: flex;
flex-wrap: wrap;
}




p.text-7xl {
    font-size: clamp(2rem, 2rem + 1vw, 3rem);
}

html {
    font-size: 62.5%;
}

p {
    font-size: clamp(1.2rem, 1.2rem + 1vw, 1.6rem);
	color: #4A4A4A;
}

.int {
	font-size: clamp(1.3rem, 1.3rem + 1vw, 1.7rem);
    font-weight: 500;
    line-height: 1.6;
	color: #000000;
}

.map-card-container:after {
    content: '';
    border: 1px solid #F0AEAC;
    width: calc(100% + 20px);
    min-height: calc(100% - 20px);
    border-radius: 35px;
    display: block;
    position: absolute;
    z-index: 0;
    bottom: 10px;
    left: -10px;
}







/* ------------------------------------------- */
/* --- MAP TABS (Buttons) --- */
/* ------------------------------------------- */

.map-card-navigation-bar {
    /* Position the navigation bar outside the top of the map-display-card */
    /* position: absolute; */
    /* top: 0; */
    /* left: 40px; */ /* Aligns with the card padding */
    /* transform: translateY(-100%); */ 
    
    /* Styling for the wrapper bar */
    display: flex;
    gap: 10px;
    background-color: transparent;
    padding: 0;
    margin: 0;
    flex-basis: 100%;
    box-shadow: none;
    border-radius: 0;
}

/* Base style for map buttons */
.map-card-button {
    background-color: transparent;
    color: var(--text-dark);
    border: none;
    padding: 12px 15px;
    border-radius: 0;
    font-size: clamp(1.4rem, 1.4rem + 1vw, 1.6rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-grow: 0;
    text-align: center;
    max-width: none;
    border-bottom: 3px solid transparent; /* Gives the 'tab' look */
}

.map-card-button:hover {
    color: var(--accent-red); 
}

/* Active tab style */
.map-card-button.active {
    color: var(--accent-red);
    font-weight: 700;
    box-shadow: none;
} /* ?? CRITICAL FIX: Block closed correctly */


/* ------------------------------------------- */
/* --- Map Display Card and Content --- */
/* ------------------------------------------- */

.map-display-card {
    /* White background card box */
    padding: 40px;
    width: 70%;
    min-height: 550px;
    position: relative;
    box-sizing: border-box;
    background-color: #F6F1EA;
    border-radius: 35px;
    z-index: 2;
}
.map-right-cont {
    flex-basis: 25%;
    padding: 20px;
}
/* The actual content wrapper for each map (SA, AUS, PNG) */
.map-content-view {
    /* IMPORTANT: Ensures inactive maps are hidden by default via JS initialization */
    display: block; 
    padding: 0; 
    background-color: transparent;
    box-shadow: none;
    border: none;
}

.map-content-view.hidden {
    display: none;
}

.map-card-heading {
    /* Corrected to h2 sizing */
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--accent-red);
    text-align: center;
    display: none;
}

/* SVG Specific Wrappers (Styles to center/size the map) */
.map-svg-container {
    position: relative;
    width: 100%;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
div#png-map-content .map-svg-wrapper{max-width: 750px;}
.map-svg-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
     /* Use padding-bottom for aspect ratio control */
}
.map-svg-wrapper img{max-width:100%;}
.map-svg-wrapper svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
}
.map-svg-wrapper svg path {
    fill: var(--map-fill-light); 
    stroke: var(--map-stroke-light); 
    stroke-width: 0.5;
    transition: fill 0.3s ease;
}

/* Marker Overrides (Retained for functionality) */
.map__markers {
  list-style: none;
  margin: 0;
  padding: 0;
}

.map__marker {
  position: absolute;
}

.map__marker:after {
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-name: pop;
  border-radius: 50%;
  border: 1px solid #ce606f;
  content: "";
  height: 2em;
  left: 0;
  margin: -0.5em 0 0 -0.5em;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 2em;
}

.map__marker:hover .map__marker-info {
  display: block;
}

.map__marker > a {
  background-color: #ce606f;
  border-radius: 50%;
  height: 1em;
  display: block;
  text-indent: -9999px;
  width: 1em;
}
.map__marker--target0 {
  left: 61%;
  top: 30%;
}
.map__marker--target0:after {
  animation-delay: 5s;
}
.map__marker--target1 {
  left: 50%;
  top: 32%;
}
.map__marker--target1:after {
  animation-delay: 5s;
}
.map__marker--target2 {
  left: 57%;
  top: 47%;
}
.map__marker--target2:after {
  animation-delay: 5s;
}
.map__marker--target3 {
  left: 57%;
  top: 29%;
}
.map__marker--target3:after {
  animation-delay: 5s;
}
.map__marker--target4 {
  left: 66%;
  top: 65%;
}
.map__marker--target4:after {
  animation-delay: 5s;
}
.map__marker--target5 {
    left: 34.5%;
    top: 60.5%;
}
.map__marker--target5:after {
  animation-delay: 5s;
}

.no-italics {
	font-style: normal;
	display: block;
    font-size: clamp(1.0rem, 1.0rem + 1vw, 1.2rem);
    font-weight: 400;
    color: #777777;
    margin-top: 5px;
}



.map__marker-info {
  display: none;
  left: 50%;
  position: absolute;
  bottom: 0;
  transform: translate(-50%, -2em);
  width: 30em;
  z-index: 999;
  background: #fff;
  box-shadow: 10px 10px 90px rgba(0, 0, 0, 0.16);
  border-radius: 35px;
}

.map__marker-info-header {
  background-color: #ce606f;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  color: #fff;
  padding: 0.5em 1em;
}

.map__marker-info-main {
  background-color: #fff;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  color: #7e7e7e;
  padding: 0.5em 1em;
}

.map__marker-info h2 {
  margin-bottom: 30px;
  margin-top: 0;
  font-size: clamp(1.4rem, 1.4rem + 1vw, 1.8rem);
  color: var(--accent-red);
}

.map__marker-info-inner {
  padding: 30px;
  /* text-align: center; */
}

.map__marker-info-inner:after {
  border-left: 0.75em solid transparent;
  border-right: 0.75em solid transparent;
  border-top: 1em solid #fff;
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  width: 0;
}

.animate {
  animation-duration: 1s;
  animation-fill-mode: both;
}


@keyframes bounce-in {
  0%, 20%, 40%, 60%, 80%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.animate--bounce-in {
  animation-duration: 0.75s;
  animation-name: bounce-in;
}


ul.list {}

ul.list li {
    list-style: square;
    font-size: clamp(1.2rem, 1.2rem + 1vw, 1.4rem);
}

ul.list li::marker {color: #E30513;}

.margin-35T {
	margin-top: 35px!important;
}

.no-marginT {
	margin-top: 0px!important;
}

.margin-27T {
    margin-top: 27px !important;
}












/* --- NEW SECTION: Media Grid (Image & Video) --- */
#section-media-grid {
    background-color: #000000; /* Black background */
    padding: 50px 20px; /* Some padding around the content */
    min-height: 80vh; /* Ensure it takes up a good portion of the screen */
    display: flex; /* Use flex to center content if needed */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
}

.media-grid-container {
    display: flex; /* Flexbox for two columns */
    max-width: 1400px; /* Limit overall width */
    width: 100%;
    gap: 60px; /* Space between the image and video columns */
    align-items: center; /* Align items in the middle vertically */
}

.media-column {
    flex: 1; /* Each column takes equal space */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px; /* Minimum height for columns */
}

.responsive-media-item {
    width: 100%;
    height: 100%; /* Fill the column height */
    object-fit: cover; /* Cover the area, cropping if necessary */
    border-radius: 10px; /* Slightly rounded corners for visual appeal */
    display: block; /* Remove extra space below images/videos */
}



section.strategy {
    padding: 90px 0 40px;
    background: #fff;
}

section.strategy h2.operations-heading {
    margin-top: 0;
}

section.strategy article {
    max-width: 1200px;
    width: 100%;
    position: relative;
    margin: 0 auto;
}

section.strategy article img {
    max-width: 100%;
    margin: 60px auto 0;
    display: block;
}








section.chair{ background: #F6F0E9; padding: 90px 0;}
section.chair article {
    max-width: 1200px;
    width: 100%;
    position: relative;
    margin: 0 auto;
}
section.chair .row{ display: flex; gap:60px;}
section.chair .row .col-50{}
section.chair .row .col-50 .img-row{position: relative;border-radius: 34px;overflow: hidden;}
section.chair .row .col-50 .img-row a.download-btn{position: absolute;bottom:5px;right: 5px;background: #D93831;width: 50px;height: 50px;line-height: 50px;border-radius: 50%;color: #fff;font-size: clamp(1.2rem, 1.2rem + 1vw, 1.4rem);text-align: center;}
section.chair .row .col-50 .img-row img{ max-width: 100%;}
section.chair .row .col-50 .cont-row{}
section.chair .row .col-50 .cont-row h4{margin-top: 30px;color: #000;font-size: clamp(1.2rem, 1.2rem + 1vw, 1.8rem);}
section.chair .row .col-50 .cont-row p{
    color: #000;
}









section.download-section {
    background: #fff;
    padding-bottom: 90px;
}

section.download-section .row {
    display: flex;
    gap: 45px;
}

section.download-section .row:first-of-type .col {
    flex-basis: 50%;
    padding: 45px;
}

section.download-section .row .col {}

section.download-section .row .col h4 {
    max-width: 70%;
    color: #D21116;
    font-size: clamp(1.4rem, 1.4rem + 1vw, 2rem);
    line-height: 1.6;
    margin-top: 45px;
    margin-bottom: 0;
}

section.download-section .row .col .grey-bordered {
    background: #F4F4F4;
    padding: 60px;
    border-radius: 35px;
}

section.download-section .row:last-of-type {}

section.download-section .row:last-of-type .col {
    flex-basis: 33.33%;
}

section.download-section .row:last-of-type .col p {
    font-weight: 600;
    color: #000;
}

section.download-section .row:last-of-type .col ul.download-list {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
}

section.download-section .row:last-of-type .col ul.download-list li {
    border-bottom: 1px solid #C99C6A;
    padding: 10px 0;
    padding-right: 60px;
    position: relative;
    font-size: clamp(1.2rem, 1.2rem + 1vw, 1.4rem);
}
section.download-section .row:last-of-type .col ul.download-list li a{color:#000;}
section.download-section .row:last-of-type .col ul.download-list li:after {
    content: '\ee56';
    position: absolute;
    font-family: 'icomoon';
    color: #000;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}



section.download-section article {
    max-width: 1700px;
    width: 100%;
    position: relative;
    margin: 0 auto;
}

section.download-section .row .col .grey-bordered p {
    color: #000;
}

section.download-section .row:last-of-type .col ul.download-list li:first-of-type {
    border-top: 1px solid #C99C6A;
}









.strategy-header {
	border-radius: 18px 18px 0px 0px;
	background-color: #C99E6B!important;
	color: #FFFFFF!important;
	font-weight: 700;
	padding: 10px;
	font-size: clamp(1.2rem, calc(1.2 / 100 * 100vw), 1.6rem);
}
 
.strategy-block {
	display: flex;
	background-color: #EBEBEC;
	border-radius: 0px 0px 18px 18px;
	padding: 15px;
	margin-bottom: 15px;
}

.strategy-block div.col-90 {
	border-right: 1px solid #000000;
	padding-right: 10px;
}

.red-square-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.red-square-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 0.4rem;
  font-size: clamp(1.2rem, calc(1.2 / 100 * 100vw), 1.6rem);
  line-height: 1.5;
  color: #333;
}

.red-square-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background-color: #d80000;
  transform: translateY(-50%);
}

.strat-span {
    display: block;
    background-color: #FFFFFF;
    border: 1px solid #EF3735;
    border-radius: 28px;
    padding: 5px 20px 5px 20px;
    color: #EF3735;
    font-weight: 700;
    font-size: clamp(1rem, 1.2rem + 1vw, 1.2rem);
}

.row {
	display: flex;
}

.col-90 {
	flex-basis: 90%;
}

.col-50 {
	flex-basis: 50%;
}

.col-30 {
	flex-basis: 30%;
}

.col-10 {
	flex-basis: 10%;
	margin: auto;
	padding-left: 10px;
}

.gap-30 {
	gap: 30px!important;
}

.gap-60 {
	gap: 60px!important;
}

.no-marginB {
	margin-bottom: 0px!important;
}

.margin-30T {
	margin-top: 30px!important;	
}

.switch-red {
	color: #ED1C24!important;
}

.switch-white {
	color: #FFFFFF!important;
}

.name-title {
	color: #000000;
	font-size: 12px;
}

.caption {
	font-size: clamp(1rem, 1.2rem + 1vw, 1.2rem);
	font-style: italic;
}



/* Defines a reusable vertical spacer class */
.spacer-sm {
    margin-top: 30px; 
    margin-bottom: 30px;
}
.spacer-lg {
    margin-top: 100px;
    margin-bottom: 100px;
}

.timeline {max-width:100%;padding: 90px 50px;position:relative;text-align:center;background:#f8f2ec;}
.intro{max-width:900px;margin:0 auto 40px;line-height:1.6;color: #000000;font-size: clamp(1.2rem, 1.2rem + 1vw, 1.8rem);}
.watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:800;font-size:clamp(20em,35vw,20em);color:rgba(0,0,0,0.04);pointer-events:none;user-select:none;z-index:0;}
.timeline-container{position:relative;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;padding: 155px 0;scrollbar-width:none;}
.timeline-container::-webkit-scrollbar{display:none;}
.timeline-track{position:relative;display:inline-block;height:2px;background:#e9c7bf;min-width:2800px;}
.timeline-item{display:inline-block;vertical-align:top;position:relative;text-align:center;margin-right: 130px;}
.timeline-item:last-child{margin-right:100px;}
.timeline-dot{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;border:2px solid #e19d95;background:#f8f2ec;z-index:2;}
.timeline-year{position:absolute;top:-45px;left:50%;transform:translateX(-50%);font-weight:bold;font-size:14px;color: #000000;}
.timeline-card{/* position:absolute; *//* top:28px; *//* left:50%; *//* transform:translateX(-50%); */width:180px;min-height:60px;/* display:flex; *//* flex-direction:column; *//* justify-content:center; */align-items:center;text-align:center;padding: 30px 5px;box-sizing:border-box;white-space: normal;}
.timeline-card .title{font-weight:bold;font-size: 16px;margin-bottom:4px;color: #000000;display: block;}
.timeline-card .desc{color: #000000;font-size: 15px;line-height:1.3;max-width: 100%;width: 100%;}
.hint{margin-top: 60px;color:#777;font-size:13px;}



.handle {
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    padding: 0px 10px 25px 30px;
    cursor: pointer;
    color: #FFF;
    display: none;
}

.handle i {
    display: block;
    width: 50px;
    height: 4px;
    background: #FFF;
    margin: 0 auto;
    position: relative;
    top: 15px;
    left: 0px;
}

.handle i:before {
    content: '';
    position: absolute;
    top: 15px;
    left: 0px;
    display: block;
    width: 50px;
    height: 4px;
    background: #FFF;
}

.handle i:after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 0px;
    display: block;
    width: 50px;
    height: 4px;
    background: #FFF;
}

.clearfix:after, .clearfix:before {
    display: table;
    content: " ";
}

nav ul {
  overflow: hidden;
  transition: max-height 0.4s ease;
}












/* --- Responsive Adjustments --- */

@media(max-width:1720px){
    section.download-section article {
    max-width: 1650px;
    }		
}



@media(max-width:1440px){
    .sticky-nav-container {
    padding: 10px 20px;
    }	

    .swiper-slide {
    width: 400px;
    }	

    section.download-section article {
    max-width: 1380px;
    }		
}




@media(max-width:1280px){
    .sticky-nav-container {
    max-width: 1240px;
    }	

    #section-media-grid {
    padding: 50px 40px;
    }	

    section.download-section article {
    max-width: 1220px;
    }		
}



@media(max-width:1200px){
    .sticky-nav-container {
    max-width: 1160px;
    }	

    #section-2 {
    padding: 60px 40px;
    }	

    section.chair article {
    max-width: 1100px;
    }	

    #section-operations {
    padding: 60px 60px;
    }	

    section.strategy article {
    max-width: 1070px;
    }	

    section.download-section article {
    max-width: 1120px;
    }

    .sticky-nav-container {
    padding: 10px 20px;
    }
    .nav-list {
    gap: 15px;
    }			
}



@media(max-width:1080px){
    .sticky-nav-container {
    max-width: 1040px;
    }	

    section.chair .row {
    gap: 30px;
    }	

    section.chair article {
    max-width: 1000px;
    }	

    #section-2 {
    padding: 120px 40px;
    }	

    .map__marker--target0 {
    left: 65%;
    }	

    .map__marker--target3 {
    left: 60%;
    }	

    .map__marker--target4 {
    left: 70%;
    }	

    .map__marker--target5 {
    left: 33.5%;
    top: 58.5%;
    }	

    section.strategy article {
    max-width: 960px;
    }

    section.download-section .row:last-of-type {
    flex-wrap: wrap;
    }	

    section.download-section .row:last-of-type .col {
    flex-basis: 100%;
    }	

    section.download-section article {
    max-width: 960px;
    }		
}



@media(max-width:1024px){
    .timeline-item{
    margin-right:140px;
    }

    .timeline-card{
    width:160px;
    }

    .timeline-track{
    min-width:2200px;
    }

    .sticky-nav-container {
    max-width: 960px;
    }	

    section.chair article {
    max-width: 905px;
    }	

    .map__marker--target0 {
    left: 70%;
    }	

    .map__marker--target1 {
    left: 52%;
    }	

    .map__marker--target2 {
    left: 60%;
    }	

    .map__marker--target3 {
    left: 66%;
    }	

    .map__marker--target4 {
    left: 73%;
    top: 60%;
    }	

    .map__marker--target5 {
    left: 32.5%;
    top: 56.5%;
    }	

    section.strategy div.row {
    flex-wrap: wrap;
    }	

    section.strategy div.row div.col-30{
    flex-basis: 100%;
    }	

    section.strategy div.row div.col-50{
    flex-basis: 100%;
    }	

    section.strategy div.row {
    flex-wrap: wrap;
    gap: 10px!important;
    }		
}



@media (max-width: 992px) {
    .media-grid-container {
    flex-direction: column; /* Stack columns vertically on smaller screens */
    }
    .media-column {
    width: 100%;
    max-width: 600px; /* Limit width when stacked */
    min-height: 300px; /* Adjust min-height for smaller screens */
    }

    body {
    overflow: hidden;
    }	

    section.download-section article {
    max-width: 930px;
    }	

    .sticky-nav-container {
    max-width: 930px;
    margin: 0;
    }	
}



@media(max-width:768px){
    .timeline-item{
    margin-right:100px;
    width:160px;
    }

    .timeline-card{
    width:140px;
    }

    .timeline-track{
    min-width:1800px;
    }

    .timeline-year{
    font-size:13px;
    }

    .timeline-card .title{
    font-size:12px;
    }

    .timeline-card .desc{
    font-size:11.5px;
    }
	
    .sticky-nav-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    }

    .nav-logo {
    margin-left: 20px;
    }	

    nav ul {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    }	

    nav ul.showing {
    max-height: 35em;
    flex-wrap: wrap;
    }

    .handle {
    display: block;
    margin: 20px 0px;
    align-self: flex-end;
    margin-right: 20px;
    }

    .showing {
    max-height: 35em;
    flex-wrap: wrap;
    }	

    nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
    border-bottom: 1px solid #D2120F;
    }	

    nav ul li:last-of-type {
    border-bottom: none;
    }	

    .figures-heading {
    font-size: 2.2rem;
    }

    .figures-blurb {
    font-size: 1.1rem;
    }

    .nav-card-button {
    padding: 10px 15px;
    font-size: 0.9rem;
    }

    .large-card-content {
    padding: 30px 20px;
    }

    .large-card-content h3 {
    font-size: 1.5rem;
    }

    .card-figures {
    gap: 20px;
    }

    .figure-item-large {
    grid-column: span 1; /* Reset span for small screens */
    }	

    #section-2 {
    padding: 200px 40px;
    }	

    section.chair .row {
    flex-wrap: wrap;
    gap: 10px;
    }	

    section.chair .row .col-50{
    flex-basis: 100%;
    }	

    section.chair article {
    max-width: 565px;
    }

    section.chair article div.row div.col-50:last-of-type{
    margin-top: 30px;
    }		

    .map-display-card {
    width: 100%;
    }	

    .map-right-cont {
    flex-basis: 100%;
    }	

    section.strategy article {
    max-width: 685px;
    }	

    section.download-section article {
    max-width: 685px;
    }	

    section.download-section .row {
    flex-wrap: wrap;
    }	

    section.download-section .row:first-of-type .col {
    flex-basis: 100%;
    padding: 20px;
    }	

    .map__marker--target0 {
    left: 68%;
    }	
}



@media (max-width: 600px) {
    #section-media-grid {
    padding: 30px 15px;
    }
    .min-height {
    min-height: 250px;
    }

    .swiper {
    min-height: 100px;
    }	

    #section-2 {
    padding: 500px 40px;
    }	

    .map__marker--target0 {
    left: 69%;
    top: 34%;
    }	

    .map__marker--target5 {
    left: 32.5%;
    top: 54.5%;
    }	

    section.strategy article {
    max-width: 525px;
    }	

    section.download-section article {
    max-width: 525px;
    }	

    section.chair article {
    max-width: 525px;
    }	

    .card-figures {
    justify-items: center;
    text-align: center;
    }		
}



@media (max-width: 580px) {
    section.chair article {
    max-width: 425px;
    }	

    #section-operations {
    padding: 60px 35px;
    }	

    section.strategy article {
    max-width: 405px;
    }

    section.download-section article {
    max-width: 405px;
    }

    .map__marker--target1 {
    left: 52%;
    top: 36%;
    }	

    .map__marker--target0 {
    left: 69%;
    top: 36%;
    }	

    .map__marker--target3 {
    top: 35%;
    }	

    .map__marker--target4 {
    top: 57%;
    }	

    .map__marker--target5 {
    left: 30.5%;
    top: 51.5%;
    }	
}



@media(max-width: 480px){
    .timeline-item{
    margin-right:80px;
    width:140px;
    }

    .timeline-card{
    width:120px;
    min-height:50px;
    }

    .timeline-track{
    min-width:1400px;
    }

    .timeline-year{
    font-size:12px;
    }

    .timeline-card .title{
    font-size:11px;
    }

    .timeline-card .desc{
    font-size:10.5px;
    }
}



@media(max-width: 375px){
    .info span {
    font-size: 10px;
    }

    #section-2 {
    padding: 565px 40px;
    }

    .card-navigation-bar {
    gap: 0px;
    }

    .large-card-content {
    padding: 30px 5px;
    }	

    section.chair article {
    max-width: 330px;
    }	

    #section-operations {
    padding: 60px 30px;
    }	

    .map__marker--target0 {
    left: 69%;
    top: 39%;
    }

    .map__marker--target1 {
    left: 52%;
    top: 40%;
    }

    .map__marker--target3 {
    left: 65%;
    top: 39%;
    }	

    .map__marker--target4 {
    left: 73%;
    top: 54%;
    }	

    .map__marker--target5 {
    left: 29.5%;
    top: 50.5%;
    }	

    section.strategy article {
    max-width: 320px;
    }	

    section.download-section article {
    max-width: 320px;
    }	

    section.download-section .row .col .grey-bordered {
    padding: 40px;
    }		
}



/* Mobile & tablets: native scroll */
@media (hover: none) and (pointer: coarse) {
  #timeline-section {
    /* allow vertical page scroll even when finger is over the section */
    touch-action: pan-y;
  }
  #timeline {
    overflow-x: auto;               /* horizontal swipes scroll the strip */
    overscroll-behavior-x: contain; /* don't fling the page on edge hits */
    -webkit-overflow-scrolling: touch; /* smooth on iOS */
    touch-action: auto;             /* allow both axes; browser picks best */
  }
}