@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);
  }
}


/* Banner Starts here */
:root {
    --font-family: 'Inria Sans', sans-serif;
    --background-color: linear-gradient(to bottom, #8DC8E4, #376FB6);
    --subtitle-color: #FFFFFF;
    --linear-text-color: linear-gradient(to bottom, #2962AC, #021732);

    --img-scale: 1;

    --banner-height: 600px;
    --banner-max-width: 1920px;
}
@font-face {font-family: 'Inria Sans'; src: url('https://cms.blueoceanfin.com/assets/media/InriaSans-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Inria Sans'; src: url('https://cms.blueoceanfin.com/assets/media/InriaSans-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal;}
@font-face {font-family: 'Inria Sans'; src: url('https://cms.blueoceanfin.com/assets/media/InriaSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal;}
@font-face {font-family: 'Inria Sans'; src: url('https://cms.blueoceanfin.com/assets/media/InriaSans-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic;}
@font-face {font-family: 'Inria Sans'; src: url('https://cms.blueoceanfin.com/assets/media/InriaSans-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic;}
@font-face {font-family: 'Inria Sans'; src: url('https://cms.blueoceanfin.com/assets/media/InriaSans-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic;}
/* Fireworks Animation Styles */
#festival {position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;}
.firework-container {position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2;}
.firework {visibility: hidden;}

/* desktop firework */
.firework--1 {translate: -70% 25% !important; scale: 1.7 !important;}
.firework--2 {translate: -90% 0% !important; scale: 2 !important;}
.firework--4 {translate: -40% 30% !important; scale: 2 !important;}
.firework--6 {translate: -20% 20% !important; scale: 3 !important;}
.firework--9 {translate: 33% -25% !important; scale: 2 !important;}
@keyframes rotate{
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@keyframes floating{
    from {transform: translate(0, 0px);}
    60% {transform: translate(0, 32px);}
    to {transform: translate(0, -0px);}
}
@keyframes floating2{
    from {transform: translate(0, 0px);}
    45% {transform: translate(0, 15px);}
    to {transform: translate(0, -0px);}
}
@keyframes floating3{
    from {transform: translate(0, 0px);}
    50% {transform: translate(0, -25px);}
    to {transform: translate(0, -0px);}
}
@keyframes floating4{
    from {transform: translate(0, 0px);}
    40% {transform: translate(0, -15px);}
    to {transform: translate(0, -0px);}
}
/* Basic settings */
#id-bo-cny-2026 {margin: 0; padding: 0; box-sizing: border-box; overflow: hidden;}
.banner {height: var(--banner-height); width: 100%; background: var(--background-color); overflow-y: hidden; overflow-x: unset;}
.cny {width: 100%; height: 100%; position: relative; display: flex; justify-content: center; overflow: hidden;}
.cny-text {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; flex-direction: column-reverse; text-align: center; font-family: var(--font-family); padding: 0 10px; z-index: 100; position: relative;}
.cny-title h1 {background: var(--linear-text-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: bold;}
.cny-subtitle h2 {color: var(--subtitle-color); font-size: 1.4rem; margin: 0 10px;}
.cny-mobile {display: none;}

/* Desktop settings */
.cny-desktop {width: 100%; height: 100%; max-width: var(--banner-max-width); position: relative;}

/* Desktop image settings */
.cny-desktop-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-between; z-index: 3;}
.cny-img-left-container {position: relative; width: 100%; height: 100%;}
.cny-img-right-container {position: relative; width: 100%; height: 100%;}

/* Frame Settings */
.img-container {position: absolute; width: 200px; height: 200px;}
.frame {display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%;}
.frame-outer,
.frame-inner {width: 100%; height: 100%; object-fit: cover;}
.frame-outer {position: absolute; z-index: 6;}
.frame-inner {position: absolute; z-index: 4; animation: rotate 10s linear infinite;}
.element {position: absolute; z-index: 5; width: 80%; height: 80%; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 42%;}


/* Lantern */
.lantern-container {top: 0%; left: 13%; scale: calc(var(--img-scale) + 0.7);}
.element .lantern {position: absolute; width: 90px; bottom: 0%; right: 0%; animation: floating4 3s ease-in-out infinite alternate;}
/* Flower */
.flower-container {bottom: -2%; left: -2%; scale: calc(var(--img-scale) + 0.6);}
.element .flower {position: absolute; width: 120px; top: 10%; right: 0%; animation: floating3 3s ease-in-out infinite alternate;}
/* Ingot */
.ingot-container {bottom: 15%; left: 37%; scale: var(--img-scale);}
.element .ingot {position: absolute; width: 150px; bottom: 10%; left: -12%; animation: floating 3s ease-in-out infinite alternate;}
/* Angpao */
.angpao-container {top: -5%; left: 37%; scale: calc(var(--img-scale) + 1);}
.element .angpao {position: absolute; width: 150px; bottom: -15%; animation: floating4 3s ease-in-out infinite alternate;}
/* Fan */
.fan-container {bottom: 10%; right: 9%; scale: calc(var(--img-scale) + 0.7);}
.element .fan {position: absolute; width: 170px; top: -15%; right: -10%; animation: floating2 3s ease-in-out infinite alternate;}
[lang="cn"]{
.cny-title h1{margin-top: 3%;transform: translateX(10px);}
.cny-subtitle h2 {margin-bottom: 3%;}
}
[lang="zh"]{
.cny-title h1{margin-top: 3%;transform: translateX(10px);}
.cny-subtitle h2 {margin-bottom: 3%;}
}

@media screen and (max-width: 1269px) {
  :root {--img-scale: 0.8;}
  .lantern-container {top: 0%; left: 10%;}
  .flower-container {bottom: -4%; left: -3%;}
  .ingot-container {bottom: 17%; left: 33%;}
  .angpao-container {top: -5%; left: 40%;}
  .fan-container {bottom: 7%; right: 7%;}
  .firework--1 {translate: -50% 25% !important; scale: 1.7 !important;}
  .firework--2 {translate: -80% -10% !important; scale: 2 !important;}
  .firework--4 {translate: -40% 30% !important; scale: 2 !important;}
  .firework--6 {translate: -40% 20% !important; scale: 3 !important;}
  .firework--9 {translate: 23% -25% !important; scale: 2 !important;}
}
@media screen and (max-width: 1059px) {
  :root {--img-scale: 0.6;}
  .lantern-container {top: -4%; left: 10%;}
  .flower-container {bottom: -6%; left: -6%;}
  .ingot-container {bottom: 13%; left: 23%;}
  .fan-container {bottom: 3%; right: 4%;}
}
@media screen and (max-width: 947px) {
  :root {--img-scale: 0.6;}
  .ingot-container {bottom: 16%; left: 23%;}
  .fan-container {right: 5%;}
}
@media screen and (max-width: 873px) {
  :root {--img-scale: 0.4;}
  .flower-container {bottom: -7%; left: -10%;}
  .ingot-container {left: 18%; scale: calc(var(--img-scale) + 0.1);}
  .angpao-container {left: 36%;}
  .fan-container {bottom: 0%; right: 1%;}
  [lang="cn"]{.cny-text{margin-top: -5%;}}
  [lang="zh"]{.cny-text{margin-top: -5%;}}
  [lang="vn"]{.cny-text{margin-top: -5%;} .cny-subtitle h2 {margin-bottom: 1%;}}
  [lang="th"]{.cny-text{margin-top: -5%;} .cny-subtitle h2 {margin-bottom: 1%; font-size: 1.2rem;}}
  [lang="lo"]{.cny-text{margin-top: -5%;} .cny-subtitle h2 {margin-bottom: 1%; font-size: 1.1rem;}}
  [lang="ar"]{.cny-text{margin-top: -5%;} .cny-subtitle h2 {margin-bottom: 1%; font-size: 1.1rem;}}

} 
@media screen and (max-width: 763px) {
  .cny-desktop {display: none;}
  .cny-mobile {display: flex; flex-direction: column; width: 100%; height: 100%; position: relative;}
  .cny-mobile-img-top,
  .cny-mobile-img-bottom {width: 100%; height: 100%; position: relative; z-index: 3;}
  :root {--img-scale: 0.6;}
  .angpao-container {top: -27%; left: auto; right: 0%;}
  .ingot-container {bottom: -36%; left: 17%;}
  .flower-container {bottom: -4%; left: -3%; scale: calc(var(--img-scale) + 1);}
  .fan-container {bottom: 38%; right: 7%; scale: calc(var(--img-scale) + 0.1);}
}
@media screen and (max-width: 763px) {/*This one follow js breakpoint*/
  .firework--3 {translate: -90% -10% !important; scale: 2 !important;}
  .firework--5 {translate: -30% 40% !important; scale: 2 !important;}
  .firework--7 {translate: -30% -20% !important; scale: 3 !important;}
  .firework--10 {translate: -23% -25% !important; scale: 2 !important;}
}
@media screen and (max-width: 600px) {
  :root {--img-scale: 0.4;}
  .angpao-container {top: -23%; right: 0;}
  .ingot-container {bottom: -36%; left: 17%;}
  .flower-container {bottom: -6%; left: -6%; scale: calc(var(--img-scale) + 1);}
  .fan-container {bottom: 38%; right: 7%; scale: calc(var(--img-scale) + 0.1);}
}
@media screen and (max-width: 500px) {
  .ingot-container {display: none;}
  .fan-container {display: none;}
}
@media screen and (max-width: 763px) {/*This one follow js breakpoint*/
  .firework--8 {translate: -30% 50% !important; scale: 3 !important;}
  .firework--11 {translate: -70% -70% !important; scale: 3 !important;}
}
@media screen and (max-width: 391px) {
[lang="vn"]{
.cny-title h1{font-size: 35px;}
.cny-subtitle h2 {font-size: 1.3rem;}
}
}
/* Banner ends here */