/* ==========================================================================
   FILE: taxes.css
   DESCRIPTION: Page-specific styles for "Taxable Donation Laws 2025/2026".
   ORGANIZATION: Data Science Alliance (DSA)
   METHODOLOGY: BEM (Block Element Modifier) naming convention.
   DEPENDENCIES: variables.css, global.css
   ========================================================================== */

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1.  HERO SECTION
       1.1  .tax-page-hero
       1.2  .tax-page-hero__image
       1.3  h1.tax-page-hero__title

   2.  TAX SECTION (MAIN LAYOUT)
       2.1  .tax-section
       2.2  .color-bar--taxes (Modifier)
       2.3  h2.tax-section__heading
       2.4  .tax-section__intro

   3.  TAX CARDS (COMPONENT)
       3.1  .tax-card
       3.2  h4.tax-card__title
       3.3  .tax-card__text

   4.  CONSIDERATIONS & STRATEGIES
       4.1  .considerations
       4.2  .considerations__heading
       4.3  .considerations__body
       4.4  h3.considerations__intro
       4.5  .considerations__image
       4.6  .strategies
       4.7  .strategies__list
       4.8  .strategies__item

   5.  DECORATIVE SHAPES
       5.1  .deco-shape--taxes-hex
       5.2  .deco-shape--taxes-square
       5.3  .deco-shape--taxes-circle
       5.4  .deco-shape--taxes-triangle

   6.  MESSAGE SECTION
       6.1  .message
       6.2  h2.message__title
       6.3  .message__text

   7.  LAYERED IMAGE (FOOTER)
       7.1  .layered-image__source
   ========================================================================== */

/* =========================================
   1. HERO SECTION
   ========================================= */

/* 1.1 .tax-page-hero (Container) */
.tax-page-hero {
  display: grid;
  align-items: center; /* Vertically centers the content */
  /* No fixed height needed; grid takes height of the image */
}

/* The Magic Sauce:
   This selects all direct children (the picture and the h1)
   and stacks them in the same grid cell.
*/
.tax-page-hero > * {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

/* 1.2 .tax-page-hero__image */
/* Targets the img inside the picture tag */
.tax-page-hero__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* 1.3 h1.tax-page-hero__title */
h1.tax-page-hero__title {
  z-index: 1;
  padding: 1rem;

  /* Typography Settings */
  color: #fbfbfc;
  text-align: center;
  text-shadow: 0 2.187px 7.655px rgba(0, 0, 0, 0.25);
  font-family: "Barlow", sans-serif;
  font-size: 5.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.19469rem;
  /* text-transform: uppercase; */
  margin-bottom: 0;
}
@media (min-width: 576px) {
  h1.tax-page-hero__title {
    font-size: 6.2rem;
    width: 38.83rem;
    margin: 0 auto;
  }
}
@media (min-width: 768px) {
  h1.tax-page-hero__title {
    font-size: 7.225rem;
    width: 51.775rem;
  }
}
@media (min-width: 992px) {
  h1.tax-page-hero__title {
    width: 66.875rem;
  }
}
@media (min-width: 1200px) {
  h1.tax-page-hero__title {
    font-size: 8.267rem;
    width: 86.5rem;
  }
}
@media (min-width: 1200px) {
  h1.tax-page-hero__title {
    width: 103.4167rem;
    margin-top: -15.25rem;
  }
}
@media (min-width: 1920px) {
  h1.tax-page-hero__title {
    font-size: 10.35rem;
    width: 154.4167rem;
  }
}

/* =========================================
   2. TAX SECTION (MAIN LAYOUT)
   ========================================= */

/* 2.1 .tax-section */

/* 2.2 .color-bar--taxes */
.color-bar--taxes {
  width: 21.67rem;
}
/* 2.3 h2.tax-section__heading */
h2.tax-section__heading {
  color: var(--Navy-Blue-1000);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 2.1rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
  margin: 1rem auto;
}

/* 2.4 .tax-section__intro */
.tax-section__intro {
  width: 21.67rem;
  margin: 0 auto;
  color: var(--Navy-Blue-1000);
  font-family: "Montserrat", sans-serif;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 123.125%; /* 25.856px */
  letter-spacing: 1.05px;
}
@media (min-width: 576px) {
  .tax-section__intro {
    width: 35rem; /* 420px*/
  }
}
@media (min-width: 768px) {
  .tax-section__intro {
    width: 47.5rem; /* 570x*/
  }
}

@media (min-width: 1200px) {
  .tax-section__intro {
    width: 86.67rem; /* 1040px*/
  }
}
@media (min-width: 1400px) {
  .tax-section__intro {
    width: 103.083rem; /* 1237px*/
  }
}
@media (min-width: 1920px) {
  .tax-section__intro {
    width: 126.67rem; /* 1520px*/
  }
}
/* =========================================
   3. TAX CARDS (COMPONENT)
   ========================================= */

/* 3.1 .tax-card */
.tax-card {
  display: flex;
  width: 21.67rem;
  height: 385px;
  padding: 0 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: #eceef6;
  margin: 8rem auto;
}
@media (min-width: 576px) {
  .tax-card {
    width: 35rem; /* 420px */
  }
}

@media (min-width: 768px) {
  .tax-card {
    width: 47.5rem; /* 570px */
  }
}

@media (min-width: 1200px) {
  .tax-card {
    width: 86.67rem; /* 1040px */
  }
}

@media (min-width: 1400px) {
  .tax-card {
    width: 103.083rem; /* 1237px */
  }
}

@media (min-width: 1920px) {
  .tax-card {
    width: 126.67rem; /* 1520px */
  }
}
/* 3.2 h4.tax-card__title */
h4.tax-card__title {
  width: 19.167rem;
  color: var(--Navy-Blue-1000);
  font-family: "Montserrat", sans-serif;
  font-size: 1.4167rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.85px;
}
@media (min-width: 576px) {
  h4.tax-card__title {
    width: 31.67rem;
  }
}

@media (min-width: 768px) {
  h4.tax-card__title {
    width: 44.167rem;
    font-size: 1.63rem;
  }
}

@media (min-width: 1200px) {
  h4.tax-card__title {
    width: 50.33rem;
    font-size: 1.867rem;
  }
}

@media (min-width: 1400px) {
  h4.tax-card__title {
    width: 60.04167rem;
  }
}

@media (min-width: 1920px) {
  h4.tax-card__title {
    width: 76.33rem;
    font-size: 2.33rem;
  }
}

/* 3.3 .tax-card__text */
.tax-card__text {
  width: 19.167rem;
  margin-top: 1rem;
  color: var(--Navy-Blue-1000);
  font-family: Montserrat;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.6px;
}
@media (min-width: 576px) {
  .tax-card__text {
    width: 31.67rem;
  }
}

@media (min-width: 768px) {
  .tax-card__text {
    width: 44.167rem;
    font-size: 1.167rem;
  }
}

@media (min-width: 1200px) {
  .tax-card__text {
    width: 50.33rem;
    font-size: 1.33rem;
  }
}

@media (min-width: 1400px) {
  .tax-card__text {
    width: 60.04167rem;
  }
}

@media (min-width: 1920px) {
  .tax-card__text {
    width: 76.33rem;
    font-size: 1.67rem;
  }
}
/* =========================================
   3.4 TAX CARD BACKGROUNDS (Modifiers)
   ========================================= */

/* ------------------------------------------------------------------
   CARD ONE
   ------------------------------------------------------------------ */
.tax-card--one {
  /* Fallback for very old browsers */
  background-image: url("/assets/images/taxes/list-backgrounds/highlight_one_background.png");
  /* Modern browsers choose the best format */
  background-image: image-set(
    url("/assets/images/taxes/list-backgrounds/highlight_one_background.webp")
      type("image/webp"),
    url("/assets/images/taxes/list-backgrounds/highlight_one_background.png")
      type("image/png")
  );
}

@media (min-width: 576px) {
  .tax-card--one {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_one_background_576.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_576.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_576.png")
        type("image/png")
    );
  }
}

@media (min-width: 768px) {
  .tax-card--one {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_one_background_768.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_768.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_768.png")
        type("image/png")
    );
  }
}

@media (min-width: 992px) {
  .tax-card--one {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_one_background_992.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_992.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_992.png")
        type("image/png")
    );
  }
}

@media (min-width: 1200px) {
  .tax-card--one {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_one_background_1200.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_1200.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_1200.png")
        type("image/png")
    );
  }
}

@media (min-width: 1400px) {
  .tax-card--one {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_one_background_1400.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_1400.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_1400.png")
        type("image/png")
    );
  }
}

@media (min-width: 1920px) {
  .tax-card--one {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_one_background_1920.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_1920.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_one_background_1920.png")
        type("image/png")
    );
  }
}

/* ------------------------------------------------------------------
   CARD TWO
   ------------------------------------------------------------------ */
.tax-card--two {
  background-image: url("/assets/images/taxes/list-backgrounds/highlight_two_background.png");
  background-image: image-set(
    url("/assets/images/taxes/list-backgrounds/highlight_two_background.webp")
      type("image/webp"),
    url("/assets/images/taxes/list-backgrounds/highlight_two_background.png")
      type("image/png")
  );
}

@media (min-width: 576px) {
  .tax-card--two {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_two_background_576.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_576.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_576.png")
        type("image/png")
    );
  }
}

@media (min-width: 768px) {
  .tax-card--two {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_two_background_768.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_768.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_768.png")
        type("image/png")
    );
  }
}

@media (min-width: 992px) {
  .tax-card--two {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_two_background_992.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_992.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_992.png")
        type("image/png")
    );
  }
}

@media (min-width: 1200px) {
  .tax-card--two {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_two_background_1200.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_1200.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_1200.png")
        type("image/png")
    );
  }
}

@media (min-width: 1400px) {
  .tax-card--two {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_two_background_1400.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_1400.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_1400.png")
        type("image/png")
    );
  }
}

@media (min-width: 1920px) {
  .tax-card--two {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_two_background_1920.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_1920.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_two_background_1920.png")
        type("image/png")
    );
  }
}

/* ------------------------------------------------------------------
   CARD THREE
   ------------------------------------------------------------------ */
.tax-card--three {
  background-image: url("/assets/images/taxes/list-backgrounds/highlight_three_background.png");
  background-image: image-set(
    url("/assets/images/taxes/list-backgrounds/highlight_three_background.webp")
      type("image/webp"),
    url("/assets/images/taxes/list-backgrounds/highlight_three_background.png")
      type("image/png")
  );
}

@media (min-width: 576px) {
  .tax-card--three {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_three_background_576.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_576.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_576.png")
        type("image/png")
    );
  }
}

@media (min-width: 768px) {
  .tax-card--three {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_three_background_768.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_768.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_768.png")
        type("image/png")
    );
  }
}

@media (min-width: 992px) {
  .tax-card--three {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_three_background_992.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_992.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_992.png")
        type("image/png")
    );
  }
}

@media (min-width: 1200px) {
  .tax-card--three {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_three_background_1200.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_1200.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_1200.png")
        type("image/png")
    );
  }
}

@media (min-width: 1400px) {
  .tax-card--three {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_three_background_1400.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_1400.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_1400.png")
        type("image/png")
    );
  }
}

@media (min-width: 1920px) {
  .tax-card--three {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_three_background_1920.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_1920.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_three_background_1920.png")
        type("image/png")
    );
  }
}

/* ------------------------------------------------------------------
   CARD FOUR
   ------------------------------------------------------------------ */
.tax-card--four {
  background-image: url("/assets/images/taxes/list-backgrounds/highlight_four_background.png");
  background-image: image-set(
    url("/assets/images/taxes/list-backgrounds/highlight_four_background.webp")
      type("image/webp"),
    url("/assets/images/taxes/list-backgrounds/highlight_four_background.png")
      type("image/png")
  );
}

@media (min-width: 576px) {
  .tax-card--four {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_four_background_576.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_576.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_576.png")
        type("image/png")
    );
  }
}

@media (min-width: 768px) {
  .tax-card--four {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_four_background_768.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_768.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_768.png")
        type("image/png")
    );
  }
}

@media (min-width: 992px) {
  .tax-card--four {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_four_background_992.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_992.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_992.png")
        type("image/png")
    );
  }
}

@media (min-width: 1200px) {
  .tax-card--four {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_four_background_1200.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_1200.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_1200.png")
        type("image/png")
    );
  }
}

@media (min-width: 1400px) {
  .tax-card--four {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_four_background_1400.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_1400.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_1400.png")
        type("image/png")
    );
  }
}

@media (min-width: 1920px) {
  .tax-card--four {
    background-image: url("/assets/images/taxes/list-backgrounds/highlight_four_background_1920.png");
    background-image: image-set(
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_1920.webp")
        type("image/webp"),
      url("/assets/images/taxes/list-backgrounds/highlight_four_background_1920.png")
        type("image/png")
    );
  }
}

/* =========================================
   4. CONSIDERATIONS & STRATEGIES
   ========================================= */

/* 4.1 .considerations */
.considerations {
  /* Keeps the section organized */
  width: 100%;
  overflow-x: clip; /* Prevents horizontal scroll if image hangs off slightly */
}

/* 4.2 h2.considerations__heading */
h2.considerations__heading {
  width: 21.67rem;
  margin: 2rem auto 5rem auto;
  color: var(--Navy-Blue-1000);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 2.1rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
}
@media (min-width: 576px) {
  h2.considerations__heading {
    width: 28.5rem;
  }
}
@media (min-width: 768px) {
  h2.considerations__heading {
    width: 39.67rem;
    font-size: 2.45rem; /*29.4px*/
  }
}

@media (min-width: 1200px) {
  h2.considerations__heading {
    width: 53.75rem;
    font-size: 2.8rem; /*33.6px*/
  }
}

@media (min-width: 1920px) {
  h2.considerations__heading {
    width: 67rem;
    font-size: 3.5rem; /*42px*/
  }
}

/* 4.3 .considerations__body */
.considerations__body {
  background: var(--Navy-Blue-900);
  /* Added for positioning context: */
  position: relative;
  width: 100%;
}
@media (min-width: 1200px) {
  .considerations__body {
    /* Establish positioning context */
    position: relative;
    /* Ensure enough height so the image doesn't get clipped */
    min-height: 600px;
    overflow: hidden;
  }
}
/* 4.4 h3.considerations__intro */
h3.considerations__intro {
  width: 21.67rem;
  margin-left: 4rem;
  padding-top: 5rem;
  color: #fbfbfc;
  font-family: "Montserrat", sans-serif;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.05px;

  /* Ensure text sits on top of image if they overlap */
  position: relative;
  z-index: 2;
}
@media (min-width: 576px) {
  h3.considerations__intro {
    width: 43rem;
  }
}
@media (min-width: 768px) {
  h3.considerations__intro {
    width: 51.4167rem;
    font-size: 2rem;
  }
}
@media (min-width: 992px) {
  h3.considerations__intro {
    width: 68.083rem;
  }
}
@media (min-width: 1200px) {
  h3.considerations__intro {
    width: 89.5rem;
    font-size: 2.3rem;
    position: relative;
    z-index: 2;
  }
}
@media (min-width: 1400px) {
  h3.considerations__intro {
    width: 94.25rem;
  }
}
@media (min-width: 1920px) {
  h3.considerations__intro {
    width: 141.583rem;
    font-size: 2.85rem;
  }
}
/* 4.5 .considerations__image */
/* Wrapper for the picture tag */
.considerations__image {
  display: block;
  width: 100%;
  /* Default Mobile: Stack it at the bottom or top */
  margin-top: 2rem;
}
@media (min-width: 1200px) {
  .considerations__image {
    position: absolute;
    top: 50%; /* Move top edge to vertical center */
    right: 0; /* Stick to the right edge */
    transform: translateY(-50%); /* Shift up by 50% to center perfectly */

    margin-top: 0; /* Remove the mobile margin */

    z-index: 1; /* Sit behind text */
  }
}
/* Target the actual img inside */
.considerations__img-element {
  width: 100%;
  height: auto;
  display: block;
}

/* 4.6 .strategies */
.strategies {
  padding-bottom: 3rem;
  /* Ensure text sits on top of image */
  position: relative;
  z-index: 2;
}

/* 4.7 .strategies__list */
.strategies__list {
  width: 21.67rem;
  margin: 0 auto;
  color: #fbfbfc;
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.5rem; /* Added padding so bullets are visible */
}
@media (min-width: 576px) {
  .strategies__list {
    width: 38rem;
  }
}
@media (min-width: 768px) {
  .strategies__list {
    width: 52.67rem;
  }
}
@media (min-width: 992px) {
  .strategies__list {
    width: 60.083rem;
  }
}
@media (min-width: 1200px) {
  .strategies__list {
    width: 49rem;
    position: relative;
    z-index: 2;
    margin: 0 0 0 6rem;
  }
}
@media (min-width: 1400px) {
  .strategies__list {
    margin-left: 10rem;
  }
}
@media (min-width: 1920px) {
  .strategies__list {
    width: 78.3rem;
  }
}
/* 4.8 .strategies__item */
.strategies__item {
  width: 21.67rem; /* Careful: width on LI inside a fixed width UL might cause wrapping issues if padding exists. */
  /* Recommendation: change width to 100% since parent UL is already fixed width */
  width: 100%;
  margin: 2rem auto;
  color: #fbfbfc;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.6px;
}

.strategies__item::marker {
  color: #fbfbfc;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .strategies__item,
  .strategies__item::marker {
    font-size: 1.167rem;
  }
}
@media (min-width: 1200px) {
  .strategies__item,
  .strategies__item::marker {
    font-size: 1.33rem;
  }
}

@media (min-width: 1920px) {
  .strategies__item,
  .strategies__item::marker {
    font-size: 1.67rem;
  }
}

/* =========================================
   5. DECORATIVE SHAPES
   ========================================= */

/* 5.1 .deco-shape--taxes-hex */

/* 5.2 .deco-shape--taxes-square */

/* 5.3 .deco-shape--taxes-circle */

/* 5.4 .deco-shape--taxes-triangle */

/* =========================================
   6. MESSAGE SECTION
   ========================================= */

/* 6.1 .message */
.message {
  padding-top: 5rem;
  position: relative;
  overflow: hidden; /* Prevents image from causing scroll if it gets huge */
}

/* 6.2 h2.message__title */
h2.message__title {
  width: 17.5rem;
  margin: 2rem auto;
  color: var(--Navy-Blue-900);
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 2.1rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.25px;
}
@media (min-width: 576px) {
  h2.message__title {
    width: 25.083rem;
  }
}
@media (min-width: 768px) {
  h2.message__title {
    font-size: 2.45rem;
    width: 25.083rem;
  }
}
@media (min-width: 992px) {
  h2.message__title {
    width: 100%;
  }
}
@media (min-width: 1200px) {
  h2.message__title {
    font-size: 2.75rem;
  }
}

/* 6.3 .message__text */
.message__text {
  width: 21.67rem;
  margin: 0 auto;
  color: var(--Navy-Blue-900);
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-style: italic; /* Preserved your italic style */
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.6px;
}
@media (min-width: 576px) {
  .message__text {
    width: 35rem;
  }
}
@media (min-width: 768px) {
  .message__text {
    font-size: 1.167rem;
  }
}
@media (min-width: 992px) {
  .message__text {
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .message__text {
    font-size: 1.35rem;
  }
}

@media (min-width: 1920px) {
  .message__text {
    width: 62rem;
    font-size: 1.7rem;
  }
}

/* --- DESKTOP LAYOUT (992px+) --- */
/* This handles shifting the image to the right of the text */
@media (min-width: 992px) {
  .message--has-image {
    display: flex;
    align-items: center; /* Vertically center text with image */
    justify-content: space-between; /* Push content apart */
    gap: 4rem;
    max-width: 1400px; /* Prevent ultra-wide stretching */
    margin: 0 auto;
    padding-bottom: 5rem; /* Add bottom padding on desktop */
  }
}
@media (min-width: 1400px) {
  .message--has-image {
    align-items: flex-start;
  }
}
@media (min-width: 1920px) {
  .message--has-image {
    max-width: 1800px; /* Increase container width significantly */
    gap: 6rem; /* Increase gap for better spacing */
    padding: 8rem 4rem; /* More padding for the large screen */
    align-items: center;
  }
}
/* Wrapper for Title + Text + Color Bar */
.message__content-wrapper {
  margin: 0 auto;
  flex: 1;
  /* max-width: 50%;  */
  width: 29.8rem;
}
@media (min-width: 1200px) {
  .message__content-wrapper {
    width: 32.2rem;
  }
}
@media (min-width: 1400px) {
  .message__content-wrapper {
    width: 47rem;
  }
}
@media (min-width: 1920px) {
  .message__content-wrapper {
    width: 62rem;
  }
}
/* =========================================
   7. LAYERED IMAGE (RECTANGLE OVERRIDES)
   ========================================= */

/* 7.1 .layered-image--taxes (Modifier) */
/* This overrides your global square settings with the page-specific rectangles */
.layered-image--taxes {
  /* 1. Define Base Mobile Dimensions */
  --taxes-w: 246.143px;
  --taxes-h: 173.295px;

  /* 2. Variable Offsets (from your global file) */
  --offset-inline: 15px;
  --offset-block: 13px;

  /* 3. Apply Dimensions */
  width: calc(var(--taxes-w) + var(--offset-inline));
  height: calc(var(--taxes-h) + var(--offset-block));

  /* Center on mobile */
  margin: 4rem auto 0 auto;
}

/* Force the inner elements to use these new dimensions */
.layered-image--taxes .layered-image__bg,
.layered-image--taxes .layered-image__frame {
  width: var(--taxes-w);
  height: var(--taxes-h);
}

/* --- RESPONSIVE RESIZING (Based on your breakpoints) --- */

/* 576px: Width 430.75px / Height 303.266px */
@media (min-width: 576px) {
  .layered-image--taxes {
    --taxes-w: 430.75px;
    --taxes-h: 303.266px;
  }
}

/* 768px: Same as 576px */
@media (min-width: 768px) {
  .layered-image--taxes {
    --taxes-w: 430.75px;
    --taxes-h: 303.266px;
  }
}

/* 992px: Same Size, but Layout Shift Happens Here */
@media (min-width: 992px) {
  .layered-image--taxes {
    --taxes-w: 430.75px;
    --taxes-h: 303.266px;

    margin: 0; /* Reset auto margin so Flexbox handles alignment */
    flex-shrink: 0; /* Prevent image from shrinking if text gets long */
  }
}

/* 1200px: Width 504.909px / Height 355.477px */
@media (min-width: 1200px) {
  .layered-image--taxes {
    --taxes-w: 504.909px;
    --taxes-h: 355.477px;
  }
}

/* 1400px: Same as 1200px */
@media (min-width: 1400px) {
  .layered-image--taxes {
    --taxes-w: 504.909px;
    --taxes-h: 355.477px;
  }
}

/* 1920px: Width 897.616px / Height 631.959px */
@media (min-width: 1920px) {
  .layered-image--taxes {
    --taxes-w: 897.616px;
    --taxes-h: 631.959px;
  }
}