/**
 * ========================================================================
 * Design Tokens & Global Styles
 * ========================================================================
 */

:root {
  /* Text Style: Small */
  --font-family-small: "Poppins", sans-serif;
  --font-weight-small: 400; /* Regular */
  --font-size-small: 11px;
  --line-height-small: 14px;
  --letter-spacing-small: 0%;

  /* Text Style: Subtitle */
  --font-family-subtitle: "Poppins", sans-serif;
  --font-weight-subtitle: 600; /* SemiBold */
  --font-size-subtitle: 20px;
  --line-height-subtitle: 26px;
  --letter-spacing-subtitle: 0%;

  /* Text Style: Subtitle+Button */
  --font-family-subtitle-button: "Poppins", sans-serif;
  --font-weight-subtitle-button: 600; /* SemiBold */
  --font-size-subtitle-button: 16px;
  --line-height-subtitle-button: 22px;
  --letter-spacing-subtitle-button: 0%;

  /* Text Style: Paragraph */
  --font-family-paragraph: "Poppins", sans-serif;
  --font-weight-paragraph: 400; /* Regular */
  --font-size-paragraph: 14px;
  --line-height-paragraph: 18px;
  --letter-spacing-paragraph: 0%;

  /* Text Style: Title */
  --font-family-title: "Anton", sans-serif;
  --font-weight-title: 400; /* Regular */
  --font-size-title: 56px;
  --line-height-title: 56px;
  --letter-spacing-title: -0.01em; /* -1% */

  /* Colors */
  --Deep_Green: #3d5234;
  --Success: #07840f;
  --Warning: #ff8e3d;
  --CTA: #ff6746;
  --Black: #1c2036;
  --Blue_Dark: #1c297e;
  --Blue_Mid: #444d84;
  --Blue_Light: #b8e4ea;
  --Gray_Dark: #626265;
  --Gray_Mid: #939399;
  --Gray_Light: #cfd1d3;
  --White: #eae9e6;
}

/* Tablet Styles (Example: 768px and wider) */
@media (min-width: 768px) {
  :root {
    /* You can override variables for tablets here. */
  }
}

/* Desktop Styles (Example: 1024px and wider) */
@media (min-width: 1024px) {
  :root {
    /* Text Style: Small (Desktop) */
    --font-size-small: 14px;
    --line-height-small: 16px;

    /* Text Style: Subtitle (Desktop) */
    --font-size-subtitle: 26px;
    --line-height-subtitle: 32px;

    /* Text Style: Subtitle+Button (Desktop) */
    --font-size-subtitle-button: 20px;
    --line-height-subtitle-button: 26px;

    /* Text Style: Paragraph (Desktop) */
    --font-size-paragraph: 18px;
    --line-height-paragraph: 24px;

    /* Text Style: Title (Desktop) */
    --font-size-title: 88px;
    --line-height-title: 88px;
  }
}

/* ------------------------------------------- */
/*           Example Usage (No Change)         */
/* ------------------------------------------- */

.small-text-style {
  font-family: var(--font-family-small);
  font-weight: var(--font-weight-small);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-small);
}

.subtitle-text-style {
  font-family: var(--font-family-subtitle);
  font-weight: var(--font-weight-subtitle);
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
}

.subtitle-button-text-style {
  font-family: var(--font-family-subtitle-button);
  font-weight: var(--font-weight-subtitle-button);
  font-size: var(--font-size-subtitle-button);
  line-height: var(--line-height-subtitle-button);
  letter-spacing: var(--letter-spacing-subtitle-button);
}

.paragraph-text-style {
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
}

.title-text-style {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title);
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-title);
  margin: 0;
  transform: rotate(-3deg);
  display: inline-block;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
}

/* Add this class to your existing style.css file */
body.no-scroll {
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

.homepage {
  background-color: #b8e4ea;
}

.homepage .site-header {
  background-color: #b8e4ea;
}

/* The main content container */
.container {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 120px;

  @media (max-width: 991px) {
    padding-inline: 60px;
  }

  @media (max-width: 560px) {
    padding-inline: 15px;
  }
}

.container-sm {
  max-width: 720px;
  padding-inline: 15px;
  margin-inline: auto;
}

/* Archive Page Styles */

.page-header {
  display: inline-block;
  margin-bottom: 2rem;
  transform: rotate(-4deg);
}

/* The main page title, e.g., "News" */
.page-header__title {
  color: var(--Blue_Dark);
  margin-bottom: 1rem;
}

/* The subtitle, e.g., "Our take on stuff" */
.page-header__subtitle {
  font-family: var(--font-family-subtitle);
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-subtitle);
  color: var(--Blue_Dark);
  margin: 0;
}

/**
 * Article Card Component
 */

.article-card {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  position: relative;
}

.article-card__image-wrapper {
  flex-shrink: 0;
  width: 160px;
  min-height: 146px;
}

.article-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder styles */
.article-card__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  text-align: center;
  align-content: center;
}

.article-card__content {
  flex-grow: 1;
  padding: 1rem 1.5rem 1rem 0; /* TOP | RIGHT | BOTTOM | LEFT */
}

.article-card__title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.article-card__excerpt {
  font-size: 16px;
  color: var(--Gray_Light);
  margin-block-end: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* Space between avatar and text */
  line-height: normal;
}

.article-card__author-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%; /* Makes the avatar circular */
}

.article-card__meta-text {
  font-size: 13px;
}

.article-card__author-name {
  display: block;
  font-weight: 600;
}

.article-card__meta-details {
  color: var(--Gray_Mid);
}

.card-link {
  text-decoration: none;
  color: inherit;
}

.card-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1; /* This pseudo-element sits on top of everything in the card */
  background-color: transparent;
}

@media (max-width: 768px) {
  .article-card {
    flex-direction: column;
  }

  .article-card:not(.article-card--vertical) {
    gap: 0;
  }

  .article-card__image-wrapper {
    width: 100%;
    height: 220px;
  }

  .article-card__content {
    padding: 1.5rem 1.5rem 1.5rem 0px; /* Apply equal padding on all sides on mobile */
  }
}

.news-grid__item,
.stories-grid__item {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #000;
}

/* Remove border and margin from the last item in a list for clean spacing */
.news-grid__item:last-of-type,
.stories-grid__item:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-block-end: 3rem;
}

/* .article-topics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
} */

/* .article-topics__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #555;
  margin-right: 0.5rem;
} */

/* .topic-badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background-color: #f0f0f0;
  color: #444;
  border-radius: 15px;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
} */

/* .topic-badge:hover {
  background-color: #0d2b5c;
  color: #fff;
} */

/* Single Page styles */
.single-stories,
.single-news {
  background-color: var(--White);
}
.breadcrumbs {
  padding: 1.5rem 0;
  font-family: var(--font-family-small);
  font-weight: var(--font-weight-small);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-small);
}

.breadcrumbs__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
  align-items: center;
  gap: 0.5rem;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
}

/* Add the separator (e.g., '>') before each item except the first one */
.breadcrumbs__item:not(:first-child)::before {
  content: ">";
  margin-right: 0.5rem;
  color: var(--Black);
}

.breadcrumbs__item a {
  color: var(--Black);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumbs__item a:hover {
  color: var(--Gray_Mid);
}

/* Style the current page item differently to show it's not a link */
.breadcrumbs__item[aria-current="page"] {
  color: var(--Gray_Mid);
  font-weight: var(--font-weight-small);
}

/* .article-hero__image-wrapper {
  width: 100%;
  max-height: 550px;
  overflow: hidden;
} */

.article-hero + .article-content {
  margin-top: 2.5rem;
}

/* The hero image itself */
.article-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The main title below the image */
.article-hero__title {
  margin-top: 1rem;
  /* margin-bottom: 4rem !important; */
  color: var(--Blue_Dark);
}

.article-hero__title + .article-hero__image-wrapper {
  margin-top: 4rem;
}

.article-meta-bar {
  margin-top: 2.5rem;
}

.article-body img {
  width: 100%;
}

.post-meta-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-paragraph);
  color: var(--Blue_Mid);
  font-weight: var(--font-weight-paragraph);
  margin-bottom: 1.5rem;
  line-height: var(--line-height-paragraph);
}

.separator-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--Blue_Mid);
}

.author-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}

/**
 * Site Header & Logos
 */
.site-header {
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 11;
  background-color: #fff;
}
.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-logo {
  display: block;
  height: 30px !important; /* Adjust as needed */
  width: auto;
}

/* --- Responsive Logo Logic --- */
.logo-mobile {
  display: none; /* Hide mobile logo by default */
}

@media (max-width: 768px) {
  .logo-desktop {
    display: none; /* Hide desktop logo on small screens */
  }
  .logo-mobile {
    display: block; /* Show mobile logo on small screens */
  }
}

/**
 * Live Search Bar Component
 */
.search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 0.6rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-bar:focus-within {
  outline: none;
  border-color: var(--Blue_Dark);
  box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

.search-bar__input {
  flex-grow: 1;
  border: none;
  background-color: transparent;
  padding: 0;
  font-size: var(--font-size-paragraph);
  color: var(--Black);
  font-weight: var(--font-weight-paragraph);
  line-height: var(--line-height-paragraph);
}

.search-bar__input:focus {
  outline: none;
}

.search-bar__input::placeholder {
  color: var(--Gray_Mid);
  font-weight: var(--font-weight-paragraph);
  line-height: var(--line-height-paragraph);
  opacity: 1;
}

.search-bar__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--Gray_Mid);
}

.live-search-wrapper {
  margin-left: auto;
  margin-right: auto;
}

/* Blocks Common Styles */

.block {
  padding: 5rem 0;
}

/**
 * ========================================================================
 * Block: Hero
 * ========================================================================
 */
.hero-block {
  background-color: var(--Blue_Light);
  position: relative;
}

.hero-block__container {
  display: flex;
  align-items: flex-end;
  gap: 3rem;
}

/* --- Left Column: Content --- */
.hero-block__content {
  flex: 1;
  min-width: 45%; /* Ensures content has enough space */
}

.hero-block__headline {
  margin: 0 0 1.5rem 0;
  white-space: pre-wrap;
  color: var(--Blue_Dark);
}

.hero-block__description {
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-paragraph);
  /* max-width: 500px; */
  margin-bottom: 0px;
  font-weight: var(--font-weight-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
}

.hero-block__scroll-indicator {
  position: absolute;
  bottom: 24px;
}

/* --- Right Column: Image Gallery --- */
.hero-block__gallery {
  flex: 1;
}

.photo-grid {
  display: flex;
  gap: 1rem; /* Space between the large and small columns */
}

.photo-grid__large,
.photo-grid__small-column {
  flex: 1;
}

.photo-grid__large img,
.photo-grid__small img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures images fill their container without distortion */
  /* border-radius: 8px; */
}

.photo-grid__small-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 992px) {
  .hero-block__container {
    flex-direction: column;
    /* gap: 2rem; */
  }
}

@media (max-width: 992px) {
  .hero-block__content {
    width: 100%;
  }

  .hero-block {
    padding: 3rem 0 6rem;
  }

  .post-grid-block {
    position: relative;
  }

  .post-grid-block__content {
    margin-bottom: 0px;
  }

  .post-grid-block__link {
    position: absolute;
    bottom: 36px;
  }

  .promo-block {
    position: relative;
    padding-bottom: 14rem !important;
  }

  .promo-block__content {
    margin: 0 !important;
  }

  .promo-block__cta-area {
    position: absolute;
    bottom: 3rem !important;
    margin: 0 !important;
  }

  .site-navigation {
    ul {
      a {
        color: #fff !important;
      }
    }
  }
}

/**
 * ========================================================================
 * Block: Featured Posts Slider
 * ========================================================================
 */
.featured-slider-block {
  color: var(--White);
  background-color: var(--Blue_Dark);
}

.featured-slider-block__headline {
  margin: 0 0 2rem 0 !important;
}

.featured-slider-block__slider,
.post-grid-block__slider {
  padding: 2rem 0 2rem 0;
  margin: -2rem 0 -2rem;
}

.featured-slider-block__footer {
  margin-top: 3rem;
}

@media (max-width: 525px) {
  .featured-slider-block__footer .btn--outline {
    width: 100%;
  }
}
/**
 * ========================================================================
 * Component: Button Modifiers
 * ========================================================================
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.7rem 1.5rem;
  text-decoration: none;
  font-weight: var(--font-weight-subtitle-button);
  transition: all 0.2s ease-in-out;
  font-size: var(--font-size-subtitle-button);
  font-family: var(--font-family-subtitle-button);
  letter-spacing: var(--letter-spacing-subtitle-button);
}

.btn--outline {
  border: 1px solid var(--Gray_Light);
  color: var(--White);
  background-color: transparent;
}

.btn--outline:hover {
  background-color: var(--White);
  color: var(--Blue_Dark);
}

.btn--outline:hover svg {
  fill: currentcolor;
}

/**
 * ========================================================================
 * Component: Article Card Modifier (Updated Design)
 * ========================================================================
 */
.article-card--vertical {
  /* display: flex; */
  flex-direction: column;
  background-color: var(--Black);
  /* border-radius: 0px; */
  height: 100%;
  color: var(--White);
  /* position: relative; */
  padding: 24px;
  border: 1px solid transparent;
  /* transition: border-color 0.2s ease-in-out; */
  transition: all 0.3s ease;
}

.article-card--vertical .article-card__image-wrapper {
  width: 100%;
  height: 180px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  overflow: hidden;
}

.article-card--vertical .article-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card--vertical .article-card__content {
  padding: 0;
  flex-grow: 1; /* This is important to push the footer down */
}

.article-card--vertical .article-card__author-byline {
  font-weight: var(--font-weight-small);
  color: var(--Gray_Light);
  display: block;
  font-size: var(--font-size-small);
  margin-block-end: 4px;
}

.article-card--vertical .article-card__title {
  font-weight: 600;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* .article-card--vertical .article-card__title a {
  color: #fff;
  text-decoration: none;
} */

.article-card--vertical:hover {
  transform: scale(1.05);
  transition: all 0.3s ease;
  box-shadow: 0px 0px 12px 4px #00000066;
}

.article-card--vertical .article-card__excerpt {
  color: var(--Gray_Light);
  font-size: var(--font-size-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
  line-height: var(--line-height-paragraph);
  font-weight: var(--font-weight-paragraph);
  margin-bottom: 0px;
  margin-right: 3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.article-card--vertical .article-card__footer {
  padding: 0 1.5rem 1.5rem 0;
  text-align: right;
  position: absolute;
  right: 0;
  bottom: 0;
}

/**
 * ========================================================================
 * Block: Post Grid
 * ========================================================================
 */
.post-grid-block {
  color: var(--White);
  background-color: var(--Black);
}

.post-grid-block__container {
  display: flex;
  gap: 3rem;
}

.post-grid-block__container .article-card--vertical {
  background: var(--Blue_Dark);
}

/* --- Left Column: Content --- */
.post-grid-block__content {
  flex: 1;
  max-width: 350px;
  flex-shrink: 0; /* Prevents this column from shrinking */
}

.post-grid-block__headline {
  margin: 0 0 1.5rem 0 !important;
}

.post-grid-block__subheading {
  font-family: var(--font-family-subtitle);
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
  color: var(--White);
  margin: 0 0 1.5rem 0;
}

.post-grid-block__description {
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-paragraph);
  font-weight: var(--font-weight-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
  color: var(--Gray_Mid);
}

.post-grid-block__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  text-decoration: none;
  transition: color 0.2s ease;

  font-family: var(--font-family-subtitle-button);
  font-size: var(--font-size-subtitle-button);
  font-weight: var(--font-weight-subtitle-button);
  line-height: var(--line-height-subtitle-button);
  letter-spacing: var(--letter-spacing-subtitle-button);
  color: var(--CTA);
}

.post-grid-block__link:hover {
  color: #ff2f00; /* Highlight color on hover */
}

/* --- Right Column: Posts --- */
.post-grid-block__posts-wrapper {
  flex-grow: 1;
  min-width: 0; /* This is a flexbox fix to allow the slider to shrink correctly */
  width: 100%;
}

.post-grid-block__slider .swiper-slide {
  height: auto; /* Allow slides to have their own height */
}

/* On mobile, SwiperJS adds this class when grid rows > 1 */
.post-grid-block__slider.swiper-grid-column .swiper-wrapper {
  flex-wrap: wrap; /* Allow wrapping */
  flex-direction: row;
}

/**
 * Responsive Styles for Post Grid Block
 */
@media (max-width: 992px) {
  .post-grid-block__container {
    flex-direction: column;
    align-items: flex-start;
  }
  .post-grid-block__content {
    max-width: 100%;
    /* margin-bottom: 2rem; */
  }
}

/**
 * ========================================================================
 * Block: Post List
 * ========================================================================
 */
.post-list-block {
  background-color: var(--Blue_Light);
  color: var(--Blue_Dark);
}

.post-list-block__content {
  flex: 1;
  flex-shrink: 0;
  margin-block-end: 2rem;
}

.post-list-block__headline {
  margin: 0;
}

.post-list-block__subheading {
  font-family: var(--font-family-subtitle);
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
  margin: 1rem 0 0 0;
}

.post-list-block__posts {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}

.post-list-block__footer {
  margin-top: 2rem;
  text-align: center;
}

/**
 * ========================================================================
 * Component: Post Row
 * ========================================================================
 */
.post-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1rem;
  background-color: #fff;
  /* border-radius: 8px; */
  transition: all 0.2s ease-in-out;
}

@media (max-width: 560px) {
  .post-row {
    flex-direction: column; /* Stack items vertically on small screens */
  }

  .post-row .post-row__image-wrapper {
    width: 100%;
    min-height: 150px; /* Ensures the image has a minimum height */
  }
}

.post-row:hover {
  /* transform: translateY(-3px); */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  /* cursor: pointer; */
}

.post-row__image-wrapper {
  width: 200px;
  height: 164px;
  flex-shrink: 0;
  min-height: 113px;
  background-color: #8080802e;
}
.post-row__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* border-radius: 5px; */
}

.post-row__content {
  flex-grow: 1;
  line-height: normal;
}

.post-row__author-byline {
  font-family: var(--font-family-small);
  font-weight: var(--font-weight-small);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-small);
  color: var(--Black);
  display: block;
  margin-bottom: 4px;
}

.post-row__excerpt {
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: var(--Black);
}

.post-row__title {
  margin: 0 0 0.5rem 0;
  font-family: var(--font-family-subtitle);
  font-weight: var(--font-weight-subtitle);
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
  color: var(--Blue_Dark);
}
.post-row__title a {
  color: var(--Blue_Dark);
  text-decoration: none;
}
/* .post-row:hover .post-row__title a {
  text-decoration: underline;
} */

.post-row__actions {
  color: #ff6746;
  transition: transform 0.2s ease-in-out;
  align-self: end;
}
.post-row:hover .post-row__actions {
  transform: translateX(5px);
}

/**
 * ========================================================================
 * Component: Button Modifier
 * ========================================================================
 */
.btn--outline-dark {
  border: 1px solid var(--Blue_Dark);
  color: var(--Blue_Dark);
  background-color: transparent;

  @media (max-width: 560px) {
    width: 100%;
  }
}

.btn--outline-dark:hover {
  background-color: var(--Blue_Dark);
  color: #fff;
}

/**
 * Responsive Styles
 */
@media (max-width: 992px) {
  .post-list-block__content {
    max-width: 100%;
  }
}

/**
 * ========================================================================
 * Block: Promo (Content with Image Scroller)
 * ========================================================================
 */
.promo-block {
  background-color: var(--White);
  color: var(--Black);
}

.promo-block__container {
  display: flex;
  /* align-items: center; */
  gap: 4rem;
  margin-top: 2rem;
}

.promo-block__content {
  /* flex: 1; */
  max-width: 400px;
  flex-shrink: 0;
}

.promo-block__super-heading {
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
  font-weight: var(--font-weight-subtitle);
  display: block;
  margin-bottom: 0.5rem;
}

.promo-block__headline {
  font-size: 144px !important;
  line-height: 0.8 !important;

  @media (max-width: 991px) {
    font-size: 96px !important;
  }

  @media (max-width: 480px) {
    font-size: var(--font-size-title) !important;
  }
}

.promo-block__description {
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
  font-weight: var(--font-weight-paragraph);
}

.promo-block__cta-area {
  margin-top: 2.5rem;
}

.promo-block__pre-button-text {
  font-size: var(--font-size-subtitle);
  font-weight: var(--font-weight-subtitle);
  line-height: var(--line-height-subtitle);
  letter-spacing: var(--letter-spacing-subtitle);
  font-weight: var(--font-weight-subtitle);
  margin-bottom: 1rem;
}

.promo-block__slider-wrapper {
  flex-grow: 1;
  min-width: 0; /* Flexbox fix */
  position: relative; /* For the overlay shadow */
}

.promo-block__slider-wrapper .overlay-shadow {
  background: linear-gradient(270deg, #eae9e6 0%, rgba(234, 233, 230, 0) 100%);
  position: absolute;
  top: -1rem;
  right: -1rem;
  bottom: -1rem;
  width: 100px;
  z-index: 1;
}

.promo-block__img-wrapper .overlay-shadow {
  background: linear-gradient(270deg, #eae9e6 0%, rgba(234, 233, 230, 0) 100%);
  position: absolute;
  top: -1rem;
  right: -1rem;
  bottom: -1rem;
  width: 100px;
  z-index: 1;
}

.promo-block__img-wrapper {
  position: relative; /* For absolute positioning of the image */
  overflow: hidden; /* Ensures images don't overflow */

  display: flex;
  flex-wrap: nowrap;
  gap: 100px;
  margin: -2rem 0 -2rem -3rem;
  padding: 2rem 0 2rem 3rem;
}

.promo-block__img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: -14.22px 7.11px 21.32px 0px #00000059;
  max-height: 560px;
}

.promo-block__slider-wrapper .promo-block__slider {
  padding: 1rem;
  margin: -1rem;
}

.promo-block__slider .swiper-slide {
  width: auto; /* Lets images have their natural width */
  max-width: 400px; /* Prevents images from being too large */
}

.promo-block__slide img {
  display: block;
  width: 100%;
  height: 100%;
  /* border-radius: 8px; */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  box-shadow: -28.43px 28.43px 56.86px 0px #ffffff33 inset;
  box-shadow: -14.22px 7.11px 21.32px 0px #00000059;
}

/**
 * ========================================================================
 * Component: Button Modifier
 * ========================================================================
 */
.btn--solid {
  background-color: var(--CTA); /* Orange color from screenshot */
  color: var(--White);
  border: 1px solid var(--CTA);
  font-family: var(--font-family-subtitle-button);
  font-size: var(--font-size-subtitle-button);
  line-height: var(--line-height-subtitle-button);
  letter-spacing: var(--letter-spacing-subtitle-button);
  font-weight: var(--font-weight-subtitle-button);
}
.btn--solid:hover {
  background-color: #e53e3e; /* A darker shade for hover */
  border-color: #e53e3e;
}

/**
 * Responsive Styles
 */
@media (max-width: 992px) {
  .promo-block__container {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }
  .promo-block__content {
    max-width: 500px;
    margin: 0 0 3rem 0;
    /* text-align: center; */
  }
}

/**
 * ========================================================================
 * Component: Link Modifier
 * ========================================================================
 */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.link-arrow--orange {
  color: #dd6b20; /* Orange color from screenshot */
}

.link-arrow--orange:hover {
  color: #f56565; /* A slightly brighter orange on hover */
}

/**
 * ========================================================================
 * Block: Image Hero
 * ========================================================================
 */
.image-hero-block {
  position: relative;
  background-size: cover;
  background-position: center center;
  color: var(--White);
}

.image-hero-block__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 24, 39, 0.7); /* Dark overlay */
  z-index: 1;
}

.image-hero-block__container {
  position: relative; /* To appear above the overlay */
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 50vh;
}

.image-hero-block__content {
  flex-basis: 50%;
  padding-right: 2rem;
}

.image-hero-block__empty-column {
  flex-basis: 50%;
}

.image-hero-block__logo {
  width: 100%;
  max-width: 144px;
  margin-bottom: 2rem;
}

.image-hero-block__headline {
  color: var(--Gray_Mid);
  margin: 0 0 1rem 0 !important;
}

.image-hero-block__description {
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
  color: var(--Gray_Mid);
  max-width: 450px;
}

/**
 * ========================================================================
 * Component: Link Modifier
 * ========================================================================
 */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0;
  text-decoration: none;
  transition: color 0.2s ease;
  font-family: var(--font-family-subtitle-button);
  font-size: var(--font-size-subtitle-button);
  font-weight: var(--font-weight-subtitle-button);
  line-height: var(--line-height-subtitle-button);
  letter-spacing: var(--letter-spacing-subtitle-button);
  color: var(--CTA);
}

.link-arrow:hover {
  color: #f56565;
}

/**
 * Responsive Styles
 */
@media (max-width: 992px) {
  .image-hero-block__content {
    flex-basis: 100%;
    padding-right: 0;
  }
  .image-hero-block__empty-column {
    display: none;
  }
  .image-hero-block__logo {
    margin-left: auto;
    margin-right: auto;
  }
}

/**
 * ========================================================================
 * Block: Newsletter Signup
 * ========================================================================
 */
.newsletter-block {
  position: relative;
  background-size: cover;
  background-position: center center;
  color: var(--White);
  /* text-align: center; */
  min-height: 38rem;
  align-content: end;

  @media (max-width: 992px) {
    min-height: 35rem;
  }

  @media (max-width: 576px) {
    min-height: 30rem;
  }
}

.newsletter-block__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* A subtle gradient overlay */
  background: linear-gradient(rgb(18 24 39 / 17%), rgb(18 24 39 / 0%));
  z-index: 1;
}

.newsletter-block__container {
  position: relative;
  z-index: 2;
}

.newsletter-block__content {
  max-width: 600px;
  text-align: left;
  /* margin: 0 auto; */
}

.newsletter-block__headline {
  margin: 0;
}

.newsletter-block__subheading {
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-paragraph);
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
  margin: 1.5rem 0;
}

.newsletter-block__form-wrapper {
  margin-top: 2rem;
}

/**
 * ========================================================================
 * Component: Newsletter Form
 * This CSS is designed to style the forms generated by most plugins.
 * ========================================================================
 */
.newsletter-form {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
}

/* Target the input fields within the form */
.newsletter-form input[type="email"],
.newsletter-form input[type="text"] {
  flex-grow: 1;
  border: none;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  background-color: #fff;
}

/* Target the submit button */
.newsletter-form button,
.newsletter-form input[type="submit"] {
  border: none;
  background-color: #f56565; /* Orange color */
  color: #fff;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.newsletter-form button:hover,
.newsletter-form input[type="submit"]:hover {
  background-color: #e53e3e; /* Darker orange */
}

/**
 * Responsive Styles
 */
@media (max-width: 576px) {
  .newsletter-form {
    flex-direction: column;
    gap: 0.5rem;
    background-color: transparent;
  }
  .newsletter-form input[type="email"],
  .newsletter-form button,
  .newsletter-form input[type="submit"] {
    /* border-radius: 8px; */
    width: 100%;
  }
}

/**
 * ========================================================================
 * Component: Newsletter Form (Ninja Forms Specific)
 * This CSS is designed to precisely style the form generated by Ninja Forms.
 * ========================================================================
 */

/* Hide unnecessary Ninja Forms elements like the form title, field labels, and error wrappers */
.newsletter-block .nf-form-title,
.newsletter-block .nf-field-label,
.newsletter-block .nf-error-wrap {
  display: none !important;
}

.newsletter-block nf-fields-wrap {
  display: flex;
}

.newsletter-block nf-fields-wrap nf-field:has(input[type="email"]) {
  width: 100%;
}

/* This is the main container that holds the email field and the submit button */
.newsletter-block .nf-fields-wrap {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  /* Reset default padding that might come from the plugin */
  padding: 0;
}

/* Reset default styling on the individual field containers */
.newsletter-block .nf-field-container {
  margin-bottom: 0;
  border: none;
  padding: 0;
}

/* Target the wrapper for the email field to make it grow */
.newsletter-block .nf-field-container.email-container {
  flex-grow: 1;
}

/* Style the actual email input field */
.newsletter-block .nf-field-container.email-container input[type="email"] {
  width: 100%;
  height: 100%; /* Ensure it fills the vertical space */
  border: none;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  background-color: #fff;
}

/* Target the wrapper for the submit button to prevent it from shrinking */
.newsletter-block .nf-field-container.submit-container {
  flex-shrink: 0;
}

/* Style the actual submit button */
.newsletter-block .nf-field-container.submit-container input[type="submit"] {
  width: 100%;
  height: 100%; /* Ensure it fills the vertical space */
  border: none;
  background-color: var(--CTA); /* Orange color from screenshot */
  color: #fff;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.newsletter-block
  .nf-field-container.submit-container
  input[type="submit"]:hover {
  background-color: #e53e3e; /* Darker orange on hover */
}

/**
 * Responsive Styles for Ninja Forms
 */
@media (max-width: 576px) {
  /* Change the layout to vertical on small screens */
  .newsletter-block .nf-fields-wrap {
    flex-direction: column;
    gap: 0.5rem; /* Add space between the stacked elements */
    background-color: transparent;
    overflow: visible; /* Allow fields to have their own border-radius */
  }

  /* Apply the border-radius to the individual elements on mobile */
  .newsletter-block .nf-field-container.email-container input[type="email"],
  .newsletter-block .nf-field-container.submit-container input[type="submit"] {
    /* border-radius: 8px; */
  }
}

.newsletter-block__form-wrapper .nf-form-title,
.newsletter-block__form-wrapper .nf-field-label,
.newsletter-block__form-wrapper .nf-error-wrap {
  display: none !important;
}

.newsletter-block__form-wrapper nf-fields-wrap {
  display: flex;
}

.newsletter-block__form-wrapper
  nf-fields-wrap
  nf-field:has(input[type="email"]) {
  width: 100%;
}

/* This is the main container that holds the email field and the submit button */
.newsletter-block__form-wrapper .nf-fields-wrap {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  /* Reset default padding that might come from the plugin */
  padding: 0;
}

/* Reset default styling on the individual field containers */
.newsletter-block__form-wrapper .nf-field-container {
  margin-bottom: 0;
  border: none;
  padding: 0;
}

/* Target the wrapper for the email field to make it grow */
.newsletter-block__form-wrapper .nf-field-container.email-container {
  flex-grow: 1;
}

/* Style the actual email input field */
.newsletter-block__form-wrapper
  .nf-field-container.email-container
  input[type="email"] {
  width: 100%;
  height: 100%; /* Ensure it fills the vertical space */
  border: none;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  background-color: #fff;
}

/* Target the wrapper for the submit button to prevent it from shrinking */
.newsletter-block__form-wrapper .nf-field-container.submit-container {
  flex-shrink: 0;
}

/* Style the actual submit button */
.newsletter-block__form-wrapper
  .nf-field-container.submit-container
  input[type="submit"] {
  width: 100%;
  height: 100%; /* Ensure it fills the vertical space */
  border: none;
  background-color: var(--CTA); /* Orange color from screenshot */
  color: #fff;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.newsletter-block__form-wrapper
  .nf-field-container.submit-container
  input[type="submit"]:hover {
  background-color: #e53e3e; /* Darker orange on hover */
}

/**
 * Responsive Styles for Ninja Forms
 */
@media (max-width: 576px) {
  /* Change the layout to vertical on small screens */
  .newsletter-block__form-wrapper .nf-fields-wrap {
    flex-direction: column;
    gap: 0.5rem; /* Add space between the stacked elements */
    background-color: transparent;
    overflow: visible; /* Allow fields to have their own border-radius */
  }
}

/**
 * ========================================================================
 * Site Footer
 * ========================================================================
 */
#footer {
  background-color: #1a2049; /* Dark blue background */
  color: #fff;
  padding: 5rem 0 2rem 0;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.site-footer__column {
  font-size: 0.9rem;
}

.site-footer__title {
  margin: 0 0 0.5rem 0;
  font-weight: 400;
  font-size: 14px;
  color: #a0aec0; /* Lighter grey for titles */
}

/**
 * Footer Social Links
 */
.social-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.social-links__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #4a5568; /* Grey border */
  /* border-radius: 5px; */
  color: #fff;
  transition: all 0.2s ease;
}
.social-links__link:hover {
  background-color: #fff;
  color: #1a2049;
  border-color: #fff;
}
.social-links__link svg {
  width: 20px;
  height: 20px;
}

/**
 * Footer Explore Menu
 */
/* .footer-menu .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
} */

.footer-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.footer-menu .menu-item a {
  display: block;
  padding: 0.5rem 1rem;
  border: 1px solid #4a5568;
  /* border-radius: 5px; */
  color: #fff;
  text-decoration: none;
  transition: all 0.2s ease;
  min-height: 40px;
  align-content: center;
}

.footer-menu .menu-item a:hover {
  background-color: #fff;
  color: #1a2049;
  border-color: #fff;
}

.footer-menu .menu-item {
  /* width: calc(100% / 3); */
  min-width: 33%;
}

/**
 * Footer Newsletter Form (Ninja Forms Specific)
 */
.footer-newsletter-form nf-fields-wrap {
  display: flex;
}

.footer-newsletter-form nf-fields-wrap nf-field:has(input[type="email"]) {
  width: 100%;
}

.footer-newsletter-form .nf-field-label {
  display: none !important;
}
.footer-newsletter-form .nf-field-container {
  margin: 0;
  padding: 0;
  border: none;
}
.footer-newsletter-form .email-container {
  flex-grow: 1;
}
.footer-newsletter-form input[type="email"] {
  height: 100%;
  width: 100%;
  border: none;
  background-color: transparent;
  padding: 0.75rem 1rem;
  border: 0.74px solid #626265;
  height: 40px;
  color: #939399;
  border-radius: 0;
}

input[type="email"]:focus-visible {
  outline: 0 solid #4a90e2; /* Blue outline on focus */
  outline-offset: 0; /* Pulls the outline inside the input */
}

.footer-newsletter-form .submit-container input[type="submit"] {
  height: 40px;
  border: none;
  background-color: #444d84; /* Purple color */
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
}

/**
 * Footer Copyright
 */
.site-footer__copyright {
  /* border-top: 1px solid #4a5568; */
  /* padding-top: 2rem; */
  /* text-align: center; */
  font-size: 0.875rem;
  color: #a0aec0;
}

/**
 * Responsive Footer
 */
@media (max-width: 992px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .site-footer__copyright {
    font-size: 11px;
  }
}

/**
 * ========================================================================
 * Site Footer
 * ========================================================================
 */
#footer {
  background-color: #1a2049;
  color: #fff;
  padding: 5rem 0 2rem 0;
}

@media (max-width: 992px) {
  #footer {
    padding: 5rem 0 2rem 0;
  }
}

.site-footer__grid {
  display: grid;
  /* This is now the default for larger screens */
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 2.5rem; /* row-gap and column-gap */
  padding-bottom: 3rem;
}

/* --- All other footer styles like .site-footer__column, .social-links, etc. remain the same --- */

/* ... (keep all the other styles as they were) ... */

/**
 * Responsive Footer
 */
@media (max-width: 768px) {
  /* On tablets and below, switch to a single column */
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

/**
 * ========================================================================
 * Site Header
 * ========================================================================
 */

.site-navigation {
  ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Space between menu items */
    margin: 0;

    a {
      text-decoration: none;
      color: #444d84;
      font-weight: 500;
      transition: color 0.2s ease;
      font-size: 20px;

      &:hover {
        color: var(--Blue_Dark);
      }
    }
  }
}

.stories-archive,
.news-archive {
  margin-top: 3rem;
}

/* .section-heading {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title);
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-title);
  margin: 0;
  transform: rotate(-3deg);
  display: inline-block;
} */

.swiper-container {
  position: relative;
}
.swiper-slide {
  height: auto;
}

.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 100px;
  border-top-left-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #1c2036b3;
  width: 48px;
  height: 96px;
  color: var(--CTA);
  right: 0;

  @media screen and (max-width: 768px) {
    width: 40px;
    height: 80px;
  }

  @media screen and (max-width: 576px) {
    width: 32px;
    height: 64px;
  }
}

.swiper-button-next::after {
  font-size: 27px;
  font-weight: 900;
  margin-right: -12px;
  z-index: 10;

  @media screen and (max-width: 768px) {
    font-size: 24px;
  }

  @media screen and (max-width: 576px) {
    font-size: 21px;
  }
}

.swiper-button-next:hover {
  background-color: var(--Black);
}

.swiper-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #1c2036b3;
  width: 48px;
  height: 96px;
  color: var(--CTA);
  left: 0;

  @media screen and (max-width: 768px) {
    width: 40px;
    height: 80px;
  }

  @media screen and (max-width: 576px) {
    width: 32px;
    height: 64px;
  }
}

.swiper-button-prev::after {
  font-size: 27px;
  font-weight: 900;
  margin-left: -12px;
  z-index: 10;

  @media screen and (max-width: 768px) {
    font-size: 24px;
  }

  @media screen and (max-width: 576px) {
    font-size: 21px;
  }
}

.swiper-button-prev:hover {
  background-color: var(--Black);
}

.post-grid-block .swiper-slide {
  min-width: 337px;
}

.featured-slider-block .swiper-slide {
  min-width: 337px;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: nowrap;
}

.nf-form-fields-required {
  display: none !important; /* Hide the "required" text */
}

/* menu style */
/* Hamburger Icon Styling */
.hamburger {
  display: none; /* Hidden on desktop */
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: #1c297e;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

/* Responsive Styles for Mobile */
@media (max-width: 768px) {
  .site-branding .logo-desktop {
    display: none; /* Hide desktop logo on mobile */
  }

  .site-branding .logo-mobile {
    display: block; /* Show mobile logo */
    max-height: 40px; /* Adjust size as needed */
  }

  .hamburger {
    display: block; /* Show hamburger icon on mobile */
  }

  .nav-main {
    position: fixed;
    left: -100%;
    top: 70px; /* Should match the header's min-height */
    width: 100%;
    height: calc(100vh - 70px);
    background-color: #262626;
    transition: left 0.3s ease-in-out;
    overflow-y: auto;
    z-index: 1000; /* Ensure it appears above other content */
  }

  .nav-main.active {
    left: 0; /* Slide in the menu */
  }

  .nav-main .nav-menu {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 2rem;
  }

  .nav-main .nav-item {
    margin: 1rem 0;
    width: 100%;
    text-align: center;
  }

  .nav-main .nav-link {
    font-size: 1.2rem;
    padding: 1rem;
  }

  /* Animate Hamburger to 'X' */
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

.article-card__placeholder-icon {
  width: 70px; /* Adjust the size of the icon as needed */
  height: auto;
  opacity: 0.2; /* Makes the icon subtle */
}

.article-h1 {
  color: var(--Blue_Dark);
}

/**
 * ========================================================================
 * Block: Contact Info
 * ========================================================================
 */

.contact-info-block__header {
  position: relative;
  background-size: cover;
  background-position: center;
  /* padding: 6rem 0; */
  text-align: center;
  color: #fff;
  background-color: var(--Blue_Dark);
}

/* .contact-info-block__header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(30, 41, 59, 0.8);
  z-index: 1;
} */

.contact-info-block__header-content {
  position: relative;
  z-index: 2;
}

.contact-info-block__headline {
  /* font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem; */
  color: #f56565;
  text-transform: uppercase;
  font-size: 40px;
  /* letter-spacing: 2px; */
}

.contact-info-block__headline::after {
  content: "......";
  display: block;
  letter-spacing: 4px;
  color: #fff;
  font-size: 1.5rem;
  margin-top: 0.5rem;
}

/* .contact-info-block__subheading {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 500px;
  margin: 1.5rem auto 0 auto;
} */

.contact-info-block__cards-section {
  padding: 5rem 0;
}

.contact-info-block__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

/**
 * ========================================================================
 * Component: Contact Card
 * ========================================================================
 */
.contact-card {
  text-align: center;
}

.contact-card__icon i {
  font-size: 40px; /* Use font-size to control the size of font icons */
  color: #f56565; /* The orange color from your design */
  margin-bottom: 1.5rem;
  display: inline-block; /* Ensures margin is applied correctly */
}

/* .contact-card__title {
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
} */

/* .contact-card__description {
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 1.7;
} */

.contact-card__info {
  margin-top: 1.5rem;
  /* font-weight: 600; */
  color: var(--CTA);
}

/**
 * Responsive Styles
 */
@media (max-width: 992px) {
  .contact-info-block__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .contact-info-block__grid {
    grid-template-columns: 1fr; /* Stack to a single column */
  }
}

/**
 * ========================================================================
 * Page: 404 Error
 * ========================================================================
 */
.error-404-block {
  background-color: #1a2049; /* Dark blue background */
  color: #fff;
  padding: 6rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: calc(
    100vh - 150px
  ); /* Adjust 150px to be your header/footer height */
}

.error-404-block__container {
  position: relative;
  z-index: 2;
}

/* The giant "404" in the background */
.error-404-block__code {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  font-family: var(--font-display);
  font-size: clamp(15rem, 40vw, 25rem); /* Hugely responsive font size */
  font-weight: 700;
  color: rgba(255, 255, 255, 0.05); /* Very transparent */
  z-index: 1;
  user-select: none; /* Prevents text selection */
}

.error-404-block__headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.error-404-block__subheading {
  font-size: 1.1rem;
  color: #a0aec0; /* Lighter grey */
  max-width: 500px;
  margin: 0 auto 2.5rem auto;
}

.error-404-block__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/**
 * ========================================================================
 * Block: Table of Contents Page
 * ========================================================================
 */
/* .toc-block {
  padding: 4rem 0;
} */

.toc-block__container {
  display: flex;
  gap: 1rem;
  align-items: flex-start; /* Aligns items to the top */
}

/* --- Left Column: Navigation --- */
.toc-block__nav-wrapper {
  width: 160px;
  flex-shrink: 0;

  @media (min-width: 993px) {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}

.toc-block__nav {
  position: sticky; /* The magic! */
  top: 2rem; /* Space from the top of the viewport */
}

.toc-block__nav-title {
  margin-bottom: 1rem;
  margin-top: 0.83em;
  font-size: 26px;
}

.toc-block__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 20px;
  font-weight: 600;
  color: var(--Gray_Mid);
}

.toc-block__nav-list a {
  text-decoration: none;
  color: var(--Gray_Mid);
  /* font-weight: 500; */
  transition: all 0.2s ease;
}

/* The active link style */
.toc-block__nav-list a.is-active {
  color: var(--Black);
  /* font-weight: 700; */
}

/* --- Right Column: Content --- */
.toc-block__content {
  flex-grow: 1;

  @media (min-width: 993px) {
    border-left: 1px solid var(--Gray_Mid);
    padding-left: 3rem;
  }
}

.toc-block__section:not(:last-child) {
  margin-bottom: 3rem;
}

.toc-block__section-title {
  margin-bottom: 1.5rem;
  font-size: 26px;
}

.toc-block__section-content p {
  margin-bottom: 1.5rem;
}

/* Style for the highlighted text block */
.toc-block__section-content blockquote {
  background-color: var(--Blue_Light); /* Light blue background */
  border-left: 4px solid var(--Blue_Dark); /* Blue left border */
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}
.toc-block__section-content blockquote p {
  margin-bottom: 0;
}

/**
 * Responsive Styles
 */
@media (max-width: 992px) {
  .toc-block__container {
    flex-direction: column; /* Stack columns vertically */
  }

  .toc-block__nav-wrapper {
    width: 100%;
  }

  .toc-block__nav {
    border-bottom: 1px solid var(--Gray_Mid);
    padding-bottom: 2rem;
  }
}