:root {
  /* Colors */
  --color-primary: #50AEAF;
  --color-primary-dark: #459899;
  --color-secondary: #1C849A;
  --color-text: #0E3D46;
  --color-background: #FFFDF8;
  --color-border: #F5F1E2;
  --color-testimonial-bg: #F1F4EC;
  
  /* Transparencies */
  --transparency-navbar: rgba(28, 132, 154, 0.75);
  --transparency-dropdown: rgba(28, 132, 154, 0.75);
  --transparency-dropdown-hover: rgba(28, 132, 154, 0.9);
  
  /* Typography */
  --font-primary: 'Urbanist', sans-serif;
  --font-secondary: 'Oooh Baby', cursive;
  --font-size-h1: 3.5rem;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  /* Spacing */
  --section-padding: 80px 0;
  --card-padding: 2rem;
  
  /* Decorative elements */
  --underline-thickness: 4px;
  --underline-offset: 6px;

  --bs-navbar-color: white;
}

body {
  font-family: var(--font-primary);
  background-color: var(--color-background);
  color: var(--color-text);
}
h3 {
  font-weight: var(--font-weight-black);
  margin-bottom: 3rem;
  color: var(--color-text);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
  padding-bottom: 0;
}
h4 {
  font-weight: var(--font-weight-black);
  margin-bottom: 3rem;
  color: var(--color-text);
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
  padding-bottom: 0;
}
h5 {
  font-weight: var(--font-weight-black);
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 2rem;
  color: var(--color-text);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
  padding-bottom: 0;
}
h6 {
  font-weight: var(--font-weight-black);
  line-height: 2;
  margin-bottom: 2rem;
  color: var(--color-text);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
  padding-bottom: 0;
}
hr {
  border-color: var(--color-primary);
  width: 100px;
  border-width: 4px;
  margin-bottom: 2rem;
  opacity: 1;
}
p {
  color: var(--color-text);
  font-weight: var(--font-weight-light);
  line-height: 1.6;
}
.conseillere-name {
  color: var(--color-text);
  font-family: var(--font-secondary);
  font-size: 2rem;
}
.collapse-header {  
  font-weight: var(--font-weight-black);
  color: var(--color-text);
  text-transform: uppercase;
}
.icon-toggle {
  color: var(--color-primary);
}
.title-conseilleres {
  color: var(--color-text);
}
.custom-navbar {
  background-color: transparent !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
  padding: 2.2rem 0 0.5rem 0;
  transition: background-color 0.3s ease;
}

.top-notification-bar {
  background-color: var(--color-testimonial-bg);
 width: 100%;
}

/* Add scrolled state */
.custom-navbar.scrolled {
  background-color: var(--transparency-navbar) !important;
  backdrop-filter: blur(5px);
}

/* Make all navbar links white */
.custom-navbar .nav-link,
.custom-navbar .navbar-toggler-icon {
  color: white !important;
  font-weight: var(--font-weight-light);
}

/* Style dropdown toggle arrow */
.custom-navbar .dropdown-toggle::after {
  border-top-color: white;
}

/* Style the dropdown menu items to remain dark for visibility */
.custom-navbar .dropdown-menu {
  background-color: var(--transparency-dropdown);
  backdrop-filter: blur(5px);
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  z-index: 1200;
}

.custom-navbar .dropdown-menu .dropdown-item {
  color: white;
  padding: 0.75rem 1rem;
  text-align: right;
}

/* Style dropdown item hover state */
.custom-navbar .dropdown-menu .dropdown-item:hover {
  background-color: var(--transparency-dropdown-hover);
  color: white;
}

/* Style the button in navbar */
.custom-navbar button.nav-link,
.custom-navbar .btn-primary {
  font-weight: var(--font-weight-light);
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  border-radius: 0;
  color: white !important;
  padding: 0.5rem 1rem;
}

/* Hover state for navbar button */
.custom-navbar button.nav-link:hover,
.custom-navbar .btn-primary:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
}

h1 {
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-h1);
}

.container-fluid h1 {
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-h1);
}

h2 {
  font-size: 1.25rem; /* Makes it significantly smaller than h1 */
  font-weight: var(--font-weight-regular); /* Medium weight for contrast with h1 */
}

.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  border-radius: 0;
  font-weight: var(--font-weight-light);
}

/* Hover state for the button */
.btn-primary:hover {
  background-color: var(--color-primary-dark) !important; /* Slightly darker shade for hover */
  border-color: var(--color-primary-dark) !important;
  text-decoration: none;
}

.hero-section {
  margin-top: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0 0 100px;
  position: relative;
  z-index: 1;
}

.hero-section .container-fluid {
  padding-top: 200px; /* Adjust this value based on your navbar height */
}

/* Optionally add a dark overlay */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3); /* Adds a slight dark overlay */
  z-index: 0;
}

/* Ensure content stays above the overlay */
.hero-section > * {
  position: relative;
  z-index: 1;
}

.hero-section h1,
.hero-section h2 {
  color: white;
}

.hero-section h2 {
  font-weight: var(--font-weight-light); /* Lighter weight */
  font-size: 1.25rem;
  color: white;
}

.welcome-section {
  padding: 80px 0;
  background-color: var(--color-background);
}

.welcome-images {
  position: relative;
  padding: 20px;
}


.welcome-section h3 {
  font-weight: var(--font-weight-black);
  margin-bottom: 3rem;
  color: var(--color-text);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset); /* Space between text and underline */
  padding-bottom: 0;
}

/* Remove the pseudo-element styles */
.welcome-section h3::after {
  display: none;
}

.welcome-section p {
  margin-bottom: 2rem;
  line-height: 2;
  color: var(--color-text);
  font-weight: var(--font-weight-light);
}

.testimonials-section {
  padding: 80px 0;
  background-color: var(--color-testimonial-bg);
}

.partners-section {
  padding: 80px 0;
  background-color: var(--color-testimonial-bg);
}

.testimonials-section p {
  margin-bottom: 2rem;
  line-height: 2;
  color: var(--color-text);
  font-weight: var(--font-weight-light);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-quote {
  font-family: var(--font-secondary);
  font-size: 1.75rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-author {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  font-size: 1rem;
  color: var(--color-text);
  margin-top: -1rem; /* Pull the author name closer to the quote */
}

.specialties-section {
  padding: 80px 0;
  background-color: var(--color-background); /* Same as welcome section */
}

.specialties-section h3 {
  font-weight: var(--font-weight-black);
  margin-bottom: 3rem;
  color: var(--color-text);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
  padding-bottom: 0;
}

.slideshow-section {
  position: relative;
}

.captioned-carousel-caption-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.captioned-carousel-info {
  background-color: var(--color-secondary);
  padding: 6rem 0 2rem 0;
  text-align: center;
}

.captioned-carousel-info h4 {
  color: white;
  font-weight: var(--font-weight-light);
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.captioned-carousel-item img {
  height: 600px;
  object-fit: cover;
}

/* Custom indicators styling */
.custom-indicators {
  position: relative;
  margin: 0;
  padding: 0;
}

.captioned-carousel-indicators {
  position: relative;
  margin-bottom: 0;
}

.captioned-carousel-indicators button {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 8px !important;
}

.captioned-carousel-indicators button.active {
  background-color: white !important;
}

.captioned-carousel-item {
  position: relative;
}

.captioned-carousel-item h4 {
  position: absolute;
  bottom: 90px; /* Position above the dots section */
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-weight: var(--font-weight-light);
  font-size: 1.5rem;
  margin: 0;
  z-index: 3;
}

/* Adjust the caption wrapper to not overlap with the title */
.captioned-carousel-caption-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.destination-link {
  text-decoration: none;
  display: block;
  position: relative;
}

/* Move h4 styles to be under the link instead of the carousel-item */
.destination-link h4 {
  position: absolute;
  bottom: 90px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-weight: var(--font-weight-light);
  font-size: 1.5rem;
  margin: 0;
  z-index: 3;
}

.articles-section {
  padding: 80px 0;
  background-color: var(--color-background);
}

.articles-section h3 {
  font-weight: var(--font-weight-black);
  margin-bottom: 3rem;
  color: var(--color-text);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
  padding-bottom: 0;
}

.article-card {
  background: white;
  border: 1px solid var(--color-border);
  margin-bottom: 0;
  height: 100%;
  position: relative;
  box-shadow: none;
}

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

.card-body {
  padding: var(--card-padding);
}


.article-card p {
  color: var(--color-text);
  font-weight: var(--font-weight-light);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.read-more {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: var(--font-weight-light);
}

.read-more:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: var(--font-weight-light);
}

.pagination li {
  margin: 0 0.5rem;
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}
/* Adjust spacing between cards on mobile */
@media (max-width: 768px) {
  .article-card {
    margin-bottom: 40px;
  }
}

/* Add spacing between article columns */
.articles-section .col-md-4 {
  margin-bottom: 40px; /* Add space between cards */
}

/* Add styles for navbar-toggler icon */
.custom-navbar .navbar-toggler {
  border-color: white;
}

.custom-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.img-text {
  height: 300px;
  width: 600px;
  max-width: 100%;
  object-fit: cover;
}

.height-200 {
  height: 200px;
}