:root {
    --brand-maroon: #9c0a3f;
    --brand-maroon-dark: #9c0a3f;
    --border-color: #FFBAD3;
  }

.hero{
    height: 80vh !important;
    min-height: 80vh !important;
}
.hero-bg {
    background-color: #6b0f35;
    background-image:
        /* light pink glow - top left */
        radial-gradient(circle at 8% 15%, rgba(230, 195, 205, 0.9) 0%, rgba(220, 170, 185, 0.5) 25%, rgba(180, 90, 110, 0) 55%),
        /* bright magenta vein - diagonal middle */
        radial-gradient(ellipse 500px 700px at 42% 40%, rgba(190, 20, 75, 0.95) 0%, rgba(160, 10, 60, 0.6) 35%, rgba(107, 15, 53, 0) 65%),
        /* deep wine dark patch - right */
        radial-gradient(circle at 78% 55%, rgba(50, 5, 20, 0.9) 0%, rgba(50, 5, 20, 0.3) 40%, rgba(107, 15, 53, 0) 70%),
        /* rose highlight - far right edge */
        radial-gradient(circle at 100% 20%, rgba(180, 40, 90, 0.6) 0%, rgba(107, 15, 53, 0) 50%),
        linear-gradient(115deg, #d9b4bd 0%, #9c0a3f 35%, #6b0f35 60%, #3d0818 100%);
    background-blend-mode: normal;
    background-size: 220% 220%;
    background-position: 0% 0%;
    animation: heroShiftPink 14s ease-in-out infinite;
}

@keyframes heroShiftPink {
    0% {
        background-position: 0% 0%;
        filter: brightness(1) saturate(1);
    }
    20% {
        background-position: 65% 20%;
        filter: brightness(1.1) saturate(1.15);
    }
    40% {
        background-position: 85% 65%;
        filter: brightness(0.95) saturate(1.05);
    }
    60% {
        background-position: 25% 80%;
        filter: brightness(1.15) saturate(1.2);
    }
    80% {
        background-position: 55% 35%;
        filter: brightness(0.9) saturate(0.95);
    }
    100% {
        background-position: 0% 0%;
        filter: brightness(1) saturate(1);
    }
}

.hero h1 {
    font-size: 60px !important;
}

  .service-card-outer {
    position: relative;
    /*max-width: 480px;*/
    margin: 1rem auto;
  }

  /* Middle wrap = the pink/maroon border colour, notched at top-right */
  .service-card-wrap {
      --notch-r: 50px;
      --border-w: 1.5px;
      position: relative;
      padding: var(--border-w);
      background: #FFBAD3;
      border-radius: 24px;
      -webkit-mask-image: radial-gradient(circle var(--notch-r) at 100% 0%, transparent 99%, #000 100%);
      mask-image: radial-gradient(circle var(--notch-r) at 100% 0%, transparent 99%, #000 100%);
      transition: background 0.35s ease;
  }

  .service-card {
    background: #ffffff;
    border-radius: 23px;
    padding: 2rem;
    position: relative;
    transition: background 0.35s ease, color 0.35s ease;
    -webkit-mask-image: radial-gradient(circle var(--notch-r) at 100% 0%, transparent 99%, #000 100%);
    mask-image: radial-gradient(circle var(--notch-r) at 100% 0%, transparent 99%, #000 100%);
  }

  .service-card * {
    transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease;
  }

  /* Icon lives OUTSIDE the masked layers so it never gets clipped */
  .service-card-icon {
      position: absolute;
      top: -20px;
      right: -20px;
      width: 60px;
      height: 60px;
      background: var(--brand-maroon);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.5rem;
      z-index: 3;
      transition: background 0.35s ease, color 0.35s ease;
  }

  .service-card-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #1a1a1a;
    margin-bottom: 1rem;
    padding-right: 56px;
  }

  .service-card-desc {
    color: #5a5a5a;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  .service-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .service-card-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
    font-size: 0.92rem;
    color: #333;
  }

  .service-card-list li:last-child {
    border-bottom: none;
  }

  .service-card-list li .arrow {
    color: var(--brand-maroon);
    font-weight: 700;
    flex-shrink: 0;
  }

  /* HOVER STATE - triggered from the outer container since icon is a sibling now */
  .service-card-outer:hover .service-card {
    background: var(--brand-maroon);
  }

  .service-card-outer:hover .service-card-title,
  .service-card-outer:hover .service-card-desc,
  .service-card-outer:hover .service-card-list li {
    color: #ffffff;
  }

  .service-card-outer:hover .service-card-list li {
    border-bottom-color: rgba(255, 255, 255, 0.25);
  }

  .service-card-outer:hover .service-card-list li .arrow {
    color: #ffffff;
  }

  /*.service-card-outer:hover .service-card-icon {*/
  /*  background: #ffffff;*/
  /*  color: var(--brand-maroon);*/
  /*}*/

  @media (max-width: 576px) {
    .service-card-outer {
      margin: 1.5rem auto;
    }
    .service-card-wrap {
      --notch-r: 40px;
    }
    .service-card {
      padding: 1.5rem;
    }
    .service-card-icon {
        width: 40px;
        height: 40px;
        top: -10px;
        right: -10px;
        font-size: 1.2rem;
    }
    .service-card-title {
      font-size: 1.1rem;
      padding-right: 44px;
    }
  }