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

        body {
            font-family: 'Old Standard TT', serif;
            background: white;
        }

        .font-old-standard { font-family: 'Old Standard TT', serif; }
        .font-raleway { font-family: 'Raleway', sans-serif; }
        .font-seaweed { font-family: 'Seaweed Script', cursive; }

        /* Navbar */
        .navbar {
            position: sticky;
            top: 0;
            background: white;
            width: 100%;
            z-index: 100;
            
        }
        .navbar-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px 30px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .navbar-title {
            text-align: center;
            font-family: 'Old Standard TT', serif;
            font-weight: 700;
            font-size: 40px;
            color: black;
            line-height: 1;
        }
        .navbar-links {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
        }
        .navbar-links a {
            font-family: 'Old Standard TT', serif;
            font-weight: 700;
            font-size: 16px;
            color: black;
            text-decoration: none;
            transition: opacity 0.3s ease;
        }
        .navbar-links a:hover { opacity: 0.7; }

        /* Hero Section */
        .hero-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;          /* side margins */
        }
        .hero-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 50%;      /* 600/1200 = 0.5, keeps aspect ratio */
            background: white;
            overflow: hidden;
        }
        .hero-landscape {
            position: absolute;
            top: 0;
            right: 0;
            width: 42%;
            height: 100%;
            background: #C4C4C4;
            z-index: 1;
        }
        .hero-couple {
            position: absolute;
            top: 0;
            left: 0;
            width: 60%;
            height: 100%;
            z-index: 2;
        }
        .hero-couple img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .hero-content {
            position: absolute;
            right: 5%;
            top: 50%;
            transform: translateY(-50%);
            text-align: right;
            z-index: 10;
            color: white;
        }
        .hero-main-text {
            font-family: 'Old Standard TT', serif;
            font-weight: 700;
            font-size: 70px;
            color: #45332D;
            line-height: 1;
            margin-bottom: 20px;
            text-align: right;
        }
        .hero-location {
            font-family: 'Raleway', sans-serif;
            font-weight: 700;
            font-size: 25px;
            line-height: 1;
            margin-bottom: 15px;
            text-align: right;
            white-space: pre-line;
        }
        .hero-date {
            font-family: 'Seaweed Script', cursive;
            font-weight: 400;
            font-size: 35px;
            text-align: right;
            line-height: 1;
        }

        /* Gallery Section – desktop/tablet */
        .gallery-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;   /* added to match hero-wrapper */
        }
        .gallery-container {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 68%;  /* 677/1200 = 0.564167 */
            background: #2F1A14;
            overflow: hidden;
        }
        .gallery-image {
            position: absolute;
            overflow: hidden;
            border-radius: 4px;
            height: 0;
        }
        .gallery-image img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Positions in % */
        .img-1 {
            left: 2.5%; top: 10.04%;
            width: 17.6667%; padding-top: 16.3333%;
        }
        .img-2 {
            left: 21.6667%; top: 10.04%;
            width: 17.8333%; padding-top: 24.6667%;
        }
        .img-3 {
            left: 41.1667%; top: 10.04%;
            width: 17.5833%; padding-top: 33.25%;
        }
        .img-4 {
            left: 60.25%; top: 10.04%;
            width: 17.8333%; padding-top: 24.6667%;
        }
        .img-5 {
            left: 79.5833%; top: 10.04%;
            width: 17.6667%; padding-top: 16.3333%;
        }

        .gallery-title {
            position: absolute;
            left: 2.5%; top: 69.87%;
            font-family: 'Old Standard TT', serif;
            font-weight: 700;
            font-size: 70px;
            color: white;
            line-height: 1;
        }
        .gallery-text {
            position: absolute;
            left: 62.833%; top: 69%;
            width: 34%;
            font-family: 'Old Standard TT', serif;
            font-weight: 400;
            font-size: 20px;
            color: white;
            line-height: 1.4;
            text-align: left;
            top: 58%;
        }
        .story-paragraph {
    /* Keep existing overflow-y: auto */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}

.story-paragraph::-webkit-scrollbar {
    display: none;                  /* Chrome, Safari, newer Edge */
}

        /* ---------- OUR STORY (final) ---------- */
.our-story-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  margin-top: 60px;
}

.our-story-container {
  position: relative;
  width: 100%;
}
/* Decorative heading above Our Story section */
.story-section-heading {
  text-align: center;
  font-family: 'Seaweed Script', cursive;
  font-weight: 400;
  font-size: 50px;              /* adjust as you like */
  color: #2F1A14;               /* matches the brown box */
  margin-bottom: 30px;          /* space between heading and the image/box */
  position: relative;
  
  width: 100%;
}

/* Underline */
.story-section-heading::after {
  content: '';
  display: block;
  width: 120px;                  /* length of the underline */
  height: 3px;
  background: #2F1A14;
  margin: 5px auto 0;          /* centred, slightly below the text */
  border-radius: 2px;
}


/* ---------- GIVE A GIFT (50/50 split, larger paragraph, two lines) ---------- */
.gift-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  margin-top: 60px;
}

.gift-container {
  position: relative;
  width: 100%;
}

/* ---------- DRESS CODE (50/50 split, side-by-side, no overlap) ---------- */
.dresscode-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  margin-top: 60px;
}

.dresscode-container {
  position: relative;
  width: 100%;
}

/* ---------- CONTACT US ---------- */
.contact-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  margin-top: 60px;
}

.contact-container {
  width: 100%;
}

/* Landscape image container – aspect ratio typical for a photo */
.contact-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%;               /* 2:1 landscape ratio, adjust as needed */
  background-image: url('images/contact.png'); /* replace with your image */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Dark overlay for text readability */
.contact-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);   /* dark semi‑transparent overlay */
  z-index: 1;
}

/* Centred text block */
.contact-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  color: white;
  width: 90%;
  max-width: 635px;
}

.contact-rsvp {
  font-family: 'Old Standard TT', serif;
  font-weight: 700;
  font-size: 45px;
  line-height: 1;
  color: white;
  margin-bottom: 25px;
}

.contact-details {
  font-family: 'Old Standard TT', serif;
  font-weight: 400;
  font-size: 35px;
  line-height: 1.4;
  color: white;
  text-align: center;
}

/* ---------- STICKY FOOTER (Desktop / Tablet) ---------- */
.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
  z-index: 200;
  display: block;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-links {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.footer-links a {
  font-family: 'Old Standard TT', serif;
  font-weight: 700;
  font-size: 15px;
  color: black;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.footer-links a:hover {
  opacity: 0.7;
}

.footer-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.footer-whatsapp:hover {
  opacity: 0.75;
}

/* Hide footer on mobile */
@media (max-width: 768px) {
  .footer-bar {
    display: none;
  }
}

/* ---------- FLOATING WHATSAPP (Mobile only) ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

/* Hide floating icon on desktop / tablet */
@media (min-width: 769px) {
  .whatsapp-float {
    display: none;
  }
  .contact-wrapper {
    margin-bottom: 90px;   /* footer height + extra breathing space */
  }
}

/* ---------- MOBILE ---------- */
/* ---------- MOBILE CONTACT FIX ---------- */
@media (max-width: 768px) {
  .contact-image {
    padding-bottom: 66.67%;
  }

  /* Allow the text block to use the full screen width */
  .contact-content {
    width: 100%;
    max-width: none;
    padding: 0 10px;
    box-sizing: border-box;
  }

  /* RSVP scales with screen width – never cut off */
  .contact-rsvp {
    font-size: 7vw;           /* e.g., 22px on 320px, 28px on 400px */
    margin-bottom: 15px;
    line-height: 1.1;
  }

  /* Each contact line stays on one line */
  .contact-details {
    font-size: 4.2vw;         /* ~13.4px on 320px, 16.8px on 400px */
    line-height: 1.4;
    white-space: nowrap;      /* prevent line breaks inside each contact */
  }
    body {
    padding-bottom: 90px;     /* space for the floating WhatsApp button */
  }
}

/* ---- DESKTOP & TABLET (≥769px) ---- */
@media (min-width: 769px) {
  .dresscode-container {
    height: 0;
    padding-bottom: 50%;               /* square-ish, same height as image */
  }

  /* Image – right half */
  .dresscode-image {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }

  .dresscode-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Grey box – left half, same height */
  .dresscode-text-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: #F1F1F1;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;                /* centre horizontally */
    justify-content: center;
    padding: 8%;
    box-sizing: border-box;
  }

  .dresscode-heading {
    font-family: 'Old Standard TT', serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 1;
    color: #2F1A14;
    text-align: center;
    margin-bottom: 30px;
  }

  .dresscode-inner-img {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* ---- MOBILE (<769px) – still 50/50 side‑by‑side ---- */
@media (max-width: 768px) {
  .dresscode-container {
    height: 0;
    padding-bottom: 75%;               /* slightly taller for mobile */
  }

  .dresscode-image {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }

  .dresscode-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dresscode-text-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: #F1F1F1;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
  }

  .dresscode-heading {
    font-family: 'Old Standard TT', serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    color: #2F1A14;
    margin-bottom: 15px;
    text-align: center;
  }

  .dresscode-inner-img {
    max-width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* ---- DESKTOP & TABLET (≥769px) ---- */
@media (min-width: 769px) {
  .gift-container {
    height: 0;
    padding-bottom: 50%;       /* square-ish aspect ratio – tall enough for content */
  }

  .gift-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    
  }

  .gift-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* back to cover – no gaps */
  object-position: 50% 25%;     /* move focal point up (head area visible) */
}
  .gift-text-box {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: #C4C4C4;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;          /* right‑align all content */
    padding: 8% 8%;
    box-sizing: border-box;
  }

  .gift-heading {
    font-family: 'Old Standard TT', serif;
    font-weight: 700;
    font-size: 70px;
    line-height: 1;
    color: #2F1A14;
    text-align: right;
    margin-bottom: 30px;
  }

  .gift-subtitle {
    font-family: 'Old Standard TT', serif;
    font-weight: 400;
    font-size: 28px;                /* larger, so it wraps into two lines */
    line-height: 1.3;
    color: #333;
    text-align: right;
    max-width: 90%;                 /* controls the text width */
    margin-bottom: 40px;
    word-wrap: break-word;
  }

  .gift-button {
    display: inline-block;
    background: #2F1A14;
    color: white;
    font-family: 'Old Standard TT', serif;
    font-weight: 700;
    font-size: 22px;
    text-decoration: none;
    border-radius: 100px;
    padding: 16px 48px;
    transition: opacity 0.3s ease;
    text-align: center;
  }

  .gift-button:hover {
    opacity: 0.85;
  }
}

/* ---- MOBILE (<769px) – still 50/50 side‑by‑side ---- */
@media (max-width: 768px) {
  .gift-container {
    height: 0;
    padding-bottom: 75%;           /* slightly taller on mobile */
  }

  .gift-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }

  .gift-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gift-text-box {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: #C4C4C4;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 12px 12px;
    box-sizing: border-box;
  }

  .gift-heading {
    font-family: 'Old Standard TT', serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    color: #2F1A14;
    text-align: right;
    margin-bottom: 12px;
  }

  .gift-subtitle {
    font-family: 'Old Standard TT', serif;
    font-weight: 400;
    font-size: 15px;               /* slightly larger for readability */
    line-height: 1.3;
    color: #333;
    text-align: right;
    max-width: 95%;
    margin-bottom: 20px;
    word-wrap: break-word;
  }

  .gift-button {
    display: inline-block;
    background: #2F1A14;
    color: white;
    font-family: 'Old Standard TT', serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border-radius: 100px;
    padding: 12px 28px;
    transition: opacity 0.3s ease;
  }

  .gift-button:hover {
    opacity: 0.85;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .story-section-heading {
    font-size: 40px;
    margin-bottom: 20px;
  }
}

/* ---------- DESKTOP / TABLET ---------- */
@media (min-width: 769px) {
  .our-story-container {
    /* Image height = 55% width × 1.0425 aspect ratio ≈ 57.34% of container width */
    height: 0;
    padding-bottom: 57.34%;
  }

  /* Image fills left side, same height as container */
  .story-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 55%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }

  .story-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Text box: exactly image height + 6px, centred vertically */
  .story-text-box {
    position: absolute;
    right: 0;
    top: -15px;                     /* 3px above the image */
    height: calc(100% + 30px);      /* 6px taller than the container (image height) */
    width: 57%;
    background: #2F1A14;
    color: white;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5% 6%;
    box-sizing: border-box;
  }

  .story-heading {
    font-family: 'Old Standard TT', serif;
    font-weight: 700;
    font-size: 70px;
    line-height: 1;
    text-align: right;
    margin-bottom: 25px;
  }

  .story-paragraph {
    font-family: 'Old Standard TT', serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    text-align: right;
    overflow-y: auto;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
  .our-story-container {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .story-image {
    width: 100%;
    height: auto;
  }

  .story-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .story-text-box {
    width: 100%;
    background: #2F1A14;
    color: white;
    padding: 30px 20px;
    box-sizing: border-box;
  }

  .story-heading {
    font-family: 'Old Standard TT', serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    text-align: right;
    margin-bottom: 20px;
  }

  .story-paragraph {
    font-family: 'Old Standard TT', serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    text-align: right;
  }
}

        /* ---------- MOBILE (< 769px) ---------- */
        @media (max-width: 768px) {
            /* Hero: keep exact same overlapping layout, scaled */
            .hero-container {
                padding-bottom: 66.67%;  /* a bit taller to show more of the image */
            }
            .hero-main-text {
                font-size: 10vw;         /* scales with screen width */
                margin-bottom: 2vw;
            }
            .hero-location {
                font-size: 3.5vw;
                margin-bottom: 1.5vw;
            }
            .hero-date {
                font-size: 5vw;
            }

            /* Gallery: use 3‑column grid as before */
            .gallery-container {
                height: auto;
                padding-bottom: 0;
                padding: 30px 15px;
                display: flex;
                flex-direction: column;
            }
            .gallery-image,
            .gallery-title,
            .gallery-text {
                position: static;
                width: 100% !important;
                height: auto !important;
                padding-top: 0 !important;
                left: auto !important;
                top: auto !important;
            }
            .gallery-images-grid {
                display: flex;
                gap: 10px;
                justify-content: space-between;
            }
            .gallery-col {
                display: flex;
                flex-direction: column;
                gap: 10px;
                flex: 1;
            }
            .gallery-col img {
                width: 100%;
                height: auto;
                object-fit: cover;
                border-radius: 4px;
                display: block;
            }
            .gallery-col-2 .img-mid {
                height: 70vw;
                object-fit: cover;
            }
            .gallery-info {
                display: flex;
                justify-content: space-between;
                margin-top: 30px;
                gap: 20px;
            }
            .gallery-title-mobile {
                font-family: 'Old Standard TT', serif;
                font-weight: 700;
                font-size: 40px;
                color: white;
                line-height: 1;
            }
            .gallery-text-mobile {
                font-family: 'Old Standard TT', serif;
                font-weight: 400;
                font-size: 16px;
                color: white;
                line-height: 1.4;
                flex: 1;
                text-align: left;
            }
            /* Hide desktop text versions */
            .gallery-title,
            .gallery-text {
                display: none;
            }
            /* Desktop grid images hidden on mobile */
            .gallery-image {
                display: none;
            }
        }

        /* Tablet: keep same as laptop, just scale fonts a bit */
        @media (min-width: 769px) and (max-width: 1024px) {
            .hero-main-text {
                font-size: 55px;
            }
            .hero-location {
                font-size: 20px;
            }
            .hero-date {
                font-size: 28px;
            }
        }