:root {
      --first-color: #f5b81e;        /* RIK logo gold */
      --first-color-dark: #d99a00;
      --first-color-light: #ffd86b;
      --black-color: hsl(0, 0%, 0%);
      --white-color: hsl(0, 0%, 95%);
      --title-color: hsl(0, 0%, 0%);
      --text-color: hsl(0, 0%, 35%);
      --soft-bg: hsl(0, 0%, 96%);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Poppins', sans-serif;
      color: #000;
      background: #fff;
      line-height: 1.6;
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      display: block;
    }

    .container {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ====================== BANNER / HERO (shared style) ====================== */
    .hero {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .banner {
      height: 78vh;
      min-height: 460px;
      background: url('../img/birthday-gallery/gal7.webp') center/cover no-repeat;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.38));
    }

    .banner::before {
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.25));
    }

    .hero__inner {
      position: relative;
      z-index: 2;
      color: #fff;
      padding: 0 20px;
      animation: fadeUp 1.1s ease both;
    }

    .site-logo {
      position: absolute;
      top: 22px;
      left: 32px;
      z-index: 5;
    }

    .site-logo img {
      height: 120px;
      width: auto;
    }

    @media (max-width: 600px) {
      .site-logo { top: 16px; left: 18px; }
      .site-logo img { height: 58px; }
    }

    .hero__script {
      font-size: 18px;
      letter-spacing: 1px;
      font-weight: 400;
      color: #fff;
      margin-bottom: 10px;
    }

    .hero__title {
      font-size: clamp(2.2rem, 6vw, 4.5rem);
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.1;
      text-transform: capitalize;
      background: linear-gradient(135deg, var(--first-color-light), var(--first-color), var(--first-color-dark));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    .hero__text {
      max-width: 680px;
      margin: 20px auto 0;
      font-size: clamp(1rem, 2vw, 1.2rem);
      font-weight: 400;
      line-height: 1.6;
      color: #f3f3f3;
    }

    /* ====================== SECTIONS ====================== */
    .section {
      padding: 80px 0;
    }

    .section--soft {
      background: #f6f6f6;
    }

    /* confetti / particle rain overlay */
    .confetti-section {
      position: relative;
      overflow: hidden;
    }

    .confetti-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    .confetti-section > .container {
      position: relative;
      z-index: 1;
    }

    .section__heading {
      text-align: center;
      margin-bottom: 50px;
    }

    .section__heading .sub {
      display: block;
      font-size: 18px;
      letter-spacing: 1px;
      color: var(--first-color);
      font-weight: 500;
      margin-top: 12px;
    }

    .section__heading h2 {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(1.75rem, 4vw, 3rem);
      font-weight: 600;
      text-transform: capitalize;
      letter-spacing: -0.02em;
      color: #000;
      position: relative;
      display: inline-block;
    }

    .section__heading h2::after {
      content: "";
      display: block;
      width: 70px;
      height: 4px;
      border-radius: 4px;
      background: var(--first-color);
      margin: 16px auto 0;
    }

    .section__heading p {
      max-width: 720px;
      margin: 30px auto 0;
      font-size: clamp(0.938rem, 1.4vw, 1rem);
      line-height: 1.7;
      color: var(--text-color);
    }

    /* ====================== INTRO (left heading / right content) ====================== */
    .intro-split {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 50px;
      align-items: center;
    }

    .intro-split h2 {
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 600;
      text-transform: capitalize;
      letter-spacing: -0.02em;
      line-height: 1.2;
      color: #000;
      position: relative;
    }

    .intro-split h2::after {
      content: "";
      display: block;
      width: 70px;
      height: 4px;
      border-radius: 4px;
      background: var(--first-color);
      margin-top: 18px;
    }

    .intro-split p {
      font-size: clamp(0.95rem, 1.5vw, 1.05rem);
      line-height: 1.9;
      color: #000;
    }

    /* ====================== SERVICES AUTO CAROUSEL ====================== */
    .svc-carousel {
      overflow: hidden;
    }

    .svc-track {
      display: flex;
      gap: 26px;
      width: max-content;
      padding: 12px 0 18px;
      animation: marquee 60s linear infinite;
    }

    .svc-carousel:hover .svc-track {
      animation-play-state: paused;
    }

    @keyframes marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .svc-card {
      flex: 0 0 300px;
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      transition: transform 0.4s, box-shadow 0.4s;
    }

    .svc-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 22px 44px rgba(217, 154, 0, 0.28);
    }

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

    .svc-card .card-body {
      padding: 24px 22px;
      border-top: 3px solid var(--first-color);
    }

    .svc-card h3 {
      font-size: 1.2rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      color: var(--title-color);
      margin-bottom: 10px;
    }

    .svc-card p {
      font-size: 0.92rem;
      line-height: 1.6;
      color: var(--text-color);
    }

    /* ====================== GALLERY (same as marriage) ====================== */
    /* minimal decorative floating elements (left & right gutters) */
    .gallery-section {
      position: relative;
      overflow: hidden;
    }

    .floaties {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 150px;
      pointer-events: none;
      z-index: 0;
    }

    .floaties--left { left: 0; }
    .floaties--right { right: 0; }

    .gallery-section > .container { position: relative; z-index: 1; }

    .floaty {
      position: absolute;
      width: 34px;
      height: 34px;
      fill: var(--first-color);
      opacity: 0.7;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
      animation: floaty-bob 7s ease-in-out infinite;
    }

    .floaties--left .f1  { top: 8%;  left: 40px;  width: 38px; opacity: 0.8;  animation-delay: 0s;   animation-duration: 6.5s; }
    .floaties--left .f2  { top: 28%; left: 90px;  width: 26px; opacity: 0.6;  animation-delay: 1.4s; animation-duration: 8s; }
    .floaties--left .f3  { top: 48%; left: 30px;  width: 30px; opacity: 0.7;  animation-delay: 2.6s; animation-duration: 7.2s; }
    .floaties--left .f4  { top: 68%; left: 80px;  width: 20px; opacity: 0.55; animation-delay: 0.7s; animation-duration: 6.8s; }
    .floaties--left .f5  { top: 86%; left: 44px;  width: 28px; opacity: 0.65; animation-delay: 3.4s; animation-duration: 7.6s; }

    .floaties--right .f1 { top: 10%; right: 44px; width: 26px; opacity: 0.6;  animation-delay: 0.8s; animation-duration: 7.4s; }
    .floaties--right .f2 { top: 30%; right: 32px; width: 38px; opacity: 0.8;  animation-delay: 2s;   animation-duration: 6.6s; }
    .floaties--right .f3 { top: 52%; right: 92px; width: 22px; opacity: 0.55; animation-delay: 3.2s; animation-duration: 8s; }
    .floaties--right .f4 { top: 70%; right: 40px; width: 30px; opacity: 0.7;  animation-delay: 1.1s; animation-duration: 7s; }
    .floaties--right .f5 { top: 88%; right: 84px; width: 24px; opacity: 0.6;  animation-delay: 2.8s; animation-duration: 7.8s; }

    @keyframes floaty-bob {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50%      { transform: translateY(-22px) rotate(12deg); }
    }

    @media (max-width: 768px) {
      .floaties { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .floaty { animation: none; }
    }

    .gallery-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    .gallery-item {
      flex: 1 1 calc(33.333% - 11px);
      min-width: 240px;
      height: 260px;
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      cursor: pointer;
    }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }

    .gallery-item:hover img {
      transform: scale(1.08);
    }

    /* hover overlay + search icon */
    .gallery-item::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(90, 90, 90, 0.45);
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 2;
      pointer-events: none;
    }

    .gallery-item::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.6);
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #fff;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 28px 28px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f5b81e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
      opacity: 0;
      transition: opacity 0.4s ease, transform 0.4s ease;
      z-index: 3;
      pointer-events: none;
    }

    .gallery-item:hover::before { opacity: 1; }

    .gallery-item:hover::after {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    /* ====================== LIGHTBOX ====================== */
    .lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.92);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .lightbox.open {
      display: flex;
      opacity: 1;
    }

    .lb-figure {
      margin: 0;
      position: relative;
      display: inline-block;
      max-width: 88vw;
      max-height: 84vh;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
      animation: lbZoom 0.3s ease;
    }

    .lightbox img {
      display: block;
      max-width: 88vw;
      max-height: 84vh;
    }

    @keyframes lbZoom {
      from { transform: scale(0.92); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    .lb-close,
    .lb-prev,
    .lb-next {
      position: absolute;
      background: rgba(255, 255, 255, 0.12);
      border: none;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transition: background 0.3s;
    }

    .lb-close:hover,
    .lb-prev:hover,
    .lb-next:hover {
      background: var(--first-color);
    }

    .lb-close {
      top: 24px;
      right: 28px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      font-size: 1.7rem;
    }

    .lb-prev,
    .lb-next {
      top: 50%;
      transform: translateY(-50%);
      width: 56px;
      height: 56px;
      border-radius: 50%;
      font-size: 2.2rem;
    }

    .lb-prev { left: 24px; }
    .lb-next { right: 24px; }

    .lb-counter {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      font-size: 0.95rem;
      letter-spacing: 1px;
    }

    @media (max-width: 560px) {
      .lb-prev, .lb-next { width: 44px; height: 44px; font-size: 1.7rem; }
      .lb-prev { left: 12px; }
      .lb-next { right: 12px; }
      .lb-close { top: 14px; right: 14px; width: 42px; height: 42px; }
    }

    /* ====================== GET IN TOUCH / CTA (banner style) ====================== */
    .contact-cta {
      height: 70vh;
      min-height: 420px;
      background: url('../img/birthday-gallery/gal4.webp') center/cover no-repeat;
    }

    .contact-cta .hero__inner {
      max-width: 820px;
    }

    .contact-cta .tagline {
      font-size: 18px;
      letter-spacing: 1px;
      color: #ffe9c7;
      margin-bottom: 12px;
    }

    .contact-cta h2 {
      font-size: clamp(1.8rem, 4.5vw, 3rem);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      background: linear-gradient(135deg, var(--first-color-light), var(--first-color), var(--first-color-dark));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      margin-bottom: 20px;
    }

    .contact-cta p {
      margin: 0 auto 30px;
      font-size: clamp(0.95rem, 1.6vw, 1.1rem);
      line-height: 1.7;
      color: #f1f1f1;
    }

    .contact-cta .phones {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 18px;
    }

    .contact-cta .phones a {
      display: inline-block;
      border: 2px solid #fff;
      border-radius: 0.75rem;
      padding: 12px 30px;
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      font-size: 1.1rem;
      transition: background 0.4s, color 0.4s, transform 0.3s;
    }

    .contact-cta .phones a:hover {
      background: var(--first-color);
      border-color: var(--first-color);
      color: #1a1a1a;
      transform: translateY(-3px);
    }

    /* mobile: let the CTA grow with its content so nothing gets cut */
    @media (max-width: 600px) {
      .contact-cta {
        height: auto;
        min-height: 0;
        padding: 64px 0;
      }
      .contact-cta .phones {
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }
      .contact-cta .phones a {
        width: 100%;
        max-width: 280px;
        text-align: center;
        padding: 12px 20px;
        font-size: 1rem;
      }
    }

    /* ====================== ANIMATIONS ====================== */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .reveal {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.9s ease, transform 0.9s ease;
    }

    .reveal.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    /* ====================== FOOTER (matches index.html) ====================== */
    .footer-marraige {
      background-color: #000;
      color: #fff;
      padding: 14px 0 28px;
      margin-top: 0;
      text-align: center;
    }

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .footer-logo img {
      max-width: 100px; margin: -14px 0 -10px;
    }

    .footer-menu {
      margin-bottom: 10px;
    }

    .footer-menu ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .footer-menu ul li {
      margin: 0 15px;
    }

    .footer-menu ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 1.2rem;
      transition: color 0.3s;
    }

    .footer-menu ul li a:hover {
      color: rgb(252, 198, 28);
    }

    .footer-contact {
      padding-bottom: 0;
    }

    .footer-contact p {
      margin: 5px 0;
      font-size: 1.1rem;
    }

    .footer-contact p:last-child {
      margin-bottom: 0;
    }

    @media (max-width: 600px) {
      .footer-logo img { max-width: 120px; }
      .footer-menu ul li { flex: 1 1 100%; margin: 10px 0; }
      .footer-menu ul li a { font-size: 1rem; }
      .footer-contact p { font-size: 1rem; }
    }

    /* ====================== RESPONSIVE ====================== */
    @media (max-width: 880px) {
      .intro-split { grid-template-columns: 1fr; gap: 24px; }
    }

    @media (max-width: 560px) {
      .section { padding: 60px 0; }
    }
    /* ===== about-style page chrome: back / mail / social / location ===== */
    .page-back {
      position: absolute;
      top: 116px;
      left: 40px;
      width: 48px;
      height: 48px;
      overflow: hidden;
      display: block;
      cursor: pointer;
      z-index: 4003;
      transition: all 200ms linear;
    }
    .page-back::before,
    .page-back::after {
      content: '';
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background: url('../img/arrow.svg') center center / 48px 48px no-repeat;
      transition: all 200ms linear;
    }
    .page-back::before { left: 0; opacity: 1; }
    .page-back::after  { left: 100%; opacity: 0; }
    .page-back:hover::before { left: -100%; opacity: 0; }
    .page-back:hover::after  { left: 0; opacity: 1; }

    .page-mail {
      position: absolute;
      top: 32px;
      right: 40px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      text-decoration: none;
      z-index: 4003;
    }
    .page-mail__txt {
      font-size: 14px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    .page-mail__icon { display: inline-flex; animation: chrome-pulse 1s linear infinite; }
    .page-mail:hover { color: var(--first-color); }

    @keyframes chrome-pulse {
      0%   { transform: scale(1); }
      50%  { transform: scale(0.9); }
      100% { transform: scale(0.95); }
    }

    .page-social {
      position: fixed;
      bottom: 30px;
      left: 20px;
      writing-mode: vertical-lr;
      z-index: 3001;
    }
    .page-social a {
      position: relative;
      display: inline-block;
      margin: 10px 0;
      padding: 5px 3px;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 1px;
      color: #000;
      text-decoration: none;
      transition: all .3s linear;
    }
    .page-social a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 3px;
      height: 100%;
      z-index: -1;
      background: linear-gradient(45deg, #0947db, #07d89d);
      transition: all .3s linear;
    }
    .page-social a:nth-child(2)::after { background: linear-gradient(45deg, #ee2d29, #f8ae2c); }
    .page-social a:nth-child(3)::after { background: linear-gradient(45deg, #3a3d98, #6f22b9); }
    .page-social a:hover::after { width: 100%; }

    .page-location {
      position: fixed;
      bottom: 30px;
      right: 25px;
      writing-mode: vertical-lr;
      transform: rotate(180deg);
      z-index: 3001;
    }
    .page-location p {
      position: relative;
      margin: 0;
      padding-top: 35px;
      font-size: 13px;
      line-height: 20px;
      letter-spacing: 1px;
      color: #000;
    }
    .page-location p::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      background: url('../img/pin.svg') left center / 20px 20px no-repeat;
      filter: brightness(0);
      transform: rotate(90deg);
    }

    @media (max-width: 991px) {
      .page-back { top: 20px; left: 50%; margin-left: -24px; }
    }
    @media (max-width: 767px) {
      .page-mail__txt { display: none; }
    }
    @media (max-width: 575px) {
      .page-social, .page-location { display: none; }
    }
/* content paragraphs use Lora */
p, li, .btn, .phones a { font-family: 'Lora', serif; }