* {
  margin: 0;
}


html,body{
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevents scrolling */
  /*width: 100vw;*/
  /*height: 100vh;*/
  display: flex;
  flex-direction: column;
  background-color: #FEFFF5;
  color: #3D3241;
  position: relative;
  
}

/* Background container */
.text-bg {
  position: absolute;
  top: -50%; /* Adjust so rotation still covers screen */
  left: -50%; /* Adjust so rotation still covers screen */
  width: 200vw; /* Increase width to ensure full coverage */
  height: 200vh; /* Increase height to ensure full coverage */
  transform: rotate(-30deg); /* Rotate the entire text background */
  pointer-events: none;
  z-index: 0; /* Keeps it below everything */
  display: flex;
  flex-direction: column;
}

/* Creating multiple rows */
.text-bg div {
  white-space: nowrap;
  font-size: 4vh;
  color: #3D3241;
  width: 100vw;
  display: flex;
  opacity: 0.2;
}

/* Odd rows (scrolling left) */
.text-bg div:nth-child(odd) {
  animation: scrollText 420s linear infinite;
}

/* Even rows (scrolling right) */
.text-bg div:nth-child(even) {
  animation: scrollTextReverse 420s linear infinite;
}

/* Animations */
@keyframes scrollText {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes scrollTextReverse {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}


#viewport{
  width: 100vw;
  /*height: 216.67vw;  9:19.5 aspect ratio */
  /*
  height: 100vh; 
  max-height: 100vh;
  max-width: calc(100vh * 9 / 19.5);  Ensures it scales properly 
 
 */
  
  height: calc(var(--vh) * 100);
  max-height: calc(var(--vh) * 100);
  max-width: calc(calc(var(--vh) * 100) * 9 / 19);
  
  
  margin: auto auto 0; /* Centers horizontally and pushes to bottom */
  position: relative;
  
  overflow-y: auto; /* Prevents scrolling */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FEFFF5;
  z-index: 1;
}

.page{
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  margin: 0 auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  visibility: hidden;
  
}

.active{
  z-index: 2;
  visibility: visible;
}


#logo1{
  height: auto;
  width: 70%;
  left: 15%;
  top: 20%;
}

#logo2{
  /*filter: brightness(0) saturate(100%) invert(100%) sepia(37%) saturate(769%) hue-rotate(354deg) brightness(112%) contrast(106%);*/
  filter: invert(100%) grayscale(100%) brightness(100%);
  height: auto;
  width: 70%;
  left: 15%;
  top: 20%;
}

.asset.cta{
  width: 9%;
  height: auto;
  display: none;
  cursor: pointer;
  bottom: 2%;
  left: auto;
  right: 4.5%;
  top: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  
  animation: pulsebutton 1.5s infinite;
}

.asset.back{
  width: 5%;
  height: auto;
  /*display: block;*/
  cursor: pointer;
  bottom: auto;
  left: 2%;
  right: auto;
  top: 1%;
  
   animation: pulsebutton 1.5s infinite;
}


/* Keyframes for pulsing effect */
@keyframes pulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(255, 200, 0, 1));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 25px rgba(255, 200, 0, 1)); /* Stronger glow */
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(255, 200, 0, 1));
  }
}

#we{
  /*display: block;*/
  height: 12%;
  width: auto;
  top: 5%;
  left: 4%;
  padding: 3%;
  rotate: -12deg;
}

#are{
  /*display: block;*/
  height: 10%;
  width: auto;
  top: 27%;
  left: 19%;
  padding: 3%;
  rotate: 20deg;
}

#getting{
  /*display: block;*/
  height: 9%;
  width: auto;
  top: 45%;
  left: 0%;
  padding: 3%;
  rotate: -2deg;
}

#married{
  /*display: block;*/
  height: 8.5%;
  width: auto;
  top: 68%;
  left: 1%;
  padding: 3%;
  rotate: 9deg;
}
#edward-text{
    width: 80%;
    top: 18%;
    left: 2%;
    /*filter: brightness(0) saturate(100%) invert(100%) sepia(37%) saturate(769%) hue-rotate(354deg) brightness(112%) contrast(106%);*/
    filter: invert(100%) grayscale(100%) brightness(100%);
}

#edward-text-bg{
    width: 84%;
    height: 8%;
    top: 17%;
    left: 0%;
}

#edward-pp{
    height: 100%;
    left: -40%;
  
}

#mel-pp{
    height: 100%;
    left: -20%;
    
}

#bginvite{
    height: 101%;
    left: -18%;
    top: -1%;
    
}

#mel-text-bg{
    width: 60%;
    height: 7%;
    top: 78%;
    left: 48%;
}


#mel-caption-bg{
    width: 70%;
    height: 7%;
    top: 87%;
    left: 0%;
}

#mel-caption{

    width: 65%;
    top: 88%;
    left: 2%;

}

#edward-caption-bg{
    width: 85%;
    height: 7%;
    top: 8%;
    left: 15%;
    
}

#edward-caption{

    width: 80%;
    top: 9%;
    left: 18%;

}

#mel-text{
    width: 45%;
    top: 79%;
    left: 52%;
    /*filter: brightness(0) saturate(100%) invert(100%) sepia(37%) saturate(769%) hue-rotate(354deg) brightness(112%) contrast(106%);*/
    filter: invert(100%) grayscale(100%) brightness(100%);
}

#amp-text{
    width: 11%;
    top: 69%;
    left: 43%;
  
}

#date{
      width: 90%;
    rotate: 0deg;
    left: 4%;
    top: 12%;
  filter: drop-shadow(15px 15px 0px #3D3241) ;
}

.bg{
  height: 100%;
  width: 100%;
  background-position: bottom left;
}

#bg1{
  height: 100%;
  width: auto;
  left: -28%;
}


/*page 2*/

#hm-bg{
  width: 100%;
  
}

#hm-intro{
  display: block;
  width: 100%;
  
}

#hm-sticker1{
   top: 10%;
   width: 25%;
   left: 2%;
}

#hm-sticker3{
   top: 48%;
   width: 30%;
   left: 62%;
}


#hm-title-bg{
    height: 4%;
    width: 64%;
    left: 37%;
    top: 34.5%;
}


#hm-title-text{
   top: 10%;
    width: 94%;
    left: 2%;
  
}

#hm-title2-bg{
      height: 4%;
    width: 55%;
    left: 0;
    top: 39.5%;
}

#hm-title2-text{
        top: 5%;
   width: 94%;
    left: 2%;
}

#hm-title3-bg{
    height: 4%;
    width: 75%;
    left: 0;
    top: 88%;
}

#hm-title3-text{
        top: 5%;
   width: 94%;
    left: 2%;
}


#hm-img{
  width: 80%;
  border: 10px solid #FEFFF5;
      top:-1%;
    left: 19%;
    rotate: -9deg;
}

#hm-img2{
 width: 80%;
    border: 10px solid #FEFFF5;
    top: 49%;
    left: -8%;
    rotate: 4deg;
}

#hm-location-bg{
       width: 82%;
    height: 10%;
    top: 23%;
    rotate: 1deg;
  
}

#hm-location2-bg{
    width: 82%;
    height: 10%;
    top: 75%;
    left: 4%;
    rotate: 1deg;
  
}

#hm-location-text{
  width: 78%;
    left: 3%;
    top: 6%;
}

#hm-location2-text{
  width: 78%;
    left: 3%;
    top: 6%;
}


#hm-direction-url1,#hm-direction-url2{
  pointer-events: none;
  
}

#hm-direction{
  width: 15%;
  top: 21%;
  left: 73%;
  filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.8));
  
}
#hm-direction2{
  width: 15%;
  filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.8));
  top: 73%;
  left:76%;
  
}

#hm-time-bg{
    height: 5%;
    width: 20%;
    top: 38.2%;
    left: 79%;
    rotate: -2deg;
}

#hm-time2-text{
    top: 29%;
    left: 4%;
    width: 90%;
}

#hm-time2-bg{
    height: 5%;
    width: 18%;
    top: 43%;
    left: 38%;
    rotate: 3deg;
}


#hm-time3-text{
   top: 20%;
    left: 2%;
    width: 93%;
}

#hm-time3-bg{
    height: 5%;
    width: 20%;
    top: 92%;
    left: 57%;
    rotate: 2deg;
}


#hm-time-text{
    top: 20%;
    left: 3%;
    width: 90%;
}

#hm-description-bg{
    height: 25%;
    width: 80%;
    top: 75%;
    left: 0%;
    rotate: 5deg;
}

/*page RSVP page 3*/

#page-rsvp{
  background-image: url(rsvp-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
}

#rsvp-calendar{
   top: 0%;
    left: 55%;
    width: 41%;
  rotate: 10deg;
}

#rsvp-dress{
   top: 50%;
    left: 1%;
    width: 40%;
  rotate: 2deg;
}

#rsvp-shirt{
   top: 87%;
    left: 48%;
    width: 30%;
  rotate: -5deg;
}


#rsvp-disclaimer{
    top: 32%;
    left: 2%;
    width: 41%;
}


#rsvp-retropop{
  width: 67%;
    top: 40%;
    left: 34%;
}

#rsvp-dresscode{
    top: 43%;
    left: 2%;
    width: 75%;
    rotate: -4deg;
}

#rsvp-copy1bg{
    width: 71%;
    top: 12%;
  
}

#rsvp-copy1{
  width: 66%;
    top: 13%;
    left: 2%;
}

#rsvp-btncopy1bg{
    top: 26%;
    width: 38%;
    left: 55%;
}

#rsvp-btncopy1{
  top: 29%;
    width: 35%;
    left: 57%;
   animation: pulsetext 1.5s infinite;
}

#rsvp-copy2bg{
    width: 66%;
    top: 70%;
    left: 0%;
}
#rsvp-copy2{
    top: 72%;
    width: 62%;
    left: 1%;
}

#rsvp-btncopy2bg{
    width: 36%;
    top: 88%;
    left: 4%;
}

#rsvp-btncopy2{
    width: 35%;
    top: 89%;
    left: 4%;
    animation: pulsetext 1.5s infinite;
}

#rsvp-reminder{
    width: 70%;
    left: 45%;
    top: -7%;
    rotate: 20deg;
}



.bg-blue{
  background-color: #2753e1;
}

.bg-yellow{
  background-color: #f0d955;
  color: #3D3241;
}

.bg-green{
  background-color: #729A1C;
}

.bg-orange{
  background-color: #FF7E21;

}

.bg-violet{
 
  background-color: #8b6ad6;
}


.bg-mint{
 
  background-color: #54aaa9;
}

.bg-pink{
  background-color: #FF8686;

}
.bg-white{
  background-color: #FEFFF5;
}

.bg-soft-orange{
  background-color: #ffcba6;
}

/*page donate*/



#donate-disclaimer{
    width: 60%;
    top: 85%;
    left: 3%;
}

#donate-btn2{
    width: 50%;
    top: 72%;
    left: 6%;
   animation: pulsetext 1.5s infinite;
}


#donate-btn2bg{
    width: 55%;
    top: 69%;
    left: 4%;
}

#donate-money{
    top: 65%;
    width: 58%;
    left: 53%;
}

#donate-or{
    width: 30%;
    top: 56%;
    left: 48%;
}

#donate-gift{
  width: 65%;
    top: 34%;
    left: 1%;
  
}

#donate-btn1{
  width: 70%;
    top: 28%;
    left: 22%;
   animation: pulsetext 1.5s infinite;
  
}

#donate-btn1bg{
  width: 70%;
    top: 25%;
    left: 20%;
  
}

#donate-copy{
    width: 87%;
    top: 11%;
    left: 6%;
  
}

#donate-copybg{
  width: 95%;
    top: 10%;
    left: 3%;

}

#transition {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  width: 100vw;
  max-width: calc(calc(var(--vh) * 100) * 9 / 19);
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 1fr; /* Ensures rows scale properly */
  pointer-events: none;
}

.block {
  width: 100%;
  aspect-ratio: 1 / 1; /* Keeps blocks square */
}

.asset {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  display: none;
  background-repeat: no-repeat;
  z-index: 1;
}

.button {

  font-weight: bold;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  
  /* Retro-style shadow using filter */
  filter: drop-shadow(4px 4px 0px #3D3241) drop-shadow(8px 8px 0px #ffbf00); /* Dual shadow for depth */
  
  /* Pulsing animation */
  animation: pulsebutton 1.5s infinite;
}

@keyframes pulsebutton {
  0% {
    transform: scale(1);
    filter: drop-shadow(4px 4px 0px #3D3241) drop-shadow(8px 8px 0px #ffbf00);
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(6px 6px 0px #3D3241) drop-shadow(10px 10px 0px #ff4d6d);
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(4px 4px 0px #3D3241) drop-shadow(8px 8px 0px #ffbf00);
  }
}

@keyframes pulsetext {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.blur{
  filter: blur(10px);
}

#angpao-detail{
  display: block;
  position: absolute;
  width: 90%;
  top: 100%;
  left: 5%;
  background-color: wheat;
  align-content: center;
  text-align: center;
  font-size: 150%;
  z-index: 10;
  transition: all 1s;
  /*padding: 10px;*/
  box-sizing: border-box;
  filter: drop-shadow(15px 15px 0px #3D3241) ;
}

#angpao-detail-img{
  display: block;
  width: 100%;
  height: auto;
 
}

#angpao-cta1{
  height: 20%;
  width: 65%;
  position: absolute;
  top: 30%;
  left: 20%;
  display: block;
  cursor: pointer;
}

#angpao-cta2{
  height: 20%;
  width: 65%;
  position: absolute;
  top: 50%;
  left: 20%;
  display: block;
  cursor: pointer;
}

#donate-wrapper{
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(donate-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
}

#angpao-detail.active{
  top: 12%;
}

 .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background: none;
      border: none;
      font-size: 40px;
      cursor: pointer;
    }


#page-story{
  background-image: url(story-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.story-caption-left{
  /*display: block;*/
  width: 90%;
  left: 0;
  top:82%;
  position: absolute;
  height: auto;
  padding: 2%;
  display: inline-block;
  bottom: auto;
}



.story-caption-right{
  /*display: block;*/
  width: 90%;
  left: 10%;
  top:82%;
  position: absolute;
  display: flex;
  padding: 2%;
  bottom: auto;
}

.story-caption-left img, .story-caption-right img{
  width: 90%;
  display: block;
  
}

#cmb{
  position: absolute;
  top: 55%;
  left: 55%;
  width: 35%;
  height: auto;
  display: block;
  rotate: 4deg;
}

.story-photo-p{
  /*display: block;*/
  width: 65%;
  border: 10px solid #FEFFF5;
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.25),
    8px 8px 8px rgba(0, 0, 0, 0.1);
}

.story-photo-l{
  /*display: block;*/
  width: 90%;
  border: 10px solid #FEFFF5;
  box-shadow:
    4px 4px 0 rgba(0, 0, 0, 0.25),
    8px 8px 8px rgba(0, 0, 0, 0.1);
}

#story-photo1 { left: 24%; top: 34%; rotate: 2deg; }
#story-photo2 { left: 23%; top: 35%; rotate: -3deg; }
#story-photo3 { left: 14%; top: 32%; rotate: 2deg; }
#story-photo4 { left: 11%; top: 38%; rotate: -13deg; }
#story-photo5 { left: 14%; top: 30%; rotate: -2deg; }
#story-photo6 { left: 20%; top: 34%; rotate: 4deg; }
#story-photo7 { left: 16%; top: 31%; rotate: -7deg; }
#story-photo8 { left: 22%; top: 36%; rotate: 9deg; }
#story-photo9 { left: 10%; top: 33%; rotate: -6deg; }
#story-photo10 { left: 12%; top: 39%; rotate: 3deg; }
#story-photo11 { left: 18%; top: 32%; rotate: -5deg; }
#story-photo12 { left: 13%; top: 35%; rotate: 6deg; }
#story-photo13 { left: 17%; top: 31%; rotate: -8deg; }
#story-photo14 { left: 19%; top: 36%; rotate: 11deg; }
#story-photo15 { left: 21%; top: 30%; rotate: -4deg; }
#story-photo16 { left: 15%; top: 38%; rotate: 5deg; }
#story-photo17 { left: 8%; top: 32%; rotate: -9deg; }
#story-photo18 { left: 6%; top: 34%; rotate: 7deg; }
#story-photo19 { left: 25%; top: 31%; rotate: -6deg; }
#story-photo20 { left: 7%; top: 30%; rotate: 9deg; }
#story-photo21 { left: 21%; top: 34%; rotate: -10deg; }
#story-photo22 { left: 10%; top: 36%; rotate: 5deg; }
#story-photo23 { left: 6%; top: 32%; rotate: -11deg; }

#story-travel1 { left: 9%; top: 33%; rotate: 4deg; }
#story-travel2 { left: 18%; top: 36%; rotate: -6deg; }
#story-travel3 { left: 11%; top: 35%; rotate: 6deg; }
#story-travel4 { left: 5%; top: 34%; rotate: -7deg; }
#story-travel5 { left: 22%; top: 32%; rotate: 8deg; }
#story-travel6 { left: 13%; top: 31%; rotate: -5deg; }

#story-photoupdown1 { left: 0%; top: 46%; rotate: 7deg; }
#story-photoupdown2 { left: 46%; top: 23%; rotate: -4deg; }
#story-photoupdown3 { left: -20%; top: 20%; rotate: 5deg; }
#story-photoupdown4 { left: 34%; top: 46%; rotate: -3deg; }

#story-photocareer1 { left: -9%; top: 36%; rotate: 6deg; }
#story-photocareer2 { left: 50%; top: 34%; rotate: -7deg; }

#story-photoanniv1 { left: -5%; top: 27%; rotate: -12deg; }
#story-photoanniv2 { left: 0%; top: 49%; rotate: 10deg; }
#story-photoanniv3 { left: 52%; top: 28%; rotate: -10deg; }

#story-lotte1 { left: 7%; top: 36%; rotate: -5deg; }
#story-lotte2 { left: 10%; top: 32%; rotate: 6deg; }
#story-lotte3 { left: 12%; top: 30%; rotate: -4deg; }

#story-nextchap1 { left: 0%; top: 28%; rotate: 13deg; }
#story-nextchap2 { left: 17%; top: 50%; rotate: -3deg; }

#story-prewed1 { left: 22%; top: 31%; rotate: 5deg; }
#story-prewed2 { left: 6%; top: 36%; rotate: -6deg; }
#story-prewed3 { left: 14%; top: 30%; rotate: 4deg; }

#story-sincethen { left: 8%; top: 32%; rotate: -7deg; }
#story-photo20 { left: 14%; top: 33%; rotate: 5deg; }
#story-grown { left: 12%; top: 30%; rotate: -4deg; }

#story-adventure1 { left: 20%; top: 33%; rotate: 8deg; }
#story-adventure2 { left: 16%; top: 37%; rotate: -5deg; }
#story-adventure3 { left: 24%; top: 35%; rotate: 6deg; }
#story-adventure4 { left: 19%; top: 30%; rotate: -6deg; }
#story-adventure5 { left: 14%; top: 34%; rotate: 7deg; }
#story-adventure6 { left: 18%; top: 32%; rotate: -4deg; }

#story-lotte3 { left: 4%; top: 30%; rotate: -4deg; } /* .story-photo-l */
#story-prewed1 { left: 5%; top: 31%; rotate: 5deg; } /* .story-photo-l */
#story-prewed2 { left: 0%; top: 36%; rotate: -6deg; } /* .story-photo-l */
#story-sincethen { left: 1%; top: 32%; rotate: -7deg; } /* .story-photo-l */
#story-photo20 { left: 3%; top: 33%; rotate: 5deg; } /* .story-photo-l */
#story-adventure1 { left: -1%; top: 33%; rotate: 8deg; } /* .story-photo-l */
#story-adventure2 { left: 2%; top: 37%; rotate: -5deg; } /* .story-photo-l */
#story-adventure3 { left: 6%; top: 35%; rotate: 6deg; } /* .story-photo-l */
#story-adventure4 { left: 0%; top: 30%; rotate: -6deg; } /* .story-photo-l */
#story-adventure5 { left: 4%; top: 34%; rotate: 7deg; } /* .story-photo-l */
#story-adventure6 { left: 1%; top: 32%; rotate: -4deg; } /* .story-photo-l */

#story-title{
  display: block;
  width: 80%;
  left: 10%;
  top: 8%;
}

#story-caption-bg20,#story-caption-bg18{
  top:78%;
}

#page-thanks{
  background-color: #FEFFF5;
}

#thanks-bg{
  height: 100%;
  left: -6%;
  transform-origin: center center;
}


#thanks-copy1{
    width: 80%;
    top: 9%;
    left: 5%;
}


#thanks-copy2{
    width: 80%;
    top: 9%;
    left: 5%;
  
}


#thanks-copy3{
    width: 87%;
    top: 18%;
    left: 7%;
}

#copyright{
  position: absolute;
  left: 1%;
  top: 99%;
  font-size: 8px;
  
}

#music-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 6%;
  height: 6%;
  position: absolute;
  top: -1%;
  right: 1%;
  z-index: 999;
    
}

#music-icon {
  width: 100%;
  height: auto;
  display: block;
}

#loader {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: calc(calc(var(--vh) * 100) * 9 / 19);
  height: 100vh;
  background-color: #FEFFF5;

  color: #3D3241;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-family: sans-serif;
}

#loader-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

}


#loader-liquid {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #dcf0ff;
  transition: height 0.3s ease;
  overflow: hidden;
}

#loader-liquid::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  width: 200%;
  height: 30px;
  background: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' viewBox='0 0 120 30' xmlns='http://www.w3.org/2000/svg'><path d='M0 30 Q30 0 60 30 T120 30 V30 H0 Z' fill='%23dcf0ff'/></svg>") repeat-x;
  animation: wave 1.5s linear infinite;
  transform: translateY(0);
  opacity: 0.7;
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

#loader-label {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  font-size: 20px;
  color: #a4b0c4;
  z-index: 1;
  padding-top: 20px;
}

.dot-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px; /* spacing below your loading text */
}

.dot-loader span {
  width: 10px;
  height: 10px;
  background-color: #9baac3; /* your theme colour */
  border-radius: 50%;
  animation: dotPulse 1s infinite ease-in-out;
}

.dot-loader span:nth-child(2) {
  animation-delay: 0.2s;
}

.dot-loader span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dotPulse {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}