/* Focused responsive fixes */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* Keep full navigation horizontal and centered */
.nav-section { text-align: center; }
.nav-section .col-sm-12 { text-align: center; }
.nav-section .navbar {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
}
.nav-section .navbar-nav,
.nav-section .nav.navbar-nav {
  float: none !important;
  width: auto !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
.nav-section .navbar-nav > li,
.nav-section .nav.navbar-nav > li {
  float: none !important;
  display: inline-block !important;
  width: auto !important;
  vertical-align: top !important;
}
.nav-section .navbar-nav > li > a,
.nav-section .nav.navbar-nav > li > a {
  display: block !important;
  white-space: nowrap !important;
}
#nav-mobile-btn {
  display: none !important;
}

/* Keep horizontal menu on smaller screens too */
@media (max-width: 991px) {
  .nav-section .col-sm-12 {
    display: block !important;
    text-align: center !important;
  }

  .nav-section .navbar {
    display: flex !important;
    justify-content: center !important;
  }

  .nav-section .navbar-nav,
  .nav-section .nav.navbar-nav {
    width: auto !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    display: inline-flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  .nav-section .nav.navbar-nav > li,
  .nav-section .navbar-nav > li,
  .nav-section .navbar > a.btn {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
  }

  .nav-section .navbar-nav > li > a,
  .nav-section .nav.navbar-nav > li > a {
    white-space: nowrap !important;
  }

  #nav-mobile-btn {
    display: none !important;
  }
}

/* Allow the menu to wrap before it ever stacks */
@media (max-width: 767px) {
  .nav-section .navbar-nav,
  .nav-section .nav.navbar-nav {
    flex-wrap: wrap !important;
  }
}

/* General layout safety */
@media (max-width: 991px) {
  .page-header { padding: 42px 0 36px; }
  .page-title { font-size: 2.2rem; }
  .hero-title { font-size: 2.5rem !important; line-height: 1.2; }
  .hero-subtitle { font-size: 1rem; }
  .element-v2,
  .overflow-image-wrapper,
  .overflow-image,
  .overflow-image-text {
    display: block !important;
    width: 100% !important;
    float: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    margin: 0 auto 24px !important;
  }
  .element-v2 .image,
  .element-v2 .info,
  .overflow-image img,
  .overflow-image-text {
    width: 100% !important;
    max-width: 100% !important;
  }
  .menu-section .half-img {
    position: relative !important;
    width: 100% !important;
    min-height: 280px;
    height: 280px;
    left: auto !important;
    right: auto !important;
  }
  .menu-section .menu-wrapper {
    margin-left: 0 !important;
    max-width: 100% !important;
    padding-top: 28px !important;
  }
  .timeline .template-1 .date,
  .timeline .template-1 .description,
  .timeline .template-2 .date,
  .timeline .template-2 .description,
  .timeline .template-3 .date,
  .timeline .template-3 .description,
  .timeline .template-4 .date,
  .timeline .template-4 .description,
  .timeline .template-5 .date,
  .timeline .template-5 .description,
  .timeline .template-6 .date,
  .timeline .template-6 .description,
  .timeline .template-7 .date,
  .timeline .template-7 .description,
  .timeline .template-8 .date,
  .timeline .template-8 .description,
  .timeline .template-1 .img,
  .timeline .template-2 .img,
  .timeline .template-3 .img,
  .timeline .template-4 .img,
  .timeline .template-5 .img,
  .timeline .template-6 .img,
  .timeline .template-7 .img,
  .timeline .template-8 .img {
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    text-align: center !important;
  }
  .timeline-gallery-wrapper,
  .form-wrapper,
  .neela-style,
  .info .content {
    max-width: 100%;
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  .page-title { font-size: 1.9rem; }
  .section-title, .section-title-lg { font-size: 1.9rem !important; line-height: 1.25; }
  .hero-title { font-size: 2rem !important; }
  .countdown { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .countdown > div { margin: 5px !important; }
  .form-check-wrapper { display: flex; flex-direction: column; gap: 10px; }
  .wedding-details, .element.bmaid-gmen-color { margin-bottom: 24px; }
  .timeline .year { position: static !important; margin-bottom: 18px; }
  .timeline .template-1, .timeline .template-2, .timeline .template-3, .timeline .template-4,
  .timeline .template-5, .timeline .template-6, .timeline .template-7, .timeline .template-8 {
    padding-left: 0 !important; padding-right: 0 !important;
  }
}

/* Navbar update: keep Wedding Details and Wedding Party as separate top-level links */
.nav-section .navbar-nav > li.dropdown,
.nav-section .navbar-nav > li .caret,
.nav-section .navbar-nav .dropdown-menu {
  display: none !important;
}

.nav-section {
  overflow: visible;
}

.nav-section .navbar-nav > li > a {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Mobile polish */
@media (max-width: 991px) {
  body { overflow-x: hidden !important; }

  #header .nav-section {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #header .nav-logo {
    margin: 0 auto 14px !important;
    display: block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
  }

  .nav-section .navbar-nav,
  .nav-section .nav.navbar-nav {
    gap: 4px 0;
    max-width: 100%;
  }

  .nav-section .navbar-nav > li > a,
  .nav-section .nav.navbar-nav > li > a {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    padding: 10px 12px !important;
  }

  .container,
  .container-fluid {
    max-width: 100% !important;
  }

  .row {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }

  [class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .page-header {
    padding-top: 48px !important;
    padding-bottom: 36px !important;
  }

  .hero-wrapper,
  .hero-wrapper.x-pad {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .section-title,
  .section-title-lg,
  .section-title-xl,
  .page-title,
  .hero-title,
  .timeline_footer .punchline {
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  .invite {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .invite .invite_title .text {
    padding: 52px 28px !important;
  }

  .menu-section .menu-card {
    padding: 28px 18px !important;
    border-width: 12px !important;
  }

  .menu-section .menu-card::before {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
  }

  .menu-section .menu-card::after {
    top: 16px !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
  }

  .owl-carousel .owl-item img,
  .gallery-wrapper img,
  .timeline img,
  .element img,
  .element-v2 img {
    width: 100% !important;
    height: auto !important;
  }

  .map-info-container,
  .gallery-container,
  .timeline,
  .form-wrapper,
  .menu-wrapper,
  .overflow-image-wrapper,
  .overflow-image-text {
    max-width: 100% !important;
  }

  .wedding-gifts li,
  .wedding-details,
  .element,
  .element-v2,
  .comment,
  .form-control,
  .btn {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .nav-section .navbar-nav,
  .nav-section .nav.navbar-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .nav-section .navbar-nav > li,
  .nav-section .nav.navbar-nav > li {
    margin-bottom: 2px !important;
  }

  .nav-section .navbar-nav > li > a,
  .nav-section .nav.navbar-nav > li > a {
    font-size: 0.9rem !important;
    padding: 8px 10px !important;
  }

  .hero-wrapper {
    margin-top: 100px !important;
  }

  .hero-wrapper .hero-title,
  .hero-title {
    font-size: 2.1rem !important;
    line-height: 1.15 !important;
  }

  .hero-wrapper .hero-subtitle,
  .hero-subtitle {
    font-size: 1rem !important;
  }

  .countdown > div {
    min-width: 78px;
  }

  .invite .invite_title {
    font-size: 3.3rem !important;
  }

  .invite .invite_title .text small {
    font-size: 1.1rem !important;
  }

  .overflow-image {
    height: auto !important;
    margin-top: 0 !important;
    bottom: auto !important;
  }

  .half-img {
    min-height: 240px !important;
    height: 240px !important;
    background-position: center center !important;
  }

  .timeline .template-1 .description-wrapper,
  .timeline .template-2 .description-wrapper {
    margin-top: 20px !important;
  }

  .timeline .template-1 .date,
  .timeline .template-2 .date {
    position: static !important;
    margin-bottom: 14px !important;
    text-align: center !important;
  }

  .map-info-container .info-wrapper {
    grid-column: 1 / -1 !important;
    margin-top: 20px !important;
  }

  .form-control,
  input,
  select,
  textarea,
  button,
  .btn {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .nav-section .navbar-nav > li > a,
  .nav-section .nav.navbar-nav > li > a {
    padding: 7px 8px !important;
    font-size: 0.82rem !important;
  }

  .page-title,
  .section-title,
  .section-title-lg,
  .hero-wrapper .hero-title,
  .hero-title {
    font-size: 1.8rem !important;
  }

  .invite .invite_title {
    font-size: 2.7rem !important;
  }

  .invite .invite_title .text {
    padding: 42px 18px !important;
  }

  .menu-section .menu-card {
    padding: 24px 14px !important;
    border-width: 10px !important;
  }
}

/* ===== Mobile rebuild fixes ===== */
.nav-section .navbar-nav > li > a,
.nav-mobile a {
  -webkit-touch-callout: default;
  touch-action: manipulation;
}

@media (max-width: 991px) {
  /* Use the actual mobile menu on phones/tablets */
  .nav-section {
    position: relative !important;
    min-height: 78px !important;
    padding: 8px 0 12px !important;
  }

  .nav-section .nav-logo {
    float: none !important;
    display: inline-block !important;
    margin: 0 auto !important;
    height: 58px !important;
    z-index: 1202;
  }

  .nav-section .navbar,
  .nav-section .navbar-nav,
  .nav-section .nav.navbar-nav {
    display: none !important;
  }

  #nav-mobile-btn {
    display: block !important;
    position: absolute !important;
    right: 14px !important;
    top: 18px !important;
    margin: 0 !important;
    z-index: 1203 !important;
    color: var(--accent) !important;
    background: transparent !important;
  }

  .nav-mobile {
    width: 86vw !important;
    max-width: 360px !important;
    padding: 22px 18px 30px !important;
    z-index: 3000 !important;
  }

  .nav-mobile h2 {
    margin: 10px 0 18px !important;
    font-size: 1.8rem !important;
  }

  .nav-mobile > ul > li {
    margin-bottom: 14px !important;
    padding-left: 0 !important;
  }

  .nav-mobile > ul li > a {
    display: block !important;
    padding: 8px 0 !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }

  /* Cleaner hero/page-header behavior on iPhone */
  .page-header {
    min-height: 280px !important;
    padding: 96px 0 72px !important;
    display: flex !important;
    align-items: center !important;
    background-attachment: scroll !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  .page-header .container,
  .page-header .row,
  .page-header .col {
    width: 100%;
  }

  .page-header .page-title {
    padding-bottom: 18px !important;
    margin-top: 0 !important;
  }

  /* Remove decorative elements that break mobile composition */
  .section-divider-bottom-1::after,
  .section-divider-bottom-2::after,
  .section-divider-top-1::before,
  .section-divider-top-2::before,
  .side-flowers,
  .side-flowers::before,
  .side-flowers::after,
  .side-flowers-light,
  .side-flowers-light::before,
  .side-flowers-light::after,
  .overflow-image.flower::before,
  .form-wrapper.flowers::before,
  .form-wrapper.flowers::after,
  .invite .invite_title .text::before,
  .invite .invite_title .text::after,
  .gallery-container::after {
    display: none !important;
    content: none !important;
  }

  /* Home + details + RSVP image/text blocks */
  .overflow-image-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .overflow-image-text,
  .overflow-image,
  .form-wrapper.overflow,
  .menu-wrapper,
  .menu-section #menu-image.half-img {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .overflow-image,
  .menu-section #menu-image.half-img {
    min-height: 300px !important;
    background-position: center center !important;
    background-size: cover !important;
    border: 0 !important;
  }

  .overflow-image img {
    display: none !important;
  }

  .form-wrapper.overflow {
    margin-bottom: 0 !important;
  }

  /* Save the date card */
  .invite {
    display: flex !important;
    flex-direction: column !important;
    margin: 20px 0 0 !important;
    overflow: hidden !important;
  }

  .invite .invite_title,
  .invite .invite_info {
    width: 100% !important;
  }

  .invite .invite_title .text {
    padding: 34px 22px !important;
  }

  .invite .invite_info {
    padding: 26px 20px !important;
  }

  /* About timeline rebuilt for phones */
  .timeline {
    overflow: visible !important;
  }

  .timeline .year {
    background: transparent !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
  }

  .timeline .template-1,
  .timeline .template-2,
  .timeline .template-3,
  .timeline .template-4,
  .timeline .template-5,
  .timeline .template-6,
  .timeline .template-7,
  .timeline .template-8 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 34px !important;
  }

  .timeline .template-1 > .date,
  .timeline .template-1 > .description-wrapper,
  .timeline .template-2 > .date,
  .timeline .template-2 > .description-wrapper,
  .timeline .template-3 > .date,
  .timeline .template-3 > .description-wrapper,
  .timeline .template-4 > .date,
  .timeline .template-4 > .description-wrapper,
  .timeline .template-5 > .date,
  .timeline .template-5 > .description-wrapper,
  .timeline .template-6 > .date,
  .timeline .template-6 > .description-wrapper,
  .timeline .template-7 > .date,
  .timeline .template-7 > .description-wrapper,
  .timeline .template-8 > .date,
  .timeline .template-8 > .description-wrapper,
  .timeline .template-2 > .gallery-container,
  .timeline .template-2 > .timeline-gallery-wrapper,
  .timeline .template-2 > .video {
    grid-column: 1 / -1 !important;
  }

  .timeline .template-1 > [class^="image-"],
  .timeline .template-2 > [class^="image-"],
  .timeline .template-3 > [class^="image-"],
  .timeline .template-4 > [class^="image-"],
  .timeline .template-5 > [class^="image-"],
  .timeline .template-6 > [class^="image-"],
  .timeline .template-7 > [class^="image-"],
  .timeline .template-8 > [class^="image-"] {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    transform: none !important;
    margin: 0 !important;
    background: #fff !important;
  }

  .timeline .template-1 > [class^="image-"] img,
  .timeline .template-2 > [class^="image-"] img,
  .timeline .template-3 > [class^="image-"] img,
  .timeline .template-4 > [class^="image-"] img,
  .timeline .template-5 > [class^="image-"] img,
  .timeline .template-6 > [class^="image-"] img,
  .timeline .template-7 > [class^="image-"] img,
  .timeline .template-8 > [class^="image-"] img {
    display: block !important;
    width: 100% !important;
    height: 170px !important;
    object-fit: cover !important;
  }

  .timeline .date {
    position: static !important;
    text-align: center !important;
    margin: 0 !important;
  }

  .timeline .description-wrapper {
    margin: 0 !important;
  }

  .timeline .description,
  .timeline .description .neela-style {
    width: 100% !important;
    max-width: 100% !important;
  }

  .timeline .description .neela-style {
    padding: 22px 16px !important;
  }

  /* Wedding details / party cards */
  .wedding-details {
    margin-bottom: 22px !important;
  }

  .dresscode-mobile-fix {
    margin-top: 28px !important;
  }

  .dresscode-image {
    width: 100% !important;
    display: block !important;
    margin-top: 14px !important;
  }

  .bmaid-gmen-color,
  #bridesmaids-mp .element,
  #groomsmen-mp .element {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .bmaid-gmen-color .image,
  #bridesmaids-mp .element .image,
  #groomsmen-mp .element .image {
    height: 100% !important;
  }

  .bmaid-gmen-color .image img,
  #bridesmaids-mp .element .image img,
  #groomsmen-mp .element .image img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
  }
}

@media (max-width: 575px) {
  .page-header {
    min-height: 240px !important;
    padding: 88px 0 56px !important;
  }

  .overflow-image,
  .menu-section #menu-image.half-img {
    min-height: 240px !important;
  }

  .timeline .template-1,
  .timeline .template-2,
  .timeline .template-3,
  .timeline .template-4,
  .timeline .template-5,
  .timeline .template-6,
  .timeline .template-7,
  .timeline .template-8 {
    grid-template-columns: 1fr !important;
  }

  .bmaid-gmen-color,
  #bridesmaids-mp .element,
  #groomsmen-mp .element {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .bmaid-gmen-color .image img,
  #bridesmaids-mp .element .image img,
  #groomsmen-mp .element .image img {
    height: auto !important;
  }
}

/* Page-specific hero images */
body.page-about .page-header {
  background-image: url('../images/our-story-background-img.jpg') !important;
}
body.page-details .page-header,
body.page-rsvp .page-header {
  background-image: url('../images/invitation-background.jpg') !important;
}
body.page-party .page-header {
  background-image: url('../images/bridesmaids-background.jpg') !important;
}
body.page-gallery .page-header {
  background-image: url('../images/gallery-img3.jpg') !important;
}


/* Desktop/page refinements requested after review */
.page-header {
  min-height: 420px !important;
  padding: 150px 0 120px !important;
  background-position: center center !important;
  background-size: cover !important;
}

.page-header::before {
  opacity: 0.45 !important;
}

body.page-details #bride-groom .overflow-image-wrapper {
  position: relative !important;
  min-height: 540px !important;
}

body.page-details #bride-groom .overflow-content {
  padding-bottom: 130px !important;
}

body.page-details #bride-groom .overflow-image {
  top: 0 !important;
  bottom: 0 !important;
  width: 40% !important;
}

body.page-details .dresscode-mobile-fix {
  position: relative !important;
  z-index: 5 !important;
  clear: both !important;
}

body.page-details .dresscode-image {
  position: relative !important;
  z-index: 1 !important;
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 991px) {
  .page-header {
    min-height: 360px !important;
    padding: 124px 0 92px !important;
  }

  body.page-details #bride-groom .overflow-image-wrapper {
    min-height: 0 !important;
  }

  body.page-details #bride-groom .overflow-content {
    padding-bottom: 70px !important;
  }
}

@media (max-width: 767px) {
  .page-header {
    min-height: 320px !important;
    padding: 108px 0 78px !important;
  }
}

@media (max-width: 575px) {
  .page-header {
    min-height: 300px !important;
    padding: 96px 0 64px !important;
  }
}


/* Final hero visibility fix */
.page-header.section-divider-bottom-1 {
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

.page-header.section-divider-bottom-1::after {
  display: none !important;
  content: none !important;
}

.page-header {
  min-height: 65vh !important;
  padding: 170px 0 140px !important;
  background-position: center center !important;
  background-size: cover !important;
}

.page-header .container,
.page-header .row,
.page-header .col {
  position: relative;
  z-index: 2;
}

body.page-about .page-header { background-position: center 32% !important; }
body.page-details .page-header { background-position: center 30% !important; }
body.page-party .page-header { background-position: center 28% !important; }
body.page-gallery .page-header { background-position: center 34% !important; }
body.page-rsvp .page-header { background-position: center 30% !important; }

@media (max-width: 991px) {
  .page-header {
    min-height: 56vh !important;
    min-height: 500px !important;
    padding: 150px 0 120px !important;
  }
}

@media (max-width: 767px) {
  .page-header {
    min-height: 52vh !important;
    min-height: 440px !important;
    padding: 136px 0 108px !important;
  }

  body.page-about .page-header { background-position: center 30% !important; }
  body.page-details .page-header { background-position: center 26% !important; }
  body.page-party .page-header { background-position: center 24% !important; }
  body.page-gallery .page-header { background-position: center 30% !important; }
  body.page-rsvp .page-header { background-position: center 26% !important; }
}

@media (max-width: 575px) {
  .page-header {
    min-height: 48vh !important;
    min-height: 400px !important;
    padding: 124px 0 96px !important;
  }

  .page-header .page-title {
    font-size: 2.7rem !important;
  }
}


/* ===== Final phone navigation + homepage spacing fixes ===== */
@media (max-width: 991px) {
  /* Keep a visible phone navbar instead of hiding it */
  .nav-section {
    min-height: auto !important;
    padding: 10px 0 8px !important;
  }

  .nav-section .navbar {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .nav-section .navbar-nav,
  .nav-section .nav.navbar-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px 0 !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .nav-section .navbar-nav > li,
  .nav-section .nav.navbar-nav > li {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }

  .nav-section .navbar-nav > li > a,
  .nav-section .nav.navbar-nav > li > a {
    display: block !important;
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  #nav-mobile-btn,
  .nav-mobile {
    display: none !important;
  }
}

@media (max-width: 575px) {
  .nav-section .navbar-nav > li > a,
  .nav-section .nav.navbar-nav > li > a {
    padding: 7px 8px !important;
    font-size: 0.8rem !important;
  }

  /* Tighten homepage vertical spacing on phone */
  .page-home #hero {
    min-height: 72vh !important;
    padding-bottom: 24px !important;
  }

  .page-home .section-divider-bottom-1,
  .page-home .section-divider-bottom-2 {
    padding-bottom: 28px !important;
  }

  .page-home .section-divider-bottom-1::after,
  .page-home .section-divider-bottom-2::after,
  .page-home .section-divider-top-1::before,
  .page-home .section-divider-top-2::before {
    display: none !important;
  }

  .page-home .overflow-image-wrapper {
    gap: 16px !important;
  }

  .page-home .overflow-image-text.extra-padding-top {
    padding-top: 20px !important;
    margin-bottom: 0 !important;
  }

  .page-home #the-wedding {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    background-position: center center !important;
  }

  .page-home #the-wedding .section-title {
    margin-bottom: 14px !important;
  }

  .page-home .invite {
    margin: 8px 0 0 !important;
  }

  .page-home .invite .invite_title .text {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .page-home #rsvp-2,
  .page-home #rsvp-2.section-bg-color {
    background: #f9f9f9 !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .page-home #rsvp-2::before {
    display: none !important;
  }

  .page-home .form-wrapper,
  .page-home .form-wrapper.overflow {
    top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 28px 18px !important;
  }

  .page-home .extra-padding-section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .page-home #footer {
    margin-top: 0 !important;
  }
}


/* iPhone/mobile: render the desktop composition scaled down instead of reflowing sections */
.nav-section,
.nav-section .navbar,
.nav-section .navbar-nav,
.nav-section .navbar-nav > li,
.nav-section .navbar-nav > li > a,
#nav-mobile-btn {
  position: relative;
  z-index: 9999;
  pointer-events: auto;
}

header#header {
  position: relative;
  z-index: 9999;
}

.page-header,
.page-header .overlay,
.page-header::before,
.page-header::after {
  z-index: 1;
}

.page-header .container,
.page-header .row,
.page-header .col-sm-12,
.page-header .page-title {
  position: relative;
  z-index: 2;
}

/* RSVP page: restore visible gap below the hero on phone */
@media (max-width: 767px) {
  body.page-rsvp .page-content,
  body.page-rsvp .main {
    position: relative;
    z-index: 2;
  }

  body.page-rsvp .page-content.no-padding {
    padding-top: 22px !important;
  }

  body.page-rsvp .page-content.no-padding .section-bg-color {
    margin-top: 0 !important;
    padding-top: 26px !important;
  }
}


/* RSVP page: push the form panel slightly lower on phone so the top decorative lines remain visible */
@media (max-width: 767px) {
  body.page-rsvp .page-content.no-padding .section-bg-color .row.gx-6 {
    align-items: flex-start !important;
  }

  body.page-rsvp .page-content.no-padding .col-xl-6.col-lg-7 {
    margin-top: 18px !important;
  }

  body.page-rsvp .form-wrapper.no-shadow.overflow.neela-style {
    margin-top: 18px !important;
  }
}


/* RSVP page desktop/tablet: keep a visible gap below the hero and show the top decorative frame lines */
@media (min-width: 768px) {
  body.page-rsvp .page-content.no-padding {
    padding-top: 20px !important;
  }

  body.page-rsvp .page-content.no-padding .section-bg-color {
    padding-top: 24px !important;
  }

  body.page-rsvp .form-wrapper.no-shadow.overflow.neela-style {
    top: -48px !important;
    margin-bottom: -198px !important;
  }
}


/* RSVP phone view: show the top frame lines by dropping the form panel lower */
@media (max-width: 767px) {
  body.page-rsvp .form-wrapper.overflow.neela-style,
  body.page-rsvp .col-xl-6.col-lg-7 .form-wrapper.overflow,
  body.page-rsvp .col-xl-6.col-lg-7 .form-wrapper.no-shadow.overflow.neela-style {
    top: -24px !important;
    margin-top: 0 !important;
    margin-bottom: -150px !important;
  }

  body.page-rsvp .page-content.no-padding,
  body.page-rsvp .page-content.no-padding .section-bg-color {
    padding-top: 34px !important;
  }
}

/* iPhone device hero trim */
@media screen and (max-device-width: 991px) {
  .page-header,
  .page-header.section-divider-bottom-1,
  .page-header.section-divider-bottom-1.section-divider-bg-color {
    min-height: 250px !important;
    height: auto !important;
    padding: 90px 0 26px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
  }

  .page-header .page-title {
    padding-bottom: 4px !important;
    margin-top: 0 !important;
  }
}

@media screen and (max-device-width: 767px) {
  .page-header,
  .page-header.section-divider-bottom-1,
  .page-header.section-divider-bottom-1.section-divider-bg-color {
    min-height: 210px !important;
    height: auto !important;
    padding: 82px 0 18px !important;
  }

  .page-header .page-title {
    font-size: 2.05rem !important;
    padding-bottom: 2px !important;
  }
}

@media screen and (max-device-width: 575px) {
  .page-header,
  .page-header.section-divider-bottom-1,
  .page-header.section-divider-bottom-1.section-divider-bg-color {
    min-height: 190px !important;
    height: auto !important;
    padding: 76px 0 14px !important;
  }

  .page-header .page-title {
    font-size: 1.9rem !important;
  }
}


/* RSVP inline success/error messages at bottom of form */
.form_status_message {
  margin-top: 16px;
}
.form_status_message .alert {
  margin-bottom: 0;
  text-align: center;
}


/* RSVP inline message spacing */
#form-rsvp .form_status_message {
  margin-top: 16px;
}

.form_status_message{margin-top:16px;}