* {
    padding:0;
    margin:0;
    text-decoration:none;
    list-style:disc;
    box-sizing:border-box
}

html {
    font-family: Lisu Bosa, Inter, Segoe UI,Tahoma,sans-serif;
    max-width: 100%;
    overflow-x: hidden;
}

html, body {
    margin:0;
    padding:0;
}

.aboutUsBody {
    background: linear-gradient(180deg, #FFF 0.96%, #FFFDE0 99.99%, #999886 100%); 
}

body {
 min-height:100vh;
  overflow-x: hidden;
}

/* Nav */
nav {
    display: flex;
    justify-content:center;
    align-items: center;
    max-width:100vw;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:10;
    background:transparent;
}

.nav-bar, .aboutUsNavBar {
    display: flex; 
    letter-spacing: 0.5px;   
    font-size: 20px;
    gap:3em;
    padding-top:2em;    
    font-family:'Roboto', sans-serif; 
    font-weight:bold;
    flex-direction: row;
    flex-wrap:nowrap;
}

nav {
    display: flex;
    justify-content:flex-end;
    align-items: center;
    max-width:100vw;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:10;
    background:transparent;
}

.nav-bar a, .nav-bar span { 
    justify-content:center;
    gap:3em;
}

.nav-bar {
  display: flex;
  justify-content: center;
  gap: 3em;
}

.nav-bar a {
  color: inherit; /* Inherit from nav-bar */
  text-decoration: none;
}



h1 {
    text-align:center;
}

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

/* Home page */

.headerTitle {
  display:flex;
  position:absolute;
  top:6%;
  left:75%;
  transform: translate(-50%);
}

.headerTitle h1 {
  color: #FFF;
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.75);
  font-family: "Birthstone Bounce";
  font-size: 64px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.countdown-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:row;
    width: 100%;
    gap:0.5em;
    position:absolute;
    top:8%;
    left:75%;
    transform: translate(-50%);
    background: rgba(0,0,0,0.0);
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 2em;
    font-family: 'Georgia', serif;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.75);
    text-align: center;
  margin-right: 7.5%;
  font-weight:500;
  line-height:normal;
}
.countdown-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25em; 
}

.countdown-number {
  font-weight: bold;
  font-size:3em;
}

.countdown-label {
  font-style: italic;
}

.header-container {
    position:relative;
    display:block;
    width: 100%;
}

.header-pic img {
    display:block;
    width: 100%;
    height: auto;
    max-width: 100%;
    justify-content: center;
}



.save-the-date-container {
    display:flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
    width:auto;
    margin:0 7.5%;
}

.save-the-date-container h1, h2, p {
    text-align:center;
}

.save-the-date-text h1 {
    padding-bottom: 0.5em;
}

.save-the-date-text {

    justify-content: flex-start;
    flex-direction: column;
    display: flex;
    align-items: center;
    text-align: center;
    flex:0 0 45%;
}

.save-the-date-text p {
  text-align: left;
}

.save-date-button {
    margin-top: 2em;
    padding: 0px 100px;
    font-size: 1em;
    border:1px solid black;
    border-radius: 5px;
    background-color: #FFFDE0;
    color: black;
    cursor: pointer;
    width:80%;
    height:40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-align: center;
} 

.save-date-button:active{
    box-shadow:0 5px #666;
    transform:translateY(4px);
}
.save-the-date-pic {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    align-items:center;
    padding: 2em 0;
    position: relative;
    height:100%;
    flex: 1;
    
}

.save-the-date-pic img {
      width: 400px;
      height: 400px;
    max-width: 100%;
    justify-content: center;
    object-fit:cover;
    display: flex;
    border-radius: 50%;
    bottom:35%;
    position: static;
    object-fit:cover;
}

.home-pic-row1 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    gap: 2em;
    height: 100%;
}

.home-row-image img {
    aspect-ratio: 3 / 4;
    object-fit:cover;
    display:block;
    border-radius:10px;
    height:100%;
}

.home-row-image, .venue-image {
    flex: 1;
    overflow: hidden;
    height: 100%;
    max-width: 80%;
    object-fit:contain;
    justify-content:center;
    align-items:center;
}

.home-gallery-outer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2em;
    margin: 3em 7.5%;
}

.home-gallery-inner {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.large-home-video {
  justify-content:center;
  align-items:center;
  display:block;
  margin:0 7.5%;
  height:auto;
}

.video {
  height:20em;
  margin:0 7.5%;
  width: 100%;
}

video {
  width:100%;
  height:auto;
  display:block;
  border-radius: 10px;
  box-shadow: inset;
}

.registry-container {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    height:100%;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 2em;
  padding: 15vw 0;
    position: relative;
      background-image: url('images/registryBackground.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 7.5%;
}

.registry-container img {
    margin:20px 0;
    width:100%;
    height:auto;
}

.registryButton{
    margin-top: 10px;
    padding: 0px 100px;
    font-size: 1em;
    border:1px solid black;
    border-radius: 5px;
    background-color: #FFFDE0;
    color: black;
    cursor: pointer;
    width:100%;
    height:40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-align: center;
}

.flower {
  position: relative;
}


.registryButton:active{
  box-shadow:0 5px #666;
  transform:translateY(4px);
}


.wedding-info-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height:500px;

    justify-content: center;

    margin: auto 7.5%;
}

.wedding-info-picture {
  flex: 1;
    display:flex;
    justify-content: center;
    align-items: center;
    height:auto;
    width: 100%;
}

.wedding-info-picture img {
    width: 100%;
    max-height:100%;
    height: auto;
    object-fit: cover;
    border-radius:10px 0 0 10px;
}



    

.wedding-info-text img{
  aspect-ratio: 1 / 1;
  height: 100%;
  width: auto;
}


.wedding-info-text h1{
  margin-top:0;
  justify-content:flex-start;
  padding-bottom:0;
  padding-top:2em;
  color: #000;
text-align: center;
font-family: Inter;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

ul {
  list-style:disc;
  padding-left:40px;
  display:block;
  text-align:left;
  justify-content: center;
}

.infoList {
  text-align:left;
  padding:0 2em 10em 0;
  margin:0;
  font-size:medium;
  color: #000;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 1.76px;
}

ul .infoList {
  margin-top:atuo;
  margin-bottom:auto;
}

.venue-container {
    display:flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color:#FFFAC180 ;
    flex-direction: column;
    margin:5em auto;
    padding: 3em 0;
}

.venue-pictures {
    display:flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
    flex-wrap: nowrap;
    width: 80%;
    margin: 5em auto 2em auto;
}

.venue-text {
  margin: 1em;
}

.venue-pictures img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    max-width: 100%;
}

.venue-image {
    height: 300px;
    max-width: 100%;
    width: 100%;
    object-fit:cover;
    border-radius:10px;
}

.venue-image img {
    display:flex;
}

/* End Home page */

/*About us page*/

.aboutUs {
  display:flex;
  width:100%;
}

.aboutUsNavBar a, .aboutUsNavBar span {
  color:#fff;
  flex-wrap:nowrap;

  

}

.aboutus2 {
  display:flex;
  justify-content:center;
  border-radius:50%;
}

.aboutUsHeader {
  display:flex;
  width:100vw;
  
}

.aboutUsHeader img {
  object-fit:cover;
  width:100vw;
  height:auto;
  display:block;
}

.aboutUsBody {
  font-family: roboto, sans-serif;
}
  

.theBride, .theGroom {
    display:flex;
    width:100%;
    height:auto;
    margin-top: 5em;
    flex-direction: column;
}

.theGroom p, .theBride p {
  margin: 0 7.5%;
}

.ourStory {
  display: flex;
  flex-direction: column;
  margin-top:10em;
  width:auto;
  gap: 5em;
}

.brideTitle, .groomTitle {
  display:flex;
  justify-content:center;
  text-align:center;
  align-content:center;
  margin: 1.5em auto;
}

.brideText, .groomText {
  margin:2em auto 0 auto;
  width:60%;
}


.bridePictures, .groomPictures {
  display:flex;
  flex-direction:row;
  gap:2em;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0 7.5%;
}

.bridePictures img, .groomPictures img {
  aspect-ratio: 1 / 1;
  width: 75vw;
  border-radius: 10px;
  object-fit: cover;
}

.storyRow1Gallery, .storyRow3Gallery {
  display:flex;
  flex-direction:row;
  gap:2em;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0 7.5%;
}

.storyRow1Gallery img, .storyRow3Gallery img{
  aspect-ratio: 1 / 1;
  width: 75vw;
  height: 25vw;
  border-radius: 10px;
  object-fit: cover;
}

.storyRow4 {
  margin: 0 7.5%;
}

.storyRow4Gallery {
  display: flex;
  gap: 2em;
  width: 100%;
  box-sizing: border-box;
}

.storyRow4Gallery img {
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: 10px;
  flex: 1 1 0;
  max-width: calc((100% - 2em) / 2); /* ensures two images + gap fit perfectly */
  display: block;
}


.present, .row3Pic1, .row1Pic2, .row1Pic1 {
  margin-top:0.5em;
}

.row2Pic1 {
  margin-top:0.5em;
}

/*End about us page*/

/* Footer */
footer {
    display:flex;
    flex-direction: column;
    height:100%;
    width:100%;
    justify-content:space-between;
    align-items:center;
    padding:0;
    margin: 2em auto;
    text-align:center;
}


.footer-description p {
    padding:0;
    margin:0;
    font-family:'Inter', sans-serif;
    text-align: center;
}

.wedding-footer {
    display:flex;
    flex:1;
    padding:0 0 0 0;
    margin-top: 2em;
    flex-direction: column;
    text-align:center;

}

.wedding-footer p {
    text-align:center;
    padding:0 0 0 0;
    font-family:'Inter', sans-serif;
    justify-content:center;
}

.nav-bar {
    height:100%;
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
}

nav a:hover {
    text-decoration-thickness: 12.5%; /* 2.5px */
    text-underline-offset: 21%; /* 4.2px */
}

.nav-bar a{
    display:flex;
    justify-content:center;
    align-items:center;
}

.nav-bar.nav-white a {
  color: white;
}

.nav-bar.nav-black a {
  color: black;
}

#sidebar-active {
    display:none
}

.open-sidebar-button {
    margin-right:7.5%;
    margin-left:7.5%;
    display:none;
}

.open-sidebar-button {
    margin-right:0;
    fill: white;
}

.close-sidebar-button {
  display: none;
}

.close-sidebar-button svg {
  fill: black;
}

.hamburger {
    height:50px;
    width:auto;
    background: linear-gradient(180deg, #F5E5D8 0%, #EEDACA 51%, #DBC4B3 100%);
}

.hamburger:hover {
    cursor:pointer;
}

/* End Footer */

/* Media Queries */
/* -------------------------
   ✅ Min-width: 1200px+
   Desktop / Large Screens
------------------------- */
@media (min-width: 1200px) {
    /* Optional overrides for ultra-wide monitors */





  }
  
  
  /* -------------------------
     ✅ Between 960px and 1200px
     Standard Desktop / Tablet Landscape
  ------------------------- */
  @media (min-width: 960px) and (max-width: 1199px) {
    .nav-bar, .aboutUsNavBar {
      gap: 2em;
      font-size: 18px;
    }

    .headerTitle {
    top:3%;
    left:65%
    }


     .countdown-container {
    top: 5%;
    left: 65%;
    font-size: 2em;
    max-width: 50vw;
    flex-direction: row;
    padding: 8px 12px;
    font-size:1.8em;
  }

    .save-the-date-container{
      gap:5em;
      padding:0 1em;
      margin:1em 7.5%;
    }
    
    .save-the-date-pic {
      justify-content:center;
      width:100%;
      margin-left: 0;
      padding:1em;
    }
    .save-the-date-pic img {
      width: 250px;
      height: 250px;
    }

    .save-the-date-text {
      width:100%;
      flex:0 0 50%;
      padding:1em;
    }
  
    .venue-pictures {
      padding:0;
    }


}
  

  
  /* -------------------------
     ✅ Between 750px and 960px
     Tablets / Small Laptops
  ------------------------- */
  @media (min-width: 750px) and (max-width: 959px) {
    .nav-bar, .aboutUsNavBar {
      flex-wrap: nowrap;
      gap: 1.5em;
    }
    



    .header-container{
      position:relative;
      max-width:100%;
      overflow:hidden;
      display:block;
    }

    .headerTitle {
    top:-8em;
    left:50%;
    transform:translate(-50%);
    position:relative;
    display:flex;
    z-index:3;
    justify-content:center;
    width:100%;
    margin-bottom:0;
    }

    .countdown-container {
    position: relative;  
    top:-5em;
    left:0;
    transform: none;
    width: 100%;
    max-width:100%;
    align-items:center;
    font-size: 1.5em;
    flex-direction: row;
    justify-content: center;
    padding:0.5em 1em;
    max-width: 100%;
    display:flex;
    z-index:2;
    margin-top:0;
    padding:0;
  }
  
    .save-the-date-container {
      flex-direction: column;
      width:100%;
    }
  
    .save-the-date-text, .save-the-date-pic {
      width: 100%;
      padding: 1em 0;
    }
  
    .venue-pictures {
      flex-direction: column;
      padding: 3em 2em;
    }
  
  
    .save-the-date-container,
    .wedding-info-container,
    .venue-pictures,
    footer {
      flex-direction: column;
      align-items: center;
    }

    .wedding-info-container {
      margin-bottom:2em;
    }
  
    .save-the-date-text,
    .save-the-date-pic,
    .wedding-info-picture,
    .wedding-info-bg {
      width: 100%;
      padding: 1em 0;
      height: auto;
    }

    .save-the-date-pic {
      justify-content:center;
      align-items: center;
    }

    .save-the-dat-pic img {
      height:2em;
      width:auto;
      border-radius:50%;
    }
  


    .wedding-info-bg img {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: 0;
  }

  
  .venue-container {
    margin-top:10em;
  }
  
    footer {
      text-align: center;
    }
  
    .footer-description,
    .wedding-footer {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
    }

  .theBride, .theGroom {
    margin-top: 3em;
    text-align:center;
  }

  .brideText, .groomText {
    width: 100%;
    margin: 1em auto;
  }

  .bridePictures, .groomPictures {
    flex-direction: column;
    gap: 2em;
  }





  .wedding-info-container {
    flex-direction: column;
    align-items: center;
    margin-top:3em;
    margin-bottom:3em;
    height:auto;
    min-height:50em;
  }

  .wedding-info-picture {
    width: 100%;
    height:100%;
    padding:0;
  }
  
  .wedding-info-picture img{
  border-radius: 10px 10px 0 0;
  height:25em;
  }

 .wedding-info-text {
    border-radius: 0px 0px 10px 10px;
    height:auto;
    width:100%;
    padding:0;
    aspect-ratio: 1 / 1;
  }

  .venue-container{
    margin-top:5em;
  }

  .venue-pictures {
    flex-direction: column;
    margin: 0 auto;
    padding:0;
    align-items: center;
  }

  .venue-image {
    width: 100%;
    max-width: 100%;
  }
  
  .venue-image img {
    display:block;
    margin:0 auto;
    max-width:100%;
    height:auto;
}

  .footer-description {
    align-content: center;
    justify-content: center;
    width:auto;
    height:auto;
  }

  .wedding-footer p{
    padding:0;
  }
}

@media (max-width:750px) {

      .nav-bar.nav-white a {
  color: black;
}

  .aboutUsNavBar {
    width:80%;
    margin:0 auto;
    flex-direction:row;
    wrap:nowrap;
  }
  .save-the-date-container {
    flex-direction:column;
    padding:1em;
    gap:2em;
    align-items:center;
    display:flex;
    width:100vw;
    height:auto;
    margin: 0 7.5%;
  }

  .save-the-date-text, .save-the-date-pic {
    width:100%;
    padding:1em 0;
    text-align:center;
  }

  .save-the-date-pic {
    justify-content: center;
    margin-left:0;
  }

  .save-the-date-pic img {
    width:250px;
    height:250px;
    object-fit:cover;
  }

.storyRow1Gallery, .storyRow3Gallery, .storyRow4Gallery {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    
    .storyRow1Gallery img, .storyRow3Gallery img, .storyRow4Gallery img{ 
      aspect-ratio: 1 / 1;
      height:auto;
      width:85%;
    }

    .groomText p, .brideText p {
      font-size: 20px;
    }

    .theGroom h2, .theBride h2 {
      font-size:28px;
    }

    .ourStory h1 {
      font-size: 40px;
    }

    .ourStory h2, footer p {
      font-size:20px;
    }
}
  /* -------------------------
     ✅ Between 500px and 750px
     Mobile Landscape / Large Phones
  ------------------------- */
  @media (min-width: 500px) and (max-width: 749px) {

    .wedding-info-text img{
      aspect-ratio: 1 / 1;
      height: auto;
      width: 100%;
      border-radius: 10px 10px 0px 0px;
}

.nav-bar {
  display: none;
  flex-direction: column;
  align-items: center;
  padding-top: 5vh; /* ✅ Add this */
  padding-bottom: 20rem;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  width: 60vw;
  background: linear-gradient(180deg, #FFF 0.96%, #e7e5be 99.99%, #9b9644 100%);
  margin-right: 0;
  box-shadow: -5px 0 5px #00000040;
}

.nav-bar a{
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 2em 0;
}

nav {
  padding: 2em;
}

.open-sidebar-button,.close-sidebar-button {
    color:black;
    display:block;
    }

 .close-sidebar-button {
  position: absolute;     /* ⬅️ Lock it to the corner */
  top: 1.5rem;            /* ⬅️ Add some spacing from top */
  left: 1.5rem;           /* ⬅️ Add some spacing from left */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  scale: 200%;
}
    
    #sidebar-active:checked ~ .nav-bar {
    display:flex
    }

    .nav-bar, .aboutUsNavBar {
      flex-direction: column;
      gap: 1em;
      justify-content: center;
    }

    footer { 
      display: flex;
      flex-direction: column;
    }

    .header-container {
      position:relative;
      display:block;
      width:100%;
      min-height:400px;
    }

    .headerTitle {
    top:-5em;
    left:35%;
    position:relative;
    transform:none;
    }

    .headerTitle h1{
    color: #FFF;
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.75);
  font-family: "Birthstone Bounce";
  font-size: 40px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
    
    .countdown-container {
      position: relative;  
      top:-4em;
      left:0;
      transform: none;
      width: 100%;
      max-width:100%;
      align-items:center;
      font-size: 1.5em;
      flex-direction: row;
      justify-content: center;
      padding:0.5em 1em;
      max-width: 100%;
      display:flex;
      z-index:2;
    }
    .save-date-button {
      width: 90%;
    } 

    .save-the-date-container {
      flex-direction:column;
    }
  
    .wedding-info-container {
      flex-direction: column;
      padding: 2em 1em;
      gap:0;
    }
  
    .wedding-info-picture{
      width: 100%;
      max-height:300px;
      margin-bottom:0;
      padding-bottom:0;
      overflow:hidden;
    }



    .venue-container {
    margin:1em auto;
    padding:0;
    }
    
  
    .venue-pictures {
      flex-direction: column;
      padding:0;
      margin-top:10em;
    }
    .home-gallery-outer {
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
        margin: 3em 0;
    }
    .home-gallery-inner {
            width: 90%;
            height: 90%;
            max-width: 1200px;
            display: flex;
            gap: 2em;
            display: flex;
            flex-direction: column;
        }

    .home-row-image {
          flex:0 1 auto;
          display:flex;
          justify-content:center;
          align-items:center;
          height:100%;
          max-width:100%;
        }
    
    .home-row-image img{
    aspect-ratio:3 / 4;
    object-fit:cover;
    max-width:100%;
    height:100%;
    }


    .home-pic-row1 {
      flex-direction:column;
      width:auto;
      height:auto;
      margin:0 auto;
      object-fit: contain;
      max-width:100%;
    }

    .home-gallery-inner {
    margin:0 7.5%;
    }




        .brideText, .groomText {
    font-size: 0.9em;
    padding: 0 1em;
    width: 80%;
  }

  .brideTitle, .groomTitle {
    font-size: 1.2em;
  }

  .theBride, .theGroom {
    flex-direction:column;
    flex-wrap:none;
    align-items:center;
    padding:0;
  }



  .bridePictures, 
  .groomPictures {
    flex-direction:column;
    gap:2em;
  }



  


  .aboutUsHeader img {
    height: 200px;
    object-fit: cover;
  }

  .save-the-date-container,
  .venue-pictures,



  .save-the-date-text,
  .save-the-date-pic,
  .wedding-info-picture,
  .wedding-info-bg {
    width: auto;
    padding: 1em 0;
    height: auto;
  }

    .wedding-info-container{
      flex-direction:column;
      margin: 3em 7.5%;
      height: auto;
    }


  .wedding-info-picture img{
    border-radius: 10px 10px 10px 10px;
  }


  .wedding-info-bg img {
    position: relative;
    height: 250px;
  }

  footer {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .footer-description,
  .wedding-footer {
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 0.5em 0;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .wedding-footer p {
    padding: 0;
  }

.storyRow4Gallery img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  flex: 1 1 0;
  max-width: 100%; /* ensures two images + gap fit perfectly */
  display: block;
}

        
  }
  
  
  /* -------------------------
     ✅ Max-width: 500px
     Phones
  ------------------------- */
  @media (max-width: 500px) {
    .storyRow1Gallery, .storyRow3Gallery, .storyRow4Gallery {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .storyRow4Gallery img {
      width: 100%;
    }

         .nav-bar {
    display:none;
    flex-direction:column;
    align-items:center;
    padding-top: 30vh; /* ✅ Add this */
    padding-bottom:20rem;
    position:fixed;
    top:0;
    right:0;
    z-index:10;
    width:60vw;
    background-color:#354950;
    background: linear-gradient(180deg, #FFF 0.96%, #e7e5be 99.99%, #9b9644 100%);
    margin-right:0;
    box-shadow:-5px 0 5px #00000040;
    }

.nav-bar a{
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 2em 0;
}

nav {
  padding: 2em;
}

.open-sidebar-button,.close-sidebar-button {
    color:black;
    display:block;
    }

 .close-sidebar-button {
  position: absolute;     /* ⬅️ Lock it to the corner */
  top: 1.5rem;            /* ⬅️ Add some spacing from top */
  left: 1.5rem;           /* ⬅️ Add some spacing from left */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  scale: 200%;
}
    
    #sidebar-active:checked ~ .nav-bar {
    display:flex
    }

    .nav-bar, .aboutUsNavBar {
      flex-direction: column;
      gap: 1em;
      justify-content: center;
    }

    .storyRow1Gallery img, .storyRow3Gallery img, .storyRow4Gallery img{ 
      max-width: 100%;
      height:20em;
      width:20em;
    }

    .bridePictures, .groomPictures {
      flex-direction:column;
    }

    .headerTitle {
    top:-5em;
    left:30%;
    position:relative;
    transform:none;
    }

    .headerTitle h1{
    color: #FFF;
text-align: center;
font-feature-settings: 'liga' off, 'clig' off;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.75);
font-family: "Birthstone Bounce";
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: normal;
}


    .countdown-container {
      position: relative;  
      top:-5.5em;
      left:0;
      transform: none;
      width: 100%;
      max-width:100%;
      align-items:center;
      font-size: 1em;
      flex-direction: row;
      justify-content: center;
      padding:0.5em 1em;
      max-width: 100%;
      display:flex;
      z-index:2;
      flex-wrap: wrap;
    }

    footer {
      flex-direction: column;
      align-items: center;
      gap: 2em;
      margin-top:15px;
    }

    .footer-description {
      padding-left: 0;
    }


    .wedding-footer p {
      text-align: center;
      padding-right: 0;
      justify-content:center;
      align-items:center;
    }

    h1, h2, p {
      font-size: 90%;
    }


    .save-the-date-container{
      flex-direction:column;
      margin: 0 7.5%;
          width: auto;
    padding: 1em 0;
    height: auto;
    }
  
    .save-date-button {
      font-size: 0.9em;
    }

    .wedding-info-container{
      flex-direction:column;
      margin: 3em 7.5%;
      height: auto;
    }

    .wedding-info-picture {
      width:100%;
      height:20em;
    }

    .wedding-info-picture img {
      border-radius: 10px 10px 0px 0px;
  }


    .venue-container, .venue-pictures {
      flex-direction:column;
      margin:0 auto 3em auto;
    }

    .venue-container h2 {
      font-size:30px;
      margin-top:10px;
      padding-top:0;
    }

    .brideText, .groomText {
    font-size: 14px;
    padding: 0 1em;
    max-width:80%;
    width:80%;
  }


  .theBride, .theGroom h2 {
    font-size:28px;
  }
  

  .aboutUsHeader img {
    height: 200px;
    object-fit: cover;
  }


  .home-gallery-outer {
    flex-direction:column;
    height:auto;
    width:auto;
  }

  .home-pic-row1 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height:100%;
    width:auto;
    margin:auto;
    padding:0;
    
  }

  .home-pic-row1 img {
    object-fit: cover;
    width: 100%;
  }
}