/* =========================================================
   BIRTHDAY PAGE BASE
========================================================= */

body.birthday-page {
  margin: 0;

  background: #fffaf2;

  color: #102240;

  font-family:
    Arial,
    sans-serif;
}


body.birthday-page::before {
  display: none;
}


.bd-main,
.bd-main *,
.bd-main *::before,
.bd-main *::after {
  box-sizing: border-box;
}


.bd-main {
  overflow: hidden;
}


.bd-main a {
  text-decoration: none;
}


.bd-main button {
  font: inherit;
}


.bd-wrap {
  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin-inline: auto;
}


.bd-section {
  padding:
    88px 0;
}


.bd-main h1,
.bd-main h2,
.bd-main h3 {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  letter-spacing:
    -0.035em;
}


.bd-main h2 {
  margin:
    12px 0 22px;

  font-size:
    clamp(
      32px,
      4.4vw,
      56px
    );

  line-height:
    1.1;
}


.bd-main p {
  line-height:
    1.8;
}


.bd-kicker,
.bd-mini {
  font-size:
    11px;

  font-weight:
    700;

  line-height:
    1.5;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.bd-kicker {
  color:
    #9a6500;
}


.bd-copy {
  max-width:
    650px;

  color:
    #596276;
}


.bd-note {
  color:
    #657086;

  font-size:
    13px;
}



/* =========================================================
   BUTTONS
========================================================= */

.bd-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    48px;

  padding:
    14px 23px;

  border:
    0;

  border-radius:
    30px;

  background:
    #ffd000;

  color:
    #132442;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    transform
    0.25s ease;
}


.bd-btn:hover {
  transform:
    translateY(-3px);
}


.bd-outline {
  border:
    1px solid
    currentColor;

  background:
    transparent;

  color:
    inherit;
}


.bd-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    24px;
}



/* =========================================================
   HERO
========================================================= */

.bd-hero {
  position:
    relative;

  display:
    grid;

  align-items:
    center;

  min-height:
    680px;

  height:
    90svh;

  max-height:
    980px;

  overflow:
    hidden;

  background:
    #102240;

  color:
    #ffffff;
}


.bd-slides,
.bd-slide,
.bd-shade {
  position:
    absolute;

  inset:
    0;
}


.bd-slides {
  overflow:
    hidden;
}


.bd-slide {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  opacity:
    0;

  transform:
    scale(1.04);

  transition:
    opacity
    1.1s ease,
    transform
    7s ease;
}


.bd-slide.active {
  opacity:
    1;

  transform:
    scale(1);
}


.bd-shade {
  background:
    linear-gradient(
      90deg,
      rgba(8, 20, 39, 0.82),
      rgba(8, 20, 39, 0.40) 60%,
      rgba(8, 20, 39, 0.12)
    );
}


.bd-hero-content {
  position:
    relative;

  z-index:
    3;

  padding-top:
    80px;
}


.bd-hero .bd-kicker {
  color:
    #ffe06a;
}


.bd-hero h1 {
  max-width:
    760px;

  margin:
    18px 0;

  font-size:
    clamp(
      44px,
      6vw,
      82px
    );

  line-height:
    1.06;
}


.bd-hero h1 em {
  color:
    #ffe06a;

  font-weight:
    normal;
}


.bd-hero p {
  max-width:
    540px;

  font-size:
    17px;
}


.bd-controls {
  position:
    absolute;

  z-index:
    5;

  bottom:
    25px;

  left:
    50%;

  display:
    flex;

  gap:
    9px;

  transform:
    translateX(-50%);
}


.bd-dot,
.bd-pause {
  min-width:
    44px;

  height:
    44px;

  border:
    1px solid
    #ffffff80;

  border-radius:
    50%;

  background:
    #12213b88;

  color:
    #ffffff;

  cursor:
    pointer;
}


.bd-dot[aria-pressed="true"] {
  background:
    #ffd000;

  color:
    #102240;
}



/* =========================================================
   YELLOW STRIP
========================================================= */

.bd-strip {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    35px;

  padding:
    21px;

  background:
    #ffd000;

  color:
    #102240;

  font-weight:
    700;
}



/* =========================================================
   INTRO
========================================================= */

.bd-intro {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  align-items:
    center;

  gap:
    65px;
}


.bd-photo {
  display:
    block;

  width:
    100%;

  aspect-ratio:
    1.2;

  border-radius:
    130px
    130px
    24px
    24px;

  object-fit:
    cover;
}


.bd-tags {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    20px;
}


.bd-tags span {
  padding:
    10px 15px;

  border:
    1px solid
    #e7dac9;

  border-radius:
    22px;

  font-size:
    13px;
}



/* =========================================================
   EXISTING CLIENT THEMES
========================================================= */

.bd-themes {
  background:
    #f1f5fc;
}


.bd-heading {
  max-width:
    730px;

  margin-bottom:
    32px;
}


.bd-tabs {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin:
    25px 0;
}


.bd-tabs button {
  min-height:
    46px;

  padding:
    14px 24px;

  border:
    1px solid
    #cfdae9;

  border-radius:
    30px;

  background:
    #ffffff;

  color:
    #102240;

  font-size:
    14px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    0.25s ease;
}


.bd-tabs button:hover {
  transform:
    translateY(-2px);
}


.bd-tabs button[aria-pressed="true"] {
  border-color:
    #102240;

  background:
    #102240;

  color:
    #ffffff;
}


.bd-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    19px;

  margin-top:
    20px;
}


.bd-card {
  min-width:
    0;

  padding:
    26px;

  border:
    1px solid
    #e2e7ef;

  border-radius:
    22px;

  background:
    #ffffff;

  transition:
    transform
    0.25s ease;
}


.bd-card:hover {
  transform:
    translateY(-5px);
}


.bd-card[hidden] {
  display:
    none;
}


.bd-icon {
  display:
    grid;

  place-items:
    center;

  width:
    74px;

  height:
    74px;

  margin-bottom:
    24px;

  border-radius:
    24px;

  background:
    #edf4ff;

  font-size:
    40px;
}


.bd-card[data-category="girls"]
.bd-icon {
  background:
    #fff0f6;
}


.bd-mini {
  color:
    #6b778c;

  font-size:
    9px;
}


.bd-card h3 {
  margin:
    12px 0 23px;

  font-size:
    25px;
}


.bd-card a {
  color:
    #285894;

  font-size:
    13px;

  font-weight:
    700;
}



/* =========================================================
   NEW GALLERY UNDER THEMES
========================================================= */

.theme-photo-gallery {
  margin-top:
    85px;

  padding-top:
    58px;

  border-top:
    1px solid
    #d5dfec;
}


.theme-photo-gallery[hidden] {
  display:
    none;
}


.theme-gallery-heading {
  display:
    grid;

  grid-template-columns:
    1fr
    minmax(
      260px,
      0.52fr
    );

  align-items:
    end;

  gap:
    55px;

  margin-bottom:
    30px;
}


.theme-gallery-heading > span {
  grid-column:
    1 / -1;

  margin-bottom:
    -32px;

  color:
    #a66a00;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.theme-gallery-heading h3 {
  margin:
    0;

  color:
    #102240;

  font-size:
    clamp(
      34px,
      4.5vw,
      58px
    );

  line-height:
    1;
}


.theme-gallery-heading h3 em {
  display:
    block;

  color:
    #c88f00;

  font-weight:
    400;
}


.theme-gallery-heading p {
  margin:
    0;

  color:
    #677387;

  font-size:
    14px;
}



/* GIRLS DIFFERENT FEEL */

.girls-photo-gallery {
  padding:
    58px 30px 30px;

  border-radius:
    30px;

  background:
    linear-gradient(
      145deg,
      #fff7fb,
      #ffffff
    );
}


.girls-photo-gallery
.theme-gallery-heading > span {
  color:
    #be6f91;
}


.girls-photo-gallery
.theme-gallery-heading h3 em {
  color:
    #ca789a;
}



/* =========================================================
   GALLERY IMAGE GRID
========================================================= */

.theme-gallery-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  grid-auto-rows:
    205px;

  gap:
    12px;
}


.theme-photo-card {
  position:
    relative;

  min-width:
    0;

  overflow:
    hidden;

  padding:
    0;

  border:
    0;

  border-radius:
    18px;

  background:
    #102240;

  cursor:
    zoom-in;

  box-shadow:
    0 10px 28px
    rgba(
      16,
      34,
      64,
      0.12
    );
}


.theme-photo-card img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform
    0.55s ease,
    filter
    0.55s ease;
}


.theme-photo-card:hover img {
  transform:
    scale(1.055);

  filter:
    saturate(1.08);
}


.theme-photo-card::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      transparent
      45%,
      rgba(
        4,
        12,
        28,
        0.82
      )
    );

  pointer-events:
    none;
}


.theme-photo-card > span {
  position:
    absolute;

  z-index:
    2;

  left:
    0;

  right:
    0;

  bottom:
    0;

  padding:
    15px 16px;

  color:
    #ffffff;

  font-size:
    12px;

  font-weight:
    700;

  text-align:
    left;
}


.photo-wide {
  grid-column:
    span 2;
}


.photo-tall {
  grid-row:
    span 2;
}



/* =========================================================
   PACKAGES
========================================================= */

.bd-packages {
  background:
    #fffaf2;
}


.bd-package-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    18px;

  align-items:
    start;
}


.bd-package-card {
  overflow:
    hidden;

  border:
    1px solid
    #e7dac9;

  border-radius:
    14px;

  background:
    #ffffff;

  box-shadow:
    0 12px 32px
    rgba(
      16,
      34,
      64,
      0.07
    );
}


.bd-package-preview {
  display:
    block;

  width:
    100%;

  padding:
    0;

  border:
    0;

  background:
    #ffffff;

  cursor:
    zoom-in;
}


.bd-package-preview img {
  display:
    block;

  width:
    100%;

  height:
    220px;

  object-fit:
    cover;

  object-position:
    top;
}


.bd-package-preview span {
  display:
    block;

  padding:
    12px;

  background:
    #f1f5fc;

  color:
    #102240;

  font-size:
    13px;

  font-weight:
    700;

  text-align:
    center;
}


.bd-package-card >
.bd-btn {
  display:
    flex;

  min-height:
    40px;

  margin:
    12px;

  padding:
    10px;

  font-size:
    12px;
}



/* =========================================================
   SERVICES
========================================================= */

.bd-services {
  background:

    linear-gradient(
      #102240e8,
      #102240ed
    ),

    url("../birthday/hero-2.png")
    center
    /
    cover;

  color:
    #ffffff;
}


.bd-services .bd-kicker {
  color:
    #ffdc56;
}


.bd-services-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    24px;
}


.bd-service {
  padding-top:
    22px;

  border-top:
    1px solid
    #ffffff50;
}


.bd-service h3 {
  font-size:
    24px;
}


.bd-service p {
  color:
    #d3dce9;

  font-size:
    14px;
}



/* =========================================================
   CTA
========================================================= */

.bd-cta {
  background:

    linear-gradient(
      #102240b8,
      #102240d9
    ),

    url("../birthday/hero-1.png")
    center
    /
    cover;

  color:
    #ffffff;

  text-align:
    center;
}


.bd-cta
.bd-actions {
  justify-content:
    center;
}


.bd-cta
.bd-kicker {
  color:
    #ffdc56;
}


.bd-cta p {
  max-width:
    590px;

  margin-inline:
    auto;
}



/* =========================================================
   LIGHTBOX
========================================================= */

.bd-lightbox {
  box-sizing:
    border-box;

  position:
    fixed;

  inset:
    0;

  width:
    min(
      1000px,
      94vw
    );

  max-height:
    92svh;

  margin:
    auto;

  padding:
    16px;

  overflow:
    auto;

  border:
    0;

  border-radius:
    18px;

  background:
    #102240;

  color:
    #ffffff;
}


.bd-lightbox::backdrop {
  background:
    #000000dd;
}


.bd-lightbox img {
  display:
    block;

  width:
    auto;

  height:
    auto;

  max-width:
    100%;

  max-height:
    76svh;

  margin-inline:
    auto;

  border-radius:
    12px;

  object-fit:
    contain;
}


.bd-close {
  display:
    block;

  margin:
    0 0 12px auto;

  padding:
    11px 17px;

  border:
    0;

  border-radius:
    24px;

  background:
    #ffffff;

  color:
    #102240;

  font-weight:
    700;

  cursor:
    pointer;
}


.bd-caption {
  margin:
    14px 0 3px;

  text-align:
    center;
}



/* =========================================================
   SOCIAL ICONS POSITION
========================================================= */

/*
social-links.css gives the design.
Here we only control placement so it doesn't overlap WhatsApp.
*/

.birthday-page
.social-rail {
  position:
    fixed !important;

  right:
    18px !important;

  bottom:
    104px !important;

  z-index:
    46 !important;
}



/* =========================================
   WHATSAPP BUTTON - FINAL FIX
========================================= */

.birthday-page .family-wa-float {
  position: fixed;

  right: 18px;
  bottom: 18px;

  z-index: 45;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: auto;
  min-width: 135px;
  height: 50px;

  padding: 0 18px;

  border-radius: 999px;

  background: #087b45;
  color: #ffffff;

  font-size: 14px;
  font-weight: 700;

  text-decoration: none;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.22);
}


/* SOCIAL ICONS ABOVE WHATSAPP */

.birthday-page .social-rail {
  position: fixed !important;

  right: 18px !important;

  bottom: 92px !important;

  z-index: 46 !important;
}


/* MOBILE */

@media (max-width: 600px) {

  .birthday-page .family-wa-float {
    right: 12px;
    bottom: 12px;

    min-width: 120px;
    height: 46px;

    padding: 0 15px;

    font-size: 13px;
  }

  .birthday-page .social-rail {
    right: 12px !important;
    bottom: 74px !important;
  }

}

/* =========================================================
   TABLET
========================================================= */

@media
(max-width: 900px) {


  .bd-intro {
    grid-template-columns:
      1fr;

    gap:
      35px;
  }


  .bd-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .theme-gallery-heading {
    grid-template-columns:
      1fr;

    gap:
      15px;
  }


  .theme-gallery-heading > span {
    grid-column:
      auto;

    margin-bottom:
      0;
  }


  .theme-gallery-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    grid-auto-rows:
      200px;
  }


  .bd-package-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .bd-services-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media
(max-width: 600px) {


  .bd-wrap {
    width:
      calc(
        100% - 26px
      );
  }


  .bd-section {
    padding:
      60px 0;
  }


  /* HERO */

  .bd-hero {
    min-height:
      710px;

    height:
      100svh;
  }


  .bd-hero h1 {
    font-size:
      44px;
  }


  .bd-hero p {
    font-size:
      15px;
  }


  .bd-hero-content {
    padding-top:
      80px;

    padding-bottom:
      65px;
  }


  /* FILTER */

  .bd-tabs {
    display:
      grid;

    grid-template-columns:
      repeat(
        3,
        1fr
      );

    gap:
      7px;
  }


  .bd-tabs button {
    padding:
      11px 5px;

    font-size:
      11px;
  }


  /* EXISTING THEME CARDS */

  .bd-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      10px;
  }


  .bd-card {
    padding:
      18px 13px;
  }


  .bd-card h3 {
    font-size:
      20px;
  }


  .bd-card a {
    display:
      block;

    font-size:
      11px;

    line-height:
      1.5;
  }


  .bd-icon {
    width:
      58px;

    height:
      58px;

    margin-bottom:
      15px;

    font-size:
      32px;
  }


  /* PHOTO GALLERY */

  .theme-photo-gallery {
    margin-top:
      55px;

    padding-top:
      40px;
  }


  .girls-photo-gallery {
    padding:
      40px 10px 10px;
  }


  .theme-gallery-heading h3 {
    font-size:
      34px;
  }


  .theme-gallery-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    grid-auto-rows:
      150px;

    gap:
      8px;
  }


  .photo-wide {
    grid-column:
      span 2;
  }


  .photo-tall {
    grid-row:
      span 2;
  }


  .theme-photo-card {
    border-radius:
      13px;
  }


  .theme-photo-card > span {
    padding:
      10px;

    font-size:
      10px;
  }


  /* PACKAGES */

  .bd-package-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      10px;
  }


  .bd-package-preview img {
    height:
      165px;
  }


  .bd-package-preview span {
    padding:
      9px 5px;

    font-size:
      11px;
  }


  .bd-package-card >
  .bd-btn {
    margin:
      8px;

    padding:
      8px 5px;

    font-size:
      10px;
  }


  /* SERVICES */

  .bd-services-grid {
    grid-template-columns:
      1fr;
  }


  /* SOCIAL ICONS */

  .birthday-page
  .social-rail {
    right:
      12px !important;

    bottom:
      80px !important;
  }


  /* WHATSAPP */

  .birthday-page
  .family-wa-float {
    right:
      12px;

    bottom:
      12px;

    min-width:
      142px;

    min-height:
      50px;

    padding:
      10px 17px;

    font-size:
      14px;
  }


}



/* =========================================================
   ACCESSIBILITY
========================================================= */

.bd-main :focus-visible,
.bd-lightbox :focus-visible {
  outline:
    3px solid
    #e78300;

  outline-offset:
    4px;
}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media
(prefers-reduced-motion: reduce) {

  .bd-main * {
    transition:
      none !important;
  }

}