/* styles.css */
.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.content {
    display: none; /* Hide content initially */
}

.banner-wrapper {
    background-image: url(../images/banner-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    position: relative;
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 100px;
    height: 90px;
    animation: animate 25s linear infinite;
    bottom: -150px;

}

.circles li:before,
.circles li:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: rgba(255, 0, 0, 1);
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.circles li:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

.circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}

.content-box {
    background: #fff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    padding: 15px;
    border-radius: 10px;
    max-width: 50%;
    margin: 0 auto;
}

.couple-img {

    position: relative;

}

.couple-img .couple {
    max-width: 45%;
    animation: swing ease-in-out 1s infinite alternate;
}

@keyframes swing {
    0% {
        transform: rotate(3deg);
    }

    100% {
        transform: rotate(-3deg);
    }
}

@media(max-width:577px) {
    .content-box {
        max-width: 100%;
        margin: 0 auto;
    }

    .couple-img .couple {
        max-width: 100% !important;
    }

    footer {
        height: 220px;
    }
    .couple{
        bottom:0px!important;
        left:0%!important;
    }
    .couple img{
        max-width: 100%!important;
    }
}

.audio-controls {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 1;
}
.audio-controls button{
    padding:inherit;
    width:50px;
    height: 50px;
    border-radius: 50%;
}




main {
    width: 100%;
    height: 100%;
}

.background{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    bottom: 0px;
    background: linear-gradient(to top, transparent, lightblue);
}
.background .canvas-container{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 150px;
}
.common{
    position:relative;
}

.couple{
    position:absolute;
    bottom:-60px;
    text-align: center;
    left:36%;
}
.couple img{
    max-width: 100%;
}
  
@media(max-width:1500px){
    .couple img{
        max-width: 70%;
    }
}












.particle {
    position: absolute;
    border-radius: 50%;
  }
  
  @-webkit-keyframes particle-animation-1 {
    100% {
      transform: translate3d(62vw, 48vh, 21px);
    }
  }
  
  @keyframes particle-animation-1 {
    100% {
      transform: translate3d(62vw, 48vh, 21px);
    }
  }
  .particle:nth-child(1) {
    -webkit-animation: particle-animation-1 60s infinite;
            animation: particle-animation-1 60s infinite;
    opacity: 1;
    height: 6px;
    width: 6px;
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
    transform: translate3d(79vw, 41vh, 9px);
    background: #d97726;
  }
  
  @-webkit-keyframes particle-animation-2 {
    100% {
      transform: translate3d(71vw, 78vh, 98px);
    }
  }
  
  @keyframes particle-animation-2 {
    100% {
      transform: translate3d(71vw, 78vh, 98px);
    }
  }
  .particle:nth-child(2) {
    -webkit-animation: particle-animation-2 60s infinite;
            animation: particle-animation-2 60s infinite;
    opacity: 0.41;
    height: 8px;
    width: 8px;
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
    transform: translate3d(42vw, 58vh, 65px);
    background: #5326d9;
  }
  
  @-webkit-keyframes particle-animation-3 {
    100% {
      transform: translate3d(68vw, 62vh, 21px);
    }
  }
  
  @keyframes particle-animation-3 {
    100% {
      transform: translate3d(68vw, 62vh, 21px);
    }
  }
  .particle:nth-child(3) {
    -webkit-animation: particle-animation-3 60s infinite;
            animation: particle-animation-3 60s infinite;
    opacity: 0.29;
    height: 9px;
    width: 9px;
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
    transform: translate3d(85vw, 72vh, 30px);
    background: #3ed926;
  }
  
  @-webkit-keyframes particle-animation-4 {
    100% {
      transform: translate3d(10vw, 50vh, 5px);
    }
  }
  
  @keyframes particle-animation-4 {
    100% {
      transform: translate3d(10vw, 50vh, 5px);
    }
  }
  .particle:nth-child(4) {
    -webkit-animation: particle-animation-4 60s infinite;
            animation: particle-animation-4 60s infinite;
    opacity: 0.49;
    height: 6px;
    width: 6px;
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
    transform: translate3d(29vw, 88vh, 18px);
    background: #d326d9;
  }
  
  @-webkit-keyframes particle-animation-5 {
    100% {
      transform: translate3d(1vw, 53vh, 92px);
    }
  }
  
  @keyframes particle-animation-5 {
    100% {
      transform: translate3d(1vw, 53vh, 92px);
    }
  }
  .particle:nth-child(5) {
    -webkit-animation: particle-animation-5 60s infinite;
            animation: particle-animation-5 60s infinite;
    opacity: 0.32;
    height: 7px;
    width: 7px;
    -webkit-animation-delay: -1s;
            animation-delay: -1s;
    transform: translate3d(36vw, 16vh, 79px);
    background: #cdd926;
  }
  
  @-webkit-keyframes particle-animation-6 {
    100% {
      transform: translate3d(21vw, 14vh, 62px);
    }
  }
  
  @keyframes particle-animation-6 {
    100% {
      transform: translate3d(21vw, 14vh, 62px);
    }
  }
  .particle:nth-child(6) {
    -webkit-animation: particle-animation-6 60s infinite;
            animation: particle-animation-6 60s infinite;
    opacity: 0.07;
    height: 6px;
    width: 6px;
    -webkit-animation-delay: -1.2s;
            animation-delay: -1.2s;
    transform: translate3d(53vw, 24vh, 85px);
    background: #263ed9;
  }
  
  @-webkit-keyframes particle-animation-7 {
    100% {
      transform: translate3d(14vw, 15vh, 49px);
    }
  }
  
  @keyframes particle-animation-7 {
    100% {
      transform: translate3d(14vw, 15vh, 49px);
    }
  }
  .particle:nth-child(7) {
    -webkit-animation: particle-animation-7 60s infinite;
            animation: particle-animation-7 60s infinite;
    opacity: 0.05;
    height: 6px;
    width: 6px;
    -webkit-animation-delay: -1.4s;
            animation-delay: -1.4s;
    transform: translate3d(13vw, 14vh, 54px);
    background: #26b8d9;
  }
  
  @-webkit-keyframes particle-animation-8 {
    100% {
      transform: translate3d(88vw, 16vh, 79px);
    }
  }
  
  @keyframes particle-animation-8 {
    100% {
      transform: translate3d(88vw, 16vh, 79px);
    }
  }
  .particle:nth-child(8) {
    -webkit-animation: particle-animation-8 60s infinite;
            animation: particle-animation-8 60s infinite;
    opacity: 0.53;
    height: 7px;
    width: 7px;
    -webkit-animation-delay: -1.6s;
            animation-delay: -1.6s;
    transform: translate3d(84vw, 40vh, 70px);
    background: #d926d9;
  }
  
  @-webkit-keyframes particle-animation-9 {
    100% {
      transform: translate3d(8vw, 36vh, 4px);
    }
  }
  
  @keyframes particle-animation-9 {
    100% {
      transform: translate3d(8vw, 36vh, 4px);
    }
  }
  .particle:nth-child(9) {
    -webkit-animation: particle-animation-9 60s infinite;
            animation: particle-animation-9 60s infinite;
    opacity: 0.26;
    height: 9px;
    width: 9px;
    -webkit-animation-delay: -1.8s;
            animation-delay: -1.8s;
    transform: translate3d(32vw, 70vh, 77px);
    background: #d94126;
  }
  
  @-webkit-keyframes particle-animation-10 {
    100% {
      transform: translate3d(16vw, 16vh, 90px);
    }
  }
  
  @keyframes particle-animation-10 {
    100% {
      transform: translate3d(16vw, 16vh, 90px);
    }
  }
  .particle:nth-child(10) {
    -webkit-animation: particle-animation-10 60s infinite;
            animation: particle-animation-10 60s infinite;
    opacity: 0.27;
    height: 6px;
    width: 6px;
    -webkit-animation-delay: -2s;
            animation-delay: -2s;
    transform: translate3d(29vw, 43vh, 56px);
    background: #7dd926;
  }
  
  @-webkit-keyframes particle-animation-11 {
    100% {
      transform: translate3d(69vw, 82vh, 73px);
    }
  }
  
  @keyframes particle-animation-11 {
    100% {
      transform: translate3d(69vw, 82vh, 73px);
    }
  }
  .particle:nth-child(11) {
    -webkit-animation: particle-animation-11 60s infinite;
            animation: particle-animation-11 60s infinite;
    opacity: 0.24;
    height: 9px;
    width: 9px;
    -webkit-animation-delay: -2.2s;
            animation-delay: -2.2s;
    transform: translate3d(66vw, 14vh, 84px);
    background: #26d968;
  }
  
  @-webkit-keyframes particle-animation-12 {
    100% {
      transform: translate3d(81vw, 62vh, 9px);
    }
  }
  
  @keyframes particle-animation-12 {
    100% {
      transform: translate3d(81vw, 62vh, 9px);
    }
  }
  .particle:nth-child(12) {
    -webkit-animation: particle-animation-12 60s infinite;
            animation: particle-animation-12 60s infinite;
    opacity: 0.72;
    height: 6px;
    width: 6px;
    -webkit-animation-delay: -2.4s;
            animation-delay: -2.4s;
    transform: translate3d(75vw, 11vh, 82px);
    background: #d92691;
  }
  
  @-webkit-keyframes particle-animation-13 {
    100% {
      transform: translate3d(61vw, 78vh, 26px);
    }
  }
  
  @keyframes particle-animation-13 {
    100% {
      transform: translate3d(61vw, 78vh, 26px);
    }
  }
  .particle:nth-child(13) {
    -webkit-animation: particle-animation-13 60s infinite;
            animation: particle-animation-13 60s infinite;
    opacity: 0.08;
    height: 7px;
    width: 7px;
    -webkit-animation-delay: -2.6s;
            animation-delay: -2.6s;
    transform: translate3d(76vw, 29vh, 33px);
    background: #a6d926;
  }
  
  @-webkit-keyframes particle-animation-14 {
    100% {
      transform: translate3d(66vw, 53vh, 59px);
    }
  }
  
  @keyframes particle-animation-14 {
    100% {
      transform: translate3d(66vw, 53vh, 59px);
    }
  }
  .particle:nth-child(14) {
    -webkit-animation: particle-animation-14 60s infinite;
            animation: particle-animation-14 60s infinite;
    opacity: 0.29;
    height: 6px;
    width: 6px;
    -webkit-animation-delay: -2.8s;
            animation-delay: -2.8s;
    transform: translate3d(62vw, 25vh, 35px);
    background: #d9c426;
  }
  
  @-webkit-keyframes particle-animation-15 {
    100% {
      transform: translate3d(1vw, 61vh, 31px);
    }
  }
  
  @keyframes particle-animation-15 {
    100% {
      transform: translate3d(1vw, 61vh, 31px);
    }
  }
  .particle:nth-child(15) {
    -webkit-animation: particle-animation-15 60s infinite;
            animation: particle-animation-15 60s infinite;
    opacity: 0.61;
    height: 6px;
    width: 6px;
    -webkit-animation-delay: -3s;
            animation-delay: -3s;
    transform: translate3d(18vw, 27vh, 35px);
    background: #d926b8;
  }
  
  @-webkit-keyframes particle-animation-16 {
    100% {
      transform: translate3d(31vw, 1vh, 53px);
    }
  }
  
  @keyframes particle-animation-16 {
    100% {
      transform: translate3d(31vw, 1vh, 53px);
    }
  }
  .particle:nth-child(16) {
    -webkit-animation: particle-animation-16 60s infinite;
            animation: particle-animation-16 60s infinite;
    opacity: 0.02;
    height: 10px;
    width: 10px;
    -webkit-animation-delay: -3.2s;
            animation-delay: -3.2s;
    transform: translate3d(46vw, 80vh, 89px);
    background: #2685d9;
  }
  
  @-webkit-keyframes particle-animation-17 {
    100% {
      transform: translate3d(28vw, 4vh, 27px);
    }
  }
  
  @keyframes particle-animation-17 {
    100% {
      transform: translate3d(28vw, 4vh, 27px);
    }
  }
  .particle:nth-child(17) {
    -webkit-animation: particle-animation-17 60s infinite;
            animation: particle-animation-17 60s infinite;
    opacity: 0.68;
    height: 10px;
    width: 10px;
    -webkit-animation-delay: -3.4s;
            animation-delay: -3.4s;
    transform: translate3d(22vw, 26vh, 98px);
    background: #a6d926;
  }
  
  @-webkit-keyframes particle-animation-18 {
    100% {
      transform: translate3d(70vw, 38vh, 38px);
    }
  }
  
  @keyframes particle-animation-18 {
    100% {
      transform: translate3d(70vw, 38vh, 38px);
    }
  }
  .particle:nth-child(18) {
    -webkit-animation: particle-animation-18 60s infinite;
            animation: particle-animation-18 60s infinite;
    opacity: 0.78;
    height: 8px;
    width: 8px;
    -webkit-animation-delay: -3.6s;
            animation-delay: -3.6s;
    transform: translate3d(28vw, 66vh, 13px);
    background: #26d0d9;
  }
  
  @-webkit-keyframes particle-animation-19 {
    100% {
      transform: translate3d(71vw, 42vh, 97px);
    }
  }
  
  @keyframes particle-animation-19 {
    100% {
      transform: translate3d(71vw, 42vh, 97px);
    }
  }
  .particle:nth-child(19) {
    -webkit-animation: particle-animation-19 60s infinite;
            animation: particle-animation-19 60s infinite;
    opacity: 0.13;
    height: 9px;
    width: 9px;
    -webkit-animation-delay: -3.8s;
            animation-delay: -3.8s;
    transform: translate3d(77vw, 83vh, 54px);
    background: #d9ca26;
  }
  
  @-webkit-keyframes particle-animation-20 {
    100% {
      transform: translate3d(17vw, 48vh, 13px);
    }
  }
  
  @keyframes particle-animation-20 {
    100% {
      transform: translate3d(17vw, 48vh, 13px);
    }
  }
  .particle:nth-child(20) {
    -webkit-animation: particle-animation-20 60s infinite;
            animation: particle-animation-20 60s infinite;
    opacity: 0.82;
    height: 8px;
    width: 8px;
    -webkit-animation-delay: -4s;
            animation-delay: -4s;
    transform: translate3d(69vw, 36vh, 54px);
    background: #26bed9;
  }
  
  @-webkit-keyframes particle-animation-21 {
    100% {
      transform: translate3d(29vw, 61vh, 21px);
    }
  }
  
  @keyframes particle-animation-21 {
    100% {
      transform: translate3d(29vw, 61vh, 21px);
    }
  }
  .particle:nth-child(21) {
    -webkit-animation: particle-animation-21 60s infinite;
            animation: particle-animation-21 60s infinite;
    opacity: 0.96;
    height: 8px;
    width: 8px;
    -webkit-animation-delay: -4.2s;
            animation-delay: -4.2s;
    transform: translate3d(34vw, 1vh, 75px);
    background: #d97426;
  }
  
  @-webkit-keyframes particle-animation-22 {
    100% {
      transform: translate3d(14vw, 15vh, 33px);
    }
  }
  
  @keyframes particle-animation-22 {
    100% {
      transform: translate3d(14vw, 15vh, 33px);
    }
  }
  .particle:nth-child(22) {
    -webkit-animation: particle-animation-22 60s infinite;
            animation: particle-animation-22 60s infinite;
    opacity: 0.27;
    height: 7px;
    width: 7px;
    -webkit-animation-delay: -4.4s;
            animation-delay: -4.4s;
    transform: translate3d(39vw, 30vh, 88px);
    background: #d9a926;
  }
  
  @-webkit-keyframes particle-animation-23 {
    100% {
      transform: translate3d(78vw, 65vh, 13px);
    }
  }
  
  @keyframes particle-animation-23 {
    100% {
      transform: translate3d(78vw, 65vh, 13px);
    }
  }
  .particle:nth-child(23) {
    -webkit-animation: particle-animation-23 60s infinite;
            animation: particle-animation-23 60s infinite;
    opacity: 0.45;
    height: 10px;
    width: 10px;
    -webkit-animation-delay: -4.6s;
            animation-delay: -4.6s;
    transform: translate3d(29vw, 59vh, 68px);
    background: #d95f26;
  }
  
  @-webkit-keyframes particle-animation-24 {
    100% {
      transform: translate3d(49vw, 58vh, 97px);
    }
  }
  
  @keyframes particle-animation-24 {
    100% {
      transform: translate3d(49vw, 58vh, 97px);
    }
  }
  .particle:nth-child(24) {
    -webkit-animation: particle-animation-24 60s infinite;
            animation: particle-animation-24 60s infinite;
    opacity: 0.92;
    height: 8px;
    width: 8px;
    -webkit-animation-delay: -4.8s;
            animation-delay: -4.8s;
    transform: translate3d(79vw, 79vh, 73px);
    background: #d926c7;
  }
  
  @-webkit-keyframes particle-animation-25 {
    100% {
      transform: translate3d(72vw, 4vh, 93px);
    }
  }
  
  @keyframes particle-animation-25 {
    100% {
      transform: translate3d(72vw, 4vh, 93px);
    }
  }
  .particle:nth-child(25) {
    -webkit-animation: particle-animation-25 60s infinite;
            animation: particle-animation-25 60s infinite;
    opacity: 0.63;
    height: 7px;
    width: 7px;
    -webkit-animation-delay: -5s;
            animation-delay: -5s;
    transform: translate3d(67vw, 87vh, 71px);
    background: #26d9b2;
  }
  
  @-webkit-keyframes particle-animation-26 {
    100% {
      transform: translate3d(54vw, 8vh, 19px);
    }
  }
  
  @keyframes particle-animation-26 {
    100% {
      transform: translate3d(54vw, 8vh, 19px);
    }
  }
  .particle:nth-child(26) {
    -webkit-animation: particle-animation-26 60s infinite;
            animation: particle-animation-26 60s infinite;
    opacity: 0.43;
    height: 6px;
    width: 6px;
    -webkit-animation-delay: -5.2s;
            animation-delay: -5.2s;
    transform: translate3d(68vw, 40vh, 74px);
    background: #d9ac26;
  }
  
  @-webkit-keyframes particle-animation-27 {
    100% {
      transform: translate3d(59vw, 49vh, 74px);
    }
  }
  
  @keyframes particle-animation-27 {
    100% {
      transform: translate3d(59vw, 49vh, 74px);
    }
  }
  .particle:nth-child(27) {
    -webkit-animation: particle-animation-27 60s infinite;
            animation: particle-animation-27 60s infinite;
    opacity: 0.21;
    height: 9px;
    width: 9px;
    -webkit-animation-delay: -5.4s;
            animation-delay: -5.4s;
    transform: translate3d(59vw, 11vh, 57px);
    background: #d99726;
  }
  
  @-webkit-keyframes particle-animation-28 {
    100% {
      transform: translate3d(37vw, 21vh, 75px);
    }
  }
  
  @keyframes particle-animation-28 {
    100% {
      transform: translate3d(37vw, 21vh, 75px);
    }
  }
  .particle:nth-child(28) {
    -webkit-animation: particle-animation-28 60s infinite;
            animation: particle-animation-28 60s infinite;
    opacity: 0.33;
    height: 8px;
    width: 8px;
    -webkit-animation-delay: -5.6s;
            animation-delay: -5.6s;
    transform: translate3d(69vw, 86vh, 45px);
    background: #59d926;
  }
  
  @-webkit-keyframes particle-animation-29 {
    100% {
      transform: translate3d(64vw, 17vh, 83px);
    }
  }
  
  @keyframes particle-animation-29 {
    100% {
      transform: translate3d(64vw, 17vh, 83px);
    }
  }
  .particle:nth-child(29) {
    -webkit-animation: particle-animation-29 60s infinite;
            animation: particle-animation-29 60s infinite;
    opacity: 0.64;
    height: 6px;
    width: 6px;
    -webkit-animation-delay: -5.8s;
            animation-delay: -5.8s;
    transform: translate3d(69vw, 57vh, 78px);
    background: #d92632;
  }
  
  @-webkit-keyframes particle-animation-30 {
    100% {
      transform: translate3d(70vw, 78vh, 27px);
    }
  }
  
  @keyframes particle-animation-30 {
    100% {
      transform: translate3d(70vw, 78vh, 27px);
    }
  }
  .particle:nth-child(30) {
    -webkit-animation: particle-animation-30 60s infinite;
            animation: particle-animation-30 60s infinite;
    opacity: 0.13;
    height: 9px;
    width: 9px;
    -webkit-animation-delay: -6s;
            animation-delay: -6s;
    transform: translate3d(17vw, 14vh, 23px);
    background: #26d9d6;
  }