/* homepage css do not REMOVE */
@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: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; }
.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); } }
/* festive banner css start editing here */
#cny-display .display-bg { background: url("https://cms.blueoceanfin.com/assets/media/1703650610296-634-bg-700.webp"); background-size: cover; height: 650px; overflow: hidden; background-position: center; }
#cny-display .content-text { color: #fff; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); font-family: Kaushan Script; font-size: 40px; font-style: normal; font-weight: 400; line-height: normal; }
#cny-display .content-img { width: 700px; }
#cny-display .content-btn-container { margin-top: 30px; border-radius: 25px; overflow: hidden; }
#cny-display .content-btn { border-radius: 25px; background: -o-linear-gradient(2deg, #e89b25 3.82%, #ffd355 18.52%, #e1a935 32.04%, #ffb738 46.55%, #ea901f 64.82%, #c77f20 81.33%, #ffa512 97.85%, #ffa91a 112.67%); background: linear-gradient(88deg, #e89b25 3.82%, #ffd355 18.52%, #e1a935 32.04%, #ffb738 46.55%, #ea901f 64.82%, #c77f20 81.33%, #ffa512 97.85%, #ffa91a 112.67%); -webkit-box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.5) inset; box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.5) inset; border: none; color: #042456; text-align: center; font-family: Inter; font-size: 1.25rem; font-style: normal; font-weight: 600; line-height: 24px; padding: 12px 0px; width: 380px; overflow: hidden; }
#cny-display .content-btn:hover { background: #ffd355; }
#cny-display .content-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#fff), to(transparent)); background: -o-linear-gradient(left, transparent, #fff, transparent); background: linear-gradient(90deg, transparent, #fff, transparent); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
#cny-display .content-btn:hover::before { left: 100%; }
#cny-display .falling-leaves { position: absolute; top: 0; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); overflow: hidden; }
.leaf-scene { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.leaf-scene div { position: absolute; top: 0; left: 0; width: 20px; height: 20px; background: url(https://cms.blueoceanfin.com/assets/media/1703650609555-665-leaf-animation.webp) no-repeat; background-size: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible; backface-visibility: visible; }
@media screen and (max-width: 991px) { #cny-display .display-bg { background: url("https://cms.blueoceanfin.com/assets/media/1703650610104-301-bg-844.webp"); background-size: cover; height: 820px; background-position: center; } #cny-display .content-img { width: 600px; } #cny-display .content-btn { width: 300px; overflow: hidden; border-radius: 20px; } }
@media screen and (max-width: 575px) { #cny-display .display-bg { background: url("https://cms.blueoceanfin.com/assets/media/1703650609564-619-bg-500.webp"); background-position: center; background-size: cover; height: 500px; } #cny-display .content-img { width: 300px; } #cny-display .content-text { font-size: 20px; } #cny-display .content-btn { width: 170px; overflow: hidden; border-radius: 10px; font-size: 13px; padding: 5px; } }
.hari-raya-2024 { position: relative; }
section.hari-raya-2024 div.display-bg {background: url("https://cms.blueoceanfin.com/assets/media/1709611928729-739-blue_ocean_hari_raya_2024_bg.webp");background-size: cover;height: 650px;overflow: hidden;background-position: 80% 100%;display: flex;justify-content: center;align-items: center;overflow: hidden;z-index: 1;}
section.hari-raya-2024 div.display-bg div.fogwrapper {height: 100%;position: absolute;top: 0;width: 100%;z-index: 1;pointer-events: none;}
section.hari-raya-2024 div.display-bg div.fogwrapper #foglayer_01, #foglayer_02, #foglayer_03 {height: 100%;position: absolute;width: 200%;}
section.hari-raya-2024 div.display-bg div.fogwrapper #foglayer_01 .image01, #foglayer_01 .image02,#foglayer_02 .image01, #foglayer_02 .image02,#foglayer_03 .image01, #foglayer_03 .image02 {float: left;height: 100%;width: 100%;background-size: cover;filter: opacity(0.5);}
section.hari-raya-2024 div.display-bg div.fogwrapper #foglayer_01 .image01, #foglayer_01 .image02,#foglayer_02 .image01, #foglayer_02 .image02,#foglayer_03 .image01, #foglayer_03 .image02 {background-image: url("https://cms.blueoceanfin.com/assets/media/1709624625948-681-blue_ocean_fog.webp");}
@keyframes foglayer_moveme {0% { left: 0; }100% { left: -100%; }}
section.hari-raya-2024 div.display-bg div.fogwrapper #foglayer_01 {animation: foglayer_moveme 10s linear infinite;}
section.hari-raya-2024 div.display-bg div.fogwrapper #foglayer_02 {animation: foglayer_moveme 15s linear infinite;}
section.hari-raya-2024 div.display-bg div.fogwrapper #foglayer_03 {animation: foglayer_moveme 20s linear infinite;}
section.hari-raya-2024 div.display-bg div.blue-ocean-boat {background: url("https://cms.blueoceanfin.com/assets/media/1709612821881-121-blue_ocean_hari_raya_2024_boat.webp");background-size: cover;width: 500px;height: 300px;left: -5%;top: 55%;position: absolute;z-index: 2;animation: floatAnimation 8s ease-in-out infinite alternate;}
@keyframes floatAnimation {0%, 100% {transform: translateX(0) rotate(0deg);}25% {transform: translateX(20px) rotate(2deg);}75% {transform: translateX(-20px) rotate(-2deg);}}
section.hari-raya-2024 div.display-bg div.hari-raya-title {text-align: center; z-index: 3;}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-title::before {width: 100%;display: inline-block;font-size: inherit;font-weight: inherit;line-height: inherit;letter-spacing: inherit;text-align: center;content: "Eid Mubarak";text-shadow: 4px 1px 3px rgba(0, 0, 0, 0.81);position: absolute;z-index: -69;top: 0;left: 0;}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-title {font-size: 110px;font-weight: 700;line-height: 134px;letter-spacing: 0em;text-align: center;background-size: 200%;background: linear-gradient(to bottom, rgba(0,145,223,1) 20%, rgba(255,255,255,1) 80%);-webkit-text-fill-color: transparent;background-clip: text;color: transparent;position: relative;}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-description::before {width: 100%;display: inline-block;font-size: inherit;font-weight: inherit;line-height: inherit;letter-spacing: inherit;text-align: center;content: "Experience the thrill of live trading.";text-shadow: 4px 1px 3px rgba(0, 0, 0, 0.81);position: absolute;z-index: -69;top: 0;left: 0;}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-description {font-size: 50px;font-weight: 500;line-height: 50px;letter-spacing: 0em;text-align: center;background: rgb(0,145,223);background: linear-gradient(to bottom, rgba(0,145,223,1) 20%, rgba(255,255,255,1) 80%);-webkit-background-clip: text;background-clip: text;color: transparent; position: relative;}
section.hari-raya-2024 div.display-bg div.hari-raya-title button.raya-button {width: 273px; height: 48px;margin-top: 20px;border-radius: 25px;gap: 10px;background: linear-gradient(90deg, #3DD8FF 0%, #C1FFFC 100%);box-shadow: 3px 4px 4px 0px #00000080 inset;font-size: 20px;font-weight: 600;line-height: 24px;letter-spacing: 0em;text-align: center;border: none;transition: all 0.3s ease;}
section.hari-raya-2024 div.display-bg div.hari-raya-title button.raya-button:hover {transform: scale(1.05) translateY(-5px);box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);}
.top-items {
top: 0;
left: 0;
width: 100%;
height: 650px;
position: absolute;
}
.image-container {
width: 100%;
height: 100%;
}
.blink-lights-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
@keyframes blinkblink {
0%, 100% { filter: blur(30px);opacity: 0; }
50% { filter: blur(10px); opacity: 1; }
}
.blink-light {
position: absolute;
animation: blinkblink 3s alternate infinite;
background: radial-gradient(38.5% 38.5% at 44.34% 46.77%, #19B3FF 10%, rgba(0, 0, 0, 0) 100%);
border-radius: 50%;
width: 150px;
height: 150px;
}
.star-desktop {
position: absolute;
background: url("https://cms.blueoceanfin.com/assets/media/1709864131064-221-star-conselation-desktop.webp");
background-position: center center;
background-repeat: no-repeat;
height: 100%;
top: 0;
left: 0;
background-size: contain;
left: 50%;
width: 60%;
transform: translate(-50%, -5%);
filter: brightness(200%);
}
/* Screen Responsive Start Here */
@media (max-width: 1920px) and (max-height: 1080px) {
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-title {font-size: 130px;}section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-description {font-size: 40px;}
.blink-light:nth-child(1) {
top: 42%;
left: -4%;
}
.blink-light:nth-child(2) {
top: 69%;
left: 18%;
}
.blink-light:nth-child(3) {
top: 20%;
left: 45.5%;
}
.blink-light:nth-child(4) {
top: 59%;
left: 70%;
}
.blink-light:nth-child(5) {
top: 10%;
left: 90.5%;
}
}
@media (max-width: 1800px) {
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-title {font-size: 120px;}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-description {font-size: 37px;}
.blink-light:nth-child(1) {
top: 41%;
left: -4%;
}
.blink-light:nth-child(2) {
top: 66%;
left: 18%;
}
.blink-light:nth-child(3) {
top: 21%;
left: 45.5%;
}
.blink-light:nth-child(4) {
top: 57%;
left: 69%;
}
.blink-light:nth-child(5) {
top: 12%;
left: 90%;
}
}
@media (max-width: 1600px) {
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-title {font-size: 105px;line-height: 100px;}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-description {font-size: 35px;}
.blink-light:nth-child(1) {
top: 42%;
left: -4.5%;
}
.blink-light:nth-child(2) {
top: 63%;
left: 17.5%;
}
.blink-light:nth-child(3) {
top: 23%;
left: 44.5%;
}
.blink-light:nth-child(4) {
top: 55%;
left: 68.5%;
}
.blink-light:nth-child(5) {
top: 15%;
left: 89.5%;
}
}
@media (max-width: 1500px) {
.blink-light:nth-child(1) {
top: 41%;
left: -5.5%;
}
.blink-light:nth-child(2) {
top: 62%;
left: 16.5%;
}
.blink-light:nth-child(3) {
top: 23%;
left: 43.5%;
}
.blink-light:nth-child(4) {
top: 54%;
left: 68%;
}
.blink-light:nth-child(5) {
top: 16%;
left: 88.5%;
}
}
@media (max-width: 1367px) {
section.hari-raya-2024 div.display-bg {background-position: 55% 50%;}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-title {font-size: 90px;line-height: 90px;}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-description {font-size: 28px;line-height: 28px;}
section.hari-raya-2024 div.display-bg div.hari-raya-title button.raya-button {width: 260px; }
section.hari-raya-2024 div.display-bg div.blue-ocean-boat {left: -8%; width: 500px;height: 300px;}
.star-desktop {
width: 60%;
transform: translate(-50%, -4%);
}
.blink-light:nth-child(2) {
top: 60%;
left: 16%;
}
.blink-light:nth-child(3) {
top: 24%;
left: 43%;
}
.blink-light:nth-child(4) {
top: 53%;
left: 67%;
}
.blink-light:nth-child(5) {
top: 18%;
left: 87.5%;
}
}
@media (max-width: 1200px) {
section.hari-raya-2024 div.display-bg {background-position: 55% 50%;}
section.hari-raya-2024 div.display-bg div.blue-ocean-boat {left: -10%; width: 500px;height: 300px;}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-title {font-size: 85px;line-height: 85px;}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-description {font-size: 27px;line-height: 27px;}
.star-desktop {
width: 64%;
transform: translate(-50%, -3%);
}
.blink-light:nth-child(1) {
top: 40%;
left: -6%;
}
.blink-light:nth-child(2) {
top: 58%;
left: 15.5%;
}
.blink-light:nth-child(3) {
top: 26%;
left: 42.5%;
}
.blink-light:nth-child(4) {
top: 51%;
left: 66.5%;
}
.blink-light:nth-child(5) {
top: 19%;
left: 87%;
}
section.hari-raya-2024 div.display-bg div.blue-ocean-boat {left: -12%; width: 500px;height: 300px;}
}
@media (max-width: 1099px) {
section.hari-raya-2024 div.display-bg {background-position: 60% 50%;}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-title {font-size: 80px;}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-description {font-size: 25px;}
.star-desktop {
width: 80%;
transform: translate(-46%, -12%);
}
.blink-light:nth-child(1) {
top: 41%;
left: -5%;
}
.blink-light:nth-child(2) {
top: 61%;
left: 16.5%;
}
.blink-light:nth-child(3) {
top: 24%;
left: 43.5%;
}
.blink-light:nth-child(4) {
top: 53%;
left: 67.5%;
}
.blink-light:nth-child(5) {
top: 17%;
left: 88%;
}
}
@media (max-width: 990px) {
section.hari-raya-2024 div.display-bg div.blue-ocean-boat {left: -25%; width: 450px;height: 270px;}
.star-desktop {
width: 86%;
transform: translate(-50%, -5%);
}
section.hari-raya-2024 div.display-bg {background-position: 74% 50%;}
.blink-light:nth-child(1) {
top: 41%;
left: -6%;
}
.blink-light:nth-child(2) {
top: 59%;
left: 16.5%;
}
.blink-light:nth-child(4) {
top: 52%;
left: 67%;
}
.blink-light:nth-child(5) {
top: 17%;
left: 87.5%;
}
}
@media (max-width: 820px) {
.star-desktop {
background-image: url('https://cms.blueoceanfin.com/assets/media/1709865167516-684-star-conselation-tablet.webp');
width: 78%;
transform: translate(-53%, -16%);
}
.blink-light {
width: 130px;
height: 130px;
}
.blink-light:nth-child(1) {
display: none;
}
.blink-light:nth-child(2) {
top: 55%;
left: -6.5%;
}
.blink-light:nth-child(3) {
top: 30%;
left: 29%;
}
.blink-light:nth-child(4) {
top: 60.5%;
left: 65.5%;
}
.blink-light:nth-child(5) {
top: 21%;
left: 86%;
}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-title {font-size: 70px;line-height: 70px;}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-description {font-size: 25px;line-height: 25px;}
section.hari-raya-2024 div.display-bg div.hari-raya-title button.raya-button {width: 200px;font-size: 20px; }
section.hari-raya-2024 div.display-bg div.blue-ocean-boat {
left: -20%;
width: 415px;
height: 245px;
top: 65%;
}
.star-desktop {
transform: translate(-49%, -14%);
width: 85%;
}
}
@media (max-width: 670px) {
section.hari-raya-2024 div.display-bg div.blue-ocean-boat {
display: none;
}
.star-desktop {
transform: translate(-49%, -11%);
width: 95%;
}
.blink-light:nth-child(2) {
top: 55%;
left: -6.5%;
}
.blink-light:nth-child(3) {
top: 30%;
left: 29%;
}
.blink-light:nth-child(4) {
top: 58.5%;
left: 65.5%;
}
.blink-light:nth-child(5) {
top: 22%;
left: 85%;
}
}
@media (max-width: 550px) {
/* section.hari-raya-2024 div.display-bg div.blue-ocean-boat {display: none; } */
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-title {font-size: 60px;line-height: 60px;}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-description {font-size: 20px;line-height: 20px;}
section.hari-raya-2024 div.display-bg div.hari-raya-title button.raya-button {width: 180px;font-size: 18px; }
.star-desktop {
background-image: url('https://cms.blueoceanfin.com/assets/media/1709865167524-516-star-conselation-phone.webp');
}
.star-desktop {
width: 88%;
transform: translate(-49%, -24%);
}
section.hari-raya-2024 div.display-bg div.hari-raya-title {
margin-top: 200px;
}
.blink-light{
width: 100px;
height: 100px;
}
.blink-light:nth-child(2) {
display: none;
}
.blink-light:nth-child(3) {
top: 44%;
left: -6%;
}
.blink-light:nth-child(4) {
top: 59%;
left: 37.5%;
}
.blink-light:nth-child(5) {
top: 25%;
left: 82%;
}
}
@media (max-width: 440px) {
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-title {font-size: 60px;line-height: 60px;}
section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-description {font-size: 20px;line-height: 20px;}
section.hari-raya-2024 div.display-bg div.hari-raya-title button.raya-button {width: 180px;font-size: 18px; }
section.hari-raya-2024 div.display-bg {height: 580px;}
.star-desktop {
width: 90%;
transform: translate(-49%, -30%);
}
section.hari-raya-2024 div.display-bg div.hari-raya-title {
margin-top: 200px;
}
.blink-light:nth-child(3) {
top: 44%;
left: -7%;
}
.blink-light:nth-child(4) {
top: 55%;
left: 37%;
}
.blink-light:nth-child(5) {
top: 29%;
left: 81%;
}
}
@media (max-width: 356px) {section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-title {font-size: 42px;line-height: 42px;}section.hari-raya-2024 div.display-bg div.hari-raya-title p.raya-description {font-size: 13px;line-height: 23px;}section.hari-raya-2024 div.display-bg div.hari-raya-title button.raya-button {width: 170px;font-size: 16px; }
.star-desktop {
transform: translate(-40%, -34%);
}
.blink-light:nth-child(3) {
top: 44%;
left: -7%;
}
.blink-light:nth-child(4) {
top: 55%;
left: 37%;
}
.blink-light:nth-child(5) {
top: 29%;
left: 81%;
}
}