@font-face {
    font-family: "Brittany";
    src: url(../fonts/BrittanySignature.ttf);
   }
   
   @font-face {
    font-family: "Acumin";

    src: url(../fonts/Acumin.ttf);
   }

   :root {
    --primary-color: #d96f8c;      /* Blush Pink */
    --secondary-color: #00bfff;    /* Candy Blue */

    
    --primary-font: "Brittany";
    --secondary-font: "Acumin";
  }

  

@property --progress {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
  }

  @keyframes progress {
    from { --progress: 0; }
    to { --progress: 1; }
  }

  @keyframes flutter {
    from { transform: rotateX(0); }
    to { transform: rotateX(80deg); }
  }

  .butterfly-container {
    --PI: 3.1415;
    --UNIT: 1vw;
    --r: 5;
    position: fixed;
    left: 0;
    animation: progress var(--duration, 5s) linear infinite;
    top: var(--top, 50vh);
    width: calc(100 * var(--UNIT));
    z-index: 10;
  }

  .butterfly {
    --shape-height: 5px;
    --shape-width: var(--butterfly-width, 3vw);
    position: absolute;
    top: calc(-0.5 * var(--shape-height));
    left: calc(-0.5 * var(--shape-width));
    width: var(--shape-width);
    height: var(--shape-height);
    translate: var(--x-with-unit) var(--y-with-unit);
    rotate: var(--beta-tangent-angle);
    background: none;
  }

  .butterfly__wing {
    transform-origin: center center;
    animation: flutter var(--flutter-duration, 120ms) alternate infinite;
  }

  .butterfly-container {
    --WAVE-COUNT: 2;
    --TOTAL-ANGLE: calc(var(--WAVE-COUNT) * 2 * var(--PI));
    --CONTAINER-WIDTH: 100;
    --x: calc(var(--progress) * var(--CONTAINER-WIDTH));
    --ROTATION-PER-LENGTH-UNIT: calc(var(--TOTAL-ANGLE) / var(--CONTAINER-WIDTH));
    --alpha-reference-angle: calc(var(--ROTATION-PER-LENGTH-UNIT) * var(--x) * 1rad);
    --y: calc(-1 * var(--r) * sin(var(--alpha-reference-angle)));
    --x-with-unit: calc(var(--x) * var(--UNIT));
    --y-with-unit: calc(var(--y) * var(--UNIT));
    --tan: calc(-1 * var(--r) * var(--ROTATION-PER-LENGTH-UNIT) * cos(var(--alpha-reference-angle)));
    --beta-tangent-angle: atan(var(--tan));
  }
  
  @media (max-width: 600px) {
  .butterfly-container {
    --butterfly-width: 8vw !important;
  }
}


  svg path {
    transition: fill 0.3s ease;
  }


  .hero-title {
    font-family: var(--primary-font);
    font-size: 5rem;
    margin-bottom: 0;
  }

  @media (max-width: 768px) {
  .hero-title {
    font-size: 3em;
  }

    .hero-subtitle {
    font-size: 3rem;
  }
}

  .hero-subtitle {
        font-family: var(--primary-font);
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
  }

  .save-btn {
    background-color: #f48ca3;
    border: none;
    font-size: 1rem;
    color: white;
  }

  .save-btn i {
    margin-left: 0.5rem;
  }

  /* Navbar scroll effect */
  .navbar {
    transition: background-color 0.3s ease;
  }

  .navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: #d96f8c !important;
  }

  .navbar.scrolled .nav-link {
    color: #d96f8c !important;
  }

  .navbar.scrolled .navbar-brand {
    color: #d96f8c !important;
  }

  .nav-link {
    color: white !important;
    margin: 0 0.75rem;
  }
 
  .hero-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;           /* fill viewport */
      background-color: rgba(0, 0, 0, 0.8); /* Adjust the 0.5 for more/less dim */
    overflow: hidden;
  }
  .hero-section video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .hero-content {
    position: relative;
    z-index: 1;              /* above video */
    text-align: center;
    color: white;
  }

.logo img {
  max-width: 100%;
  height: 150px;
}

@media (max-width: 768px) {
  .logo img {
    max-width: 150px; /* Or any size appropriate for mobile */
  }
}

  /*RSVP*/
  #timer {
    width: 80%;
    height: 120px;
    margin: 10px auto;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0px 20px 32px -19px rgba(0, 0, 0, 0.15);
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
  }
  
  #timer::after {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    content: '';
    border: 3px dashed #e1b5d2;
    pointer-events: none;
  }
  
  #timer .time {
    flex: 1 1 auto;
    max-width: 20%;
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
    text-align: center;
    padding: 10px 0;
    font-family: "Acumin", cursive;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
  }

  .time h2{
    font-family: var(--primary-font), cursive;
  }
  
  #timer .time:first-child {
    border-left: none;
  }
  
  #timer .time h3 {
    font-size: 20px;
    margin-bottom: 5px;
    font-family: var(--primary-font);
    color: var(--primary-color);
  }
  
  #timer .time span {
    font-size: 10px;
    color: var(--primary-color);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 5px;
  }
  
  #timer .time.time-2 {
    background: var(--primary-color);
    color: #fff;
  }
  
  #timer .time.time-2 h3 {
    color: #fff;
  }

  .timer-section .subheading, .text-uppercase{
    color:var(--primary-color);
  }
  .timer-section .text-uppercase{
    color:var(--primary-color);
  }
  
  @media (max-width: 767.98px) {
    #timer {
      flex-wrap: nowrap;
      overflow-x: auto;
    }
  
    #timer .time {
      max-width: 20%;
      font-size: 20px;
      padding: 6px 0;
    }
  
    #timer .time h3 {
      font-size: 16px;
    }
  
    #timer .time span {
      font-size: 9px;
    }
  }

  .timer-section{
    background-color: #f7f7f7;
  }

  .timer-section img{
    max-width: 300px; 
    max-height: 300px;
    right: -220px;
    top: -50px;
    z-index: 0;
    pointer-events: none;
  }
  
  @media (max-width: 768px) {
    #timer {
        width: 100%;}
       
  }
  
  .subheading{
    font-family: var(--primary-font), cursive;
    margin-top: 2rem;
    font-size: 4rem;
    text-align: center;
    margin-bottom: 2rem;
  }

  .section-attire {
      background-color: var(--primary-color);
      color: white;
      font-family: 'Segoe UI', sans-serif;
      padding: 2rem;
  }

  .e-invitation {
      background-color: var(--primary-color);
      color: white;
      font-family: 'Segoe UI', sans-serif;
      padding: 2rem;
  }  

  .title-guide {
    font-size: 2rem;
    font-family: var(--primary-font);
}
  .title {
    
      font-weight: bold;
      text-transform: uppercase;
  }
  .color-circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 8px;
  }
  .attire-img {
      max-width: 100px;
      margin-top: 1rem;
  }

  .timeline-title {
      font-size: 3rem;
      color: var(--primary-color);
  }

  .timeline-date {
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 1rem;
      font-weight: bold;
      margin-bottom: 2rem;
      color: var(--primary-color);
  }

  .timeline-table td {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid #af7ea0;
      color: var(--primary-color);
      font-weight: 500;
  }

  .timeline-table td:first-child {
      font-weight: bold;
      white-space: nowrap;
  }

  .icon-wrapper {
      position: relative;
      width: 100%;
      min-height: 500px;
  }

  .icon-wrapper img {
      position: absolute;
      max-width: 80px;
  }

  /* Custom positions to mimic the sample image layout */
  .icon-bouquet { top: 30px; right: 80px; }
  .icon-butterfly { top: -20px; right: 0; }
  .icon-rings { top: 160px; left: 40px; }
  .icon-logo { top: 220px; right: 70px; }
  .icon-toast { top: 300px; right: 40px; }
  .icon-cake { bottom: 0; left: 50%; transform: translateX(-50%); }

  @media (max-width: 768px) {
      .icon-wrapper {
          min-height: 300px;
      }

      .icon-wrapper img {
          position: static;
          display: inline-block;
          margin: 0.5rem;
      }
  }  

  .when-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 2rem;
}

  .when-section {
      background-color: var(--primary-color);
      color: white;
      font-family: var(--secondary-font);
      padding: 2rem;
  }

  .when-section p{
    font-family: var(--secondary-font);
  }

  /* Gallery Section */
  .gallery-section {
      background-color: var(--primary-color);
          padding: 3rem 1rem;
          text-align: center;
      }

      .gallery-title {
          font-size: 3.5rem;
          color: white;
          margin-bottom: 2.5rem;
      }

      .gallery-img {
          width: 100%;
          height: auto;
          border-radius: 6px;
          transition: transform 0.3s ease;
      }

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

      .gallery-grid .col-md-3 {
          margin-bottom: 1rem;
      }

   /* Gallery Section */
   .gallery-section {
    padding: 3rem 1rem;
    text-align: center;
}

.gallery-title {
    font-size: 3.5rem;
    color: white;
    margin-bottom: 2.5rem;
}

.gallery-img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    transition: transform 0.3s ease;
}

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

.gallery-grid .col-md-3 {
    margin-bottom: 1rem;
}

.modal-img {
width: 100vw;
height: 100vh;
object-fit: contain;
}
.btn-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
border: none;
color: white;
font-size: 2.5rem;
padding: 0.5rem 1.2rem;
border-radius: 0.5rem;
z-index: 10;
transition: background-color 0.2s ease;
}

.btn-nav:hover {
background-color: rgba(0, 0, 0, 0.8);
}

.btn-prev {
left: 1rem;
}

.btn-next {
right: 1rem;
}

@media (max-width: 576px) {
.btn-nav {
font-size: 2rem;
padding: 0.4rem 1rem;
}
}
.modal-content {
background-color: black;
border: none;
border-radius: 0;
padding: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
}

.modal-body {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
overflow: hidden;
}

.modal-img {
width: 100vw;
height: 100vh;
object-fit: contain;
}      

/* FAQS */
.faqs-section{
}  

.faqs-title{
    font-size: 3rem;
    font-family: var(--primary-font);
    color: var(--primary-color);
    text-align: center;
}

.text-pink {
    color: #e46c92;
  }

  .accordion-button {
    background-color: white;
  }

  .accordion-button:focus {
    box-shadow: none;
  }

  .accordion-button:not(.collapsed) {
    color: #e46c92;
    background-color: transparent;
  }

  .accordion-body {
    background-color: transparent;
  }

  .footer-section{
    background-color: var(--primary-color);

  }

.footer-section h5{
    font-family: var(--primary-font);
    letter-spacing: 5px;
}

.footer-section p{
    letter-spacing: 2px;
    font-family: var(--primary-font);

}

.butterfly-container {
    position: fixed;
    bottom: 0;
    right: -150px;
    z-index: 0;
    pointer-events: none; /* So it doesn't block clicks */
  }
  
  .butterfly-img {
    width: 150px; /* Adjust as needed */
    height: auto;
    max-width: 40vw; /* Responsive on smaller screens */
  }
  
/* GENERAL SETTINGS */

@media (max-width: 992px) {

  
    .section-attire p{
        font-size: .7rem;
    }

    .when-section p{
        font-size: .8rem;
    }

    .text-uppercase{
        font-size: .8rem;
    }

    .timeline-section td{
        font-size: .7rem;
    }
}/* Flipbook container and page styles */
#book {
  max-width: 100%;
  margin: 0 auto;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

#book .page {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Make canvas inside pages responsive */
#book canvas {
  max-width: 100%;
  height: auto;
}

/* Optional: improve mobile spacing */
@media (max-width: 768px) {
  .e-invitation {
    padding: 20px 10px;
  }
}

  #leaflet-map {
    width: 100%;
    height: 100%;
  }

  /* Default navbar */
#mainNavbar {
  transition: background-color 0.3s ease;
  background-color: transparent;
}

/* White background on scroll (already working) */
#mainNavbar.scrolled {
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* optional shadow */
}

/* Always white on mobile (even without scroll) */
@media (max-width: 768px) {
  #mainNavbar {
    background-color: white !important;
  }

    .nav-link {
    color: #d96f8c !important;
    margin: 0 0.75rem;
  }
 
}