html {
      scroll-behavior: smooth;
   
    }
html, body {
  overflow-x: hidden !important;
	background: #fbf7f3;
}


    section {
     height: 100%;
  
    }
	
	    
    /* Center nav links */
    .navbar-nav {
      justify-content: center; /* centers the nav links */
      width: 100%;
	   margin: auto;
    
    }

	.navbar {
  background-color: transparent !important;
  transition: background-color 0.3s ease #beac94;
  box-shadow: none;
  font-family: 'Poppins', sans-serif;
	box-shadow: none !important;
}

/* Navbar links */
.navbar .nav-link {
  text-transform: uppercase;   
  font-weight: 600;           
   font-size: 0.9rem;             
  color: #beac94;               
  letter-spacing: 1px;        
  transition: color 0.3s ease;
    padding: 0.5rem 0.5rem;
}


.navbar.scrolled {
  background-color: #beac94 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.navbar.scrolled .nav-link {
  color: #f0e8dd;                
}

/* Hover states */
.navbar .nav-link:hover {
  color: #ddd;
}

.navbar.scrolled .nav-link:hover {
  color: #ddd;
}
	
.navbar .nav-link {
  position: relative;
}
.navbar .nav-link.active {
  color: #f0e8dd !important;
  font-weight: 500;
  
}

.navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 2px;
  background-color: #f0e8dd;
  transition: width 0.3s ease;
}

.navbar .nav-link.active::after {
  width: 80%;
}
	


.offcanvas-start {
  transition: transform 0.4s ease-in-out;
  Background: #91755d;
}

.offcanvas-body .nav-link {
  font-size: 1rem;
  padding: 10px 0;
  color: #f0e8dd;
  font-weight: 900;
  text-transform: uppercase;
 font-family: 'Poppins', sans-serif;

 
}
.btn-outline-secondary {color: #f0e8dd; border-color: 2px solid #f0e8dd !important;}
 

/*-- banner --*/
 #bannerSlider {
      position: relative;
      height: 100vh;
      overflow: hidden;
	 
    }

    .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 2s ease-in-out;
      z-index: 1;
	  
    }

    .slide.active {
      opacity: 1;
      z-index: 0;
      animation: kenburns 10s ease-in-out forwards;
    }

    @keyframes kenburns {
      0% {
        transform: scale(1) translate(0, 0);
      }
      100% {
        transform: scale(1.2) translate(5px, 5px);
      }
    }
	
	/* If you want to scope it only to the slider text: */
#sliderTextContainer,
#sliderTextContainer .slider-info h3 {
     font-size: 1vw;
    font-weight: 800;   
    color: #fff;
    line-height: 1; 
}

#sliderTextContainer {
  position: relative;
  z-index: 2;
  text-align: center;
  height: 100vh; /* full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center */
  align-items: center;     /* horizontal center */
  padding: 20px;           /* some breathing room */
}


.slider-info {
  text-align: center; /* horizontal centering */
  margin-top: 0;      /* remove this so flex centering works */
}

.slider-info h1 {
  font-weight: 900;
  margin-top: 100px;
  font-size: 3em;
  letter-spacing: 10px;
   font-family: 'Arizonia', cursive;
  line-height: 1;
  text-align: left;
  color: #beac94;
}
.couple-name {font-family: "Bonheur Royale", cursive; font-style: normal;  font-weight: 400;  font-size: 10vw;  color: #ddd4c1;}
.slider-info h1 span {
  color: #73472c;
}

.slider-info h4 {
  
    color: #f0e8dd;
	font-size: 1.3vw; 
    letter-spacing: 7px;
    font-family: "Bonheur Royale", cursive;
font-style: normal;  
font-weight: 400;
    border: 1px solid #f0e8dd;
    border-left: none;
    border-right: none;
    padding: 0.5em;
    width: 100%;
    margin: 0 auto 0.8em;
  
   
  
    line-height: 1; 
  
}

.sub-para {
  letter-spacing: 1px;
font-family: "Bonheur Royale", cursive;
font-style: normal;  
font-weight: 400;
  color: #f0e8dd;
  font-size: 30px;
}


/*countdown timer */

 #bannerSlider {
  position: relative;
  z-index: 1; /* Background slides at low z-index */
  overflow: hidden;
}

#sliderTextContainer {
  position: relative;
  z-index: 10; /* Make sure text and countdown appear above banner */
}

/* Countdown timer styles */


.countdown #days,
.countdown #hours,
.countdown #minutes,
.countdown #seconds {
  font-size: 3rem;
  font-weight: 900;
  color: #beac94;
 font-family: 'Lora', serif;
}

.countdown .label {
  font-size: 2rem;
  letter-spacing: 1px;
  font-family: 'Arizonia', cursive;
  color: #beac94;
  margin-top: 20px;
}

/* Optional: spacing between blocks */
.countdown > div {
  padding: 0 1rem;
}

.countdown #days,
.countdown #hours,
.countdown #minutes,
.countdown #seconds {
  text-shadow: 0 0 10px rgba(190, 172, 148, 0.3);
}

/*banner */
@media (max-width: 1024px) {
	    section {
     height: 50vh;
     
    }
	
	#sliderTextContainer {margin-top: -200px;}
   #bannerSlider {
      position: relative;
      height: 60vh;
      overflow: hidden;
	 
    }

.slider-info h4 {
  
	font-size: 1.5rem; 
}

.couple-name {  font-size: 4.5rem;}
.sub-para {font-size: 1.5rem;}


.countdown #days,
.countdown #hours,
.countdown #minutes,
.countdown #seconds {
  font-size: 1.3rem;
  
}

.countdown .label {
  font-size: 0.9rem;

}
#slideText{padding-top: 50px;}

}

/* Medium devices (780px and below) */
@media (max-width: 780px) {
  	    section {
     height: 50vh;
     
    }
	
	
   #bannerSlider {
      position: relative;
      height: 60vh;
      overflow: hidden;
	 
    }

.slider-info h4 {
  
	font-size: 1.1rem; 
}

.couple-name {  font-size: 4.5rem;}
.sub-para {font-size: 1.5rem;}


.countdown #days,
.countdown #hours,
.countdown #minutes,
.countdown #seconds {
  font-size: 1.3rem;
  
}

.countdown .label {
  font-size: 0.9rem;

}
#slideText{padding-top: 50px;}

}

/* Small mobile devices (480px and below) */
@media (max-width: 480px) {
	
	    section {
     height: 100vh;
     
    }
	

	#sliderTextContainer {margin-top: 0px;}
   #bannerSlider {
      position: relative;
      height: 100vh;
      overflow: hidden;
	 
    }

.slider-info h4 {
  
	font-size: 1.1rem; 
}



.couple-name {  font-size: 3.5rem;}



.countdown #days,
.countdown #hours,
.countdown #minutes,
.countdown #seconds {
  font-size: 1.3rem;
  
}

.countdown .label {
  font-size: 0.9rem;

}
#slideText{padding-top: 0px !important;}

#welcome {padding-top: 0px !important;}

}

/*******************banner**************************/




  /* Fixed floating audio controls on right middle side */
#audioControls {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0 0.5rem 0.5rem 0;
    box-shadow: 0 0 15px rgba(190, 172, 148, 0.6);
    z-index: 1050;
    padding: 0.5rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;

    /* smooth fade-in animation */
    animation: fadeInSlide 0.6s ease forwards;
  }

  /* Buttons styling */

#audioControls {
  position: fixed;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  padding: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#audioControls button {
  border: 2px double #beac94;
  padding: 8px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#audioControls button i {
  font-size: 14px;
  color: #D2B48C; /* Champagne Tan */
  transition: color 0.3s ease, transform 0.3s ease;
}

#audioControls button:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.08);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
}

#audioControls button:hover i {
  color: #F5E8D3;
  transform: rotate(90deg);
}




	
/*Welcome Section*/	
#welcome {background: #fbf7f3;}
h4.scroll-offset {
 
  position: relative;
  padding-top: 80px;    /* space for fixed header */
  
}
#welcome h3.fw-bold {
     font-family: 'Arizonia', cursive;
	font-size: 2.5rem;
    font-weight: 700;
    color: #73472c;
    text-align: left;
  }
#welcome h4.fw-bold {
    font-family: 'Poppins', sans-serif;
	font-size: 2rem;
    font-weight: 700;
    color: #73472c;
    text-align: center;
  }
  #welcome p.text-muted {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    line-height: 1.7;
    color: #443630 !important; /* Bootstrap muted color */
    text-align: left;
	font-style: italic;
  }

/**********************WELCOME ********************************/
@media (max-width: 1024px) {
	.info-box {
     position: relative !important;
	 transform: translateX(10%) !important;
	 transform: translateY(-105%) !important;
	height: 300px !important;
  
  
  }
  .overlap-img {
	  max-width: 90% !important;
	 transform: translateY(-10%) !important;
	 
  }
}


@media (max-width: 780px) {
   #welcome {height: 100% !important;}
  
   .slider-info h1 {font-size: 1.5rem; padding: 0 130px 0 130px;}
   
#welcome p.text-muted { font-size: 1rem; padding: 0 130px 0 130px;}


.tablet-centered-img {
    max-width: 60%;
margin: 0 auto;
  }
	.info-box {
    
    position: relative !important;
    left: 0% !important;
    transform: translateY(-50%) !important;
	 transform: translateX(33%) !important;
    z-index: 2;
    width: 60% !important;
   height: 300px !important;
  }
}


@media (max-width: 480px) {
	
	#welcome {
	height: 100vh;
   padding-top: 10px;
   
  }
   #audioControls {
   
  }
 

#welcome img {padding: 10px;}
  .slider-info h1 {font-size: 2rem; padding: 0 0px 0 10px; text-align: center; line-height: 1.2; margin-top: 0px; }
   
#welcome p.text-muted { font-size: 0.9rem; padding: 0 5px 0 5px; text-align: center;}
.tablet-centered-img {
    max-width: 100%;
margin: 0 auto;
  }
.info-box { 
    max-width: 100%;
    margin-left: 0px;
    width: 80% !important;
	transform: translateY(-5%) !important;
	transform: translateX(12%) !important;
}
.info-title {

    font-size: 1.5rem !important;
   
}
.info-link div{font-size: 0.5rem !important; text-align: center;}
}
  
/**********************WELCOME ********************************/ 
/* Overlap image style for desktop only */
.overlap-img {
  margin-right: -60px;
  transform: translateX(30px);
  max-width: 120%;
}

/* Tablet and Mobile image spacing */
.tablet-centered-img {
  max-width: 80%;
  margin: 0 auto;
} 
  
	.info-box {
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
  position: absolute; 
  top: 50%; 
  left: 90%; 
  transform: translateY(-50%); 
  z-index: 2; 
  width: 100%; 
   height: 350px;
  }

  .info-title {
    font-family: 'Arizonia', cursive;
    font-weight: 700;
    font-size: 2.5rem;
    color: #73472c;
	text-align: center;
  }

  .icon-style {
    color: #98745a;
  }
  
  .icon-title {
	  
  }

  .info-link {
    text-decoration: none;
    color: #98745a;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
	text-transform: uppercase;   /* make text uppercase */        /* nice spacing for uppercase */
    padding: 0.5rem 0.5rem;
  }

  .info-link div {
    font-size: 0.8rem;
    margin-top: 0.25rem;

  }
  
  
	
	
	/*OUR STORY*/
	.our-story-section {
 position: relative;
  width: 100%;
  height: 500px;
  background-image: url('../images/banner-proposal.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
    clip-path: polygon(0 0, 100% 20%, 100% 85%, 0 100%); /* Sharper and more noticeable slants */
}

.our-story-section::before {
    content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #73472c;
  opacity: 0.85;
  z-index: -1;
  clip-path: inherit; /* Ensures the overlay follows the same slanted shape */
}
	
	


  .section-heading {
    padding: 2rem 1rem;
  }

  .wedding-script {
    font-family: 'Arizonia', cursive;
    font-size: 5rem;
    color: #f0e8dd;
    margin-bottom: 0.7rem;
	
  }

  .section-line {
    width: 70px;
    height: 2px;
    background-color: #f0e8dd;
    margin: 0 auto 1rem auto;
    border: none;
  }
  .section-second-line  {
    width: 70px;
    height: 2px;
    background-color: #98745a;
    margin: 0 auto 0.5rem auto;
    border: none;
  }


  .text-body {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
	font-weight: 900;
	font-style: italic;
    color: #f0e8dd !important;
    line-height: 1.2;
  }

#about {
       padding: 7em 0 22em 0;
}
.about h1{
		font-family: 'Arizonia', cursive;
	font-size: 2.5rem;
    font-weight: 700;
    color: #73472c;
   padding-top: 100px;
    text-align: left;
	
	}
.about p{
	font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #443630; /* Bootstrap muted color */
    text-align: left;
	font-style: italic;
	max-width: 650px
	}
.about {background-color: #fefbf4;}

.img-ab {
  position: absolute;
  top: 70%;               /* adjusted for better positioning */
  right: auto;            /* reset right */
  left: 20%;              /* center horizontally */
  transform: translateX(-50%);  /* center exactly */
  margin: 0;              /* remove negative margin */
  max-width: 100%;         /* limit width to 70% of parent */
  z-index: 2;
  box-sizing: border-box; /* include borders/padding */
}

.img-ab img {
  border: 7px solid #ddd4c1;
  padding: 1em;
  width: 100%;            /* make overlay img responsive */
  display: block;
}


/*-- //about --*/
/**********************our story ********************************/  
@media (max-width: 1024px) {
		.our-story-section {
 position: relative;
  width: 100%;
  height: 400px;
margin-top: 50px;
}

	
    .wedding-script {
      font-size: 3rem !important;
    }
}

/* Medium devices (780px and below) */
@media (max-width: 780px) {
   	  .about h1 {
    font-size: 3rem;
    text-align: center;
	
  }
    .about p {
    font-size: 17px;
    text-align: center;
	padding: 0 100px 0 100px;
	max-width: 100% !important;
  }
      .wedding-script {
      font-size: 2rem !important;
    }
    .text-body {
      font-size: 2rem;
    }
	.about {height: 100%; padding-bottom: 100px;}



	.about .col-md-8 {width: 100% !important;}
	
	
.img-ab {
    position: absolute;
    top: 70%;
    left: 65%;
    transform: translateX(-50%);
    max-width: 90%;
  }
.img-row {width: 70% !important; padding-bottom: 40px;}
.overlay-img {width: 100%;}
	
}


@media (max-width: 480px) {
	.our-story-section h1 {font-size: 1.5rem !important;}
	.sub-para {font-size: 1.3rem !important;}
	    .wedding-script {
      font-size: 2rem !important;
    }
	
.about {height: 100%; padding-bottom: 0 !important;}
  .our-story-section {  
    height: 50vh;  
  }
  .our-story-section .gap-4 {gap: 0.5rem !important;}
    .about p {
    font-size: 11px !important;
    text-align: center;
padding: 0 7px 0 7px;
line-height: 2;
  }

.about h1 {padding-top: 10px; font-size: 2rem !important;}


}
  
/**********************WELCOME ********************************/  


/*GIFT INFO*/
	.our-gift-section {
 position: relative;
  width: 100%;
  height: 500px;
 background-image: url('../images/banner-details.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
    clip-path: polygon(0 0, 100% 20%, 100% 85%, 0 100%); /* Sharper and more noticeable slants */
}

.our-gift-section::before {
    content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #73472c;
  opacity: 0.7;
  z-index: -1;
  clip-path: inherit; /* Ensures the overlay follows the same slanted shape */
}
	
	
.gift h1{
	 font-family: 'Arizonia', cursive;
	font-size: 3rem;
    color: #73472c;
    letter-spacing: 2px;
    font-weight: 700;
    width: 100%;
    margin: 0 auto 0.8em;
    line-height: 1;
	
}

    .dress-code-wrapper {
      max-width: 900px;
      margin: auto;
	 background: #f0e8dd;
	 padding: 10px;
	 border-radius:20px;
    }
    .group-label {
      font-size: 1.7rem;
      font-weight: bold;
       font-family: 'Arizonia', cursive;
	  text-align: center;
    }
    .swatch-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2rem;
    }
    .swatch {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 140px;
    }
    .sub-label {
      font-size: 0.70rem;
      font-weight: bold;
      margin-bottom: 0.3rem;
	   text-align: center;
    }
    .label-top {
      font-size: 0.75rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
      color: #73472c;
	   text-align: center;
    }
    .hex {
      font-size: 0.75rem;
      margin-bottom: 0.5rem;
      color: #333;
    }
    .swatch-row {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
    }
    .hex-vertical {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 0.5rem;
      margin-right: 0.6rem;
      color: #333;
    }
    .circle {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      border: 2px solid #ccc;
    }
 
/*gift carousel*/

.carousel-nav {
  position: relative;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #ddd4c1; /* thin full container line */
  max-width: 1100px;
  margin: 0 auto 2.5rem auto;
  padding-bottom: 0.5rem;
  gap: 0;
}

.carousel-nav button {
  flex: 1 1 33.3333%;
  background: none;
  border: none;
  padding: 0.75rem 0;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: #ddd4c1;
  cursor: pointer;
  transition: color 0.3s ease;
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
  white-space: nowrap;
}

.carousel-nav button:hover {
  color: #5e4a3e;
}

.carousel-nav button.active {
  color: #73472c;
}

.active-line {
  position: absolute;
  bottom: 0;
  height: 1.3px;
  background-color: #9c6c4f;
  border-radius: 1px 1px 0 0;
  transition: left 0.3s ease, width 0.3s ease;
  will-change: left, width;
  pointer-events: none;

  width: 33.3333%; /* exactly one-third of the container */
  left: 0;
}

.text h4 {
	font-family: 'Poppins', sans-serif;
	font-style: italic;
	font-size: 0.8rem;
	font-weight: 900;
	color: #bab09b;
	 text-transform: uppercase;
	 letter-spacing: 2px;
	  padding: 2rem 0;
}
.text h2 {
	font-family: 'Poppins', sans-serif;
	font-style: italic;
	font-size: 1.2rem;
	font-weight: 900;
	color: #6e6d6c;
	 text-transform: uppercase;
	 letter-spacing: 1px;
	 text-align: left;
}

.text p {
	font-family: 'Poppins', sans-serif;
	font-style: italic;
	font-size: 0.9rem;
	font-weight: 700;
	color: #222;
	 letter-spacing: 0.3px;
	   padding: 0.75rem 0;
}
.gcash {width: 50% !important;}

/*************************** GIFT INFO******************************/


@media (max-width: 1024px) {
.our-gift-section {
  height: 400px;
margin-top: 50px;
}
.about p{font-size: 15px; max-width: 480px;}

}





/***************************
  MEDIA QUERIES FOR RESPONSIVENESS
****************************/

/* Tablet & below (<= 768px) */
@media (max-width: 768px) {
  /* Section height fixes */
  #our-story,
  #giftinfo {
    height: auto !important;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .our-story-section h1{font-size: 3rem;}
	.our-story-section p{font-size: 1rem;}
  /* Carousel nav: scrollable & readable */
  .carousel-nav {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .carousel-nav button {
    flex: 0 0 auto;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }

  .active-line {
    display: none; /* Optional: hide underline on smaller screens */
  }

  /* Text formatting */
  .text h2 {
    font-size: 1rem;
    text-align: center;
    line-height: 1.3;
  }

  .text p {
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.5;
  }

  .text h4 {
    font-size: 0.7rem;
    text-align: center;
    padding: 1rem 0;
  }

  .unplugged-text {
    font-size: 1.2rem;
    text-align: center;
    padding: 1rem;
  }

  /* Dress code swatches */
  .swatch-group {
    gap: 1rem;
  }

  .swatch {
    width: 48%;
  }

  .circle {
    width: 50px;
    height: 50px;
  }

  /* GCash image */
  .gcash {
    width: 50% !important;
    display: block;
    margin: 1rem auto;
  }
  .img-unplugged img {
    width: 65% !important;
  }
 
  .carousel-slide .text{max-width: 70% !important;}
  
  .dress-code-wrapper {padding: 0px !important;}
  #slide3 img{ width: 50% !important;}
}

/* Mobile only (<= 480px) */
@media (max-width: 480px) {
  
  .carousel-nav {
    max-width: 100%;
  }

  .carousel-nav button {
    font-size: 0.8rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  /* Swatch layout stacking */
.swatch {
     flex: 1 1 calc(25% - 12px); /* 4 per row */
  }
.group-label {font-size: 1.3rem;}
.sub-label {font-size: 0.5rem;}
.label-top {font-size: 0.5rem;}
.circle {   
	width: 30px;
    height: 30px;
	}
  /* Ensure text sections don’t overflow */


.text h4{font-size: 10px; line-height: 1.3;}
.text h2{font-size: 10px; line-height: 1.3;}
.text p{font-size: 12px; line-height: 1.2;}
.gift h1{
	 font-family: 'Arizonia', cursive;
	
    margin: 0 auto 0.8em;

	
}
 .unplugged-text {
    font-size: 1rem;
    text-align: center;
    padding: 0px;
  }
.carousel-nav button {
  padding: 0.5rem 0;
  font-size: 0.6rem !important;
}
.carousel-slide img {width: 60% !important;}
  #slide3 img { width: 65% !important;}
  
  .dress-code-wrapper {height: 380px;}
}

 

/*************************** GIFT INFO******************************/





    /* Carousel container and slides same as before */
    .welcome-carousel {
     
      margin: 0 auto;
      position: relative;
      height: 100vh;
      overflow: hidden;
    }

 .carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, opacity 2s ease 0.3s;
  opacity: 1;
}

.carousel-slide.inactive {
  opacity: 0;
  pointer-events: none;
}

    .carousel-slide .img {
      flex: 0 0 400px;
      max-width: 400px;
    }

    .carousel-slide img {
      width: 100%;
      height: auto;
      border-radius: 10px;
      box-shadow: 0 6px 12px rgba(0,0,0,0.1);
      object-fit: cover;
    }

    .carousel-slide .text {
      max-width: 450px;
      text-align: left;
    }


    @media (max-width: 768px) {
      .carousel-slide {
        flex-direction: column;
        text-align: center;
        min-height: auto;
      }
      .carousel-slide .img,
      .carousel-slide .text {
        max-width: 100%;
        flex: none;
      }
    }







/* VIP SECTION */
.bridal-title{ font-family: 'Arizonia', cursive; font-size: 4.5rem; color: #73472c;}
  
  	.our-vip-section {
 position: relative;
  width: 100%;
  height: 500px;
  background-image: url('../images/vip.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
    clip-path: polygon(0 0, 100% 20%, 100% 85%, 0 100%); /* Sharper and more noticeable slants */
}

.our-vip-section::before {
    content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #73472c;
  opacity: 0.7;
  z-index: -1;
  clip-path: inherit; /* Ensures the overlay follows the same slanted shape */
}
  

#vip {
	background-color: #fffaf5;
	height: 100vh;
	
}

    .wedding-swiper {
      width: 100%;
      padding-top: 30px;
      padding-bottom: 30px;
    }
	.wedding-swiper .swiper-slide {
  width: 300px;
  height: 400px;
}

    .wedding-slide {
      width: 300px;
      height: 400px;
      box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
      filter: blur(1px);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: end;
      align-items: self-start;
    }

    .swiper-slide-active {
      filter: blur(0px);
    }

    .swiper-pagination-bullet,
    .swiper-pagination-bullet-active {
      background: #73472c !important;
	 
    }

    .wedding-slide span {
      
      color: #fff;
      background: #1b7402;
      padding: 7px 18px 7px 25px;
      display: inline-block;
      border-radius: 0 20px 20px 0px;
      letter-spacing: 2px;
      font-size: 1.5rem;
     font-family: 'Arizonia', cursive;
    }

    .wedding-slide-one span { background: #73472c; }
    .wedding-slide-two span { background: #73472c; }
    .wedding-slide-three span { background: #73472c; }
    .wedding-slide-four span { background: #73472c; }
	.wedding-slide-five span { background: #73472c; }
    .wedding-slide-six span { background: #73472c; }
    .wedding-slide-seven span { background: #73472c; }
     .wedding-slide-eight span { background: #73472c; }
	.wedding-slide-nine span { background: #73472c; }
    .wedding-slide-ten span { background: #73472c; }
    .wedding-slide-eleven span { background: #73472c; }
	 .wedding-slide-twelve span { background: #73472c; }
    .wedding-slide h2 {
      color: #fff;
      font-family: "Bonheur Royale", cursive;
	  font-style: normal;  
      font-weight: 400;
      font-size: 2rem;
      line-height: 1.4;
      margin-bottom: 15px;
      padding: 25px 45px 0 25px;
    }

    .wedding-slide p {
      color: #fff;
      font-family: 'Poppins', sans-serif;
      font-weight: 300;
      display: flex;
      align-items: center;
      padding: 0 25px 35px 25px;
    }

    .wedding-slide svg {
      color: #fff;
      width: 22px;
      height: 22px;
      margin-right: 7px;
    }

    .wedding-slide-one {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/b1.jpg) no-repeat 50% 50% / cover;
    }

    .wedding-slide-two {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/b2.jpg) no-repeat 50% 50% / cover;
    }

    .wedding-slide-three {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/b3.jpg) no-repeat 50% 50% / cover;
    }

    .wedding-slide-four {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/b4.jpg) no-repeat 50% 50% / cover;
    }

    .wedding-slide-five {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/b5.jpg) no-repeat 50% 50% / cover;
    }
	  .wedding-slide-six {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/b6.jpg) no-repeat 50% 50% / cover;
    }
  .wedding-slide-seven {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/b7.jpg) no-repeat 50% 50% / cover;
    }
	 .wedding-slide-eight {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/b8.jpg) no-repeat 50% 50% / cover;
    }

 .wedding-slide-nine {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/b9.jpg) no-repeat 50% 50% / cover;
    }

 .wedding-slide-ten {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/b10.jpg) no-repeat 50% 50% / cover;
    }

 .wedding-slide-eleven {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/b11.jpg) no-repeat 50% 50% / cover;
    }

 .wedding-slide-twelve {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/b12.jpg) no-repeat 50% 50% / cover;
    }



/*Groomsmen*/
  .wedding-slide-g1 {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/g2.jpg) no-repeat 50% 50% / cover;
    }

   .wedding-slide-g2 {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/g3.jpg) no-repeat 50% 50% / cover;
    }

    .wedding-slide-g3 {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/g1.jpg) no-repeat 50% 50% / cover;
    }

    .wedding-slide-g4 {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/g4.jpg) no-repeat 50% 50% / cover;
    }

    .wedding-slide-g5 {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/g5.jpg) no-repeat 50% 50% / cover;
    }
	  .wedding-slide-g6 {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/g6.jpg) no-repeat 50% 50% / cover;
    }
  .wedding-slide-g7 {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/g7.jpg) no-repeat 50% 50% / cover;
    }
	 .wedding-slide-g8 {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/g8.jpg) no-repeat 50% 50% / cover;
    }

 .wedding-slide-g9 {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/g9.jpg) no-repeat 50% 50% / cover;
    }

.wedding-slide-g10 {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/g10.jpg) no-repeat 50% 50% / cover;
    }

 .wedding-slide-g11 {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/g12.jpg) no-repeat 50% 50% / cover;
    }

.wedding-slide-g12 {
      background: linear-gradient(to top, #73472c, #73472c00, #73472c00),
        url(../images/g11.jpg) no-repeat 50% 50% / cover;
    }

	.wedding-slide-g1 span { background: #beac94; }
    .wedding-slide-g2 span { background: #beac94; }
    .wedding-slide-g3 span { background: #beac94; }
    .wedding-slide-g4 span { background: #beac94; }
	.wedding-slide-g5 span { background: #beac94; }
    .wedding-slide-g6 span { background: #beac94; }
    .wedding-slide-g7 span { background: #beac94; }
     .wedding-slide-g8 span { background: #beac94; }
	.wedding-slide-g9 span { background: #beac94; }
    .wedding-slide-g10 span { background: #beac94; }
    .wedding-slide-g11 span { background: #beac94; }
	 .wedding-slide-g12 span { background: #beac94; }




    .swiper-3d .swiper-slide-shadow-left,
    .swiper-3d .swiper-slide-shadow-right {
      background-image: none;
    }

   
   
   
   
   .carousel-nav-vip {
  position: relative;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #d8cfc3; /* thin full container line */
  max-width: 1100px;
  margin: 0 auto 2.5rem auto;
  padding-bottom: 0.5rem;
  gap: 0;
}
.carousel-nav-vip button {
  flex: 1 1 33.3333%;
  background: none;
  border: none;
  padding: 0.75rem 0;
  font-family: 'Arizonia', cursive;
  font-size: 3rem;
  font-weight: 700;
  color: #f0e8dd;
  cursor: pointer;
  transition: color 0.3s ease;
  text-align: center;
  
  white-space: nowrap;
}

.carousel-nav-vip button:hover {
  color: #5e4a3e;
}

.carousel-nav-vip button.active {
  color: #4b3e2d;
}




.active-line-vip {
  position: absolute;
  bottom: 0;
  height: 1px;
  background-color: #d8cfc3;
  border-radius: 1px 1px 0 0;
  transition: left 0.3s ease, width 0.3s ease;
  will-change: left, width;
  pointer-events: none;

  width: 33.3333%; /* exactly one-third of the container */
  left: 0;
}

    .vip-carousel {
      position: relative;
      width: 100%;
      min-height: 60vh;
      background: #fefaf6;
	  
      overflow: hidden;
	  margin: 0 auto;
    }

	.carousel-slide-vip {
		  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, opacity 2s ease 0.3s;
  opacity: 1;
	}
	.carousel-slide-vip.inactive {
  opacity: 0;
  pointer-events: none;
}


    .sponsor {
      font-family: 'Playfair Display', serif;
      background-color: #fefaf6;
      color: #4b3e2d;
      position: relative;
	
    }

    .container-sponsor {
      background-color: transparent;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      padding: 40px;
      position: relative;
      overflow: hidden;
    }

     .sponsor h1, h2 {
      font-family: 'Great Vibes', cursive;
      text-align: center;
      font-size: 1.7rem;
    }
	   .sponsor h5 {
     font-family: 'Arizonia', cursive;
      text-align: center;
      margin-bottom: 20px;
      font-size: 1.7rem;
    }

     .sponsor .light-labels {
      text-align: center;
      color: #c7b8aa;
      font-size: 0.9rem;
      font-style: italic;
    }

     .sponsor ul {
      list-style: none;
      padding: 0;
      text-align: center;
    }

     .sponsor li {
      margin-bottom: 10px;
		font-size: 14px;
line-height: 1;
		
    }

.decor {
  position: absolute;
  opacity: 0.3;
 
}

.decor-top-left {
  top: 0;
  left: 0;
  width: 500px;
}

.decor-bottom-right {
  bottom: 0;
  right: 0;
  width: 500px;
  transform: rotate(180deg);
}
	.border-end {
  border-right: 1px solid #d8cfc3 !important;
}







/* Responsive adjustments */
@media (max-width: 768px) {
  .carousel-nav-vip button {
    font-size: 1.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

@media (max-width: 480px) {
  .carousel-nav-vip {
    max-width: 100%;
  }
   .carousel-nav-vip button {
    font-size: 1.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .carousel-nav button {
   
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
.text-body {font-size: 0.9rem;}
.bridal-title {font-size: 2.5rem;}

  .border-start {
    border-left: 1px solid #000; /* Black divider line */
  }
}





/*rsvp*/
#rsvp {background: #f0e8dd;	}
#rsvp h3 {
 font-family: 'Arizonia', cursive;
 font-size: 55px;
 color: #beac94 !important;

}
 
.form-rsvp label{ font-family: 'Poppins', sans-serif; font-weight: 700;}
 
 
.form-control-transparent,
.form-select.form-control-transparent,
textarea.form-control-transparent {
  background-color: transparent !important;
  border: 1px solid #fff !important;
  border-radius: 0 !important;
  color: white !important;
  
}

  .form-control-transparent::placeholder {
    color: rgba(255,255,255,0.7) !important;
  }
  .form-select.form-control-transparent {
    border-color: #fff !important;
    color: white !important;
  }
  .form-select.form-control-transparent option {
    color: black !important;
  }
  /* Remove arrow color for select on Firefox */
  select.form-control-transparent::-ms-expand {
    display: none;
  }
  
  
  .form-control-transparent:focus,
.form-select.form-control-transparent:focus,
textarea.form-control-transparent:focus {
  border-color: #beac94 !important;
  outline: none;
  box-shadow: none;
}

.form-select,
.btn-rsvp {
  border-radius: 0 !important;
  background-color: #ac9277 !important;
  color: #222 !important;
  border: none !important;
}
.btn-rsvp {
 padding: 10px;
  font-family: 'Poppins', sans-serif;
 font-size: 17px;
 font-weight: 700;
 color: #f0e8dd !important;
}
.btn-rsvp:hover {
  background-color: #f0e8dd !important; /* slightly darker shade */
  color:  #ac9277 !important;
}

select.form-select option {
  color: #222;
  background-color: #f0e8dd; 
 font-family: 'Poppins', sans-serif;
}


	.map-container {
 filter: grayscale(100%);
  transition: filter 0.5s ease;
}
.map-container:hover {
  filter: grayscale(0%);
}
	
	
.location h5{
	font-family: 'Arizonia', cursive;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 2px;

}
.span-location {
	color: #beac94;

}
.location p{font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700; color: #83746b;  }








.container-explore {
  margin: 0 auto;
  max-width: 380px;
  background-color: white;
 font-family: 'Poppins', sans-serif;
}

.xy-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.transition {
	transition: all 350ms ease-in-out;
}



/* Featured Image */
.feature {
  position: relative;
  margin-bottom: 1rem;
}
.featured-item {
  position: relative;
  width: 100%;
  padding-bottom: 66.667%;
  background-color: #ddd;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.featured-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

/* gallery-section */
.gallery-wrapper {
  overflow: hidden;
}
.gallery {
  display: flex;
  gap: 4px;
  transition: all 350ms ease-in-out;
}
.item-wrapper {
  position: relative;
  width: 23%;
  flex-shrink: 0;
  cursor: pointer;
}
.gallery-item {
  position: relative;
  width: 100%;
  padding-bottom: 66.667%;
  background-color: #ccc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.gallery-item.active {
  opacity: 1;
}
.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  font-size: 10px;	
}

/* Optional: Hide scroll buttons if you're using auto-scroll */
.controls {
  display: none;
}






/*photo*/

#photo {
background: #f0e8dd;
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  overflow-x: hidden;
 padding: 0 4px !important;
}

.title {
  font: 3em/1 monospace;
  font-variant: small-caps;
  letter-spacing: 0.5em;
  margin: 2em;
}


.btn-photo {

  background-color: #beac94;
  border: none;

 padding: 10px;
  font-family: 'Poppins', sans-serif;
 font-size: 17px;
 font-weight: 700;
    color: #f0e8dd !important;

}

.see-more-wrapper {
  text-align: right;
  margin-top: 1rem;
}
#photo .col-lg-3, 
#photo .col-md-3, 
#photo .col-sm-6, 
#photo .col-xs-6 {
 overflow: visible;  /* allow overflow */
  padding-bottom: 20px; /* space below for translateY */
  position: relative;
}

#photo img {
  width: 100%;
  display: block;
  margin-top: 8px;
  vertical-align: middle;
  filter: grayscale(100%);
  transition: filter 0.5s ease, transform 0.5s ease;
  cursor: pointer;
  transform-origin: center center
}

#photo img:hover {
  transform: translateY(-10px) scale(1.1);
  filter: grayscale(0%);
}

#photo {
	   flex: 1 1 calc(25% - 12px);
 
}

/* Responsive adjustments */
@media (max-width: 768px) {
.title {
  font: 2em/1 monospace;
  font-variant: small-caps;
  letter-spacing: 0.5em;
  margin: 1em;
}

#photo { height: 150%; margin-top: 400px; }
}

@media (max-width: 480px) {
.title {
 font: 1.7em/1 monospace;
  margin: 50px 0px 20px 50px;
}
.gallery-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns by default */

}
#photo { padding: 0px 50px 0px 50px !important; position: relative !important; top: 180px;}



 .photo-grid {
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    overflow-x: auto;
    white-space: nowrap;
    grid-template-columns: repeat(4, minmax(80px, 1fr)); /* 4 per row */
  }

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




	 /* Fullscreen overlay (landing modal) */
  #landingModal .modal-content {
      background-image: url('../images/landing.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: white;
      text-align: center;
      border: none;
      border-radius: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
	

    #landingModal h1 {
       font-family: "Bonheur Royale", cursive;
      font-size: 130px;
      color: #c59d5f;
    }

    #landingModal h2 {
      font-family: "Bonheur Royale", cursive;
      font-size: 50px;
      color: #ddd4c1;
    }
       #landingModal h3 {
       font-family: 'Poppins', sans-serif;
      font-size: 15px;
      color: #beac94;
      font-weight: 900;
      text-transform: uppercase;
    }

    #enterBtn {
     font-family: 'Poppins', sans-serif;
      font-weight: 900;
	  letter-spacing: 2px;
     padding: 18px 45px;
  font-size: 1.5rem;
  color: white;
  background: linear-gradient(135deg, #ccae62, #b88d38);
  border: none;
  border-radius: 50px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
  letter-spacing: 1px;
  text-transform: uppercase;
    }

    #enterBtn:hover {
	   background: linear-gradient(135deg, #cc8e35, #a36f1d);
  transform: translateY(-2px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
    }
/* Optional animation */
    .fade-custom {
      animation: fadeOutZoom 1s forwards;
    }

    @keyframes fadeOutZoom {
      to {
        opacity: 0;
        transform: scale(0.8);
      }
    }

	
@keyframes fadeWide {
  from {
    opacity: 0;
    letter-spacing: -0.1em;
  }
  to {
    opacity: 1;
    letter-spacing: 0.05em;
  }
}	
	
	
	
	
@keyframes slideBlurIn {
  0% {
    transform: translateY(40px);
    opacity: 0;
    filter: blur(4px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}
	
	
	
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0px white;
  }
  50% {
    box-shadow: 0 0 20px #fff, 0 0 40px #ffb142;
  }
  100% {
    box-shadow: 0 0 0px white;
  }
}

@keyframes dropIn {
  from {
    transform: translateY(-200px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


@keyframes fadeWide {
  from {
    opacity: 0;
    letter-spacing: -0.1em;
  }
  to {
    opacity: 1;
    letter-spacing: 0.05em;
  }
}

  #audioControls {
    opacity: 1;
    transition: opacity 0.5s ease;
  }

  #audioControls.hidden {
    opacity: 0;
    pointer-events: none;
  }


    @media (max-width: 600px) {
      #landingModal h1 {
        font-size: 3.7rem;
      }
		  #landingModal h2 {
        font-size: 2rem;
      }
      #enterBtn {
        font-size: 1rem;
        padding: 0.8rem 1.5rem;
      }
            #landingModal h3 {
     
      font-size: 13px;
     
    }
    .landing-wedding {overflow-y: hidden;}
      
    }