@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rajdhani:wght@300;400;500;600;700&display=swap');
 body{
/*     overflow-x:hidden; */
       background-image: linear-gradient(#EEFAFF, #F1FBFF) !important;
 }

h1,h2,h3,h4,p{margin:0;}
p{font-size:0.85rem;}
/* *{
 margin:0;
 padding:0;
 box-sizing: border-box;
} */

#section-2{
 background-image: linear-gradient(90deg, #E6F0FF -11.26%, #FFFDF4 111.12%);
}

/* section{
 position: relative;
 height: 100%;
 display: flex;
 justify-content: center;
} */

.section-2-title-container{
 width: 1353px;
 height: fit-content;
}

.section-2-title-mobile,
.section-2-title{
 position: absolute;
 width: 497.24px;
 height: fit-content;
 margin-left: 20px;
 text-shadow: 0px 0px 10px #EEF4FC, 0px 0px 10px #EEF4FC, 0px 0px 10px #EEF4FC;
}

.section-2-title-mobile h1,
.section-2-title h1{
 font-family: 'Figtree';
 font-style: normal;
 font-weight: 700;
 font-size: 52px;
 line-height: 120%;
 display: flex;
 align-items: center;
 color: #061A4D;
}

.section-2-title-mobile p,
.section-2-title p{
 font-family: 'Figtree';
 font-style: normal;
 font-weight: 400;
 font-size: 15px;
 line-height: 150%;
 display: flex;
 align-items: center;
 color: #061A4D;
}

.all-instrument{
position: absolute;
/* height: 100vh;
 width: 1354px; */
}

.instruments{
 z-index: 1;
/*   display: flex; */
 flex-direction: row;
 justify-content: center;
 align-items: center;
 padding: 26.25px;
 gap: 9.08px;
/*   position: fixed; */
 width: 315px;
 height: 250px;
 background: #FFFFFF;
 box-shadow: 7.26194px 7.26194px 40.8484px rgba(0, 0, 0, 0.15);
 border-radius: 27.2323px;
}

/* .instruments-card {
 display: flex;
 flex-direction: column;
 padding: 8.4px 12.6px;
 gap: 16.8px;
 justify-content: center;
 align-items: flex-start;
} */

.instruments-card img{
 width: 50px;
 height: 50px;
}

.instruments-card h2{
 font-family: 'Figtree';
 font-style: normal;
 font-weight: 700;
 font-size: 1rem;
 line-height: 1.4;
 align-items: center;
 color: #061A4D;
}

.instruments-card p{
 font-family: 'Figtree';
 font-style: normal;
 font-weight: 400;
 font-size: 0.85rem;
 line-height: 1.4;
 align-items: center;
 color: #061A4D;
}

.lines {
 position: absolute;
 width: 100%;
 height: 100%;
 min-height:900px;
 display: flex;
 justify-content: space-between;
 mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 5%, #000000 15%, #000000 85%, rgba(255, 255, 255, 0) 95%);
 -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 5%, #000000 15%, #000000 85%, rgba(255, 255, 255, 0) 95%);
}
.vl {
 width: 20px;
 height: 100%;
 border-width: 0px 1px;
 border-style: solid;
 border-color: #D6D6D6;
 /* border-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 41.22%, rgba(0, 0, 0) 47.35%, rgba(0, 0, 0) 82.6%, rgba(255, 255, 255, 0) 100%); */
}


@media (min-width: 992px) {
 .mxh{height:1300px;}
 #section-2 .ins-1{
   margin-left: 20px;
   margin-top: calc(100vh - 45vh);
 }
 #section-2 .ins-2{
   margin-left: 249px;
   margin-top: calc(100vh - 35vh);
 }
 #section-2 .ins-3{
   margin-left: 478px;
   margin-top: calc(100vh - 23vh);
 }
 #section-2 .ins-4{
   margin-left: 706px;
   margin-top: calc(100vh - 11vh);
 }

 #section-2 .ins-5{
   margin-left: 249px;
   margin-top: calc(100vh - 8vh);
 }
 #section-2 .ins-6{
   margin-left: 478px;
   margin-top: calc(100vh - 2vh);
 }
 #section-2 .ins-7{
   margin-left: 706px;
   margin-top: calc(100vh - 1vh);
 }
}



/* *{
 margin:0;
 padding:0;
 box-sizing: border-box;
} */
 
 .landing {
   background-color: unset;
 }
 .bg_multimedia{
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   overflow: hidden;
 }

 .gallery {
 position: absolute;
   top: -30%;
   left: 15%;
   width: 100%;
   height: 100%;
   transform: rotate(340deg);
}
.block-33 {
 width: 45%;
}
.display--inline-top {
 display: inline-block;
 vertical-align: top;
}
.fill-dimensions {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}
.relative {
 position: relative;
}
.cover-img {
 background-size: cover;
 background-repeat: no-repeat;
}
.gallery-image {
 padding-bottom: 2.35em;
 animation: marqueeTop 12s linear infinite;
}
.gallery-h--tb .gallery-image {
 animation: marqueeBottom 12s linear infinite;
}
.gallery-image__img {
 padding-top: 50vh;
}
.gallery-h {
 overflow: hidden;
}

@keyframes marqueeTop {
 0% {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  }
 100% {
   -webkit-transform: translate3d(0, -100%, 0);
   transform: translate3d(0, -100%, 0);
  }
}
@keyframes marqueeBottom {
 0% {
   -webkit-transform: translate3d(0, -100%, 0);
   transform: translate3d(0, -100%, 0);
  }
 100% {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  }
}

 .container-01{grid-area:one;}
 .container-02{grid-area:two;}
 .container-03{grid-area:three;}
 .container-04{grid-area:four;}
 .container-05{grid-area:five;}
 .container-06{grid-area:six;}
 .container-07{grid-area:seven;}
 

.pdt70{padding-top:70px;}
.pdb70{padding-bottom:70px;}
.img_fit{max-height:680px;height:100%;}
/*   @media screen and (min-width:992px){
   .mb-display{display:none;}
   .lp-display{display:block;}
 } */

 @media screen and (min-width:768px){
   .mb-display{display:none;}
   .lp-display{display:block;}
   
 }

 @media screen and (min-width:992px){
   .instruments{
     width: 210px !important;
   }
   
   .laptop_view_only{display:block;}
   .mb_view_only{display:none;}
   .best_container{display:grid;grid-template-areas:'one two''three four';gap:15px;grid-template-columns:unset ;justify-items: center;}
   .small_container_background{
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:250px;
   width:250px;
   display:flex;
   padding: 15px;
   
 }
   
 .small_container_content{
   height:230px;
   margin:auto;
 }
 .step_content{
   color: rgba(94, 230, 235, 0.2);
   margin:0;
   font-size:4rem;
   text-align:center;
 }
 }

 @media screen and (min-width:1200px){
   .mxh{height:1200px;}
 .instruments{
     width: 254px !important;
   }

   #section-2 .ins-1{
   margin-left: 20px;
   margin-top: calc(100vh - 45vh);
 }
 #section-2 .ins-2{
   margin-left: 294px;
   margin-top: calc(100vh - 35vh);
 }
 #section-2 .ins-3{
   margin-left: 568px;
   margin-top: calc(100vh - 23vh);
 }
 #section-2 .ins-4{
   margin-left: 842px;
   margin-top: calc(100vh - 11vh);
 }

 #section-2 .ins-5{
   margin-left: 294px;
   margin-top: calc(100vh - 8vh);
 }
 #section-2 .ins-6{
   margin-left: 568px;
   margin-top: calc(100vh - 2vh);
 }
 #section-2 .ins-7{
   margin-left: 842px;
   margin-top: calc(100vh - 1vh);
 }
   
 .deposit_small_container{
   grid-area:one;
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:260px;
   width:315px;
   padding: 25px;
   word-break: break-word;
 }
 .deposit_small_container2{
   grid-area:two;
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:260px;
   width:315px;
   padding: 25px;
   word-break: break-word;
 }
 .deposit_big_container{
   grid-area:three;
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height: 580px;
   padding: 25px;
   word-break: break-word;
 }
   .laptop_view{display:block;}
   .mobile_view{display:none;}
   .best_container{display:grid;grid-template-areas:'one two three four';gap:15px;grid-template-columns: 24% 24% 24% 24% ;justify-items: center;}
   .small_container_background{
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:250px;
   width:250px;
   display:flex;
   padding: 15px;
   
 }
 .small_container_content{
   height:230px;
   margin:auto;
 }
 .step_content{
   color: rgba(94, 230, 235, 0.2);
   margin:0;
   font-size:4rem;
   text-align:center;
 }
}

 @media screen and (min-width:1400px){

   .instruments{
     width: 298px !important;
   }

   #section-2 .ins-1{
   margin-left: 20px;
   margin-top: calc(100vh - 45vh);
 }
 #section-2 .ins-2{
   margin-left: 340px;
   margin-top: calc(100vh - 35vh);
 }
 #section-2 .ins-3{
   margin-left: 659px;
   margin-top: calc(100vh - 23vh);
 }
 #section-2 .ins-4{
   margin-left: 978px;
   margin-top: calc(100vh - 11vh);
 }

 #section-2 .ins-5{
   margin-left: 340px;
   margin-top: calc(100vh - 8vh);
 }
 #section-2 .ins-6{
   margin-left: 659px;
   margin-top: calc(100vh - 2vh);
 }
 #section-2 .ins-7{
   margin-left: 978px;
   margin-top: calc(100vh - 1vh);
 }

   
   
   .best_container{display:grid;grid-template-areas:'one two three four';gap:15px;grid-template-columns: 24% 24% 24% 24% ;justify-items: center;}
   .small_container_background{
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:300px;
   width:300px;
   display:flex;
   padding: 15px;
   
 }
 .small_container_content{
   height:230px;
   margin:auto;
 }
 .step_content{
   color: rgba(94, 230, 235, 0.2);
   margin:0;
   font-size:4rem;
   text-align:center;
 }
 }

 @media (min-width:992px) and (min-height: 1200px){
 #section-2 .ins-1{
   margin-left: 20px;
   margin-top: calc(100vh - 66vh);
 }
 #section-2 .ins-2{
   margin-left: 249px;
   margin-top: calc(100vh - 61vh);
 }
 #section-2 .ins-3{
   margin-left: 478px;
   margin-top: calc(100vh - 52vh);
 }
 #section-2 .ins-4{
   margin-left: 706px;
   margin-top: calc(100vh - 45vh);
 }

 #section-2 .ins-5{
   margin-left: 249px;
   margin-top: calc(100vh - 46vh);
 }
 #section-2 .ins-6{
   margin-left: 478px;
   margin-top: calc(100vh - 41vh);
 }
 #section-2 .ins-7{
   margin-left: 706px;
   margin-top: calc(100vh - 40vh);
 }
}

  @media (min-width:1400px) and (min-height: 1000px) and (max-height: 1200px){
 #section-2 .ins-1{
   margin-left: 20px;
   margin-top: calc(100vh - 60vh);
 }
 #section-2 .ins-2{
   margin-left: 249px;
   margin-top: calc(100vh - 53vh);
 }
 #section-2 .ins-3{
   margin-left: 478px;
   margin-top: calc(100vh - 44vh);
 }
 #section-2 .ins-4{
   margin-left: 706px;
   margin-top: calc(100vh - 34vh);
 }

 #section-2 .ins-5{
   margin-left: 249px;
   margin-top: calc(100vh - 35vh);
 }
 #section-2 .ins-6{
   margin-left: 478px;
   margin-top: calc(100vh - 35vh);
 }
 #section-2 .ins-7{
   margin-left: 706px;
   margin-top: calc(100vh - 28vh);
 }
}

 @media (min-width:1600px) and (max-height: 1350px){
 #section-2 .ins-1{
   margin-left: 20px;
   margin-top: calc(100vh - 60vh);
 }
 #section-2 .ins-2{
   margin-left: 341px;
   margin-top: calc(100vh - 53vh);
 }
 #section-2 .ins-3{
   margin-left: 660px;
   margin-top: calc(100vh - 44vh);
 }
 #section-2 .ins-4{
   margin-left: 978px;
   margin-top: calc(100vh - 34vh);
 }

 #section-2 .ins-5{
   margin-left: 341px;
   margin-top: calc(100vh - 36vh);
 }
 #section-2 .ins-6{
   margin-left: 660px;
   margin-top: calc(100vh - 31vh);
 }
 #section-2 .ins-7{
   margin-left: 978px;
   margin-top: calc(100vh - 28vh);
 }
}

  @media (min-width:1600px) and (min-height: 1351px){
 #section-2 .ins-1{
   margin-left: 20px;
   margin-top: calc(100vh - 66vh);
 }
 #section-2 .ins-2{
   margin-left: 341px;
   margin-top: calc(100vh - 61vh);
 }
 #section-2 .ins-3{
   margin-left: 660px;
   margin-top: calc(100vh - 54vh);
 }
 #section-2 .ins-4{
   margin-left: 978px;
   margin-top: calc(100vh - 47vh);
 }

 #section-2 .ins-5{
   margin-left: 341px;
   margin-top: calc(100vh - 45vh);
 }
 #section-2 .ins-6{
   margin-left: 660px;
   margin-top: calc(100vh - 41vh);
 }
 #section-2 .ins-7{
   margin-left: 978px;
   margin-top: calc(100vh - 40vh);
 }
}

 @media screen and (max-width:1199px){
   .laptop_view{display:none;}
   .mobile_view{display:block;}
   
   .sticky_column{justify-self:end;}
   .sticky_column2{justify-self:start;}

   .grid_container_temp{
   display:grid;grid-template-areas:'one three''two three'; gap:15px;align-items: center;
 }
 .deposit_small_container{
   grid-area:one;
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:260px;
   width:260px;
   padding: 25px;
   word-break: break-word;
 }
 .deposit_small_container2{
   grid-area:two;
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:260px;
   width:260px;
   padding: 25px;
   word-break: break-word;
 }
 .deposit_big_container{
   grid-area:three;
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height: 580px;
   width:300px;
   padding: 25px;
   word-break: break-word;
 }
 }
 
 @media screen and (max-width:991px){
   .laptop_view_only{display:none;}
   .mb_view_only{display:block;}
   .instruments_container{display:grid;grid-template-areas:'one two''three four''five six''seven seven';gap:15px;grid-template-columns:48% 48% ;justify-items: center;}
   .instrument_container_content{
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:300px;
   width:100%;
   display:flex;
   padding: 25px;
 }
   
   .first-section-500{height:initial!important;}
   .img_fit{max-height:400px !important;height:100%;}
   .pdb70{padding-bottom:unset!important;}
   .pdt70{padding-top:unset!important;}
   .best_container{display:grid;grid-template-areas:'one two''three four';gap:15px;grid-template-columns: 48% 48%;justify-items: center;}

   .small_container_background{
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:250px;
   width:250px;
   display:flex;
   padding: 15px;
   
 }
 .small_container_content{
   height:230px;
   margin:auto;
 }
 .step_content{
   color: rgba(94, 230, 235, 0.2);
   margin:0;
   font-size:4rem;
   text-align:center;
 }
 }
 
 @media screen and (max-width:767px){
   .mb-display{display:block;}
   .lp-display{display:none;}
 .best_container{display:grid;grid-template-areas:'one two''three four';gap:15px;grid-template-columns: 48% 48%;justify-items: center;}
   .small_container_background{
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:250px;
   width:250px;
   display:flex;
   padding: 15px;
   
 }
 .small_container_content{
   height:230px;
   margin:auto;
 }
 .step_content{
   color: rgba(94, 230, 235, 0.2);
   margin:0;
   font-size:4rem;
   text-align:center;
 }
   .sticky_column{justify-self:center;}
   .sticky_column2{justify-self:center;}

   .grid_container_temp{
     display:grid;grid-template-areas:'one two''three three'; gap:15px;align-items: center;
 }
 .deposit_small_container{
   grid-area:one;
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:260px;
   width:260px;
   padding: 25px;
   word-break: break-word;
 }
 .deposit_small_container2{
   grid-area:two;
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:260px;
   width:260px;
   padding: 25px;
   word-break: break-word;
 }
 .deposit_big_container{
   grid-area:three;
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height: 580px;
   width:100%;
   padding: 65px;
   word-break: break-word;
 }
}

 @media screen and (max-width:576px){
.instruments_container{display:grid;grid-template-areas:'one''two''three''four''five''six''seven';gap:15px;grid-template-columns: 100% ;justify-items: center;}
   .instrument_container_content{
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:300px;
   width:100%;
   display:flex;
   padding: 25px;
 }
   
   .grid_container_temp{
   display:grid;grid-template-areas:'one''two''three'; gap:15px;align-items: center;
 }
   .best_container{display:grid;grid-template-areas:'one''two''three''four';gap:15px;grid-template-columns: 100%;justify-items: center;}
   .small_container_background{
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:250px;
   width:100%;
   display:flex;
   padding: 25px;
   
 }
   .sticky_column{justify-self:center;}
   .sticky_column2{justify-self:center;}
 .small_container_content{
   height:230px;
   margin:auto;
 }
 .step_content{
   color: rgba(94, 230, 235, 0.2);
   margin:0;
   font-size:4rem;
   text-align:center;
 }
.deposit_small_container{
   grid-area:one;
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:260px;
   width:100%;
   padding: 25px;
   word-break: break-word;
 }
 .deposit_small_container2{
   grid-area:two;
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:260px;
   width:100%;
   padding: 25px;
   word-break: break-word;
 }
 .deposit_big_container{
   grid-area:three;
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height: 580px;
   width:100%;
   padding: 65px;
   word-break: break-word;
 }
   
 }

 @media screen and (max-width:470px){
   .best_container{display:grid;grid-template-areas:'one''two''three''four';gap:15px;grid-template-columns: 100%;justify-items: center;}
   .small_container_background{
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:250px;
   width:100%;
   display:flex;
   padding: 25px;
   
 }
 .small_container_content{
   height:230px;
   margin:auto;
 }
 .step_content{
   color: rgba(94, 230, 235, 0.2);
   margin:0;
   font-size:4rem;
   text-align:center;
 }

   .deposit_small_container{
   grid-area:one;
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:260px;
   width:100%;
   padding: 25px;
   word-break: break-word;
 }
 .deposit_small_container2{
   grid-area:two;
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:260px;
   width:100%;
   padding: 25px;
   word-break: break-word;
 }
 .deposit_big_container{
   grid-area:three;
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height: 580px;
   width:100%;
   padding: 25px;
   word-break: break-word;
 }
 }

 
 .section-1{
   background-color:unset !important;
 }

 .bg_section_1 {
        background-image: url('https://cms.blueoceanfin.com/assets/media/1684722829152-768-bg-1.webp');
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .bg_section_2 {
        background-image: url('https://cms.blueoceanfin.com/assets/media/1684681940904-437-bg-2.webp');
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .bg_section_3 {
        background-image: url('https://cms.blueoceanfin.com/assets/media/1684681940694-888-bg-3.webp');
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .bg_deposit {
        background-image: url('https://cms.blueoceanfin.com/assets/media/1684681938903-787-vector-1.webp');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

/*   .small_container_background{
   background: #FFFFFF;
   box-shadow: 0px 13.8359px 53.499px rgba(0, 0, 0, 0.15);
   border-radius: 27.6719px;
   height:300px;
   width:300px;
   display:flex;
   padding: 25px;
   
 }
 .small_container_content{
   height:230px;
   margin:auto;
 }
 .step_content{
   color: rgba(94, 230, 235, 0.2);
   margin:0;
   font-size:4rem;
   text-align:center;
 } */

 
 .pd0{padding:0;}
 .title_border_height{
   border-left: 3px solid #5ee6eb;
   height: 40px;
   float: left;
   margin-right: 8px;
 }
 .title_border_height2{
   border-left: 3px solid #5ee6eb;
   height: 68px;
   float: left;
   margin-right: 8px;
 }
 .instrument_content{
   font-size:1.5rem;
 }

.swiper-button-next:after,
.swiper-button-prev:after {
  color: #000000 !important;
  opacity: 0.2 !important;
}

.wave-button,
.wave-header-button {
  padding: 5px 20px;
  width: auto;
  text-align: center;
  background-color: transparent;
  border: 1px solid #3d3d3d20;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.wave-button span,
.wave-header-button span {
  position: relative;
  color: #fff;
}

.wave-button .wave {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 250px;
  background: #4d77ff;
  transition: .5s ease;
}

.wave-button:hover .wave::after,
.wave-button:hover .wave::before {
  width: 0;
  height: 0;
  transition: 2s ease;
}

.wave-button .wave::after,
.wave-button .wave::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -10px;
  left: 50%;
  transform: translate(-50%, -75%);
  transition: .5s ease;
}

.wave-button .wave::before {
  border-radius: 40%;
  background-image: linear-gradient(#EEFAFF, #F1FBFF);
  animation: wave 7s linear infinite;
}

.wave-button .wave::after {
  border-radius: 45%;
  background-image: linear-gradient(#EEFAFF, #F1FBFF);
  animation: wave 12s linear infinite;
}

button.wave-header-button{
    font-size: 13px !important;
    line-height: 0 !important;
    height: 25.5px;
}

.wave-header-button .wave1 {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 250px;
  background: #4d77ff;
  transition: .5s ease;
}

.wave-header-button:hover .wave1::after,
.wave-header-button:hover .wave1::before {
  width: 0;
  height: 0;
  transition: 2s ease;
}

.wave-header-button .wave1::after,
.wave-header-button .wave1::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -10px;
  left: 50%;
  transform: translate(-50%, -75%);
  transition: .5s ease;
}


.wave-header-button .wave1::before {
  border-radius: 40%;
  background-image: linear-gradient(#fafafa, #fcfcfc);
  animation: wave 7s linear infinite;
}

.wave-header-button .wave1::after {
  border-radius: 45%;
  background-image: linear-gradient(#fafafa, #fcfcfc);
  animation: wave 12s linear infinite;
}

@keyframes wave {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}

@keyframes wave1 {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}
 


#mobile_view_mid_autumn{
  display: none;
}
  
#mid-autumn-display .bg{
  background-image: url("https://cms.blueoceanfin.com/assets/media/1694422913358-71-mid-autumn-bg.webp");
  height: 90vh;
  background-size: cover;
  background-position: bottom;
}

#mid-autumn-display .sakura-left,
#mid-autumn-display .sakura-right,
#mid-autumn-display .petal{
  width: 15%;
}

#mid-autumn-display .lantern1,
#mid-autumn-display .lantern2 {
  width: 10%;
  z-index: 1;
}

#mid-autumn-display .sakura-left{
  top: 5%;
}

#mid-autumn-display .sakura-right{
  bottom: 15%;
}

#mid-autumn-display .lantern1{
  right: 7%;
} 

#mid-autumn-display .rabbit-boat{
  left: 30%;
  bottom: 0;
}
#mid-autumn-display .mid-autumn-wish{

}

#mid-autumn-display .banner-title{
  color: #FFF;
  font-family: Inter;
  font-size: 80px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 2.4px;
}

#mid-autumn-display .banner-content{
  color: #FFF;
  font-family: Amiko;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#mid-autumn-display .promo-btn{
  border-radius: 30px;
  border: none;
  background: #FFF;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.16s ease;
  transition: background 0.16s ease;
  color: #182656;
  text-align: center;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; 
  padding: 12px 28px;
}

#mid-autumn-display .promo-btn:hover{
  background: #BBCAFF;
  box-shadow: none;
}

#mid-autumn-display .moon{
  height: 100%;
  top: -25px;
}

#mid-autumn-display .chang-er{
  height: 100%;
  top: 35px;
}

#mid-autumn-display .star-container{
  position: absolute;
  width: 100%;
  height: 100%;
}

#mid-autumn-display .rabbit-container{
  position: absolute;
  width: 100%;
  height: 100%;
}

/*swinging effect*/
.lantern1 {
  animation: swing ease-in-out 1s infinite alternate;
  transform-origin: center -20px;
}

.lantern2 {
  animation: swing ease-in-out 1.5s infinite alternate;
  transform-origin: center -20px;
}

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

/*falling leaves*/
.falling-leaves {
  position: absolute;
  top: 200px;
  left: -100px;
  text-align: left;
}

.right-leaves{
  position: absolute;
  top: 500px;
  right: 0;
  text-align: right;
}

.falling-leaves i {
  display: inline-block;
  width: 200px;
  height: 150px;
  background: linear-gradient(to bottom right, #ffe5ec, #ffc2d1);
  transform: skew(10deg);
  border-radius: 5% 40% 70%;
  z-index: 1;
  animation: falling 5s 0s infinite;
  opacity: 0;
}

.falling-leaves i:nth-of-type(2n) {
  animation: falling2 5s 0s infinite;
}

.falling-leaves i:nth-of-type(3n) {
  animation: falling3 5s 0s infinite;
}

.right-leaves i {
  animation: right-falling 5s 0s infinite;
}

.right-leaves i:nth-of-type(2n) {
  animation: right-falling2 5s 0s infinite;
}

.right-leaves i:nth-of-type(3n) {
  animation: right-falling3 5s 0s infinite;
}

.falling-leaves i:nth-of-type(n) {
  height: 23px;
  width: 30px;
}

.falling-leaves i:nth-of-type(2n+1) {
  height: 11px;
  width: 16px;
}

.falling-leaves i:nth-of-type(2n+1):before {
  width: 4px;
  height: 3px;
  top: 7px;
  right: 0px;
}

.falling-leaves i:nth-of-type(2n+1):after {
  width: 2px;
  height: 6px;
  left: 5px;
  top: 1px;
}

.falling-leaves i:nth-of-type(3n+2) {
  height: 17px;
  width: 23px;
}

.falling-leaves i:nth-of-type(3n+2):before {
  height: 4px;
  width: 4px;
  top: 12px;
  right: 1px;
}

.falling-leaves i:nth-of-type(3n+2):after {
  height: 10px;
  width: 2px;
  top: 1px;
  left: 8px;
}

.falling-leaves i:nth-of-type(n) {
  animation-delay: 1.9s;
}

.falling-leaves i:nth-of-type(2n) {
  animation-delay: 3.9s;
}

.falling-leaves i:nth-of-type(3n) {
  animation-delay: 2.3s;
}

.falling-leaves i:nth-of-type(4n) {
  animation-delay: 4.4s;
}

.falling-leaves i:nth-of-type(5n) {
  animation-delay: 5s;
}

.falling-leaves i:nth-of-type(6n) {
  animation-delay: 3.5s;
}

.falling-leaves i:nth-of-type(7n) {
  animation-delay: 2.8s;
}

.falling-leaves i:nth-of-type(8n) {
  animation-delay: 1.5s;
}

.falling-leaves i:nth-of-type(9n) {
  animation-delay: 3.3s;
}

.falling-leaves i:nth-of-type(10n) {
  animation-delay: 2.5s;
}

.falling-leaves i:nth-of-type(11n) {
  animation-delay: 1.2s;
}

.falling-leaves i:nth-of-type(12n) {
  animation-delay: 4.1s;
}

.falling-leaves i:nth-of-type(13n) {
  animation-delay: 1s;
}

.falling-leaves i:nth-of-type(14n) {
  animation-delay: 4.7s;
}

.falling-leaves i:nth-of-type(15n) {
  animation-delay: 3s;
}

.falling-leaves i:nth-of-type(n) {
  background: linear-gradient(to bottom right, #ffe5ec, #ffc2d1);
}

.falling-leaves i:nth-of-type(2n+2) {
  background: linear-gradient(to bottom right, #ffb3c6, #ff8fab);
}

.falling-leaves i:nth-of-type(4n+1) {
  background: linear-gradient(to bottom right, #ffcad4, #f4acb7);
}

.falling-leaves i:nth-of-type(n) {
  transform: rotate(180deg);
}

.falling-leaves i:nth-of-type(n) {
  animation-timing-function: ease-in-out;
}

@keyframes falling {
0% {
  transform: translate3d(-100px, -100px, 0) rotate(0deg);
}
100% {
  transform: translate3d(350px, 900px, 0) rotate(90deg);
  opacity: 1;
    }
}

@keyframes falling3 {
0% {
  transform: translate3d(0, 0, 0) rotate(-120deg);
}
100% {
  transform: translate3d(230px, 740px, 0) rotate(-100deg);
  opacity: 1;
}
}

@keyframes falling2 {
0% {
  transform: translate3d(0, 0, 0) rotate(180deg);
}
100% {
  transform: translate3d(400px, 880px, 0) rotate(0deg);
  opacity: 1;
  }
}

@keyframes right-falling {
0% {
  transform: translate3d(300,0,0) rotate(0deg);
}
  
100% {
  transform: translate3d(-350px,500px,0) rotate(90deg);
  opacity: 1;
    }
}

@keyframes right-falling3 {
0% {
  transform: translate3d(0,0,0) rotate(-20deg);
}
    
100% {
  transform: translate3d(-230px,340px,0) rotate(-70deg);
  opacity: 0;
  }
}

@keyframes right-falling2 {
0% {
  transform: translate3d(0,0,0) rotate(90deg);
}
    
100% {
  transform: translate3d(-400px,380px,0) rotate(0deg);
  opacity: 0;
  }
}

/*star glowing effect*/
.star{
  animation: glow 1.5s linear alternate infinite;
}

.star-container img:nth-of-type(2n) {
  animation: glow 1s linear alternate infinite;
}

.falling-leaves img:nth-of-type(3n) {
  animation: glow 0.8s linear alternate infinite;
}

  
@keyframes glow {
0% {
  transform: scale(1);
}
100% {
  transform: scale(0.5);
  }
}

/*rabbit jump in effect*/
.rabbit-bottom-left{
  animation-delay: 3s;
  animation: rabbitBottomLeft 2s ease-out forwards;
}

@keyframes rabbitBottomLeft {
  0% {
    opacity: 0;               
    transform: translate(-200px, 450px);
  }
  100% {
    opacity: 1;               
    transform: translate(-80px, 260px);  
  }
}

.rabbit-top-left{
  animation-delay: 3s;
  animation: rabbitTopLeft 2s ease-out forwards;
}

@keyframes rabbitTopLeft {
  0% {
    opacity: 0;               
    transform: translate(-200px, 120px);
  }
  100% {
    opacity: 1;               
    transform: translate(-120px, 35px);  
  }
}

.rabbit-top-right{
  animation-delay: 3s;
  animation: rabbitTopRight 2s ease-out forwards;
}

@keyframes rabbitTopRight {
  0% {
    opacity: 0;               
    transform: translate(530px, 90px);
  }
  100% {
    opacity: 1;               
    transform: translate(420px, -25px);
  }
}

.rabbit-bottom-right{
  animation-delay: 3s;
  animation: rabbitBottomRight 2s ease-out forwards;
}

@keyframes rabbitBottomRight {
  0% {
    opacity: 0;               
    transform: translate(550px, 320px);
  }
  100% {
    opacity: 1;               
    transform: translate(440px, 170px);
  }
}

/*mobile responsive*/
@media (max-width: 1500px){
#mid-autumn-display .banner-title{
  font-size: 65px;
}

#mid-autumn-display .banner-content{
  font-size: 20px;
}

#mid-autumn-display .rabbit-container{
  transform: scale(0.8);
  left: -11px;
  top: -55px;
}
}
  
@media (max-width: 1300px){
#mid-autumn-display .banner-title{
  font-size: 60px;
}

#mid-autumn-display .banner-content{
  font-size: 19px;
}

#mid-autumn-display .rabbit-container{
  left: -27px;
  top: -30px;
  transform: scale(0.7);
}
}
  
@media (max-width: 1200px){
#desktop_view_mid_autumn{
  display: none;
}

#mobile_view_mid_autumn{
  display: block;
}

#mid-autumn-display .lantern1,
#mid-autumn-display .lantern2 {
  width: 15%;
}

#mid-autumn-display .sakura-left,
#mid-autumn-display .sakura-right,
#mid-autumn-display .petal{
  width: 20%;
}

#mid-autumn-display .sakura-right{
  bottom: 0;
  top: 40%;
}

#mid-autumn-display .banner-title{
  font-size: 50px;
}

#mid-autumn-display .banner-content{
  font-size: 16px;
}

#mid-autumn-display .promo-btn{
  font-size: 16px;
  padding: 8px 14px;
  width: 70%;
}

#mid-autumn-display .chang-er{
left: 0;
}

#mid-autumn-display .img-container{
  height: 300px;
}

#mid-autumn-display .star-container{
  width: 60%;
}

#mid-autumn-display .rabbit-container{
  transform: scale(1);
  left: 0;
  top: 0;
}

.right-leaves{
  top: 535px;
  left: 650px;
}

.banner-inner-container{
  gap: 10rem;
}

.banner-right-container{
  transform: scale(1.5);
}

/*rabbit*/

.rabbit-bottom-left{
  animation-delay: 3s;
  animation: rabbitBottomLeft2 2s ease-out forwards;
  height: 45%;
}

@keyframes rabbitBottomLeft2 {
  0% {
    opacity: 0;               
    transform: translate(-55px, 230px);
  }
  100% {
    opacity: 1;               
    transform: translate(10px, 175px); 
  }
}

.rabbit-top-left{
  animation-delay: 3s;
  animation: rabbitTopLeft2 2s ease-out forwards;
  height: 50%;
}

@keyframes rabbitTopLeft2 {
  0% {
    opacity: 0;               
    transform: translate(-65px, 110px);
  }
  100% {
    opacity: 1;               
    transform: translate(10px, 60px);  
  }
}

.rabbit-top-right{
  animation-delay: 3s;
  animation: rabbitTopRight2 2s ease-out forwards;
  height: 50%;
}

@keyframes rabbitTopRight2 {
  0% {
    opacity: 0;               
    transform: translate(350px, 60px);
  }
  100% {
    opacity: 1;               
    transform: translate(300px, 10px);
  }
}

.rabbit-bottom-right{
  animation-delay: 3s;
  animation: rabbitBottomRight2 2s ease-out forwards;
  height: 50%;
}

@keyframes rabbitBottomRight2 {
  0% {
    opacity: 0;               
    transform: translate(365px, 185px);
  }
  100% {
    opacity: 1;               
    transform: translate(315px, 135px);
  }
}
}

@media (max-width: 991px){
#mid-autumn-display .sakura-left, 
#mid-autumn-display .sakura-right, 
#mid-autumn-display .petal {
  width: 30%;
}

.banner-inner-container{
  gap: 7rem;
}

.banner-right-container{
  transform: scale(1.3);
}


}

@media (max-width: 768px){
#mid-autumn-display .banner-title{
  font-size: 40px;
}

#mid-autumn-display .banner-content{
  font-size: 15px;
}

#mid-autumn-display .promo-btn{
  padding: 8px 14px;
}

#mid-autumn-display .lantern1, 
#mid-autumn-display .lantern2 {
  width: 17%;
}
}

@media (max-width: 500px){
#mid-autumn-display .sakura-left, 
#mid-autumn-display .sakura-right, 
#mid-autumn-display .petal {
  width: 30%;
}

#mid-autumn-display .lantern1, 
#mid-autumn-display .lantern2 {
  width: 23%;
}

#mid-autumn-display .lantern2 {
  right: -15px !important;
}

.falling-leaves{
  top: 115px;
  left: -330px;
}

.right-leaves{
  top: 320px;
  left: 400px;
}

.banner-inner-container{
  gap: 0;
}

.banner-right-container{
  transform: scale(0.9);
}
  
}

@media (max-width: 450px){
#mid-autumn-display .banner-title{
  font-size: 30px;
}

#mid-autumn-display .banner-content{
  font-size: 14px;
}

#mid-autumn-display .promo-btn{
  width: 90%;
  font-size: 14px;
}

#mid-autumn-display .sakura-left{
  top: 0;
}

#mid-autumn-display .promo-btn{
  padding: 4px 14px;
}
}