/*
=========================================
 Taronga Mines CSS Stylesheet
 Version: 1.0
=========================================
*/

/* ==========================================================
   BASE STYLES
========================================================== */
/* General styles for the entire page (applies to both html and body) */
html,
body {
  scrollbar-width: thin; /* Firefox: Makes the scrollbar smaller */
  scrollbar-color: #1d7e00 #e7e7e7; /* Thumb color first, track color second for Firefox */
}

/* Webkit Scrollbar Styling (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px; /* Width for vertical scrollbar */
  height: 12px; /* Height for horizontal scrollbar */
}

/* Webkit Scrollbar Track (Background) */
::-webkit-scrollbar-track {
  background: #e7e7e7; /* Light grey for track background */
  border-radius: 10px; /* Explicit rounding for track */
  margin: 1px; /* Adds space to make rounding more visible */
}

/* Webkit Scrollbar Thumb (Draggable part) */
::-webkit-scrollbar-thumb {
  background: #1d7e00; /* Main green colour for thumb */
  border-radius: 12px; /* Increased rounding for smooth effect */
  border: 3px solid #e7e7e7; /* Adding more spacing visually to emphasize the rounded look */
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5); /* Adding a subtle shadow to give a depth effect */
}

/* Webkit Scrollbar Thumb (Hover Effect) */
::-webkit-scrollbar-thumb:hover {
  background: #145a00; /* Darker shade for hover effect */
}

/* Scrollbar Corner (Optional) - Ensure consistency where vertical and horizontal scrollbars meet */
::-webkit-scrollbar-corner {
  background-color: #e7e7e7;
}

/* Change placeholder colour for all input fields and textareas */
input::placeholder,
textarea::placeholder {
  color: #2b2b2b !important; /* Replace with your desired colour */
  opacity: 1; /* Ensure full opacity for the colour */
}

/* Optional: Adjust styles for specific input types */
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
  color: #2b2b2b !important; /* Replace with your desired colour */
}

/* Ensure compatibility across browsers */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #2b2b2b !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #2b2b2b !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #2b2b2b !important;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: #2b2b2b !important;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(51, 51, 51, 1);
  background-color: rgba(245, 241, 235, 1);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.loaded {
  overflow: auto;
}

body.scrolled {
  margin-top: 90px;
}

hr {
  border: 0;
  height: 2px;
  margin: 18px 0;
  position: relative;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0.65) 50%,
    rgba(0, 0, 0, 0) 90%,
    rgba(0, 0, 0, 0) 100%
  );
}

hr:before {
  content: "";
  display: block;
  border-top: 1px solid rgba(249, 249, 249, 1);
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: 1;
}

.btn-green {
  --bs-btn-color: rgba(255, 255, 255, 1); /* Keeps text white for contrast */
  --bs-btn-bg: rgba(29, 126, 0, 1); /* Primary green background */
  --bs-btn-border-color: rgba(
    29,
    126,
    0,
    1
  ); /* Matches the new primary colour */
  --bs-btn-hover-color: rgba(
    255,
    255,
    255,
    1
  ); /* Ensures text remains visible on hover */
  --bs-btn-hover-bg: rgba(
    23,
    105,
    0,
    1
  ); /* Slightly darker shade for hover effect */
  --bs-btn-hover-border-color: rgba(20, 87, 0, 1); /* Darker border on hover */
  --bs-btn-focus-shadow-rgb: 29, 126, 0; /* Focus shadow matches primary tone */
  --bs-btn-active-color: rgba(
    255,
    255,
    255,
    1
  ); /* Text remains white on active */
  --bs-btn-active-bg: rgba(
    21,
    94,
    0,
    1
  ); /* Even darker green for active state */
  --bs-btn-active-border-color: rgba(
    18,
    74,
    0,
    1
  ); /* Compliments active background */
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Same subtle inset shadow */
  --bs-btn-disabled-color: rgba(
    255,
    255,
    255,
    1
  ); /* Text remains white on disabled */
  --bs-btn-disabled-bg: rgba(
    29,
    126,
    0,
    1
  ); /* Keeps disabled background consistent */
  --bs-btn-disabled-border-color: rgba(
    29,
    126,
    0,
    1
  ); /* Matches disabled border to primary */
}

.text-green {
  color: rgba(29, 126, 0, 1);
}

.form-control:focus {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 0.25rem rgba(50, 128, 61, 0.25);
}

.accordion-button {
  font-weight: bold;
}

.accordion-button:not(.collapsed) {
  color: rgba(29, 126, 0, 1);
  font-weight: bold;
  background-color: rgba(255, 255, 255, 1);
}

.accordion-button:not(.collapsed)::after {
  color: #000 !important;
  filter: brightness(0);
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(50, 128, 61, 0.25);
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(2, 84, 45, 0.5);
  /* background-color: rgba(0, 0, 0, 0.5); */
  /* Dark green overlay with 50% opacity */
  z-index: 1;
}

.text-shadow-sm {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.text-shadow-lg {
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.35);
}

.text-shadow-none {
  text-shadow: none;
}

#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 100;
  background-color: rgba(29, 126, 0, 1); /* Fully visible green on hover */
  color: white;
  border: none;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); /* Adding shadow underneath the pill */
}
#backToTop:hover {
  background-color: rgba(29, 126, 0, 1); /* Fully visible green on hover */
}
#backToTop i {
  color: white; /* Arrow should always be white */
}

.blast-notification-section {
  position: fixed;
  top: 90px; /* Position below navbar */
  left: 50%;
  transform: translateX(-50%);
  width: 90%; /* Same width as mobile for consistency */
  z-index: 9998; /* Below navbar but above content */
}

/* Mobile responsive - improved styling for smaller screens */
@media (max-width: 768px) {
  .blast-notification-section {
    width: 90%; /* Match desktop width for consistency */
  }

  .blast-notification-section div {
    padding: 2px 8px !important; /* Minimal padding on mobile */
    font-size: 1.25rem !important; /* Slightly larger mobile text size */
    line-height: 1.3 !important; /* Compact line spacing */
  }

  .blast-notification-section .notification-bar {
    border-radius: 0 0 20px 20px !important; /* Bottom left and right corners on mobile */
  }
}

.blast-notification-section div {
  padding: 4px 8px; /* Small padding for desktop */
  text-align: center;
  background: linear-gradient(
    to bottom,
    rgba(226, 226, 226, 0.92) 0%,
    rgba(219, 219, 219, 0.92) 25%,
    rgba(209, 209, 209, 0.92) 96%,
    rgba(254, 254, 254, 0.92) 100%
  ) !important; /* Same gradient as navbar */
  font-size: 1.25rem; /* Increased text size to better match bullet */
  line-height: 1.4;
}

/* Notification bar styling - dynamic island style with navbar styling */
.blast-notification-section .notification-bar {
  border-radius: 0 0 7px 7px !important; /* Bottom left and right corners only - 7px */
  border: none !important; /* Remove borders */
  margin: 0 !important; /* Remove margins */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Same box shadow as navbar */
}

/* Notification link underline handler */
.blast-notification-section a {
  text-decoration: none;
}

.blast-notification-section a:hover {
  text-decoration: underline;
}

/* Universal notification color support for marquee */
.blast-notification-section .text-success {
  color: rgba(25, 135, 84, 1) !important;
}

.blast-notification-section .text-warning {
  color: rgba(255, 140, 0, 1) !important;
}

.blast-notification-section .text-danger {
  color: rgba(220, 53, 69, 1) !important;
}

.blast-notification-section .text-info {
  color: rgba(13, 110, 253, 0.7) !important;
}

/* Larger bullet separator for notifications */
.blast-notification-section .notification-bullet {
  font-size: 1.5em; /* Make bullet 50% larger */
  font-weight: bold;
  vertical-align: middle;
  margin: 0 1em; /* Slightly reduced spacing on both sides */
  display: inline-block;
  line-height: 0; /* Prevent bullet from affecting container height */
}

/* Single notification marquee - no stacking needed */
.anchorlink {
  scroll-margin-top: 90px;
}
a.external-link::after {
  content: "\F1C5"; /* Unicode for the bi-box-arrow-up-right icon */
  font-family: "bootstrap-icons"; /* Use the Bootstrap Icons font */
  font-size: 12px;
  vertical-align: super;
  margin-left: 3px; /* Add some space between the link and the icon */
  display: inline-block;
}

/* ==========================================================
   FULLSCREEN LOADER
========================================================== */
#loader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0; /* Shorthand for top: 0; left: 0; width: 100vw; height: 100vh; */
  background-color: rgba(
    247,
    242,
    235,
    0.7
  ); /* Slight transparency for visual depth */
  z-index: 9999;
}

body.loaded #loader {
  opacity: 0;
  visibility: hidden; /* visibility: hidden and opacity: 0 are enough; display: none is redundant for loaders */
  transition: opacity 0.3s ease; /* Smooth transition for opacity change */
}

/* SVG styling for responsiveness */
#loader svg {
  width: 40vw; /* Scales with viewport */
  max-width: 128px; /* Caps size */
  height: auto;
  opacity: 0.8;
}

/* Ring animations */
.outer-ring,
.middle-ring,
.inner-ring {
  transform-origin: center; /* More readable equivalent of 50% 50% */
  animation: spinWithPause 5s linear infinite;
}

.middle-ring {
  animation-delay: 0.5s;
}

.inner-ring {
  animation-delay: 1s;
}

/* Keyframes for spin effect */
@keyframes spinWithPause {
  0% {
    transform: rotateY(0deg);
  }
  60%,
  100% {
    transform: rotateY(360deg);
  }
}

/* ==========================================================
   NAVIGATION
========================================================== */
.navbar {
  background-color: rgba(255, 255, 255, 0.9);
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e2e2e2+0,dbdbdb+25,d1d1d1+96,fefefe+100 */
  background: linear-gradient(
    to bottom,
    rgba(226, 226, 226, 0.9) 0%,
    rgba(219, 219, 219, 0.9) 25%,
    rgba(209, 209, 209, 0.9) 96%,
    rgba(254, 254, 254, 0.9) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: all 0.3s ease-in-out;
  padding: 1rem 1.5rem;
  /* Making it thinner */
  z-index: 9999; /* Ensure navbar is above notification */
}

.navbar-brand,
.navbar-nav {
  display: flex;
  align-items: baseline;
}

.navbar-brand img {
  height: 50px;
  /* Smaller logo initially */
  transition: all 0.3s ease-in-out;
}

body.scrolled .navbar {
  background: rgba(255, 255, 255, 0.9);
  /* Adding a white background with some transparency */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  padding: 1rem 1.5rem;
  /* Slightly larger padding when scrolled */
}

.nav-link {
  color: rgba(0, 0, 0, 1);
  font-weight: 500;
  /* text-shadow: 1px 1px 2px #000000; */
  text-shadow: none;
  padding: 0;
  margin-top: 3px;
  margin-right: 20px;
}

body.scrolled .nav-link:not(.active) {
  color: rgba(0, 0, 0, 1);
  text-shadow: none;
}

.navbar .nav-link.active {
  background-color: rgba(238, 238, 238, 1);
  border-radius: 5px;
}

.nav-link:hover {
  color: green;
}

.navbar-toggler {
  background-color: rgba(248, 249, 250, 1) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

body.scrolled .navbar-toggler {
  background-color: transparent !important;
  border-color: transparent;
  box-shadow: none !important;
}

.searchicon i {
  color: rgba(0, 0, 0, 1);
  /* text-shadow: 1px 1px 2px #000000; */
}

body.scrolled .searchicon i {
  color: rgba(0, 0, 0, 1);
  text-shadow: none;
}

@media (max-width: 768px) {
  .searchicon {
    margin-top: 10px; /* Add space above the search icon */
    margin-bottom: 10px; /* Add space below the search icon */
  }

  .navbar .searchicon i {
    font-size: 1.5rem; /* Optionally adjust the size for better appearance */
    padding: 5px; /* Add internal padding around the icon */
  }
  .navbar-nav .nav-link {
    font-size: 1.2rem; /* Increase the font size */
    padding: 5px 5px; /* Add padding for better spacing */
  }

  .searchicon {
    margin-top: 10px; /* Space above the search icon */
    margin-bottom: 10px; /* Space below the search icon */
  }

  .navbar .searchicon i {
    font-size: 1.5rem; /* Increase the search icon size */
    padding: 5px; /* Add some padding around the icon */
  }

  .navbar-nav {
    padding-top: 1rem; /* Add padding above the nav items */
  }

  /* Ensure mobile nav menu is above notification */
  .navbar-collapse {
    z-index: 10000 !important; /* Higher than notification */
  }
}

/* ==========================================================
   FAQ
========================================================== */

.faq-section h2 {
  color: rgba(2, 64, 35, 1) !important;
  /* Dark green for the section title */
  font-weight: bold;
}

/* ==========================================================
   VIDEO CONTAINER
========================================================== */
.video-container {
  width: 100%;
  height: calc(100vh - 90px);
  position: relative;
  overflow: hidden;
  margin-top: 90px;
}

/* Hero Carousel Styles */
#heroCarousel {
  position: relative;
  height: 100%;
  background: #000;
}

#heroCarousel .carousel-inner {
  position: relative;
  height: 100%;
  overflow: hidden;
}

#heroCarousel .carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#heroCarousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fade transition for carousel */
.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.carousel-fade .carousel-item.active {
  opacity: 1;
}

/* Handle transition states */
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  opacity: 1;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  opacity: 0;
}

/* Remove any duplicate carousel styles */
#heroCarousel,
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item,
#heroCarousel .carousel-item img,
#heroCarousel picture,
#heroCarousel picture source {
  border-radius: 0;
}

video {
  position: absolute;
  inset: 0; /* Shorthand for top: 0; left: 0; */
  width: 100%;
  height: 100%; /* Matches container height */
  object-fit: cover; /* Automatically includes -o-object-fit fallback if needed */
}

#video-replay-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

#video-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 128px;
  height: 128px;
}

#video-loader svg {
  width: 40vw; /* Scales with viewport */
  max-width: 128px; /* Caps size */
  height: auto;
}

.replay-btn {
  z-index: 11; /* Ensures it stays above the loader */
}
.video-outer-ring,
.video-middle-ring,
.video-inner-ring {
  transform-origin: center;
  animation: videoSpinWithPause 5s linear infinite;
}
.video-middle-ring {
  animation-delay: 0.5s;
}
.video-inner-ring {
  animation-delay: 1s;
}
@keyframes videoSpinWithPause {
  0% {
    transform: rotateY(0deg);
  }
  60%,
  100% {
    transform: rotateY(360deg);
  }
}

/* Video Container for Mobile Screens */
@media (max-width: 768px) {
  .video-container {
    width: 100%;
    height: auto; /* Added back */
    position: relative;
    top: 0px;
  }

  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item {
    position: relative; /* Back to relative for normal flow */
    /* Remove absolute positioning properties */
    top: auto;
    left: auto;
    width: 100%;
  }

  #heroCarousel .carousel-item img {
    width: 100%;
    height: auto; /* Keep height auto, aspect-ratio will manage it */
    object-fit: cover;
    aspect-ratio: 16 / 9; /* Enforce aspect ratio */
  }

  video {
    position: static; /* Static positioning for better mobile rendering */
    width: 100%; /* Ensure video takes full width */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Adjust to fit inside the container */
  }
}

/* ==========================================================
   SECTION STYLES
========================================================== */

/* ==========================================================
   HOME SECTION
========================================================== */

/* Section Heading */
.home-heading {
  color: rgba(2, 64, 35, 1) !important;
  /* Dark green for the section title */
  font-weight: bold;
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

/* Card Background and Border */
.home-card {
  background-color: rgba(197, 235, 217, 1); /* Light green background */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 12px; /* Rounded corners */
  border: 1px solid rgba(2, 64, 35, 0.3); /* Remove default border */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

.home-card:hover {
  filter: brightness(0.98);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}

/* Card Heading Styling */
.home-card-heading {
  color: rgba(2, 64, 35, 1) !important;
  /* Dark green for the section title */
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* Paragraph Text Styling */
.home-card p {
  color: rgba(2, 64, 35, 1) !important;
  font-weight: 500;
}

/* Link Styling */
.home-card-link {
  color: rgba(2, 64, 35, 1) !important;
  text-decoration: none;
}

/* Section Background */
.home-info-section {
  position: relative;
  top: auto;
  background-color: rgba(247, 242, 235, 1); /* Soft beige background */
  padding: 3rem 0;
}

/* Background for Text Sections */
.lightgraybg {
  background-color: rgba(217, 217, 217, 1);
}

/* ==========================================================
   ABOUT SECTION
========================================================== */
/* About Page Heading Section */
.about-heading-section {
  margin-top: 90px;
  /* Default background image (smallest useful size) */
  background-image: url("../images/about-hero-480w.webp"),
    url("../images/about-hero-480w.jpg");
  background-size: cover;
  background-position-y: 32%;
  position: relative;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Medium screens */
@media (min-width: 768px) {
  .about-heading-section {
    background-image: url("../images/about-hero-768w.webp"),
      url("../images/about-hero-768w.jpg");
  }
}
/* Larger screens */
@media (min-width: 1200px) {
  .about-heading-section {
    background-image: url("../images/about-hero-1200w.webp"),
      url("../images/about-hero-1200w.jpg");
  }
}
/* Very large screens */
@media (min-width: 1920px) {
  .about-heading-section {
    background-image: url("../images/about-hero-1920w.webp"),
      url("../images/about-hero-1920w.jpg");
  }
}

.about-heading-section h1 {
  z-index: 2;
  /* Ensures the heading is above the overlay */
  font-size: 3.5rem;
  color: rgba(255, 255, 255, 1);
  margin: 0;
}

.project-section h2 {
  color: rgba(2, 64, 35, 1) !important;
  /* Dark green for the section title */
}

.project-section h3 {
  color: rgba(2, 64, 35, 1) !important;
  /* Dark green for the section title */
}

.project-section .btn {
  width: fit-content;
  max-width: 160px; /* Optional: Set a max width if you want */
}

.project-section ul {
  margin-top: 1rem;
  padding-left: 0;
}

.project-section li {
  margin-bottom: 0.5rem;
  list-style: none;
  color: rgba(2, 64, 35, 1);
  font-size: 0.95rem;
}

.project-section li::before {
  content: "✔";
  font-weight: bold;
  margin-right: 0.5rem;
  color: rgba(20, 174, 92, 1);
  /* Green color to match the theme */
}

.project-statement h2 {
  text-align: left;
  color: rgba(2, 64, 35, 1) !important;
  /* Dark green for the section title */
}

.project-statement p {
  color: rgba(96, 96, 96, 1);
  /* Muted grey for the paragraph text */
  font-size: 1rem;
  line-height: 1.6;
}

/*
#about-map {
  width: 100%;
  height: 450px;
  display: none;
  border: 1px solid rgba(118, 119, 121, 0.1);
  border-radius: 10px;
  pointer-events: none;
}

.leaflet-popup-close-button { display: none; }
.leaflet-interactive { pointer-events: none !important; }
*/

.timeline-section h2 {
  color: rgba(2, 64, 35, 1) !important;
  /* Dark green for the section title */
  font-weight: bold;
}

/* Timeline Section */
#timelineCarousel {
  position: relative;
  border: 1px solid rgba(118, 119, 121, 0.6);
  border-radius: 8px; /* Optional: To match image corners */
}

.carousel-item {
  position: relative;
  text-align: center;
  min-height: 100%;
}

.carousel-item img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.carousel-caption {
  position: static; /* Reset positioning to flow naturally */
  margin-top: -10px; /* Adjust based on your needs */
  text-align: center; /* Center-align the text */
  background: transparent; /* Remove the overlay background */
  color: black;
}

.carousel-caption p {
  padding: 0px;
  margin-bottom: 5px;
  min-height: 55px; /* Adjust this value based on your needs */
}

.carousel-caption h3 {
  color: rgba(0, 0, 0, 1);
  margin: 0;
}

.timeline-indicators {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  position: relative;
  margin: 0 20px;
  bottom: 15px;
  z-index: 1;
}

.timeline-indicators::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.timeline-indicator {
  position: relative;
  z-index: 1;
  cursor: pointer;
  margin: 0 5px;
}

.timeline-indicator .circle {
  width: 20px; /* Circle size */
  height: 20px;
  border: 2px solid #555; /* Border color for inactive elements */
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 1); /* Empty for inactive state */
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition for active state */
}

.timeline-indicator.active .circle {
  background-color: #4caf50; /* Filled color for active state */
  border-color: #4caf50; /* Border color matches filled color */
  width: 20px;
  height: 20px;
}

.timeline-indicator.active .year {
  margin-top: 3px;
  font-weight: bold;
  color: rgba(27, 150, 74, 1);
}

.timeline-indicator .year {
  position: absolute;
  top: 30px;
  transform: translateX(-25%);
  font-size: 12px;
  color: rgba(181, 212, 195, 1);
  display: none;
  visibility: hidden;
}

/* Customised Carousel Navigation Styles */
.carousel-control-prev,
.carousel-control-next {
  position: relative;
  bottom: -1px; /* Explicitly set the position to align arrows next to the timeline */
  width: 30px;
  height: 30px;
  z-index: 10; /* High z-index to ensure it's visible above other elements */
}

/* Position Adjustments for Left and Right */
.carousel-control-prev {
  left: -10px; /* Align near the left side, next to timeline indicator */
}

.carousel-control-next {
  right: -10px; /* Align near the right side, next to timeline indicator */
}

/* Adjusting Arrow Icon Styles */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1); /* Make icons white for contrast */
  width: 100%;
  height: 100%;
}

#approvalProcess {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.progress-step {
  border: none;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.step-content {
  background-color: #1b5e20;
  color: #fff;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
  padding: 1rem 1rem 1rem 2.5rem;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  position: relative;
}

.progress-step.active .step-content {
  background-color: #ef6c00;
}

.step-content::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M2 5L8 11L14 5'/%3E%3C/svg%3E");
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.6));
  transition: transform 0.3s ease;
}

.step-content.collapsed::before {
  transform: translateY(-50%) rotate(-90deg);
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

.step-body {
  font-weight: 600;
  padding: 2rem;
  position: relative;
  background-color: #e8f5e9;
}

.step-body > * {
  position: relative;
  z-index: 1;
}

.done .step-body {
  background-color: #e8f5e9;
}

.active .step-body {
  background-color: #ffe0b2;
}

.upcoming .step-body {
  background-color: #e8f5e9;
}

.done .step-body::before {
  content: "✔️";
}

.active .step-body::before {
  content: "⏳";
}

.upcoming .step-body::before {
  content: "🕘";
}

.step-body::before {
  position: absolute;
  font-size: 5rem;
  color: rgba(0, 0, 0, 0.09);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

@media (max-width: 576px) {
  .step-body {
    padding: 1.25rem;
  }

  .step-body::before {
    font-size: 4rem;
  }
}

/* Responsive styling for carousel images and about heading */
@media (max-width: 768px) {
  /* The rule for .about-heading-section here is redundant */

  #timelineCarousel .carousel-item img {
    width: 100%; /* Make the image fit the screen width */
    height: auto; /* Maintain the aspect ratio */
    object-fit: contain; /* Ensure the entire image is visible */
  }
}

/* ==========================================================
   COMMUNITY SECTION
========================================================== */
/* Community Page Heading Section */
.community-heading-section {
  margin-top: 90px;
  /* Default background image (smallest useful size) */
  background-image: url("../images/community-hero-480w.webp"),
    url("../images/community-hero-480w.jpg");
  background-size: cover;
  background-position-y: 55%;
  position: relative;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Medium screens */
@media (min-width: 768px) {
  .community-heading-section {
    background-image: url("../images/community-hero-768w.webp"),
      url("../images/community-hero-768w.jpg");
  }
}
/* Larger screens */
@media (min-width: 1200px) {
  .community-heading-section {
    background-image: url("../images/community-hero-1200w.webp"),
      url("../images/community-hero-1200w.jpg");
  }
}
/* Very large screens */
@media (min-width: 1920px) {
  .community-heading-section {
    background-image: url("../images/community-hero-1920w.webp"),
      url("../images/community-hero-1920w.jpg");
  }
}

.community-heading-section h1 {
  z-index: 2;
  /* Ensures the heading is above the overlay */
  font-size: 3.5rem;
  color: rgba(255, 255, 255, 1);
  margin: 0;
}

.community-hr {
  margin-top: 30px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  /* The rule for .community-heading-section here is redundant */

  .community-section .col-md-4 {
    margin-top: 20px; /* Add desired margin above the section */
  }
}

/* ==========================================================
   ENVIRONMENT SECTION
========================================================== */
/* Community Page Heading Section */
.environment-heading-section {
  margin-top: 90px;
  /* Default background image (smallest useful size) */
  background-image: url("../images/environment-hero-480w.webp"),
    url("../images/environment-hero-480w.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Medium screens */
@media (min-width: 768px) {
  .environment-heading-section {
    background-image: url("../images/environment-hero-768w.webp"),
      url("../images/environment-hero-768w.jpg");
  }
}
/* Larger screens */
@media (min-width: 1200px) {
  .environment-heading-section {
    background-image: url("../images/environment-hero-1200w.webp"),
      url("../images/environment-hero-1200w.jpg");
  }
}
/* Very large screens */
@media (min-width: 1920px) {
  .environment-heading-section {
    background-image: url("../images/environment-hero-1920w.webp"),
      url("../images/environment-hero-1920w.jpg");
  }
}

.environment-heading-section h1 {
  z-index: 2;
  /* Ensures the heading is above the overlay */
  font-size: 3.5rem;
  color: rgba(255, 255, 255, 1);
  margin: 0;
}

/* Environment Card Style */
.environment-card {
  border-radius: 0.5rem;
  border: 1px solid rgba(179, 179, 179, 1);
  /* Border for separation */
  background-color: rgba(255, 255, 255, 0.4);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: visible;
  /* Allow the icon to appear outside the card */
  height: 100%;
}

.environment-card p {
  font-size: 1rem;
  color: rgba(96, 96, 96, 1);
}

.environment-card ul {
  margin-top: 1rem;
}

.environment-card li {
  padding: 0px;
  margin-bottom: 0.5rem;
  list-style: disc;
  color: rgba(2, 64, 35, 1);
  font-size: 0.95rem;
}

.environment-card li::before {
  font-weight: bold;
  margin-right: 0.5rem;
  color: rgba(20, 174, 92, 1);
  /* Green color to match the theme */
}

/* Card Header */
.environment-card .card-header {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
}

/* Card Body */
.environment-card .card-body {
  padding: 3.5rem 0 1rem;
  /* Adjust padding to ensure space for the overlapping icon */
}

/* Environment Card Header */
.environment-card-header {
  background-color: rgba(0, 77, 50, 1);
  /* Dark green background */
  color: rgba(255, 255, 255, 1);
  /* White text for contrast */
  padding: 1.8rem 1rem;
  /* Compact padding for a tight header */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  /* Set height for the header */
  font-weight: bold;
  font-size: 1.25rem;
}

.environment-card-header h4 {
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  /* White text */
  margin-bottom: 0;
}

/* Environment Icon */
.environment-icon {
  font-size: 5rem;
  color: rgba(20, 174, 92, 0.7);
  /* Light green color for the icon */
  filter: brightness(1.2) saturation(0.8);
  /* Reduce saturation for a softer look */
  position: absolute;
  transform: translate(10px, -15px);
  z-index: 3;
  /* Ensure it's above both header and card body */
  margin-right: 1rem;
  margin-bottom: -1rem;
  /* Overhanging effect */
}

.environment-snappy-statement h2 {
  color: rgba(2, 64, 35, 1) !important;
  /* Dark green for the statement */
}

/* Environmental Impact Statement Download Section */
.eis-download-section {
  background-color: rgba(2, 84, 45, 1);
  /* Dark green background */
  color: rgba(255, 255, 255, 1);
  /* White text for contrast */
}

.eis-title {
  font-size: 1.75rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  /* White text for title */
}

.eis-subtitle {
  color: rgba(217, 217, 217, 1);
  /* Light grey text for subtitle */
  font-size: 1rem;
}

.eis-download-btn {
  color: rgba(29, 126, 0, 1);
  font-weight: bold;
  border: 1px solid rgba(50, 128, 61, 0.6);
  font-size: 1.1rem;
  padding: 0.8rem 2.5rem;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.eis-download-btn:hover {
  color: rgba(29, 126, 1);
  background-color: #d3d4d5;
  /* Darker grey for hover effect */
}

/* Responsive adjustments for icons */
@media (max-width: 768px) {
  /* The rule for .environment-heading-section here is redundant */

  .environment-card .environment-icon {
    font-size: 3rem; /* Smaller icon for mobile */
    transform: translate(5px, -8px); /* Adjust position */
  }

  .environment-card-header {
    text-align: right;
    padding: 1rem 0.5rem; /* Slightly reduce header padding */
    font-size: 1rem; /* Reduce font size for the header */
    height: auto; /* Allow header to adjust height dynamically */
  }

  .environment-card .card-body {
    padding: 2rem 1rem 1rem; /* Adjust padding to give more space */
  }

  .environment-card {
    margin-bottom: 1rem; /* Slightly reduce card margin on mobile */
  }
}

/* ==========================================================
   CAREERS SECTION
========================================================== */
/* Careers Page Heading Section */
.careers-heading-section {
  margin-top: 90px;
  /* Default background image (smallest useful size) */
  background-image: url("../images/career-hero-480w.webp"),
    url("../images/career-hero-480w.jpg");
  background-size: cover;
  background-position-y: center;
  position: relative;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Medium screens */
@media (min-width: 768px) {
  .careers-heading-section {
    background-image: url("../images/career-hero-768w.webp"),
      url("../images/career-hero-768w.jpg");
  }
}
/* Larger screens */
@media (min-width: 1200px) {
  .careers-heading-section {
    background-image: url("../images/career-hero-1200w.webp"),
      url("../images/career-hero-1200w.jpg");
  }
}
/* Very large screens */
@media (min-width: 1920px) {
  .careers-heading-section {
    background-image: url("../images/career-hero-1920w.webp"),
      url("../images/career-hero-1920w.jpg");
  }
}

.careers-heading-section h1 {
  z-index: 2;
  /* Ensures the heading is above the overlay */
  font-size: 3.5rem;
  color: rgba(255, 255, 255, 1);
  margin: 0;
}

.dark-green {
  color: rgba(2, 64, 35, 1) !important;
}

/* ==========================================================
   CONTACT SECTION
========================================================== */
/* Contact Page Heading Section (also used for Privacy) */
.contact-heading-section {
  margin-top: 90px;
  /* Default background image (smallest useful size) */
  background-image: url("../images/contact-hero-480w.webp"),
    url("../images/contact-hero-480w.jpg");
  background-size: cover;
  background-position-y: 60%;
  position: relative;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Medium screens */
@media (min-width: 768px) {
  .contact-heading-section {
    background-image: url("../images/contact-hero-768w.webp"),
      url("../images/contact-hero-768w.jpg");
  }
}
/* Larger screens */
@media (min-width: 1200px) {
  .contact-heading-section {
    background-image: url("../images/contact-hero-1200w.webp"),
      url("../images/contact-hero-1200w.jpg");
  }
}
/* Very large screens */
@media (min-width: 1920px) {
  .contact-heading-section {
    background-image: url("../images/contact-hero-1920w.webp"),
      url("../images/contact-hero-1920w.jpg");
  }
}

.contact-heading-section h1 {
  z-index: 2;
  /* Ensures the heading is above the overlay */
  font-size: 3.5rem;
  color: rgba(255, 255, 255, 1);
  margin: 0;
}

#contact-map {
  width: 100%; /* Full width */
  height: 270px; /* Set a fixed height */
  border: 1px solid rgba(118, 119, 121, 0.1); /* Subtle complementary border */
  border-radius: 10px; /* Rounded corners */
  position: relative;
}

/* Floating label in top-left corner */
.custom-label {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  width: 250px;
}

.custom-label a {
  font-size: 12px;
  color: #1a73e8;
  text-decoration: none;
}

.custom-label a:hover {
  text-decoration: underline;
}

.contact-info a {
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* ==========================================================
   FOOTER STYLING
========================================================== */
.footer {
  position: relative;
  top: 0;
  background: rgba(27, 150, 74, 1);
  color: rgba(255, 255, 255, 1);
  min-height: 100px;
}

footer .btn {
  color: rgba(29, 126, 0, 1);
  font-weight: bold;
  border: 1px solid rgba(50, 128, 61, 0.6);
}

/* Footer Links */
footer a {
  color: rgba(179, 229, 181, 1);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

footer a:hover {
  color: rgba(240, 240, 240, 1);
  text-decoration: underline;
}

#contactToggleBtn {
  color: rgba(29, 126, 1);
  font-weight: bold;
}

/* Contact Toggle Icon */
/* Global rule: ensure the last content block in main has no extra bottom spacing before waves */
main > section:last-of-type,
main > div:last-of-type,
main > .container:last-of-type,
main > .row:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#contactToggleIcon svg {
  stroke: rgba(29, 126, 0, 1);
  stroke-width: 2px;
  transition: transform 0.3s ease, stroke 0.3s ease;
}

#contactToggleIcon:not(.collapsed) svg {
  transform: rotate(180deg);
}

/* Flags Image */
.flags-img {
  width: 80px;
  height: auto;
  margin-right: 10px; /* Adjusted margin for consistency */
  margin-bottom: 5px; /* Space below flags when stacked */
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.35));
}

/* Footer Text */
.footer-text {
  flex-direction: column;
  text-align: center; /* Center alignment for better responsiveness */
}

.gap {
  display: block;
  padding: 20px; /* reduced gap to tighten space above waves */
}

/* Old cookie banner styles removed - now using orestbida/cookieconsent */

/* ==========================================================
   WAVES STYLING
========================================================== */
.waves {
  position: relative;
  top: 65px;
  width: 100%;
  height: 80px;
  overflow: hidden;
  z-index: 1;
  margin-top: -65px;
}

.wave {
  width: 100%;
  height: 80px;
  background: url("../images/wave.webp") repeat-x;
  background-size: 3000px 80px;
  position: absolute;
}

#wave1 {
  z-index: 1000;
  opacity: 1;
  animation: animateWave 12s linear infinite;
}

#wave2 {
  z-index: 999;
  opacity: 0.5;
  animation: animateWave2 10s linear infinite;
  animation-delay: 0.5s;
}

#wave3 {
  z-index: 1000;
  opacity: 0.2;
  animation: animateWave 8s linear infinite;
  animation-delay: 1s;
}

#wave4 {
  z-index: 999;
  opacity: 0.7;
  animation: animateWave2 6s linear infinite;
  animation-delay: 1.5s;
}

/* Wave Animations */
@keyframes animateWave {
  0% {
    background-position-x: 3000px;
  }
  100% {
    background-position-x: 0;
  }
}

@keyframes animateWave2 {
  0% {
    background-position-x: -3000px;
  }
  100% {
    background-position-x: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #wave1 {
    animation: none; /* Disable animation */
    background-position: 1200px 0; /* Default position */
  }

  #wave2 {
    animation: none;
    background-position: 900px 0; /* Slight offset */
  }

  #wave3 {
    animation: none;
    background-position: 600px 0; /* Slightly more offset */
  }

  #wave4 {
    animation: none;
    background-position: 300px 0; /* Further offset */
  }
}

/* Heading Styles */
.h4 {
  font-size: 1.5rem; /* Match h4 size */
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.home-card-heading {
  font-size: 1.5rem; /* Match previous h4 size */
  margin-bottom: 1rem;
}

.home-heading {
  font-size: 2.5rem; /* Match previous size */
  margin-bottom: 2rem;
}

/* ==========================================================
   reCAPTCHA CUSTOMIZATION
========================================================== */

/* Option 1: Hide the reCAPTCHA badge completely */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* Option 2: Move badge to bottom-left (uncomment to use instead of hiding) */
/*
.grecaptcha-badge {
    left: 4px !important;
    right: auto !important;
}
*/

/* Option 3: Move badge to top-right (uncomment to use instead of hiding) */
/*
.grecaptcha-badge {
    top: 4px !important;
    bottom: auto !important;
}
*/

/* Option 4: Move badge to top-left (uncomment to use instead of hiding) */
/*
.grecaptcha-badge {
    top: 4px !important;
    bottom: auto !important;
    left: 4px !important;
    right: auto !important;
}
*/