:root {
--icon-tick: url('data:image/svg+xml,');
--icon-tick-white: url('data:image/svg+xml,');
--icon-tick-primary: url('data:image/svg+xml,');
--icon-tick-gray: url('data:image/svg+xml,');
--icon-close: url('data:image/svg+xml,');
--icon-close-white: url('data:image/svg+xml,');
--eye: url('data:image/svg+xml,');
--info: url('data:image/svg+xml,');
--icon-play: url('data:image/svg+xml,');
--icon-stop: url('data:image/svg+xml,');
--icon-circle-arrow: url('data:image/svg+xml,');
--icon-chevron-right: url('data:image/svg+xml,');
--icon-arrow-left: url('data:image/svg+xml,');
--icon-arrow-right: url('data:image/svg+xml,');
}
a:hover {
color: var(--bs-primary-muted);
}
.btn svg {
flex-shrink: 0;
margin-right: 0.75rem;
}
.btn-xs svg {
margin-right: 0.25rem;
}
.icon {
display: inline-block;
}
.icon-appstore {
position: relative;
z-index: 1;
display: inline-block;
}
.icon-appstore::after {
display: block;
content: "";
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
border-radius: 100%;
background-color: #fff;
}
.z-index-1 {
z-index: 1;
}
.z-index-2 {
z-index: 2;
}
.z-index-3 {
z-index: 3;
}
.z-index-4 {
z-index: 4;
}
.z-index-5 {
z-index: 5;
}
.overflow-x-auto {
overflow-x: auto;
}
.max-width-1400 {
max-width: 1400px;
}
.max-width-1200 {
max-width: 1200px;
}
.max-width-1000 {
max-width: 1000px;
}
.max-width-900 {
max-width: 900px;
}
.max-width-800 {
max-width: 800px;
}
.max-width-700 {
max-width: 700px;
}
.max-width-600 {
max-width: 600px;
}
.max-width-500 {
max-width: 500px;
}
.max-width-400 {
max-width: 400px;
}
.max-width-50 {
max-width: 50%;
}
@media screen and (min-width: 768px) {
.h-md-100 {
height: 100% !important;
}
.h-md-50 {
height: 100% !important;
}
.max-width-md-50 {
max-width: 50%;
}
}
@media screen and (min-width: 992px) {
.h-lg-100 {
height: 100% !important;
}
.h-lg-50 {
height: 100% !important;
}
.max-width-lg-1400 {
max-width: 1400px;
}
.max-width-lg-1200 {
max-width: 1200px;
}
.max-width-lg-1000 {
max-width: 1000px;
}
.max-width-lg-900 {
max-width: 900px;
}
.max-width-lg-800 {
max-width: 800px;
}
.max-width-lg-600 {
max-width: 600px;
}
.max-width-lg-50 {
max-width: 50%;
}
}
@media screen and (min-width: 1280px) {
.h-xl-100 {
height: 100% !important;
}
.h-xl-50 {
height: 100% !important;
}
.max-width-xl-1400 {
max-width: 1400px;
}
.max-width-xl-1200 {
max-width: 1200px;
}
.max-width-xl-1000 {
max-width: 1000px;
}
.max-width-xl-900 {
max-width: 900px;
}
.max-width-xl-800 {
max-width: 800px;
}
.max-width-xl-600 {
max-width: 600px;
}
.max-width-xl-50 {
max-width: 50%;
}
}
@media screen and (min-width: 1400px) {
.h-xxl-100 {
height: 100% !important;
}
.h-xxl-50 {
height: 100% !important;
}
.max-width-xxl-1400 {
max-width: 1400px;
}
.max-width-xxl-1200 {
max-width: 1200px;
}
.max-width-xxl-1000 {
max-width: 1000px;
}
.max-width-xxl-900 {
max-width: 900px;
}
.max-width-xxl-800 {
max-width: 800px;
}
.max-width-xxl-600 {
max-width: 600px;
}
.max-width-xxl-50 {
max-width: 50%;
}
}
.ul-tick,
.ul-tick-white,
.ul-tick-primary,
.ul-tick-2 {
list-style: none;
padding: 0;
margin: 0;
}
.ul-tick > li,
.ul-tick-white > li,
.ul-tick-primary > li,
.ul-tick-2 > li {
padding-left: 28px;
position: relative;
z-index: 1;
margin-bottom: 10px;
}
.ul-tick > li::before,
.ul-tick-white > li::before,
.ul-tick-primary > li::before,
.ul-tick-2 > li::before {
content: "";
display: block;
position: absolute;
z-index: 2;
top: 3px;
left: 0;
width: 18px;
height: 18px;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
background-image: var(--icon-tick);
}
.ul-tick-white > li::before {
background-image: var(--icon-tick-white);
}
.ul-tick-primary > li::before {
background-image: var(--icon-tick-primary);
}
.ul-tick-2 > li::before {
background-image: var(--icon-tick-gray);
}
.ul-dot {
list-style: none;
padding: 0;
margin: 0;
--dot-color: var(--bs-body-color);
--dot-top: 50%;
--dot-size: 4px;
--dot-img: "";
}
.ul-dot > li {
padding-left: calc(var(--dot-size) + 16px);
position: relative;
z-index: 1;
margin-bottom: 10px;
}
.ul-dot > li::before {
content: "";
display: block;
position: absolute;
z-index: 2;
top: var(--dot-top);
left: 4px;
transform: translateY(-50%);
width: var(--dot-size);
height: var(--dot-size);
border-radius: 100%;
background-color: var(--dot-color);
background-image: var(--dot-img);
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
.transform-rotate-45 {
transform: rotate(-45deg);
}
.top-25 {
top: 25%;
}
.end-25 {
right: 25%;
}
.bottom-25 {
bottom: 25%;
}
.start-25 {
left: 25%;
}
.size-16 {
--size: 16px;
width: var(--size) !important;
height: var(--size) !important;
}
.size-24 {
--size: 24px;
width: var(--size) !important;
height: var(--size) !important;
}
.size-32 {
--size: 32px;
width: var(--size) !important;
height: var(--size) !important;
}
.size-40 {
--size: 40px;
width: var(--size) !important;
height: var(--size) !important;
}
.size-48 {
--size: 48px;
width: var(--size) !important;
height: var(--size) !important;
}
.size-56 {
--size: 56px;
width: var(--size) !important;
height: var(--size) !important;
}
.size-64 {
--size: 64px;
width: var(--size) !important;
height: var(--size) !important;
}
.size-80 {
--size: 80px;
width: var(--size) !important;
height: var(--size) !important;
}
.rounded-05 {
border-radius: 0.5rem;
}
.rounded-4 {
border-radius: 4rem;
}
.rounded-top-1 {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.rounded-top-2 {
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
}
.rounded-top-3 {
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
}
.rounded-top-4 {
border-top-left-radius: 4rem;
border-top-right-radius: 4rem;
}
.rounded-bottom-1 {
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
.rounded-bottom-2 {
border-bottom-left-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
.rounded-bottom-3 {
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
}
.rounded-bottom-4 {
border-bottom-left-radius: 4rem;
border-bottom-right-radius: 4rem;
}
.border-bottom {
--border-color:#dee2e6;
border-bottom: 1px solid var(--border-color) !important;
}
.border {
--border-color:#dee2e6;
border: 1px solid var(--border-color) !important;
}
.lh-0 {
line-height: 0 !important;
}
@media screen and (min-width: 768px) {
.size-md-16 {
--size: 16px;
width: var(--size);
height: var(--size);
}
.size-md-24 {
--size: 24px;
width: var(--size);
height: var(--size);
}
.size-md-32 {
--size: 32px;
width: var(--size);
height: var(--size);
}
.size-md-48 {
--size: 48px;
width: var(--size);
height: var(--size);
}
.size-md-56 {
--size: 56px;
width: var(--size);
height: var(--size);
}
.size-md-64 {
--size: 64px;
width: var(--size);
height: var(--size);
}
.size-md-80 {
--size: 80px;
width: var(--size);
height: var(--size);
}
.h1-md {
font-size: 3rem;
}
.h2-md {
font-size: 2rem;
}
.h3-md {
font-size: 1.5rem;
}
.h4-md {
font-size: 1.25rem;
}
.h5-md {
font-size: 1.125rem;
}
.fs-md-1 {
font-size: 3rem !important;
}
.fs-md-2 {
font-size: 2rem !important;
}
.fs-md-3 {
font-size: 1.5rem !important;
}
.fs-md-4 {
font-size: 1.25rem !important;
}
.fs-md-5 {
font-size: 1.125rem !important;
}
.fs-md-6 {
font-size: 1rem !important;
}
.display-md-1 {
font-size: 4.5rem;
}
.small-md {
font-size: 0.875rem;
}
.rounded-md-05 {
border-radius: 0.5rem;
}
.rounded-md-2 {
border-radius: 1.5rem !important;
}
.rounded-md-3 {
border-radius: 2rem !important;
}
.rounded-md-4 {
border-radius: 4rem !important;
}
.rounded-top-md-1 {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.rounded-top-md-2 {
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
}
.rounded-top-md-3 {
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
}
.rounded-top-md-4 {
border-top-left-radius: 4rem;
border-top-right-radius: 4rem;
}
.rounded-bottom-md-1 {
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
.rounded-bottom-md-2 {
border-bottom-left-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
.rounded-bottom-md-3 {
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
}
.rounded-bottom-md-4 {
border-bottom-left-radius: 4rem;
border-bottom-right-radius: 4rem;
}
.border-md-bottom {
--border-color:#dee2e6;
border-bottom: 1px solid var(--border-color) !important;
}
}
@media screen and (min-width: 992px) {
.size-lg-16 {
--size: 16px;
width: var(--size);
height: var(--size);
}
.size-lg-24 {
--size: 24px;
width: var(--size);
height: var(--size);
}
.size-lg-32 {
--size: 32px;
width: var(--size);
height: var(--size);
}
.size-lg-48 {
--size: 48px;
width: var(--size);
height: var(--size);
}
.size-lg-56 {
--size: 56px;
width: var(--size);
height: var(--size);
}
.size-lg-64 {
--size: 64px;
width: var(--size);
height: var(--size);
}
.size-lg-80 {
--size: 64px;
width: var(--size);
height: var(--size);
}
.h1-lg {
font-size: 3rem;
}
.h2-lg {
font-size: 2rem;
}
.h3-lg {
font-size: 1.5rem;
}
.h4-lg {
font-size: 1.25rem;
}
.h5-lg {
font-size: 1.125rem;
}
.fs-lg-1 {
font-size: 3rem !important;
}
.fs-lg-2 {
font-size: 2rem !important;
}
.fs-lg-3 {
font-size: 1.5rem !important;
}
.fs-lg-4 {
font-size: 1.25rem !important;
}
.fs-lg-5 {
font-size: 1.125rem !important;
}
.fs-lg-6 {
font-size: 1rem !important;
}
.display-lg-1 {
font-size: 4.5rem;
}
.small-lg {
font-size: 0.875rem;
}
.rounded-lg-05 {
border-radius: 0.5rem;
}
.rounded-lg-2 {
border-radius: 1.5rem !important;
}
.rounded-lg-3 {
border-radius: 2rem !important;
}
.rounded-lg-4 {
border-radius: 4rem !important;
}
.rounded-top-lg-1 {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.rounded-top-lg-2 {
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
}
.rounded-top-lg-3 {
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
}
.rounded-top-lg-4 {
border-top-left-radius: 4rem;
border-top-right-radius: 4rem;
}
.rounded-bottom-lg-1 {
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
.rounded-bottom-lg-2 {
border-bottom-left-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
.rounded-bottom-lg-3 {
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
}
.rounded-bottom-lg-4 {
border-bottom-left-radius: 4rem;
border-bottom-right-radius: 4rem;
}
.border-lg-bottom {
border-bottom: 1px solid #dee2e6 !important;
}
}
@media screen and (min-width: 1280px) {
.size-xl-16 {
--size: 16px;
width: var(--size);
height: var(--size);
}
.size-xl-24 {
--size: 24px;
width: var(--size);
height: var(--size);
}
.size-xl-32 {
--size: 32px;
width: var(--size);
height: var(--size);
}
.size-xl-48 {
--size: 48px;
width: var(--size);
height: var(--size);
}
.size-xl-56 {
--size: 56px;
width: var(--size);
height: var(--size);
}
.size-xl-64 {
--size: 64px;
width: var(--size);
height: var(--size);
}
.size-xl-80 {
--size: 64px;
width: var(--size);
height: var(--size);
}
.h1-xl {
font-size: 3rem;
}
.h2-xl {
font-size: 2rem;
}
.h3-xl {
font-size: 1.5rem;
}
.h4-xl {
font-size: 1.25rem;
}
.h5-xl {
font-size: 1.125rem;
}
.fs-xl-1 {
font-size: 3rem !important;
}
.fs-xl-2 {
font-size: 2rem !important;
}
.fs-xl-3 {
font-size: 1.5rem !important;
}
.fs-xl-4 {
font-size: 1.25rem !important;
}
.fs-xl-5 {
font-size: 1.125rem !important;
}
.fs-xl-6 {
font-size: 1rem !important;
}
.display-xl-1 {
font-size: 4.5rem;
}
.small-xl {
font-size: 0.875rem;
}
.rounded-top-xl-1 {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.rounded-top-xl-2 {
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
}
.rounded-top-xl-3 {
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
}
.rounded-top-xl-4 {
border-top-left-radius: 4rem;
border-top-right-radius: 4rem;
}
.rounded-bottom-xl-1 {
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
.rounded-bottom-xl-2 {
border-bottom-left-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
.rounded-bottom-xl-3 {
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
}
.rounded-bottom-xl-4 {
border-bottom-left-radius: 4rem;
border-bottom-right-radius: 4rem;
}
}
@media screen and (min-width: 1400px) {
.size-xxl-16 {
--size: 16px;
width: var(--size);
height: var(--size);
}
.size-xxl-24 {
--size: 24px;
width: var(--size);
height: var(--size);
}
.size-xxl-32 {
--size: 32px;
width: var(--size);
height: var(--size);
}
.size-xxl-48 {
--size: 48px;
width: var(--size);
height: var(--size);
}
.size-xxl-56 {
--size: 56px;
width: var(--size);
height: var(--size);
}
.size-xxl-64 {
--size: 64px;
width: var(--size);
height: var(--size);
}
.size-xxl-80 {
--size: 64px;
width: var(--size);
height: var(--size);
}
.h1-xxl {
font-size: 3rem;
}
.h2-xxl {
font-size: 2rem;
}
.h3-xxl {
font-size: 1.5rem;
}
.h4-xxl {
font-size: 1.25rem;
}
.h5-xxl {
font-size: 1.125rem;
}
.fs-xxl-1 {
font-size: 3rem !important;
}
.fs-xxl-2 {
font-size: 2rem !important;
}
.fs-xxl-3 {
font-size: 1.5rem !important;
}
.fs-xxl-4 {
font-size: 1.25rem !important;
}
.fs-xxl-5 {
font-size: 1.125rem !important;
}
.fs-xxl-6 {
font-size: 1rem !important;
}
.display-xxl-1 {
font-size: 4.5rem;
}
.small-xxl {
font-size: 0.875rem;
}
.rounded-top-xxl-1 {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.rounded-top-xxl-2 {
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
}
.rounded-top-xxl-3 {
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
}
.rounded-top-xxl-4 {
border-top-left-radius: 4rem;
border-top-right-radius: 4rem;
}
.rounded-bottom-xxl-1 {
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
.rounded-bottom-xxl-2 {
border-bottom-left-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
.rounded-bottom-xxl-3 {
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
}
.rounded-bottom-xxl-4 {
border-bottom-left-radius: 4rem;
border-bottom-right-radius: 4rem;
}
}
.border-light-10 {
--border-color:rgba(255, 255, 255, 0.1);
}
.border-light-10 .border-bottom {
--border-color:rgba(255, 255, 255, 0.1);
}
.border-light-10 .border-md-bottom {
--border-color:rgba(255, 255, 255, 0.1);
}
.border-light-20 {
--border-color:rgba(255, 255, 255, 0.2);
}
.border-light-20 .border-bottom {
--border-color:rgba(255, 255, 255, 0.2);
}
.border-light-20 .border-md-bottom {
--border-color:rgba(255, 255, 255, 0.2);
}
.border-light-30 {
--border-color:rgba(255, 255, 255, 0.3);
}
.border-light-30 .border-bottom {
--border-color:rgba(255, 255, 255, 0.3);
}
.border-light-30 .border-md-bottom {
--border-color:rgba(255, 255, 255, 0.3);
}
.border-light-50 {
--border-color:rgba(255, 255, 255, 0.5);
}
.border-light-50 .border-bottom {
--border-color:rgba(255, 255, 255, 0.5);
}
.border-light-50 .border-md-bottom {
--border-color:rgba(255, 255, 255, 0.5);
}
.text-white-40 {
--bs-text-opacity:0.4;
}
.text-white-60 {
--bs-text-opacity:0.6;
}
.text-white-70 {
--bs-text-opacity:0.7;
}
.text-secondary-muted {
color: #FFE627;
}
.text-gradient {
padding: 0 2px;
background: linear-gradient(90deg, #ff2596 0%, #ffc338 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient2 {
padding: 0 2px;
background: linear-gradient(90deg, #ffc338 0%, #ff2596 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient3 {
padding: 0 2px;
background: linear-gradient(90deg, #7c31ff 20%, #ff3a7c 60%, #ff9500 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient4 {
padding: 0 2px;
background: linear-gradient(180deg, #ffffff 0%, #ba44ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient5 {
padding: 0 2px;
background: linear-gradient(90deg, #1bfffb 0%, #5476ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient6 {
background: linear-gradient(180deg, #ffc996 0%, #8800ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient7 {
background: linear-gradient(270deg, #ffb10a 0%, #fff38a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient8 {
background: linear-gradient(270.12deg, #ffc919 1.09%, #d500ff 99.89%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient9 {
background: linear-gradient(270.12deg, #D39D49 1.09%, #FFF0C5 99.89%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient10 {
background: linear-gradient(90deg, #FB4795 0%, #AA36FF 50%, #3977FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.border-gradient {
position: relative;
z-index: 1;
background-color: transparent;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
--border-radius: 100px;
}
.border-gradient::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: linear-gradient(90deg, #ff2596, #ffc338);
width: 100%;
height: 100%;
padding: 1px 2px;
border-radius: var(--border-radius);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.border-gradient-1 {
position: relative;
z-index: 1;
background-color: transparent;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
--border-radius: 100px;
}
.border-gradient-1::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: linear-gradient(90deg, #ffc338, #ff2596);
width: 100%;
height: 100%;
padding: 1px 2px;
border-radius: var(--border-radius);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.border-gradient-2 {
position: relative;
z-index: 1;
background-color: transparent;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
--border-radius: 16px;
}
.border-gradient-2::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: linear-gradient(180deg, #30304b, rgba(66, 66, 96, 0.1019607843));
width: 100%;
height: 100%;
padding: 1px;
border-radius: var(--border-radius);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.border-gradient-3 {
position: relative;
z-index: 1;
background-color: transparent;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
--border-radius: 2rem;
}
.border-gradient-3::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 80%);
width: 100%;
height: 100%;
padding: 1px 2px;
border-radius: var(--border-radius);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.border-gradient-4 {
position: relative;
z-index: 1;
background-color: transparent;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
--border-radius: 1.5rem;
}
.border-gradient-4::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(102, 81, 255, 0.3) 0%, rgba(243, 107, 255, 0.3) 80%);
width: 100%;
height: 100%;
padding: 1px 2px;
border-radius: var(--border-radius);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.border-gradient-9 {
position: relative;
z-index: 1;
background-color: transparent;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
--border-radius: 1.5rem;
}
.border-gradient-9::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: linear-gradient(125deg, rgba(255, 187, 0, 0.2) 0%, rgba(255, 187, 0, 0) 100%);
width: 100%;
height: 100%;
padding: 1px 2px;
border-radius: var(--border-radius);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.border-gradient-10 {
position: relative;
z-index: 1;
background-color: transparent;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
--border-radius: 1.5rem;
}
.border-gradient-10::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: linear-gradient(125deg, rgba(107, 87, 255, 0.1) 0%, rgba(107, 87, 255, 0) 100%);
width: 100%;
height: 100%;
padding: 1px 2px;
border-radius: var(--border-radius);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.bg-img {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.bg-contain {
background-size: contain !important;
}
.bg-cover {
background-size: cover !important;
}
.bg-size-x100 {
background-size: 100% auto !important;
}
.bg-size-y100 {
background-size: auto 100% !important;
}
.bg-size-100 {
background-size: 100% 100% !important;
}
.bg-position-top {
background-position: center top !important;
}
.bg-position-bottom {
background-position: center bottom !important;
}
.bg-position-left {
background-position: left center !important;
}
.bg-position-right {
background-position: right center !important;
}
.bg-position-left-top {
background-position: left top !important;
}
.bg-position-right-top {
background-position: left top !important;
}
.bg-position-left-bottom {
background-position: left bottom !important;
}
.bg-position-right-bottom {
background-position: right bottom !important;
}
.bg-gradient-linear {
background: linear-gradient(180deg, #dc3eff 0%, #a742ff 100%);
}
.bg-gradient-linear-1 {
background: linear-gradient(90deg, #5C46FF 0%, #EC41FF 100%);
}
.bg-gradient-linear-2 {
background: linear-gradient(180deg, #080211 0%, #5730ba 50%, #b786ff 100%);
}
.bg-gradient-linear-3 {
background: linear-gradient(135deg, #7c31ff 20%, #ff3a7c 60%, #ff9500 100%);
}
.bg-gradient-linear-4 {
background: linear-gradient(180deg, #b786ff 0%, #5730ba 35%, #080211 100%);
}
.bg-gradient-linear-5 {
background: linear-gradient(180deg, #b786ff 0%, rgba(147, 109, 255, 0.1019607843) 100%);
}
.bg-gradient-linear-6 {
background: linear-gradient(180deg, rgba(125, 124, 177, 0.2) 0%, rgba(93, 92, 145, 0) 100%);
}
.bg-gradient-linear-6-2 {
background: linear-gradient(180deg, #1D062F 0%, rgba(66, 66, 96, 0.1019607843) 100%);
}
.bg-gradient-linear-7 {
background: linear-gradient(180deg, #8747fd 0%, #441c8c 100%);
}
.bg-gradient-linear-8 {
background: linear-gradient(180deg, #ffffff 0%, rgba(209, 184, 255, 0.4) 20%, rgba(209, 184, 255, 0.4) 80%, #ffffff 100%);
}
.bg-gradient-linear-9 {
background: linear-gradient(90deg, rgba(255, 187, 0, 0.1) 0%, rgba(255, 187, 0, 0) 100%);
}
.bg-gradient-linear-10 {
background: linear-gradient(90deg, rgba(107, 87, 255, 0.1) 0%, rgba(107, 87, 255, 0) 100%);
}
.bg-gradient-linear-11 {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
}
.bg-gradient-linear-12 {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.16) 100%);
}
.text-primary-200 {
color: #f4edff;
}
.text-primary-500 {
color: #c2a2ff;
}
.bg-primary-200 {
background-color: #f4edff;
}
.bg-primary-100 {
background-color: rgba(209, 184, 255, 0.08);
}
.bg-primary-500 {
background-color: #c2a2ff;
}
.hover-bg-primary:hover {
color: #fff !important;
background-color: var(--bs-primary-muted) !important;
}
.link-hover-primary:hover {
color: var(--bs-primary-muted) !important;
}
.column-h1 {
font-size: 2.125rem;
font-weight: 700;
}
@media screen and (min-width: 400px) {
.column-h1 {
font-size: 2.5rem;
}
}
@media screen and (min-width: 992px) {
.column-h1 {
font-size: 3rem;
}
}
@media screen and (min-width: 1400px) {
.column-h1 {
font-size: 3.5rem;
}
}
.column-h1-longtxt {
font-size: 2rem;
font-weight: 700;
}
@media screen and (min-width: 992px) {
.column-h1-longtxt {
font-size: 2.5rem;
}
}
@media screen and (min-width: 1400px) {
.column-h1-longtxt {
font-size: 3rem;
}
}
.column-h2 {
font-size: 1.5rem;
font-weight: 700;
}
@media screen and (min-width: 992px) {
.column-h2 {
font-size: 2rem;
}
}
@media screen and (min-width: 1400px) {
.column-h2 {
font-size: 2.5rem;
}
}
.animate-scale-loop {
animation: animate-scale 2s infinite ease-in-out;
transition: all 0.3s;
}
@keyframes animate-scale {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
.animate-scale-rotate-loop {
animation: animate-scale-rotate 3s infinite ease-in-out;
transition: all 0.3s;
}
@keyframes animate-scale-rotate {
0% {
transform: scale(0.5) rotate(0deg);
}
10% {
transform: scale(1) rotate(360deg);
}
90% {
transform: scale(1) rotate(360deg);
}
100% {
transform: scale(0.5) rotate(720deg);
}
}
.animation-moveLeft {
--animation-delay: 100s;
transform: translate3d(0px, 0px, 0px);
animation: moveLeft var(--animation-delay) linear infinite;
--move-distance: -90vw;
}
.animation-moveLeft.animation-paused:hover {
animation-play-state: paused;
}
.animation-moveRight {
--animation-delay: 100s;
transform: translate3d(0px, 0px, 0px);
animation: moveRight var(--animation-delay) linear infinite;
--move-distance: -90vw;
}
.animation-moveRight.animation-paused:hover {
animation-play-state: paused;
}
@media screen and (max-width: 1280px) {
.animation-moveLeft-mobile {
--animation-delay: 100s;
transform: translate3d(0px, 0px, 0px);
animation: moveLeft var(--animation-delay) linear infinite;
--move-distance: -90vw;
}
.animation-moveLeft-mobile.animation-paused:hover {
animation-play-state: paused;
}
.animation-moveRight-mobile {
--animation-delay: 100s;
transform: translate3d(0px, 0px, 0px);
animation: moveRight var(--animation-delay) linear infinite;
--move-distance: -90vw;
}
.animation-moveRight-mobile.animation-paused:hover {
animation-play-state: paused;
}
}
@media screen and (min-width: 992px) {
.animation-moveLeft-desktop {
--animation-delay: 100s;
transform: translate3d(0px, 0px, 0px);
animation: moveLeft var(--animation-delay) linear infinite;
--move-distance: -90vw;
}
.animation-moveLeft-desktop.animation-paused:hover {
animation-play-state: paused;
}
.animation-moveRight-desktop {
--animation-delay: 100s;
transform: translate3d(0px, 0px, 0px);
animation: moveRight var(--animation-delay) linear infinite;
--move-distance: -90vw;
}
.animation-moveRight-desktop.animation-paused:hover {
animation-play-state: paused;
}
}
@keyframes moveLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(var(--move-distance));
}
}
@keyframes moveRight {
0% {
transform: translateX(var(--move-distance));
}
100% {
transform: translateX(0);
}
}
button.btn-close {
background: none;
border: 0;
display: block;
}
.btn-close::after {
display: block;
content: "";
width: 24px;
height: 24px;
background-image: var(--icon-close);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.btn-eye {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
cursor: pointer;
}
.btn-eye span {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
background-color: #fff;
border-radius: 100px;
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3);
animation: boxshadowWidth 1.5s linear infinite, boxSize 2s linear infinite;
}
.btn-eye span::after {
display: block;
content: "";
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: var(--eye);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s;
}
.btn-eye:hover span::after {
transform: translate(-50%, -50%) scale(1.2);
}
.table {
border-color: rgba(0, 0, 0, 0.15);
margin-bottom: 0;
}
.table td, .table th {
padding: 1rem;
}
.table thead {
background-color: rgba(var(--bs-primary-rgb), 0.15);
}
.table thead tr {
border-top: 0;
}
.table tbody {
border-top: 0 !important;
}
.table tbody tr {
border-top: 0;
}
.table-normal {
overflow-x: auto;
width: 100%;
border-radius: 1.5rem;
border: solid 1px rgba(0, 0, 0, 0.15);
border-bottom: 0;
}
.table-normal tbody tr:last-child {
border-radius: 0 0 1.5rem 1.5rem;
}
.table-wrap .table-bottom-radius-0 {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.table-wrap .table-more {
padding: 1.5rem;
border-bottom-left-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
border: solid 1px rgba(0, 0, 0, 0.15);
border-top: 0;
}
.table-wrap .table-more .btn-more .showless {
display: none;
}
.table-wrap .table-more .btn-more::after {
display: block;
content: "";
width: 20px;
height: 20px;
margin-left: 6px;
background: url('data:image/svg+xml,') no-repeat center;
background-size: contain;
}
.table-wrap .table-more .btn-more:hover::after, .table-wrap .table-more .btn-more.active::after {
background-image: url('data:image/svg+xml,');
}
.table-wrap .table-more .btn-more.active .showmore {
display: none;
}
.table-wrap .table-more .btn-more.active .showless {
display: block;
}
.table-wrap .table-more .btn-more.active::after {
transform: rotate(-180deg);
}
.breadcrumb {
list-style: none;
margin: 0;
padding: 0;
font-size: 0.875rem;
}
.breadcrumb a {
color: rgba(0, 0, 0, 0.7);
}
.breadcrumb a:hover {
color: var(--bs-primary);
}
.breadcrumb li {
display: inline-flex;
align-items: center;
gap: 4px;
}
.breadcrumb li::after {
display: inline-block;
content: "";
width: 16px;
height: 16px;
background: var(--icon-chevron-right) no-repeat center;
background-size: cover;
}
.breadcrumb li:last-child::after {
display: none;
}
.swiper {
--swiper-preloader-color: var(--bs-primary);
}
.swiper-pagination {
--swiper-theme-color: var(--bs-primary);
--swiper-pagination-bullet-inactive-color: var(--bs-gray);
--swiper-pagination-bullet-width: 6px;
--swiper-pagination-bullet-height: 6px;
--swiper-pagination-bullet-border-radius: 10px;
}
.swiper-pagination .swiper-pagination-bullet {
transition: width 0.3s linear;
}
.swiper-pagination .swiper-pagination-bullet-active {
--swiper-pagination-bullet-width: 16px;
}
.swiper-pagination.swiper-pagination-white {
--swiper-theme-color: #fff;
--swiper-pagination-bullet-inactive-color: var(--bs-gray);
}
.swiper-navigation-wrap {
--swiper-navigation-size:56px;
--swiper-navigation-sides-offset:0;
position: relative;
z-index: 1;
}
@media screen and (min-width: 768px) {
.swiper-navigation-wrap {
padding: 0 var(--swiper-navigation-size);
}
}
.swiper-navigation-wrap .swiper-button-prev,
.swiper-navigation-wrap .swiper-button-next {
width: var(--swiper-navigation-size) !important;
}
.swiper-button-prev,
.swiper-button-next {
border-radius: 100%;
background-color: rgba(var(--bs-primary-rgb), 0.4);
}
.swiper-button-prev:after,
.swiper-button-next:after {
content: "" !important;
width: 40%;
height: 40%;
background: var(--icon-arrow-left) no-repeat center;
background-size: cover;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
background-color: rgba(var(--bs-primary-rgb), 0.8);
}
.swiper-button-prev.swiper-button-disabled::after,
.swiper-button-next.swiper-button-disabled::after {
opacity: 0.3;
}
.swiper-button-next:after {
background-image: var(--icon-arrow-right);
}
.bg-dark .swiper-pagination {
--swiper-pagination-bullet-inactive-color: var(--bs-gray-100);
}
.bg-white .swiper-pagination {
--swiper-pagination-bullet-inactive-color: var(--bs-gray);
}
.swiper-control-info {
--bg-color:#f4edff;
}
@media screen and (min-width: 992px) {
.swiper-control-info .item {
max-height: 100px;
overflow: hidden;
transition: all 0.6s linear;
}
.swiper-control-info .item p {
display: none;
}
.swiper-control-info .item.active {
background-color: var(--bg-color);
max-height: 2000px;
}
.swiper-control-info .item.active p {
display: block;
}
}
@media screen and (min-width: 992px) {
.swiper-position {
position: relative;
z-index: 1;
}
.swiper-position .swiper-position-relative {
position: relative;
z-index: 1;
}
.swiper-position .swiper-position-absolute {
position: absolute;
left: 0;
bottom: 0;
z-index: 3;
width: 100%;
}
}
.swiper-pagination-loading .swiper-pagination {
position: relative;
}
.swiper-pagination-loading .swiper-pagination .swiper-pagination-bullet:after {
content: "";
display: block;
width: 0;
height: 100%;
background-color: #fff;
border-radius: 100px;
transition: all 4s linear;
}
.swiper-pagination-loading .swiper-pagination .swiper-pagination-bullet-active {
--swiper-pagination-color: rgba(255,255,255,.2);
--swiper-pagination-bullet-width:68px;
}
.swiper-pagination-loading .swiper-pagination .swiper-pagination-bullet-active:after {
width: 100%;
}
.swiper-pagination-loading2 {
padding-bottom: 2rem !important;
}
@media screen and (min-width: 992px) {
.swiper-pagination-loading2 {
padding-bottom: 0 !important;
}
}
.swiper-pagination-loading2 .item {
background-position: 200% 200%;
background-size: 0 0;
}
@media screen and (min-width: 992px) {
.swiper-pagination-loading2 .item {
background-color: #3E1D7A;
background-size: auto 100%;
background-position: right center;
min-height: 480px;
padding: 5.5rem 3rem;
}
}
@media screen and (min-width: 1280px) {
.swiper-pagination-loading2 .item {
min-height: 560px;
padding: 7.5rem 4.5rem;
}
}
@media screen and (min-width: 1960px) {
.swiper-pagination-loading2 .item {
min-height: 640px;
}
}
.swiper-pagination-loading2 .item .cont {
color: rgba(255, 255, 255, 0.7);
}
@media screen and (min-width: 992px) {
.swiper-pagination-loading2 .item .cont {
max-width: 460px;
color: #fff;
}
}
.swiper-pagination-loading2 .swiper-pagination {
display: flex;
justify-content: center;
gap: 0.5rem;
}
@media screen and (min-width: 992px) {
.swiper-pagination-loading2 .swiper-pagination {
justify-content: start;
gap: 1rem;
max-width: 600px;
padding: 0 0 5.5rem 3rem;
}
}
@media screen and (min-width: 1400px) {
.swiper-pagination-loading2 .swiper-pagination {
padding: 0 0 7.5rem 4.5rem;
}
}
.swiper-pagination-loading2 .swiper-pagination .swiper-pagination-bullet {
width: 100%;
max-width: 60px;
background-color: rgba(255, 255, 255, 0.3);
opacity: 1;
overflow: hidden;
}
@media screen and (min-width: 992px) {
.swiper-pagination-loading2 .swiper-pagination .swiper-pagination-bullet {
max-width: 100px;
background-color: rgba(0, 0, 0, 0.3);
}
}
.swiper-pagination-loading2 .swiper-pagination .swiper-pagination-bullet::after {
display: block;
content: "";
width: 0;
height: 100%;
transition: all 4s linear;
}
.swiper-pagination-loading2 .swiper-pagination .swiper-pagination-bullet-active::after {
width: 100%;
background: linear-gradient(90deg, #B371FF 0%, #823FFF 100%);
}
.accordion .accordion-button {
padding: 1.25rem;
}
.accordion .accordion-button:not(.collapsed) {
color: var(--bs-primary-muted) !important;
}
.accordion .accordion-button:not(.collapsed)::after {
background-image: url('data:image/svg+xml,') !important;
}
.hover-infoTip {
--bg-color: #3a3542;
--width: 300px;
position: relative;
z-index: 1;
}
.hover-infoTip .info-tip {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
width: var(--width);
transform: translateX(-50%);
padding: 1rem;
background-color: var(--bg-color);
border-radius: 0.75rem;
}
.hover-infoTip .info-tip::after {
display: block;
content: "";
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-top: solid 8px var(--bg-color);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
.hover-infoTip:hover .info-tip {
display: block;
}
.video-play-btn {
display: block;
position: relative;
z-index: 1;
}
.video-play-btn > * {
position: relative;
z-index: 1;
}
.video-play-btn::before, .video-play-btn::after {
display: block;
content: "";
position: absolute;
z-index: 2;
}
.video-play-btn::before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
transition: all 0.3s linear;
}
.video-play-btn::after {
z-index: 3;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 25%;
aspect-ratio: 1/1;
background-position: center;
background-repeat: no-repeat;
background-color: rgba(0, 0, 0, 0.8);
background-image: var(--icon-play);
background-size: 80% auto;
border-radius: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
transition: all 0.3s linear;
}
.video-play-btn:hover::before {
background-color: rgba(0, 0, 0, 0.6);
}
.video-play-btn:hover::after {
background-color: var(--bs-primary);
}
.tab-nav-wrap {
text-align: center;
padding-bottom: 24px;
overflow-x: auto;
}
@media screen and (max-width: 992px) {
.tab-nav-wrap {
margin: 0 var(--bs-gutter-x, -1rem);
}
}
.tab-nav-wrap .nav {
background-color: #1d1d29;
border-radius: 100px;
border: 0;
overflow: hidden;
margin-bottom: 0;
margin: 0 auto;
display: inline-flex;
flex-wrap: nowrap;
padding: 4px;
}
.tab-nav-wrap .nav .nav-link {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-wrap: nowrap;
padding: 10px 30px;
color: #fff;
white-space: nowrap;
}
@media screen and (max-width: 1400px) {
.tab-nav-wrap .nav .nav-link {
padding: 8px 16px;
}
}
@media screen and (max-width: 768px) {
.tab-nav-wrap .nav .nav-link {
padding: 8px 24px;
}
}
.tab-nav-wrap .nav .nav-link.active {
font-weight: bold;
background-color: rgba(130, 63, 255, 0.3);
}
.tab-nav-wrap .nav .nav-link:hover, .tab-nav-wrap .nav .nav-link.active {
color: #fff;
}
.tabpills-menu {
--text-color:rgba(255, 255, 255, 0.7);
--border-color:rgba(255, 255, 255, 0.5);
border-bottom: solid 1px var(--border-color);
flex-wrap: nowrap;
justify-content: space-between;
overflow-x: auto;
width: 100%;
}
.tabpills-menu .nav-link {
font-weight: bold;
color: var(--text-color);
background-color: transparent;
border: solid 3px rgba(255, 255, 255, 0);
padding: 1rem;
white-space: nowrap;
}
.tabpills-menu .nav-link.active {
background-color: transparent;
color: var(--bs-primary-muted);
border-bottom: solid 3px var(--bs-primary-muted);
}
.hover-border {
border: solid 1px rgba(255, 255, 255, 0);
transition: all 0.3s linear;
}
.hover-border:hover {
border-color: rgba(255, 255, 255, 0.3);
}
.hover-box-underline .box-link {
position: relative;
text-decoration: none;
}
.hover-box-underline .box-link::after {
position: absolute;
right: 0;
bottom: 0;
left: auto;
width: 0;
content: "";
border-bottom-color: inherit;
border-bottom-style: solid;
border-bottom-width: 1px;
transition: all 0.3s linear;
}
.hover-box-underline:hover .box-link {
text-decoration: none;
}
.hover-box-underline:hover .box-link::after {
right: auto;
left: 0;
width: 100%;
}
.hover-box {
position: relative;
z-index: 1;
}
.hover-box .hover-box-mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
opacity: 0;
transform: translateY(100%);
transition: all 0.3s linear;
}
@media screen and (min-width: 992px) {
.hover-box:hover .hover-box-mask {
opacity: 1;
transform: translateY(0);
}
}
.form-switch-wrap span {
opacity: 1;
}
.form-switch-wrap span:nth-of-type(2) {
opacity: 0.7;
}
.form-switch-wrap.active span:nth-of-type(1) {
opacity: 0.7;
}
.form-switch-wrap.active span:nth-of-type(2) {
opacity: 1;
}
[data-toggle=switch].form-switch-white .form-check-input:checked,
[data-toggle=switch].form-switch-white .form-check-input,
[data-toggle=switch].form-switch-white .form-check-input:focus {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid #fff;
}
.video-wrap {
--bg-color:rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
background-color: var(--bs-dark);
}
.video-wrap::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: var(--bg-color);
}
.form-control-placeholder {
position: relative;
z-index: 1;
}
.form-control-placeholder label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0.75rem 1.25rem;
pointer-events: none;
color: rgba(0, 0, 0, 0.3);
}
.form-control-placeholder .form-control::-moz-placeholder {
color: transparent;
}
.form-control-placeholder .form-control::placeholder {
color: transparent;
}
.form-control-placeholder .form-control:not(:-moz-placeholder) ~ label {
display: none;
}
.form-control-placeholder .form-control:focus ~ label,
.form-control-placeholder .form-control:not(:placeholder-shown) ~ label,
.form-control-placeholder .form-select:focus ~ label {
display: none;
}
.input-group-2 {
position: relative;
z-index: 1;
}
.input-group-2 .form-control {
border-radius: 1rem !important;
background: transparent;
font-size: 0.875rem;
padding: 1rem 1.25rem;
outline: 0;
box-shadow: none !important;
}
.input-group-2 .form-control:not(.is-invalid) {
color: #fff;
border-color: #fff;
}
.input-group-2 .form-control::-moz-placeholder {
color: #fff;
text-decoration: underline;
}
.input-group-2 .form-control::placeholder {
color: #fff;
text-decoration: underline;
}
.input-group-2 .form-control.is-invalid {
background: none;
color: var(--bs-danger);
}
.input-group-2 .form-control.is-invalid::-moz-placeholder {
color: rgba(255, 255, 255, 0.5);
}
.input-group-2 .form-control.is-invalid::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.input-group-2 .form-control:focus::-moz-placeholder {
color: rgba(255, 255, 255, 0.5);
}
.input-group-2 .form-control:focus::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.input-group-2 .invalid-feedback {
position: absolute;
z-index: 3;
top: 100%;
left: 0;
width: 100%;
}
.input-group-2 .form-check-input {
width: 1rem;
height: 1rem;
}
.input-group-2 .btn {
position: absolute;
z-index: 3;
top: 0;
right: 0;
color: #fff;
padding: 0 1rem;
}
.btn-popover {
position: relative;
z-index: 1;
}
.btn-popover .btn-popover-box {
position: absolute;
z-index: 2;
bottom: 110%;
left: 50%;
transform: translateX(-50%);
visibility: hidden;
transition: visibility 0.3s ease-in;
text-align: center;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
background-color: #21192f;
padding: 1.5rem 3rem;
border-radius: 1rem;
}
.btn-popover .btn-popover-box .title {
font-size: 1rem;
color: #fff;
padding-bottom: 1rem;
}
.btn-popover .btn-popover-box a {
display: flex;
position: relative;
align-items: center;
justify-content: center;
text-wrap: nowrap;
padding: 0;
}
.btn-popover .btn-popover-box .item {
position: relative;
z-index: 1;
padding: 0.5rem;
transition: all 0.3s linear;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100px;
height: 100px;
}
.btn-popover .btn-popover-box .item-hover {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
border-radius: 1rem;
border: solid 2px var(--bs-primary);
padding: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.3s linear;
opacity: 0;
}
.btn-popover .btn-popover-box a:hover .item {
opacity: 0;
}
.btn-popover .btn-popover-box a:hover .item-hover {
opacity: 1;
}
.btn-popover:hover .btn-popover-box {
visibility: visible;
}
.header-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 0.5rem;
background-color: #291447;
font-size: 0.875rem;
}
.banner {
position: relative;
z-index: 1;
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
background-color: #280149;
padding: 160px 0 0 0;
}
@media screen and (min-width: 992px) {
.banner {
padding: 100px 0 60px 0;
}
}
@media screen and (min-width: 1960px) {
.banner {
padding: 100px 0;
}
}
.banner.banner-mask::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 2;
width: 100%;
height: 60%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0) 100%);
}
@media screen and (min-width: 992px) {
.banner.banner-mask::before {
height: 9.375rem;
}
}
.banner.banner-mask.mask-mobile-none::before {
display: none;
}
@media screen and (min-width: 768px) {
.banner.banner-mask.mask-mobile-none::before {
display: block;
}
}
.banner .container {
position: relative;
z-index: 2;
}
@media screen and (min-width: 1600px) {
.banner .container {
max-width: 1600px;
}
}
.banner .pic {
height: 40vh;
background-position: right bottom;
background-repeat: no-repeat;
background-size: 120% auto;
}
@media screen and (min-width: 768px) {
.banner .pic {
height: 60vh;
}
}
@media screen and (min-width: 992px) {
.banner .pic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-size: auto 110%;
}
}
@media screen and (min-width: 1600px) {
.banner .pic {
background-size: auto 120%;
}
}
@media screen and (min-width: 1960px) {
.banner .pic {
background-size: auto 128%;
}
}
.banner [data-toggle=platform] {
color: #ffffff;
}
.banner [data-toggle=platform].active {
color: #823fff;
}
.banner.b-v2 .video {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.banner.b-v2 .video video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 992px) {
.banner.banner-bg-mobile {
background-size: auto 100%;
background-position: center center;
}
}
.banner .voice-wrap {
position: relative;
z-index: 1;
}
.banner .voice-wrap .voice-item {
position: absolute;
z-index: 2;
overflow: hidden;
background-color: transparent;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 100px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s linear;
}
@media screen and (max-width: 1200px) {
.banner .voice-wrap .voice-item {
transform: scale(0.8);
}
}
.banner .voice-wrap .voice-item:nth-of-type(1) {
left: 5%;
bottom: 40%;
}
.banner .voice-wrap .voice-item:nth-of-type(2) {
left: 10%;
bottom: 25%;
}
.banner .voice-wrap .voice-item:nth-of-type(3) {
left: 0;
bottom: 10%;
}
.banner .voice-wrap .voice-item:nth-of-type(4) {
right: 10%;
bottom: 30%;
}
.banner .voice-wrap .voice-item:nth-of-type(5) {
right: 0;
bottom: 15%;
}
.banner .voice-wrap .voice-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: linear-gradient(125deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 100%);
width: 100%;
height: 100%;
padding: 3px;
border-radius: 100px;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.banner .voice-wrap .voice-item .box {
background: linear-gradient(90deg, #34677c 0%, #041e34 100%);
border-radius: 100px;
padding: 0.375rem 0.625rem;
margin: 2px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.875rem;
}
.banner .voice-wrap .voice-item .sculpture {
position: relative;
}
.banner .voice-wrap .voice-item .sculpture::after {
content: "";
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 80%;
aspect-ratio: 1/1;
background-position: center;
background-repeat: no-repeat;
background-image: var(--icon-play);
background-size: 80% auto;
transition: all 0.3s linear;
opacity: 0.6;
}
.banner .voice-wrap .voice-item .wave {
display: flex;
align-items: center;
}
.banner .voice-wrap .voice-item:hover {
transform: scale(1.05);
}
.banner .voice-wrap .voice-item:hover .sculpture::after {
opacity: 1;
}
.banner .voice-wrap .voice-item.active .sculpture {
animation: transformRotate 5s linear infinite;
}
.banner .voice-wrap .voice-item.active .sculpture::after {
background-image: var(--icon-stop);
opacity: 1;
}
@keyframes transformRotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.pagetop-bg-wrap,
.pagetop-bg {
--bg-color:#080211;
background-repeat: no-repeat;
background-size: 100% auto;
background-color: var(--bg-color);
}
.pagetop-bg-wrap .banner,
.pagetop-bg .banner {
background-color: transparent;
}
@media screen and (min-width: 992px) {
.pagetop-bg {
background-image: none !important;
background-color: transparent;
}
}
.compare-components {
--padding-top: 100%;
--slider-percent: 50%;
position: relative;
z-index: 1;
padding-top: var(--padding-top);
overflow: hidden;
cursor: e-resize;
}
.compare-components .compare-line {
height: 100%;
width: 1px;
top: 0;
bottom: 0;
left: var(--slider-percent);
background-color: rgba(255, 255, 255, 0.8);
cursor: e-resize;
position: absolute;
z-index: 7;
}
.compare-components .compare-line:not(.none-after)::after {
position: absolute;
top: calc(50% - 8px);
left: -14px;
border-radius: 50%;
content: "";
width: 28px;
height: 28px;
background: url('data:image/svg+xml,');
background-size: 100%;
}
.compare-components .compare-line.transition {
transition: all 0.5s linear;
}
.compare-components .compare-before {
width: 100%;
height: 100%;
position: absolute;
background-color: #000;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
overflow: hidden;
clip-path: polygon(0% 0%, var(--slider-percent) 0, var(--slider-percent) 100%, 0% 100%);
}
.compare-components .compare-before.transition {
transition: all 0.5s linear;
}
.compare-components .compare-after {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.compare-components .img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
.compare-components .img-after,
.compare-components .img-before {
position: absolute;
top: 18px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
color: #fff;
z-index: 10 !important;
font-size: 14px;
}
.compare-components .img-after span,
.compare-components .img-before span {
display: inline-block;
width: 73px;
height: 34px;
text-align: center;
line-height: 2.125rem;
}
.compare-components .img-after {
right: 18px;
}
.compare-components .img-before {
left: 18px;
}
.compare-components.compare-components-autoAmimation .compare-line {
width: 0;
border: 0;
left: 50%;
animation: animate-compare-line 6s linear;
}
@media screen and (min-width: 992px) {
.compare-components.compare-components-autoAmimation .compare-line {
animation: animate-compare-line 8s linear;
}
}
.compare-components.compare-components-autoAmimation .compare-line::after {
width: 2px;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: auto;
border-radius: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
animation: animate-compare-line-after 6s linear;
}
@media screen and (min-width: 992px) {
.compare-components.compare-components-autoAmimation .compare-line::after {
animation: animate-compare-line-after 8s linear;
}
}
.compare-components.compare-components-autoAmimation .compare-before {
clip-path: polygon(0% 0%, 50% 0, 50% 100%, 0% 100%);
animation: animate-compare-before 6s linear;
}
@media screen and (min-width: 992px) {
.compare-components.compare-components-autoAmimation .compare-before {
animation: animate-compare-before 8s linear;
}
}
.compare-components.compare-components-autoAmimation-init .compare-line {
animation: init-animate-compare-line 6s infinite linear;
}
.compare-components.compare-components-autoAmimation-init .compare-before {
animation: init-animate-compare-before 6s infinite linear;
}
@keyframes animate-compare-line {
0% {
left: 100%;
}
1% {
left: 100%;
}
40% {
left: 0%;
}
41% {
left: 0%;
}
80% {
left: 100%;
}
81% {
left: 100%;
}
100% {
left: var(--slider-percent);
}
}
@keyframes animate-compare-line-after {
0% {
left: 0;
right: auto;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
}
1% {
left: 0;
right: auto;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}
40% {
left: 0;
right: auto;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}
41% {
right: 0;
left: auto;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
}
80% {
right: 0;
left: auto;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
}
81% {
left: 0;
right: auto;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}
100% {
left: 0;
right: auto;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}
}
@keyframes animate-compare-before {
0% {
clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
}
1% {
clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
}
40% {
clip-path: polygon(0% 0%, 0% 0, 0% 100%, 0% 100%);
}
41% {
clip-path: polygon(0% 0%, 0% 0, 0% 100%, 0% 100%);
}
80% {
clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
}
81% {
clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
}
100% {
clip-path: polygon(0% 0%, 50% 0, 50% 100%, 0% 100%);
}
}
@keyframes init-animate-compare-line {
0% {
left: 50%;
}
25% {
left: 100%;
}
75% {
left: 0;
}
100% {
left: 50%;
}
}
@keyframes init-animate-compare-before {
0% {
clip-path: polygon(0% 0%, 50% 0, 50% 100%, 0% 100%);
}
25% {
clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
}
75% {
clip-path: polygon(0% 0%, 0% 0, 0% 100%, 0% 100%);
}
100% {
clip-path: polygon(0% 0%, 50% 0, 50% 100%, 0% 100%);
}
}
.faster-amimation .item-l {
width: 0%;
transition: all 0.8s ease-in-out;
}
.faster-amimation.active .item:nth-of-type(1) .item-l {
width: 30%;
}
@media screen and (min-width: 992px) {
.faster-amimation.active .item:nth-of-type(1) .item-l {
width: 20%;
}
}
.faster-amimation.active .item:nth-of-type(2) .item-l {
width: 60%;
}
@media screen and (min-width: 992px) {
.faster-amimation.active .item:nth-of-type(2) .item-l {
width: 50%;
}
}
.faster-amimation.active .item:nth-of-type(3) .item-l {
width: 80%;
}
@media screen and (min-width: 992px) {
.faster-amimation.active .item:nth-of-type(3) .item-l {
width: 70%;
}
}
.side-ad {
position: fixed;
z-index: 10;
top: 50%;
right: 0;
transform: translateY(-50%);
padding: 0.5rem;
}
.side-ad .btn-close {
position: absolute;
z-index: 5;
top: 0;
right: 0;
cursor: pointer;
border-radius: 100%;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.8);
opacity: 0.6;
transition: all 0.3s ease;
}
.side-ad .btn-close:hover {
opacity: 1;
}
.section-wrap-gradient {
background: linear-gradient(180deg, #08001b 40%, #623ac4 60%, #8d60e1 75%, #ffffff 90%);
}
@media screen and (min-width: 992px) {
.section-wrap-gradient {
border-radius: 64px 64px 0 0;
}
}
.section-wrap-gradient2 {
background: linear-gradient(180deg, #b786ff 0%, #5730ba 20%, #080211 80%);
}
@media screen and (min-width: 992px) {
.section-wrap-gradient2 {
border-radius: 64px 64px 0 0;
}
}
.section-wrap-gradient3 {
background: linear-gradient(180deg, #e6d8ff 0%, #ffffff 70%);
border-radius: 32px 32px 0 0;
}
@media screen and (min-width: 992px) {
.section-wrap-gradient3 {
border-radius: 64px 64px 0 0;
}
}
.section-wrap-gradient4 {
background: linear-gradient(180deg, #5f2cab 0%, #302254 50%, #080211 100%);
border-radius: 32px 32px 0 0;
}
@media screen and (min-width: 992px) {
.section-wrap-gradient4 {
border-radius: 64px 64px 0 0;
}
}
.section-wrap-gradient5 {
border-radius: 32px 32px 0 0;
background: linear-gradient(0deg, #080211 41.01%, #3054ba 82.03%, #42adff 115.59%);
}
@media screen and (min-width: 992px) {
.section-wrap-gradient5 {
border-radius: 64px 64px 0 0;
}
}
.fixed-bottom-pro {
position: fixed;
left: 50%;
bottom: 0;
transform: translateX(-50%) translateY(100%) scale(0.3);
transition: all 0.3s ease;
z-index: 12;
max-width: 760px;
width: 100%;
padding: 0.5rem;
opacity: 0;
}
.fixed-bottom-pro.active {
transform: translateX(-50%) translateY(0) scale(1);
opacity: 1;
}
.fixed-bottom-pro.close {
transform: translateX(-50%) translateY(100%) scale(0.3);
opacity: 0;
}
.fixed-bottom-pro .fbp-cont {
border: solid 1px rgba(120, 47, 255, 0.15);
border-radius: 0.75rem;
background-color: rgba(222, 204, 255, 0.5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
padding: 0.75rem 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.fixed-bottom-pro .fbp-proname {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-weight: bold;
flex-shrink: 1;
font-size: 0.875rem;
line-height: 1.2;
}
.fixed-bottom-pro .fbp-proname img {
width: 40px;
}
.fixed-bottom-pro .fbp-btn-box {
flex-shrink: 0;
}
@media screen and (min-width: 992px) {
.fixed-bottom-pro {
padding: 1rem;
}
.fixed-bottom-pro .fbp-cont {
padding: 0.75rem 1.5rem;
}
.fixed-bottom-pro .fbp-proname {
font-size: 1rem;
}
}
.fixed-bottom-pro .btn-close {
position: absolute;
z-index: 3;
top: 0;
right: 0;
cursor: pointer;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(255, 255, 255);
border-radius: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
@media screen and (min-width: 992px) {
.fixed-bottom-pro .btn-close {
top: 0.5rem;
right: 0.5rem;
}
}
.sound-animation {
display: inline-block;
width: 80px;
height: 36px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url('data:image/svg+xml,');
}
.sound-animation.on {
animation: animate-sound 0.6s infinite linear;
}
@keyframes animate-sound {
0% {
background-image: url('data:image/svg+xml,');
}
30% {
background-image: url('data:image/svg+xml,');
}
60% {
background-image: url('data:image/svg+xml,');
}
100% {
background-image: url('data:image/svg+xml,');
}
}
.sound-animation2 {
display: inline-block;
width: 72px;
height: 72px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url('data:image/svg+xml,');
}
.sound-animation2.on {
animation: animate-sound2 0.6s infinite linear;
}
.sound-pill-animation {
display: inline-block;
width: 72px;
height: 72px;
background: linear-gradient(180deg, #d195ff 0%, #782fff 100%);
border-radius: 100%;
position: relative;
}
.sound-pill-animation::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: 55% auto;
background-image: url('data:image/svg+xml,');
}
.sound-pill-animation.on::after {
animation: animate-sound2 0.6s infinite linear;
}
@keyframes animate-sound2 {
0% {
background-image: url('data:image/svg+xml,');
}
30% {
background-image: url('data:image/svg+xml,');
}
60% {
background-image: url('data:image/svg+xml,');
}
100% {
background-image: url('data:image/svg+xml,');
}
}
.banner-wrap-gradient {
background: linear-gradient(180deg, #080211 0%, #5730ba 20%, #b786ff 100%);
}
.tooltip {
font-size: 12px !important;
}
.tooltip .tooltip-arrow::before {
border-color: rgba(0, 0, 0, 0.8);
}
.tooltip .tooltip-inner {
padding: 0.5rem 0.75rem;
background-color: rgba(0, 0, 0, 0.8);
max-width: 240px;
text-align: start;
}
.video-trigger-iframe {
position: relative;
cursor: pointer;
}
.video-trigger-iframe .btn-eye {
position: absolute;
z-index: 5;
right: 20px;
bottom: 20px;
}
@keyframes boxSize {
0% {
width: 42px;
height: 42px;
}
50% {
width: 32px;
height: 32px;
}
100% {
width: 42px;
height: 42px;
}
}
@keyframes boxshadowWidth {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
}
50% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
}
}
.compareModal-iframe .btn-close {
margin: 0 0 1rem auto;
padding: 0;
border: solid 2px rgba(255, 255, 255, 0.6);
color: #fff;
border-radius: 100%;
position: absolute;
top: -1.5rem;
right: -1.5rem;
}
.compareModal-iframe .btn-close::after {
background-image: var(--icon-close-white);
opacity: 0.8;
}
@media screen and (max-width: 992px) {
.compareModal-iframe .btn-close {
top: -2rem;
right: -0.5rem;
}
}
.compareModal-iframe .modal-dialog {
max-width: none;
padding: 3rem;
margin: 0;
background-color: rgba(0, 0, 0, 0.6);
}
@media screen and (max-width: 992px) {
.compareModal-iframe .modal-dialog {
padding: 3rem 1rem;
}
}
.compareModal-iframe .modal-content {
background-color: rgba(0, 0, 0, 0);
border-radius: 0;
border: 0;
}
.compareModal-iframe .modal-content .modal-body {
background-color: #000;
padding: 10px;
overflow: hidden;
}
.comparetool-wrap {
background-color: rgba(0, 0, 0, 0.8);
padding: 2.5rem;
position: fixed;
z-index: 9999;
inset: 0%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
display: none;
opacity: 0;
transition: all 0.3s;
}
@media screen and (max-width: 992px) {
.comparetool-wrap {
padding: 2rem 1rem 1rem;
}
}
.comparetool-wrap.open {
display: block;
opacity: 1;
}
.comparetool-wrap .btn-close {
border: solid 2px rgba(255, 255, 255, 0.8);
color: #fff;
background-image: var(--close-white);
background-size: 50% auto;
border-radius: 100%;
width: 0.5rem;
height: 0.5rem;
}
.comparetool-wrap .comparetool-close-wrap {
position: absolute;
top: 1rem;
right: 1rem;
}
@media screen and (max-width: 992px) {
.comparetool-wrap .comparetool-close-wrap {
top: 0.5rem;
right: 0.25rem;
}
}
.comparetool-wrap .comparetool-embed {
background-color: #000;
border-radius: 16px;
padding: 1rem;
flex: 1;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
}
.comparetool-wrap .comparetool-embed iframe {
width: 100%;
height: 100%;
}
.brand-logos {
position: relative;
overflow: hidden;
}
.brand-logos::after, .brand-logos::before {
content: "";
display: block;
position: absolute;
z-index: 3;
top: 0;
bottom: 0;
width: 20%;
height: 100%;
max-width: 400px;
}
.brand-logos::before {
left: 0;
background: linear-gradient(to right, rgba(9, 3, 18, 0.8), transparent);
}
.brand-logos::after {
right: 0;
background: linear-gradient(to right, transparent, rgba(9, 3, 18, 0.8));
}
.banner-compare-wrap {
position: relative;
z-index: 1;
margin-top: -4%;
}
.banner-compare-wrap .banner-compare-wrap {
flex-flow: column;
justify-content: end;
align-items: center;
width: 100%;
height: 100vh;
min-height: 100dvh;
display: flex;
position: sticky;
top: 0;
}
.banner-compare-wrap .banner-compare-ui {
flex-flow: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
position: relative;
background-color: var(--bs-dark);
border-radius: 16px 16px 0 0;
}
.banner-compare-wrap .banner-compare-ui .banner-compare-ui-cont {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.banner-compare-wrap .banner-compare-ui .banner-compare-img {
position: absolute;
z-index: 3;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.banner-compare-wrap .banner-compare-img-cont {
display: flex;
flex-wrap: nowrap;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 200%;
height: 100%;
}
.banner-compare-wrap .compare-components {
--padding-top: 50%;
height: 100%;
}
@media screen and (min-width: 992px) {
.banner-compare-wrap .compare-components {
--padding-top: 0;
height: 100%;
}
}
@media screen and (max-width: 992px) {
.banner-compare-wrap .compare-components .img img {
max-width: none;
height: 100%;
transform: translateX(-40%);
}
}
.banner-compare-wrap .video-trigger-iframe {
width: 100%;
height: 100%;
}
.banner-compare-wrap .banner-compare-img-info {
position: absolute;
z-index: 5;
left: 2%;
bottom: 3%;
width: 96%;
overflow: hidden;
border-radius: 1rem;
}
@media screen and (min-width: 992px) {
.banner-compare-wrap .banner-compare-img-info {
width: 45%;
}
}
@media screen and (min-width: 1280px) {
.banner-compare-wrap .banner-compare-img-info {
width: 35%;
}
}
.banner-compare-wrap .banner-compare-img-info::after {
display: block;
content: "";
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(29, 18, 16, 0.6);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
overflow: hidden;
border-radius: 1rem;
}
.banner-compare-wrap .banner-compare-img-info .cont {
position: relative;
z-index: 2;
}
.section-joinnow .bg-img {
background-position: center bottom;
background-size: 120% auto;
padding-bottom: 140px;
}
@media screen and (min-width: 768px) {
.section-joinnow .bg-img {
padding-bottom: 260px;
}
}
@media screen and (min-width: 992px) {
.section-joinnow .bg-img {
padding-bottom: 320px;
}
}
@media screen and (min-width: 1280px) {
.section-joinnow .bg-img {
background-size: contain;
}
}
@media screen and (max-width: 1280px) {
.sound-shortcuts-box .container {
max-width: 100%;
padding: 0;
}
}
.sound-shortcuts {
display: flex;
flex-direction: column;
gap: 2rem;
overflow: hidden;
}
.sound-shortcuts .cont {
width: 250%;
overflow: hidden;
display: flex;
gap: 1rem;
}
@media screen and (min-width: 1282px) {
.sound-shortcuts .cont {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 2rem;
width: 100%;
}
}
@media screen and (max-width: 1280px) {
.sound-shortcuts .cont:nth-of-type(1) {
transform: translate3d(0px, 0px, 0px);
animation: moveLeft 20s linear infinite;
--move-distance: -100vw;
}
.sound-shortcuts .cont:nth-of-type(2) {
transform: translate3d(0px, 0px, 0px);
animation: moveRight 20s linear infinite;
--move-distance: -100vw;
}
}
.sound-shortcuts .cont:hover {
animation-play-state: paused;
}
.sound-shortcuts a {
display: block;
background-color: rgba(17, 5, 53, 0.2);
border-radius: var(--border-radius);
overflow: hidden;
position: relative;
width: 50%;
min-width: 180px;
}
@media screen and (min-width: 768px) {
.sound-shortcuts a {
width: 20%;
}
}
@media screen and (min-width: 1282px) {
.sound-shortcuts a {
width: auto;
min-width: auto;
}
}
@media screen and (max-width: 992px) {
.sound-shortcuts a::after {
content: "";
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 35%;
aspect-ratio: 1/1;
background-position: center;
background-repeat: no-repeat;
background-image: var(--icon-play);
background-size: 80% auto;
transition: all 0.3s linear;
}
.sound-shortcuts a.active::after {
animation: animate-sound2 0.6s infinite linear;
}
}
.sound-shortcuts a .wrap {
position: relative;
}
.sound-shortcuts a .wrap::after {
display: block;
content: "";
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.6) 80%);
}
.sound-shortcuts a .inner {
position: absolute;
z-index: 4;
bottom: 0;
left: 0;
width: 100%;
transform: translateY(102%);
transition: all 0.3s ease-in-out;
text-align: center;
}
.sound-shortcuts a .inner .name {
position: absolute;
top: 0;
left: 0;
width: 100%;
transform: translateY(-100%);
display: block;
padding: 1rem 2rem;
}
.sound-shortcuts a .inner .key {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 2px 10% 5% 10%;
padding: 0.5rem;
border-radius: 100px;
background: linear-gradient(180deg, #a295ff 0%, #624dff 100%);
}
@media screen and (max-width: 1280px) {
.sound-shortcuts a .inner .key {
font-size: 0.875rem;
}
}
.sound-shortcuts a .playIcon {
display: inline-block;
width: 16px;
height: 16px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url('data:image/svg+xml,');
}
@media screen and (min-width: 992px) {
.sound-shortcuts a:hover .inner, .sound-shortcuts a.active .inner {
transform: translateY(0);
}
.sound-shortcuts a.active .playIcon {
animation: animate-sound2 0.6s infinite linear;
}
}
.voice-list .top {
position: relative;
background-position: center bottom;
background-repeat: no-repeat;
background-size: contain;
padding: 20px 0;
}
@media screen and (min-width: 992px) {
.voice-list .top {
padding: 100px 20px 20px 160px;
background-image: url('data:image/svg+xml,');
}
}
.voice-list .top .img {
overflow: hidden;
height: 120px;
text-align: center;
}
@media screen and (min-width: 992px) {
.voice-list .top .img {
position: absolute;
z-index: 3;
top: auto;
bottom: 16px;
left: -35px;
height: auto;
transform: translateX(0);
}
}
.voice-list .top .wrap {
position: relative;
z-index: 1;
height: 100px;
}
@media screen and (max-width: 992px) {
.voice-list .top .wrap {
height: auto;
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url('data:image/svg+xml,');
}
.voice-list .top .wrap .info {
padding: 5% 8%;
}
}
.voice-list .item:nth-of-type(2) .img img {
transform: scale(0.95);
}
@media screen and (min-width: 992px) {
.voice-list .item:nth-of-type(2) .img {
left: 0;
}
.voice-list .item:nth-of-type(2) .img img {
transform: scale(1);
}
}
.voice-list .list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
}
@media screen and (min-width: 992px) {
.voice-list .list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.voice-list .list a {
display: block;
text-decoration: none;
position: relative;
}
.voice-list .list i {
position: absolute;
z-index: 4;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.voice-list .list span {
position: absolute;
z-index: 4;
bottom: 0;
left: 0;
display: block;
width: 100%;
padding: 5%;
text-align: center;
}
.voice-list .list .img {
border-radius: var(--border-radius);
transition: all 0.3s ease-in-out;
overflow: hidden;
}
.voice-list .list a:hover .img img {
transform: scale(1.1);
}
.info-tip .tooltip-inner {
color: #fff;
background-color: #3a3542;
border: none;
border-radius: 0.75rem;
max-width: 300px;
font-size: 14px;
padding: 1rem;
text-align: left;
font-family: "Montserrat";
}
.info-tip.bs-tooltip-top .tooltip-arrow::before, .info-tip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
border-top-color: #3a3542;
}
.tag-wrap {
position: relative;
z-index: 1;
}
.tag-wrap .tag {
position: absolute;
z-index: 2;
transition: all 0.3s linear;
}
.tag-wrap .tag:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.tag-wrap .tag:nth-of-type(1) {
top: -5%;
left: 50%;
transform: translateX(-50%);
}
.tag-wrap .tag:nth-of-type(2) {
top: 5%;
right: 0;
}
.tag-wrap .tag:nth-of-type(3) {
bottom: 18%;
right: 0;
}
.tag-wrap .tag:nth-of-type(4) {
bottom: -10%;
left: 50%;
transform: translateX(-50%);
}
.tag-wrap .tag:nth-of-type(5) {
bottom: 25%;
left: -2%;
}
.tag-wrap .tag:nth-of-type(6) {
top: 5%;
left: 0;
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media screen and (min-width: 992px) {
.grid-cols-lg-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-lg-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-lg-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-lg-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.table-grid {
position: relative;
z-index: 1;
}
.table-grid .border-start,
.table-grid .border-end,
.table-grid .border-bottom {
border-width: 3px !important;
border-color: none;
-o-border-image: linear-gradient(138deg, #986EFA 0%, #E339FF 100%) 1;
border-image: linear-gradient(138deg, #986EFA 0%, #E339FF 100%) 1;
}
.table-grid .thead,
.table-grid .tcolumn,
.table-grid .tcont {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media screen and (min-width: 768px) {
.table-grid .thead,
.table-grid .tcolumn,
.table-grid .tcont {
grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
}
}
.table-grid .thead .item,
.table-grid .tcolumn .item,
.table-grid .tcont .item {
padding: 0.75rem 1rem;
}
@media screen and (min-width: 992px) {
.table-grid .thead .item,
.table-grid .tcolumn .item,
.table-grid .tcont .item {
padding: 0.75rem 1.5rem;
}
}
@media screen and (max-width: 768px) {
.table-grid .thead .border-start,
.table-grid .thead .border-end,
.table-grid .thead .border-bottom,
.table-grid .tcolumn .border-start,
.table-grid .tcolumn .border-end,
.table-grid .tcolumn .border-bottom,
.table-grid .tcont .border-start,
.table-grid .tcont .border-end,
.table-grid .tcont .border-bottom {
border: none !important;
}
}
.table-grid .thead {
position: sticky;
z-index: 3;
top: 65px;
background-color: #fff;
border-bottom: solid 1px rgba(159, 107, 255, 0.1);
}
.table-grid .thead .price {
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
@media screen and (min-width: 768px) {
.table-grid .thead .price {
font-size: 2rem;
}
}
@media screen and (min-width: 992px) {
.table-grid .thead .price {
font-size: 2rem;
}
}
.table-grid .thead .price span {
font-size: 0.75rem;
font-weight: normal;
}
@media screen and (min-width: 768px) {
.table-grid .thead .price span {
font-size: 1rem;
font-weight: bold;
}
}
@media screen and (min-width: 992px) {
.table-grid .thead .price span {
font-size: 1.125rem;
}
}
.table-grid .thead .item {
padding: 0.75rem 0;
font-size: 0.75rem;
}
@media screen and (min-width: 768px) {
.table-grid .thead .item {
font-size: 1rem;
}
}
.table-grid .thead .item:nth-of-type(1) {
display: none;
}
@media screen and (min-width: 768px) {
.table-grid .thead .item:nth-of-type(1) {
display: block;
}
}
.table-grid .thead .item:nth-last-of-type(1) .price {
color: var(--bs-primary) !important;
}
@media screen and (min-width: 768px) {
.table-grid .thead .item:nth-last-of-type(1) .price {
color: var(--bs-dark) !important;
}
}
.table-grid .tcolumn {
background-color: rgba(159, 107, 255, 0.1);
}
.table-grid .tcolumn .item:nth-of-type(1) {
grid-column: 1/4;
}
@media screen and (min-width: 768px) {
.table-grid .tcolumn .item:nth-of-type(1) {
grid-column: 1/5;
}
}
.table-grid.table-grid-4 .thead,
.table-grid.table-grid-4 .tcolumn,
.table-grid.table-grid-4 .tcont {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (min-width: 768px) {
.table-grid.table-grid-4 .thead,
.table-grid.table-grid-4 .tcolumn,
.table-grid.table-grid-4 .tcont {
grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
}
}
.table-grid.table-grid-4 .tcolumn .item:nth-of-type(1) {
grid-column: 1/3;
}
@media screen and (min-width: 768px) {
.table-grid.table-grid-4 .tcolumn .item:nth-of-type(1) {
grid-column: 1/4;
}
}
@media screen and (max-width: 767px) {
.table-grid.table-grid-4 .tcont .item:nth-of-type(5n + 1) {
grid-column: auto;
}
}
@media screen and (max-width: 767px) {
.table-grid.table-grid-4 .tcont .item:nth-of-type(1),
.table-grid.table-grid-4 .tcont .item:nth-of-type(4n + 1) {
grid-column: 1/4;
}
}
.table-grid .with-hand {
cursor: pointer;
}
.table-grid .with-hand .item:nth-of-type(1) {
display: flex;
align-items: center;
gap: 6px;
}
.table-grid .with-hand .item:nth-of-type(1) span {
display: block;
position: relative;
z-index: 1;
padding-left: 30px;
}
.table-grid .with-hand .item:nth-of-type(1) span::before {
display: inline-block;
content: "";
width: 20px;
height: 20px;
position: absolute;
z-index: 1;
top: 50%;
left: 0;
transform: translateY(-50%) rotate(180deg);
transition: all 0.3s linear;
background: var(--icon-circle-arrow) no-repeat center center;
background-size: contain;
}
.table-grid .with-hand + .tcont {
display: none;
}
.table-grid .with-hand.active .item:nth-of-type(1) span::before {
transform: translateY(-50%) rotate(0deg);
}
.table-grid .with-hand.active .item:last-child() {
border-bottom: 0 !important;
}
.table-grid .with-hand.active + .tcont {
display: grid;
}
.table-grid .tcont {
font-size: 0.875rem;
}
@media screen and (max-width: 767px) {
.table-grid .tcont .item:nth-of-type(1),
.table-grid .tcont .item:nth-of-type(5n + 1) {
grid-column: 1/5;
padding-bottom: 0;
}
}
.main-bg-gradient-radial {
background-position: center top;
background-repeat: no-repeat;
background-size: contain;
background-image: url('data:image/svg+xml,');
}
.sys-dropdown a {
text-decoration: none;
}
.sys-dropdown .dropdown-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
border: 0;
background: none;
}
.sys-dropdown .dropdown-toggle:after {
border: 0;
width: 16px;
height: 16px;
background: var(--header-icon-arrow) no-repeat center center;
background-size: cover;
transition: all 0.3s ease-in-out;
}
.sys-dropdown .dropdown-toggle.show::after {
transform: rotate(180deg);
}
.sys-dropdown .dropdown-menu {
display: none;
border-radius: 0.5rem;
padding: 2px;
}
.sys-dropdown .dropdown-menu .dropdown-item {
border-radius: 0.5rem;
padding: 0.5rem 1rem;
}
.sys-dropdown .dropdown-menu .dropdown-item.active, .sys-dropdown .dropdown-menu .dropdown-item:active {
background-color: transparent;
color: var(--bs-primary);
}
.sys-dropdown .dropdown-menu .dropdown-item:not(.active):hover {
background-color: rgba(var(--bs-dark-rgb), 0.05);
}
.nav-tabs-menu .nav-link {
border: 0;
background: none;
color: initial;
border-bottom: solid 2px rgba(0, 0, 0, 0.3);
}
.nav-tabs-menu .nav-link.active {
border-color: rgb(0, 0, 0);
color: var(--bs-dark);
font-weight: bold;
}
.store-tab .sys-dropdown {
display: inline-block;
}
@media screen and (min-width: 992px) {
.store-tab {
position: relative;
z-index: 5;
}
.store-tab .sys-dropdown {
position: absolute;
z-index: 1;
top: 50%;
right: 0;
transform: translateY(-50%);
}
}
.store-sale-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 0;
margin-bottom: 24px;
}
@media screen and (max-width: 560px) {
.store-sale-wrap {
margin-bottom: 0;
}
}
.store-sale-wrap .store-sale-box {
padding: 8px 16px;
display: flex;
align-items: center;
gap: 8px;
border-radius: 16px;
border: solid 1px rgba(170, 91, 255, 0.15);
background: linear-gradient(90deg, #F7CAFF 0%, #D2AEFF 100%);
}
.store-sale-wrap .store-sale-box .btn-close {
display: none;
}
@media screen and (max-width: 400px) {
.store-sale-wrap .store-sale-box .tiny {
font-size: 10px;
}
}
.store-sale-wrap .store-sale-box .name {
font-weight: 700;
padding: 0 0 4px 0;
line-height: 1.2;
}
.store-sale-wrap .store-sale-box .name span {
display: inline-block;
}
.store-sale-wrap .store-sale-box .name strong {
font-size: 1.75rem;
line-height: 1.75rem;
font-weight: 900;
}
@media screen and (max-width: 400px) {
.store-sale-wrap .store-sale-box .name strong {
font-size: 1.5rem;
}
}
.store-sale-wrap .store-sale-box .countdown-box {
font-size: 0.75rem;
display: flex;
align-items: center;
text-wrap: none;
white-space: nowrap;
gap: 6px;
}
.store-sale-wrap .store-sale-box .countdown-box .time-box {
display: flex;
align-items: center;
gap: 6px;
}
.store-sale-wrap .store-sale-box .countdown-box .time-box .time-cont {
display: inline-block;
font-weight: bold;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.4);
padding: 2px 5px;
text-wrap: none;
white-space: nowrap;
}
.store-sale-wrap .store-sale-box .countdown-box .time-box .time-cont span {
display: inline-block;
min-width: 18px;
text-align: center;
}
.store-sale-wrap .store-sale-box .countdown-box .time-box .time-cont:last-child {
gap: 0;
}
.store-sale-wrap .store-sale-box .countdown-box .time-box .time-cont:last-child .ms {
min-width: 28px;
}
.store-sale-wrap .store-sale-box .copy-content {
display: flex;
align-items: center;
background-color: #fff;
border-radius: 100px;
padding: 4px 6px;
}
.store-sale-wrap .store-sale-box .copy-content span {
display: inline-block;
padding: 4px 12px;
opacity: 0.5;
white-space: nowrap;
}
@media screen and (max-width: 400px) {
.store-sale-wrap .store-sale-box .copy-content span {
font-size: 0.75rem;
}
}
.store-sale-wrap .store-sale-box .copy-content .copy-btn {
display: inline-block;
background-color: #A753FF;
color: #fff;
border-radius: 100px;
padding: 4px 16px;
white-space: nowrap;
cursor: pointer;
transition: all 0.3s linear;
}
@media screen and (max-width: 400px) {
.store-sale-wrap .store-sale-box .copy-content .copy-btn {
font-size: 0.75rem;
}
}
.store-sale-wrap .store-sale-box .copy-content .copy-btn:hover:not(.disabled) {
background-color: var(--bs-primary);
}
.store-sale-wrap .store-sale-box .copy-content .copy-btn.disabled {
cursor: default;
}
@media screen and (max-width: 560px) {
.store-sale-wrap .store-sale-box {
position: relative;
z-index: 1;
padding-bottom: 45px !important;
width: 100%;
}
.store-sale-wrap .store-sale-box .countdown-box {
position: absolute;
z-index: 1;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
}
.store-sale-wrap .store-sale-box .copy-content {
font-size: 14px;
}
.store-sale-wrap .store-sale-box .copy-content span {
padding: 4px 8px;
}
.store-sale-wrap .store-sale-box .copy-content .copy-btn {
padding: 4px 12px;
}
}
.store-sale-wrap.position-fixed {
left: 0;
bottom: 0;
z-index: 10;
width: 100%;
margin-bottom: 0;
}
@media screen and (max-width: 560px) {
.store-sale-wrap.position-fixed {
width: 100%;
padding: 4px 8px;
}
}
.store-sale-wrap.position-fixed .store-sale-box {
background: rgba(251, 228, 255, 0.8);
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
padding-top: 16px;
}
@media screen and (max-width: 560px) {
.store-sale-wrap.position-fixed .store-sale-box {
padding-bottom: 0.5rem !important;
}
.store-sale-wrap.position-fixed .store-sale-box .countdown-box {
display: none;
}
}
.store-sale-wrap.position-fixed .store-sale-box .btn-close {
display: block;
position: absolute;
z-index: 2;
top: 0;
right: 0;
padding: 2px;
cursor: pointer;
opacity: 0.5;
}
.store-sale-wrap.position-fixed .store-sale-box .btn-close:hover {
opacity: 0.8;
}
.price-container {
--padding: 16px;
--border-radius: 16px;
}
@media screen and (min-width: 1280px) {
.price-container {
--padding: 24px;
--border-radius: 24px;
}
}
@media screen and (min-width: 1400px) {
.price-container {
--padding: 32px;
}
}
.price-container .dropdown-item:hover {
background-color: rgba(var(--bs-dark-rgb), 0.05);
}
.price-container .item {
border: solid 1px rgba(0, 0, 0, 0.15);
border-radius: var(--border-radius);
padding: var(--padding);
}
.price-container .item .title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 8px;
color: var(--bs-dark);
}
.price-container .item .tips {
font-size: 0.875rem;
color: rgba(0, 0, 0, 0.7);
}
.price-container .item .price {
padding: 0.75rem 0;
}
.price-container .item .price big {
font-size: 3rem;
line-height: 1.2;
color: var(--bs-dark);
}
.price-container .item .price del,
.price-container .item .price small {
font-weight: normal;
}
.price-container .item .price span {
display: block;
padding: 4px 0;
}
.price-container .item .sale-off {
display: inline-block;
background-color: #ff5c00;
color: #fff;
font-size: 14px;
font-weight: 700;
padding: 4px 16px;
border-radius: 100px 100px 100px 0;
}
.price-container .item .btn-box {
padding: 0.75rem 0;
position: relative;
z-index: 3;
}
.price-container .item .btn-box .sale-off {
position: absolute;
z-index: 10;
top: -10%;
right: -10px;
}
.price-container .item .info {
font-size: 0.875rem;
padding: 1rem 0;
}
.price-container .item .info ul {
margin-bottom: 0;
}
.price-container .item .info ul li {
margin-bottom: 8px;
}
.price-container .item .bottom {
font-size: 0.75rem;
}
.price-container .item .bottom p {
margin-bottom: 0.5rem;
}
.price-container .item.most-popular {
padding: 0;
border: 0;
position: relative;
z-index: 1;
background: linear-gradient(180deg, #fff 40%, #F2DEFF 100%);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.price-container .item.most-popular::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: linear-gradient(90deg, #6B57FF, #E45FFF);
width: 100%;
height: 100%;
padding: 3px;
border-radius: var(--border-radius);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.price-container .item.most-popular .dropdown-item:hover {
background-color: rgba(var(--bs-primary-rgb), 0.15);
}
.price-container .item.most-popular .top {
background: linear-gradient(90deg, #6B57FF, #E45FFF);
color: #fff;
border-radius: var(--border-radius) var(--border-radius) 0 0;
padding: 0.75rem var(--padding);
text-align: center;
font-size: 1.25rem;
font-weight: 600;
}
.price-container .item.most-popular .cont {
padding: var(--padding);
}
.header-fixed-mobile {
z-index: 25;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
padding: 0.75rem 1rem;
display: none;
align-items: center;
justify-content: space-between;
gap: 1rem;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.header-fixed-mobile .pro-name {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--bs-dark);
line-height: 1.4;
font-weight: bold;
}
.header-fixed-mobile .pro-name:hover {
text-decoration: none;
color: var(--bs-primary);
}
.header-fixed-mobile .btn-box {
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
}
.header-fixed-mobile .btn-box .btn svg {
margin-right: 0.25rem;
}
.header-fixed-mobile.active {
display: flex;
position: fixed;
}
.imgbox-hover .box {
position: relative;
z-index: 1;
display: block;
color: #fff;
}
.imgbox-hover .box .pic {
position: relative;
z-index: 1;
}
.imgbox-hover .box .pic .img-after {
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
transition: all 0.3s linear;
}
@media screen and (min-width: 992px) {
.imgbox-hover .box .pic .img-after {
opacity: 0;
}
}
.imgbox-hover .box .cont {
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: end;
padding: 5%;
text-align: center;
}
@media screen and (min-width: 768px) {
.imgbox-hover .box .cont {
padding: 0 18% 3% 3%;
}
}
.imgbox-hover .box .cont .info {
font-size: 0.875rem;
line-height: 1.6;
}
@media screen and (min-width: 768px) {
.imgbox-hover .box .cont .info {
font-size: 0.75rem;
line-height: 1.4;
}
}
@media screen and (min-width: 992px) {
.imgbox-hover .box .cont .info {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.3s linear;
font-size: 1rem;
line-height: 1.6;
}
}
.imgbox-hover .box:hover .img-after {
opacity: 1;
}
@media screen and (min-width: 992px) {
.imgbox-hover .box:hover .info {
max-height: 1000px;
opacity: 1;
}
}
.box-hover-info .box {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
.box-hover-info .box .pic {
position: relative;
z-index: 1;
}
.box-hover-info .box .cont {
position: absolute;
z-index: 2;
width: 100%;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 0.3s linear;
}
@media screen and (min-width: 992px) {
.box-hover-info .box .cont {
padding: 1.5rem 2rem;
}
}
.box-hover-info .box .info {
max-height: 52px;
overflow: hidden;
width: 100%;
font-size: 0.875rem;
}
@media screen and (min-width: 992px) {
.box-hover-info .box .info {
font-size: 1rem;
}
}
.box-hover-info .box .btn-box {
display: none;
margin-top: 1.5rem;
}
.box-hover-info .box:hover .cont {
height: 100%;
}
.box-hover-info .box:hover .info {
max-height: 1000px;
}
.box-hover-info .box:hover .btn-box {
display: block;
}
.list-info-toggle .list {
cursor: pointer;
border-left: solid 4px rgba(255, 255, 255, 0.16);
margin-bottom: 0;
padding-left: calc(var(--dot-size) + 24px);
padding-top: 1rem;
padding-bottom: 1rem;
}
.list-info-toggle .list::before {
left: 16px;
}
.list-info-toggle .list .info {
max-height: 0;
overflow: hidden;
}
.list-info-toggle .list.active {
border-left-color: var(--bs-primary);
}
.list-info-toggle .list.active .info {
max-height: 1000px;
transition: all 0.6s linear;
overflow: visible;
}
.hover-table-wrap {
position: relative;
z-index: 5;
}
.hover-table-wrap .hover-table {
position: absolute;
z-index: 5;
bottom: 110%;
right: auto;
left: 0;
border: solid 1px rgba(255, 255, 255, 0.15);
background-color: var(--bs-dark);
border-radius: 1rem;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
min-width: auto;
display: none;
}
@media screen and (min-width: 992px) {
.hover-table-wrap .hover-table {
left: auto;
right: 0;
overflow: hidden;
width: auto;
min-width: 720px;
}
}
.hover-table-wrap .hover-table .table {
border-color: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.7);
font-size: 12px;
}
.hover-table-wrap .hover-table .table thead {
background-color: rgba(0, 0, 0, 0.05);
}
.hover-table-wrap .hover-table .table tbody {
background-color: rgba(255, 255, 255, 0.15);
}
.hover-table-wrap .link-hover-table:hover + .hover-table {
display: block;
}
.page-bottom {
border-radius: 24px;
margin: 1rem 1rem 4rem;
}
@media screen and (min-width: 768px) {
.page-bottom {
border-radius: 0;
margin: 0;
}
}
.modal-popup .btn-close {
position: absolute;
z-index: 5;
right: -5px;
top: -38px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
border-radius: 100%;
width: 32px;
height: 32px;
padding: 4px;
}
@media screen and (min-width: 768px) {
.modal-popup .btn-close {
right: -24px;
top: -28px;
}
}
.modal-popup .btn-close:after {
background-image: var(--icon-close-white);
}
.modal-popup .modal-content {
background-color: transparent;
border: 0;
}/*# sourceMappingURL=global.css.map */