/* Gradient border for cards in the 2xN grid - dark mode */
.dark-mode .card.h-100 {
  border: 4px solid transparent;
  border-image: linear-gradient(135deg, #3DDCED, #18F689) 1;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(61, 220, 237, 0.18); /* Slightly stronger shadow for dark mode */
  background-clip: padding-box;
  background-color: #121212; /* Set to match dark background theme */
}
/* Dark mode styles */
.dark-mode {
  --background-color: #121212;   /* Dark mode background */
  --text-color: #ffffff;         /* Dark mode text */
  --header-color: #e0e0e0;       /* Dark mode header colour */
  --content-background: rgba(18, 18, 18, 0.6);  /* Dark mode content background */
  --content-border: #444444;      /* Dark mode content border */
  --jumbotron-background: #343a40; /* Dark mode jumbotron background */
  --my-4-background: #f8f9fa;         /* Color for my-4 class in dark mode */
  --box-shadow: 0 2px 4px #439501; /* Box shadow for cards */
}

/* Adding transition for dark mode */
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
  transition: color 0.5s ease;   /* Smooth transition for headers in dark mode */
}

.dark-mode #content {
  background: var(--content-background); /* Use dark mode content background */
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--content-border); /* Use dark mode content border */
}

.dark-mode .jumbotron {
  background: var(--jumbotron-background); /* Use dark mode jumbotron background */
}

.dark-mode .my-4 {
  background: var(--my-4-background); /* Use dark mode jumbotron background */
}

.dark-mode .card {
  border: 1px solid var(--content-border); /* Use dark mode content border */
  box-shadow: 0 2px 4px var(--box-shadow); /* Use dark mode box shadow */
}

.dark-mode .card-header {
  background-color: var(--jumbotron-background); /* Use dark mode jumbotron background */
}

.dark-mode .card-body {
  background-color: var(--content-background); /* Use dark mode content background */
}

.dark-mode .rounded-corners {
  background-color: var(--background-color); /* Use dark mode content background */
  box-shadow: 0 4px 8px var(--box-shadow); /* Use dark mode box shadow */
}

.dark-mode .wide-card {
  border: 1px solid var(--content-border); /* Use dark mode content border */
  box-shadow: 0 2px 4px var(--box-shadow); /* Use dark mode box shadow */
}

.dark-mode .card-pdf {
  border: 1px solid var(--content-border); /* Use dark mode content border */
  box-shadow: 0 2px 4px var(--box-shadow); /* Use dark mode box shadow */
}

.dark-mode .dropdown-content {
  background-color: #bebebe; /* Dark mode background color */
  box-shadow: 0px 8px 16px 0px var(--box-shadow); /* Dark mode box shadow */
}

body.dark-mode #meetus-img-light {
  display: none !important;
}
body.dark-mode #meetus-img-dark {
  display: block !important;
}

body.dark-mode #flow-img-light {
  display: none !important;
}
body.dark-mode #flow-img-dark {
  display: block !important;
}

body.dark-mode #specs-img-light {
  display: none !important;
}
body.dark-mode #specs-img-dark {
  display: block !important;
}

body.dark-mode #passport-img-light {
  display: none !important;
}
body.dark-mode #passport-img-dark {
  display: block !important;
}

body.dark-mode #why-img-light {
  display: none !important;
}
body.dark-mode #why-img-dark {
  display: block !important;
}