@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--et-font: "Be Vietnam Pro", sans-serif;
--et-body-ff: var(--et-font);
--et-body-fs: 1.25vw;
--et-body-lh: 1;
--et-body-fw: 400;
--transition: all 0.4s ease-in-out 0s;
--et-purple: #9155e5;
--et-aquaLight: #5dd8d3;
--et-orange: #f56551;
--et-white: #ffffff;
--et-dark: #080c17;
--et-blue: #0078cc;
--et-gray: #667085;
--et-gray-100: #484b52;
}
/* RESET CSS
======================================================*/
*,
*:after,
*:before {
vertical-align: top !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
html {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
body,
html {
background: var(--et-white);
color: var(--et-dark);
font-family: var(--et-font);
font-size: var(--et-body-fs);
line-height: var(--et-body-lh);
font-weight: 400;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
figure,
.figure {
position: relative;
display: inline-block;
width: 100%;
margin: 0vw;
overflow: hidden;
}
img {
max-width: 100%;
max-height: 100%;
outline: none;
border: none;
height: auto;
width: auto;
}
svg {
max-width: 100%;
height: auto;
}
.absolute-div {
position: absolute;
top: 0vw;
left: 0vw;
right: 0vw;
bottom: 0vw;
margin: auto;
}
.picture > img,
.picture > iframe {
position: absolute;
top: 0vw;
left: 0vw;
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
.picture-contain > img,
.picture-contain > iframe {
object-fit: contain;
}
strong,
b,
label {
font-family: inherit;
font-weight: 600;
margin-bottom: 0vw;
}
ul,
ul li {
list-style: none;
padding: 0vw;
margin: 0vw;
position: relative;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-family: var(--et-font);
font-weight: 700;
color: var(--et-dark);
padding: 0vw;
margin: 0vw;
width: 100%;
}
a,
.a,
a:focus,
.a:focus,
a:hover,
.a:hover {
text-decoration: none;
outline: none;
}
a,
.a {
color: var(--et-purple);
display: inline-block;
cursor: pointer;
}
a:hover,
.a:hover,
.active a:not(.btn),
.active .a:not(.btn) {
color: var(--et-purple);
}
p {
font-size: var(--et-body-fs);
line-height: var(--et-body-lh);
margin-top: 0;
}
p:empty {
display: none;
}
label {
margin-bottom: 0vw;
}
main {
display: inline-block;
width: 100%;
}
section {
display: inline-block;
width: 100%;
position: relative;
}
::-moz-selection {
color: var(--et-white);
background: var(--et-purple);
}
::selection {
color: var(--et-white);
background: var(--et-purple);
}
:hover,
:visited,
:active,
:focus {
outline: none !important;
}
:last-child:not(img):not(.icon):not(.grid-plan .slick-list),
:only-child:not(img):not(.icon):not(.grid-plan .slick-list) {
margin-bottom: 0vw !important;
}
.font-size-0 {
font-size: 0;
line-height: 0;
width: 0;
height: 0;
opacity: 0;
visibility: hidden;
}
.transition img,
svg,
a,
.a,
button,
.btn,
input,
select,
textarea,
::before,
::after,
.accordion-item .accordion-header,
.section-report .slider-report .slick-slide,
nav {
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.cursor-pointer {
cursor: pointer;
}
.icon {
display: inline-block;
position: relative;
}
.icon svg,
.icon img {
position: absolute;
top: 0vw;
left: 0vw;
bottom: 0vw;
right: 0vw;
margin: auto;
width: fit-content;
height: fit-content;
max-width: 100%;
max-height: 100%;
}
.container-fluid {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 90.2778vw;
}
.btn {
display: inline-block;
padding: 1.0417vw 2.2222vw;
font-family: "Poppins", sans-serif;
font-size: 1.1111vw;
font-weight: 500;
line-height: 1;
text-align: center;
text-decoration: none;
color: var(--et-btn-color);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border: 0.1389vw solid var(--et-btn-border-color);
-webkit-border-radius: 50rem;
-moz-border-radius: 50rem;
border-radius: 50rem;
background-color: var(--et-btn-bg);
}
.btn-sm {
font-size: 0.9722vw;
padding: 0.7639vw 2.5vw;
}
.btn-center {
text-align: center;
display: inline-block;
width: 100%;
}
.btn-center .btn {
min-width: 13.1944vw;
}
.btn:hover {
color: var(--et-btn-hover-color);
background-color: var(--et-btn-hover-bg);
border-color: var(--et-btn-hover-border-color);
}
.btn:active {
color: var(--et-btn-active-color);
background-color: var(--et-btn-active-bg);
border-color: var(--et-btn-active-border-color);
}
.btn-purple {
--et-btn-color: var(--et-white);
--et-btn-bg: var(--et-purple);
--et-btn-border-color: var(--et-purple);
--et-btn-hover-color: var(--et-white);
--et-btn-hover-bg: #7c45c9;
--et-btn-hover-border-color: #7c45c9;
--et-btn-focus-shadow-rgb: 49, 132, 253;
--et-btn-active-color: var(--et-white);
--et-btn-active-bg: #7c45c9;
--et-btn-active-border-color: #7c45c9;
--et-btn-active-shadow: inset 0 0.2083vw 0.3472vw rgba(0, 0, 0, 0.125);
--et-btn-disabled-color: var(--et-white);
--et-btn-disabled-bg: var(--et-purple);
--et-btn-disabled-border-color: var(--et-purple);
}
.btn-orange {
--et-btn-color: var(--et-white);
--et-btn-bg: var(--et-orange);
--et-btn-border-color: var(--et-orange);
--et-btn-hover-color: var(--et-white);
--et-btn-hover-bg: #d64e3d;
--et-btn-hover-border-color: #d64e3d;
--et-btn-focus-shadow-rgb: 49, 132, 253;
--et-btn-active-color: var(--et-white);
--et-btn-active-bg: #d64e3d;
--et-btn-active-border-color: #d64e3d;
--et-btn-active-shadow: inset 0 0.2083vw 0.3472vw rgba(0, 0, 0, 0.125);
--et-btn-disabled-color: var(--et-white);
--et-btn-disabled-bg: var(--et-orange);
--et-btn-disabled-border-color: var(--et-orange);
}
.btn-white {
--et-btn-color: var(--et-blue);
--et-btn-bg: var(--et-white);
--et-btn-border-color: var(--et-white);
--et-btn-hover-color: var(--et-blue);
--et-btn-hover-bg: rgba(255, 255, 255, 0.8);
--et-btn-hover-border-color: rgba(255, 255, 255, 0.8);
--et-btn-focus-shadow-rgb: 49, 132, 253;
--et-btn-active-color: var(--et-blue);
--et-btn-active-bg: rgba(255, 255, 255, 0.8);
--et-btn-active-border-color: rgba(255, 255, 255, 0.8);
--et-btn-active-shadow: inset 0 0.2083vw 0.3472vw rgba(0, 0, 0, 0.125);
--et-btn-disabled-color: var(--et-blue);
--et-btn-disabled-bg: var(--et-white);
--et-btn-disabled-border-color: var(--et-white);
}
.btn-aquaLight {
--et-btn-color: var(--et-white);
--et-btn-bg: #7dd4d1;
--et-btn-border-color: #7dd4d1;
--et-btn-hover-color: var(--et-white);
--et-btn-hover-bg: #57c5c1;
--et-btn-hover-border-color: #57c5c1;
--et-btn-focus-shadow-rgb: 49, 132, 253;
--et-btn-active-color: var(--et-white);
--et-btn-active-bg: #57c5c1;
--et-btn-active-border-color: #57c5c1;
--et-btn-active-shadow: inset 0 0.2083vw 0.3472vw rgba(0, 0, 0, 0.125);
--et-btn-disabled-color: var(--et-white);
--et-btn-disabled-bg: #7dd4d1;
--et-btn-disabled-border-color: #7dd4d1;
}
.btn-outline-purple {
--et-btn-color: var(--et-white);
--et-btn-border-color: var(--et-purple);
--et-btn-hover-color: var(--et-white);
--et-btn-hover-bg: var(--et-purple);
--et-btn-hover-border-color: var(--et-purple);
--et-btn-focus-shadow-rgb: 13, 110, 253;
--et-btn-active-color: var(--et-white);
--et-btn-active-bg: var(--et-purple);
--et-btn-active-border-color: var(--et-purple);
--et-btn-active-shadow: inset 0 0.2083vw 0.3472vw rgba(0, 0, 0, 0.125);
--et-btn-disabled-color: var(--et-purple);
--et-btn-disabled-bg: transparent;
--et-btn-disabled-border-color: var(--et-purple);
--et-gradient: none;
}
.text-purple {
color: var(--et-purple);
}
.text-orange {
color: var(--et-orange);
}
.text-aquaLight {
color: var(--et-aquaLight);
}
.text-blue {
color: var(--et-blue);
}
.title.title-white *:not(h6) {
color: var(--et-white);
}
.title h6 {
font-size: 1.25vw;
line-height: 1;
margin-bottom: 0.9722vw;
}
.title h2 {
font-size: 3.125vw;
line-height: 1.2;
font-weight: 300;
}
.title h3 {
font-size: 1.7361vw;
line-height: 1.3;
font-weight: 300;
max-width: 34.2361vw;
margin-left: auto;
margin-right: auto;
margin-top: 2.2222vw;
}
.title strong {
font-weight: 700;
}
.title-center {
text-align: center;
}
.title-center p {
margin-left: auto;
margin-right: auto;
}
.title p {
font-size: 1.25vw;
line-height: 1.46;
max-width: 47.5694vw;
margin-top: 1.5278vw;
}
.title p.text-lg {
max-width: 49.6528vw;
margin-top: 1.6667vw;
}
.title p.text-xl {
max-width: 53.9583vw;
margin-top: 1.8056vw;
}
.form-switch {
display: flex;
width: fit-content;
margin: 0 auto;
line-height: 2.0833vw;
margin-top: 2.6389vw;
gap: 1.0417vw;
position: relative;
z-index: 9;
}
.form-switch input {
width: 5.1389vw;
height: 2.2917vw;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: var(--et-blue);
-webkit-border-radius: 50rem;
-moz-border-radius: 50rem;
border-radius: 50rem;
position: relative;
margin: 0;
cursor: pointer;
}
.form-switch input:checked::before {
left: 2.9861vw;
}
.form-switch input::before {
content: "";
display: inline-block;
width: 1.7361vw;
height: 1.7361vw;
-webkit-border-radius: 50rem;
-moz-border-radius: 50rem;
border-radius: 50rem;
background: var(--et-white);
position: absolute;
top: 0vw;
bottom: 0vw;
left: 0.4167vw;
margin: auto;
}
/* HEADER
======================================================*/
.app-header {
background-color: var(--et-dark);
padding: 1.3889vw 0;
}
.app-header .container-fluid {
display: flex;
align-items: center;
justify-content: space-between;
}
.app-header .brand-logo {
display: inline-block;
margin-right: 4.4444vw;
}
.app-header .brand-logo img {
display: inline-block;
width: 13.5417vw;
height: 2.7083vw;
}
.app-header nav ul {
display: flex;
gap: 4.4444vw;
margin-top: 0.4167vw;
}
.app-header nav ul li a {
display: inline-block;
font-size: 0.9722vw;
line-height: 1;
color: var(--et-white);
}
.app-header nav ul li a:hover {
color: var(--et-purple);
}
.app-header .header-right {
display: flex;
align-items: center;
font-size: 0.9722vw;
line-height: 1;
color: var(--et-white);
padding-top: 0.0694vw;
}
.app-header .header-right .btn {
margin-left: 1.4583vw;
position: relative;
top: 0.2083vw;
}
.app-header .header-right a:not(.btn) {
color: var(--et-white);
}
.app-header .header-right a:not(.btn):hover {
color: var(--et-purple);
}
.app-header .header-right span {
display: inline-block;
margin-left: 0.9028vw;
margin-right: 0.9028vw;
}
.app-header nav .brand-logo,
.app-header .nav-toggle,
.app-header .icon-close,
.app-header .nav-foot {
display: none;
}
/* Banner Section
======================================================*/
.section-banner {
background-color: var(--et-dark);
text-align: center;
padding-top: 7.2917vw;
}
.section-banner > .banner-svg {
position: absolute;
top: 0px;
left: 1px;
z-index: 1;
width: 70.41666666666667vw;
height: 93.47222222222222vw;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
opacity: 0.75;
pointer-events: none;
}
.section-banner .br {
display: none;
}
.section-banner h1 {
font-size: 3.8194vw;
line-height: 1.2;
color: var(--et-white);
margin-bottom: 2.7778vw;
font-weight: 300;
position: relative;
}
.section-banner .shape-orange {
bottom: 1.5972vw;
left: calc(50% - 29.375vw);
}
.section-banner .shape-orange svg {
top: -0.5556vw;
right: -0.7639vw;
width: 1.319444444444444vw;
height: 1.180555555555556vw;
}
.section-banner .shape-blue {
bottom: 1.5972vw;
right: calc(50% - 29.375vw);
}
.section-banner .shape-blue svg {
top: -1.1111vw;
left: -1.1111vw;
width: 1.736111111111111vw;
height: 1.736111111111111vw;
}
.section-banner h5 {
font-size: 1.7361vw;
line-height: 1.5;
color: var(--et-white);
font-weight: 300;
max-width: 40vw;
margin: 0vw auto 3.3333vw;
}
/* SEO Section
======================================================*/
.section-seo {
background-color: var(--et-dark);
padding-top: 8.3333vw;
padding-bottom: 9.7222vw;
min-height: 61.4583vw;
width: 100%;
overflow: hidden;
}
.content-data {
padding-left: 3.1944vw;
max-width: 31.9444vw;
}
.content-data .btn {
margin-top: 3.1944vw;
margin-left: 1.0417vw;
}
.accordion {
padding-top: 2.5vw;
}
.accordion-item {
border-bottom: 0.0694vw solid rgba(255, 255, 255, 0.5);
}
.accordion-item .accordion-header {
color: var(--et-white);
font-size: 1.25vw;
line-height: 1.5;
padding: 0.625vw 2.5vw 0.5556vw;
width: 100%;
display: inline-block;
font-weight: 300;
cursor: pointer;
}
.accordion-item .accordion-header:hover {
color: var(--et-purple);
}
.accordion-item .accordion-body {
color: var(--et-white);
font-size: 0.9722vw;
line-height: 1.46;
padding-left: 2.5694vw;
padding-top: 0.2778vw;
padding-bottom: 1.9444vw;
}
.accordion-item .accordion-collapse {
display: none;
}
.accordion-item.active .accordion-header {
font-weight: 700;
}
.accordion-image {
position: absolute;
top: 10.2778vw;
right: -3.0556vw;
border: 0.0694vw solid var(--et-white);
-webkit-border-radius: 2.0833vw 0 0 2.0833vw;
-moz-border-radius: 2.0833vw 0 0 2.0833vw;
border-radius: 2.0833vw 0 0 2.0833vw;
width: 55.15vw;
border-right: 0;
height: 41.4583vw;
padding: 0.8333vw 0 0.8333vw 0.8333vw;
}
.accordion-image::before {
content: "";
display: inline-block;
position: absolute;
top: -3.0556vw;
left: -2.7083vw;
width: 52.5694vw;
height: 40.2083vw;
background: transparent
url('data:image/svg+xml,')
no-repeat scroll center center;
background-size: cover;
}
.accordion-image figure {
width: 100%;
-webkit-border-radius: 1.3889vw 0 0 1.3889vw;
-moz-border-radius: 1.3889vw 0 0 1.3889vw;
border-radius: 1.3889vw 0 0 1.3889vw;
background: var(--et-white);
height: 100%;
}
.accordion-image figure img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Work Section
======================================================*/
.section-work {
padding-top: 5vw;
}
.section-work .title h2 {
max-width: 51.1806vw;
margin-left: auto;
margin-right: auto;
}
.grid {
display: flex;
flex-direction: column;
gap: 5.5556vw;
width: 100%;
max-width: 62.5vw;
margin: 4.5139vw auto 0;
}
.grid .grid-row {
display: flex;
gap: 6.9444vw;
align-items: center;
}
.grid .grid-row:nth-child(2) {
flex-direction: row-reverse;
}
.grid .grid-row figure {
width: 27.7083vw;
flex: 0 0 auto;
height: 20.8333vw;
}
.grid .grid-row .grid-text {
width: 27.7778vw;
flex: 0 0 auto;
}
.grid .grid-row .grid-text h3 {
font-size: 2.0833vw;
line-height: 1.3;
font-weight: 700;
margin-bottom: 1.25vw;
}
.grid .grid-row .grid-text p {
font-size: 1.25vw;
line-height: 1.5;
font-weight: 300;
min-height: 7.1528vw;
}
/* About Section
======================================================*/
.section-about {
background: transparent
url('data:image/svg+xml,')
no-repeat scroll bottom center;
background-size: cover;
padding-top: 7.5694vw;
padding-bottom: 5.5556vw;
}
.section-about .title h2 {
position: relative;
}
.section-about .shape-aquaLight {
background: var(--et-aquaLight);
bottom: -2.5vw;
left: calc(50% - -26.5278vw);
padding: 0vw 0.625vw 0.2083vw;
font-size: 0.8333vw;
}
.section-about .shape svg {
top: -1.1111vw;
left: -1.1111vw;
width: 1.736111111111111vw;
height: 1.736111111111111vw;
}
.section-about .title h6 {
margin-bottom: 1.3889vw;
}
.slider-block {
position: relative;
padding: 0.9722vw;
-webkit-border-radius: 2.0833vw;
-moz-border-radius: 2.0833vw;
border-radius: 2.0833vw;
background: transparent;
z-index: 1;
max-width: 76.0417vw;
margin: 3.3333vw auto 7.6389vw;
left: 0.4167vw;
}
.slider-block::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.0694vw;
border-radius: inherit;
background: linear-gradient(
180deg,
var(--et-blue) 0%,
var(--et-aquaLight) 33.65%,
#a861bc 71.15%,
#ec6c68 100%
);
-webkit-mask: linear-gradient(var(--et-white) 0 0) content-box,
linear-gradient(var(--et-white) 0 0);
mask: linear-gradient(var(--et-white) 0 0) content-box,
linear-gradient(var(--et-white) 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: -1;
}
.slider-block .slider-image {
width: 100%;
background: var(--et-white);
-webkit-border-radius: 1.7361vw;
-moz-border-radius: 1.7361vw;
border-radius: 1.7361vw;
}
.slider-block .slider-image figure {
padding-top: 54.55%;
-webkit-border-radius: 1.7361vw;
-moz-border-radius: 1.7361vw;
border-radius: 1.7361vw;
overflow: hidden;
display: inline-block;
}
.slider-block .slick-arrow {
width: 2.7778vw;
height: 2.7778vw;
border: 0.0694vw solid var(--et-blue);
display: flex;
justify-content: center;
-webkit-border-radius: 50rem;
-moz-border-radius: 50rem;
border-radius: 50rem;
position: absolute;
bottom: 4.5139vw;
left: 3.1944vw;
color: var(--et-blue);
cursor: pointer;
align-items: center;
}
.slider-block .slick-arrow svg {
width: 1.805555555555556vw;
height: 1.805555555555556vw;
}
.slider-block .slick-arrow.slick-next {
left: 7.7778vw;
}
.slider-block .slick-arrow:hover {
background-color: var(--et-blue);
color: var(--et-white);
}
.section-about ul {
display: flex;
max-width: 75.4861vw;
margin: 5.5556vw auto 4.3056vw;
justify-content: space-between;
gap: 6.25vw;
}
.section-about ul li {
width: 100%;
flex: 1 1 auto;
position: relative;
}
.section-about ul.about-list li:not(:last-child):after {
content: "";
display: inline-block;
width: 8.9583vw;
height: 1.1111vw;
background: transparent
url('data:image/svg+xml,')
no-repeat scroll center center;
position: absolute;
top: 0.6944vw;
left: 14.7222vw;
background-size: cover;
}
.section-about ul h3 {
font-size: 1.7361vw;
font-weight: bold;
line-height: 1;
margin-bottom: 2.0833vw;
}
.section-about ul p {
font-size: 0.9722vw;
line-height: 1.45;
color: var(--et-gray);
}
.slick-dots {
position: absolute;
margin: 0 !important;
line-height: 1.3889vw;
width: 100%;
display: flex !important;
justify-content: center !important;
align-items: center;
gap: 1.3889vw !important;
left: -0.4167vw;
right: 0;
bottom: -5.3472vw;
}
.slick-dots li {
width: auto !important;
flex: initial !important;
}
.slick-dots li button {
width: 1.3889vw;
height: 1.3889vw;
position: relative;
border: none;
-webkit-border-radius: 50rem;
-moz-border-radius: 50rem;
border-radius: 50rem;
font-size: 0;
cursor: pointer;
}
.slick-dots li:nth-child(1) button {
background: #5bd6d3;
-webkit-background: linear-gradient(
90deg,
rgba(91, 214, 211, 1) 0%,
rgba(66, 188, 209, 1) 100%
);
-moz-background: linear-gradient(
90deg,
rgba(91, 214, 211, 1) 0%,
rgba(66, 188, 209, 1) 100%
);
background: linear-gradient(
90deg,
rgba(91, 214, 211, 1) 0%,
rgba(66, 188, 209, 1) 100%
);
}
.slick-dots li:nth-child(2) button {
background: #5bd6d3;
-webkit-background: linear-gradient(90deg, #239dcf 0%, #0b83cd 100%);
-moz-background: linear-gradient(90deg, #239dcf 0%, #0b83cd 100%);
background: linear-gradient(90deg, #239dcf 0%, #0b83cd 100%);
}
.slick-dots li:nth-child(3) button {
background: #5bd6d3;
-webkit-background: linear-gradient(90deg, #276fd3 0%, #5563db 100%);
-moz-background: linear-gradient(90deg, #276fd3 0%, #5563db 100%);
background: linear-gradient(90deg, #276fd3 0%, #5563db 100%);
}
.slick-dots li:nth-child(4) button {
background: #5bd6d3;
-webkit-background: linear-gradient(90deg, #8e56e4 0%, #ac5cc0 100%);
-moz-background: linear-gradient(90deg, #8e56e4 0%, #ac5cc0 100%);
background: linear-gradient(90deg, #8e56e4 0%, #ac5cc0 100%);
}
.slick-dots li:nth-child(5) button {
background: #5bd6d3;
-webkit-background: linear-gradient(90deg, #cf6590 0%, #eb6c6a 100%);
-moz-background: linear-gradient(90deg, #cf6590 0%, #eb6c6a 100%);
background: linear-gradient(90deg, #cf6590 0%, #eb6c6a 100%);
}
.slick-dots li button::after {
content: "";
display: inline-block;
position: absolute;
inset: 0;
margin: auto;
width: 0.9722vw;
height: 0.9722vw;
background-color: var(--et-white);
-webkit-border-radius: 50rem;
-moz-border-radius: 50rem;
border-radius: 50rem;
}
.slick-dots li.slick-active button::after {
opacity: 0;
}
/* Plan Section
======================================================*/
.section-plan {
padding-top: 5.0694vw;
padding-bottom: 5.9028vw;
}
.grid-plan {
/* display: flex;
gap: 2.0833vw; */
padding: 0vw 2.0833vw;
margin-top: 3.9583vw;
}
.box {
width: 100%;
flex: 1 1 auto;
-webkit-box-shadow: 0vw 0.1389vw 0.8333vw 0vw rgba(20, 20, 43, 0.08);
-moz-box-shadow: 0vw 0.1389vw 0.8333vw 0vw rgba(20, 20, 43, 0.08);
box-shadow: 0vw 0.1389vw 0.8333vw 0vw rgba(20, 20, 43, 0.08);
-webkit-border-radius: 1.3889vw;
-moz-border-radius: 1.3889vw;
border-radius: 1.3889vw;
padding: 3.4722vw 2.9861vw 2.9167vw;
position: relative;
display: flex !important;
flex-direction: column;
height: auto;
}
.grid-plan .slick-track {
display: flex;
gap: 2.0833vw;
}
.grid-plan .slick-list {
padding: 5vw 0;
margin: -5vw 0 !important;
}
/* .box:first-child,
.box:last-child {
margin-top: 3.5417vw;
} */
.box.box-main {
background-color: var(--et-blue);
}
.box.box-main *:not(.btn):not(p) {
color: var(--et-white);
}
.box.box-main p {
color: #d9dbe9 !important;
}
.box .box-head {
display: flex;
gap: 1.1111vw;
}
.box .box-head i {
width: 5vw;
height: 5vw;
-webkit-border-radius: 1.1111vw;
-moz-border-radius: 1.1111vw;
border-radius: 1.1111vw;
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
background-color: #ecebff;
}
.box .box-head i svg {
width: 2.638888888888889vw;
height: 2.638888888888889vw;
}
.box:last-child .box-head i svg {
width: 3.055555555555556vw;
height: 3.194444444444444vw;
}
.box .box-head span {
line-height: 1.3889vw;
color: var(--et-gray);
display: inline-block;
margin-top: 0.4167vw;
font-weight: 500;
}
.box .box-head h4 {
font-size: 1.6667vw;
line-height: 2.4306vw;
}
.box label {
position: absolute;
top: 2.2222vw;
right: 2.1528vw;
font-weight: normal;
background: rgba(255, 255, 255, 0.2);
width: 6.8056vw;
display: inline-block;
text-align: center;
font-size: 0.9722vw;
padding: 0.9028vw 0vw;
-webkit-border-radius: 0.6944vw;
-moz-border-radius: 0.6944vw;
border-radius: 0.6944vw;
}
.box .box-body {
padding-top: 1.875vw;
padding-bottom: 2.5694vw;
}
.box .box-body p {
font-size: 1.1111vw;
line-height: 1.5;
color: var(--et-gray);
}
.box .box-body .price {
display: flex;
align-items: flex-end;
gap: 0.6944vw;
margin-bottom: 1.1806vw;
}
.box .box-body .price h2 {
font-size: 3.125vw;
line-height: 1.2;
width: auto;
}
.box .box-body .price h5 {
font-size: 1.3889vw;
line-height: 1.5278vw;
font-weight: 500;
padding-bottom: 0.8333vw;
}
.box .box-body h6 {
font-size: 1.25vw;
line-height: 1.3889vw;
margin-bottom: 1.875vw;
}
.box .box-body ul {
display: flex;
flex-direction: column;
font-size: 0.9722vw;
line-height: 1.3889vw;
gap: 1.5278vw;
padding-left: 2.7778vw;
}
.box .box-body ul li {
position: relative;
}
.box .box-body ul li::before {
content: "";
display: inline-block;
width: 1.8056vw;
height: 1.8056vw;
position: absolute;
top: -0.2083vw;
left: -2.7778vw;
background: transparent
url('data:image/svg+xml,')
no-repeat scroll center center;
background-size: cover;
}
.box.box-main .box-body ul li::before {
background-image: url('data:image/svg+xml,');
}
.box:nth-child(3) .box-body ul li::before {
background-image: url('data:image/svg+xml,');
}
.box .box-foot {
margin-top: auto;
}
.box .box-foot .btn {
width: 100%;
}
.text-plan {
display: inline-block;
text-align: center;
width: 100%;
font-size: 2.0833vw;
line-height: 1;
color: #000;
margin-top: 3.6111vw;
}
.text-plan a {
color: var(--et-blue);
font-weight: bold;
text-decoration: underline;
display: inline-block;
margin-left: 0;
margin-right: 0.6944vw;
}
.text-plan a svg {
width: 2.361111111111111vw;
height: 2.361111111111111vw;
}
.text-plan a:hover {
color: var(--et-orange);
}
/* Brand Section
======================================================*/
.section-brand {
padding-top: 6.6667vw;
padding-bottom: 7.2917vw;
background-color: var(--et-dark);
position: relative;
}
.section-brand::after {
content: "";
display: inline-block;
width: 38.125vw;
height: 40.2083vw;
background: transparent
url('data:image/svg+xml,')
no-repeat scroll center center;
background-size: cover;
position: absolute;
bottom: 9.0278vw;
left: 0;
}
.section-brand > svg {
position: absolute;
bottom: -34.7222vw;
left: 0vw;
pointer-events: none;
}
.section-brand .slider-brand {
margin: 4.5139vw 1.3889vw 0;
}
.section-brand .slider-brand img {
margin: 0 auto;
opacity: 1;
cursor: pointer;
width: 9.583333333333333vw;
height: 5vw;
object-fit: contain;
object-position: center;
}
.section-brand .slider-brand .slick-center img {
opacity: 1;
}
.section-brand .slider-testimonial {
max-width: 58.2639vw;
margin: 4.8611vw auto 0;
position: relative;
}
.section-brand .slider-testimonial::before {
content: "";
width: 2.7778vw;
height: 2.7778vw;
display: inline-block;
background: transparent
url('data:image/svg+xml,')
no-repeat scroll center center;
position: absolute;
left: -4.8611vw;
top: -0.1389vw;
background-size: cover;
}
.section-brand blockquote {
font-size: 1.1111vw;
color: var(--et-white);
line-height: 1.5;
text-align: center;
font-weight: 300;
position: relative;
margin: 0;
}
.brand-counter {
display: flex;
max-width: 49.4444vw;
color: var(--et-aquaLight);
margin: 0 auto;
padding: 5.0694vw 0vw 6.1806vw;
gap: 6.25vw;
}
.brand-counter .counter-block {
width: 100%;
flex: 1 1 auto;
}
.brand-counter .counter-block h2 {
font-size: 3.125vw;
line-height: 1;
color: var(--et-aquaLight);
margin-bottom: 1.0417vw;
}
.brand-counter .counter-block span {
font-size: 1.3889vw;
line-height: 1;
display: inline-block;
}
.brand-wrapper {
display: flex;
padding: 0vw 2.9861vw;
position: relative;
z-index: 1;
}
.brand-wrapper ul {
background: var(--et-dark);
flex: 0 0 auto;
width: 47.0833vw;
padding: 8.1944vw 9.5833vw 9.0278vw;
display: flex;
flex-direction: column;
font-size: 1.25vw;
font-weight: 700;
color: var(--et-white);
gap: 5.4167vw;
-webkit-border-radius: 1.3889vw;
-moz-border-radius: 1.3889vw;
border-radius: 1.3889vw;
}
.brand-wrapper ul li {
padding-left: 3.1944vw;
position: relative;
}
.brand-wrapper ul li::before {
content: "";
display: inline-block;
width: 2.7083vw;
height: 2.2222vw;
background: transparent
url('data:image/svg+xml,')
no-repeat scroll center center;
background-size: cover;
position: absolute;
top: -0.5556vw;
left: -0.6944vw;
}
.brand-data {
padding-left: 4.8611vw;
padding-top: 4.7222vw;
padding-right: 2.7778vw;
color: var(--et-white);
}
.brand-data .title {
margin-bottom: 2.5694vw;
}
.brand-data .title h2 {
line-height: 1.3;
position: relative;
}
.brand-wrapper .shape-orange {
top: 2.5vw;
right: -1.1111vw;
}
.brand-wrapper .shape-orange svg {
bottom: -1.25vw;
left: -1.5278vw;
width: 2.013888888888889vw;
height: 2.013888888888889vw;
}
.brand-data p {
font-size: 1.1111vw;
line-height: 1.46;
padding-left: 0.3472vw;
margin-bottom: 1.7361vw;
}
.brand-data .btn {
margin-top: 1.3889vw;
margin-left: 0.6944vw;
min-width: 13.1944vw;
}
/* Report Section
======================================================*/
.section-report {
padding-top: 6.4583vw;
padding-bottom: 10.1389vw;
background: transparent
url('data:image/svg+xml,')
no-repeat scroll center center;
background-size: cover;
width: 100%;
overflow: hidden;
}
.section-report .title h6 {
margin-bottom: 1.3889vw;
}
.section-report .slider-block {
margin-top: 4.0278vw;
max-width: 60vw;
padding: 0.8333vw 1.0417vw;
margin-bottom: 3.8194vw;
}
.section-report .slider-report {
width: 100%;
background: var(--et-white);
-webkit-border-radius: 1.7361vw;
-moz-border-radius: 1.7361vw;
border-radius: 1.7361vw;
}
.section-report .slider-report .slick-slide {
margin: 0vw 2.2222vw;
display: flex;
align-items: center;
gap: 3.75vw;
padding: 0.9028vw 1.0417vw 1.5278vw;
opacity: 0.6;
}
.section-report .slider-report .slick-slide.slick-active {
opacity: 1;
}
.section-report .slider-report .slick-list {
overflow: initial;
margin: 0vw -2.2222vw;
}
.section-report .slider-report figure {
padding-top: 0;
-webkit-border-radius: 1.7361vw;
-moz-border-radius: 1.7361vw;
border-radius: 1.7361vw;
overflow: hidden;
width: 29.0972vw;
height: 29.5833vw;
flex: 0 0 auto;
}
.slide-data h2 {
font-size: 2.0833vw;
font-weight: 700;
line-height: 1.3;
}
.slide-data h5 {
font-size: 1.3889vw;
color: var(--et-purple);
font-weight: 700;
line-height: 1.46;
margin-bottom: 1.7361vw;
}
.slide-data p {
font-size: 1.0417vw;
max-width: 19.375vw;
line-height: 1.55;
}
.section-report .slick-dots {
bottom: -4.5139vw;
}
.cta-block-wrapper {
display: inline-block;
width: 100%;
}
.cta-block {
max-width: 82.5vw;
margin-left: auto;
margin-right: auto;
padding-top: 8.5417vw;
display: flex;
flex-wrap: wrap;
position: relative;
}
.cta-block h2 {
font-weight: normal;
font-size: 3.125vw;
max-width: 42.9167vw;
line-height: 1.2;
}
.cta-block h2 strong {
color: var(--et-purple);
}
.cta-form {
flex: 1 1 auto;
padding-top: 1.875vw;
}
.cta-form label {
font-size: 1.25vw;
line-height: 1.46;
font-weight: 700;
color: var(--et-purple);
padding-left: 1.3889vw;
}
.from-group {
display: flex;
padding-top: 1.1111vw;
gap: 1.3889vw;
}
.from-group input {
appearance: none;
border: 0.1389vw solid var(--et-purple);
width: 100%;
font-size: 1.1806vw;
padding: 0.7639vw 0.8333vw 0.7639vw 4.4444vw;
-webkit-border-radius: 1.1111vw;
-moz-border-radius: 1.1111vw;
border-radius: 1.1111vw;
font-family: var(--et-font);
background: transparent
url('data:image/svg+xml,')
no-repeat scroll left 1.6667vw center;
background-size: 1.388888888888889vw 1.041666666666667vw;
}
.from-group .btn {
min-width: 11.1111vw;
}
.cta-block > span {
position: absolute;
color: #f57141;
font-weight: 700;
bottom: -3.680555555555556vw;
left: 21.5972vw;
}
.cta-block > span svg {
position: absolute;
bottom: 0.3472vw;
right: -9.2361vw;
width: 8.263888888888889vw;
height: 3.680555555555556vw;
}
/* Footer
======================================================*/
.app-footer {
background-color: var(--et-dark);
}
.footer-top {
display: flex;
flex-wrap: wrap;
padding: 4.1667vw 1.875vw 4.1667vw 4.0278vw;
gap: 7.1528vw;
}
.app-widget {
width: 7.2917vw;
flex: 0 0 auto;
}
.app-widget:first-child {
flex: 1 1 auto;
}
.app-widget .brand-logo {
display: inline-block;
margin-bottom: 1.875vw;
max-width: 26.9444vw;
}
.app-widget h6 {
color: var(--et-white);
font-size: 1.3889vw;
line-height: 1.5;
max-width: 20.8333vw;
font-weight: 300;
}
.app-widget h6 strong {
font-weight: 600;
}
.app-widget ul {
display: flex;
flex-direction: column;
gap: 1.4583vw;
padding-top: 1.1111vw;
}
.app-widget ul li a {
color: var(--et-white);
font-size: 0.9722vw;
}
.app-widget ul li a:hover {
color: var(--et-purple);
}
.footer-bottom {
display: flex;
justify-content: space-between;
font-size: 0.9028vw;
align-items: center;
line-height: 1.3194vw;
border-top: 0.0694vw solid rgba(255, 255, 255, 0.2);
padding: 2.0833vw 3.4722vw 5.2778vw 3.8889vw;
}
.footer-bottom span {
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.0278vw;
}
.footer-bottom ul {
display: flex;
gap: 2.9167vw;
padding: 0;
}
.footer-bottom ul li a {
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.0069vw;
}
.footer-bottom ul li a:hover {
color: var(--et-purple);
}
.shape {
font-size: 0.9028vw;
color: var(--et-white);
position: absolute;
font-weight: 500;
line-height: 1.3194vw;
padding: 0.0694vw 0.9722vw 0.2778vw;
-webkit-border-radius: 50rem;
-moz-border-radius: 50rem;
border-radius: 50rem;
}
.shape-orange {
background: var(--et-orange);
}
.shape-blue {
background: var(--et-blue);
}
.shape-aquaLight {
background: var(--et-aquaLight);
}
.shape svg {
position: absolute;
}
/* Hero Banner
======================================================*/
.section-hero {
background-color: var(--et-dark);
text-align: center;
padding: 4.31vw 0vw 8.19vw;
}
.section-hero h1 {
color: #fff;
font-weight: 300;
font-size: 3.82vw;
line-height: 1.3;
}
.section-faq {
position: relative;
padding-left: 28.47vw;
}
.section-faq .sidebar {
width: 28.47vw;
flex: 0 0 auto;
counter-reset: list-counter;
padding: 4.86vw 2.99vw 4.86vw 8.54vw;
position: absolute;
top: 0px;
left: 0;
}
.section-faq .sidebar ul {
display: flex;
flex-direction: column;
gap: 1.39vw;
}
.section-faq .sidebar ul li a {
font-size: 1.11vw;
display: inline-block;
color: #070c18;
padding: 0;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0;
}
.section-faq .sidebar ul li.active a {
font-weight: bold;
}
.section-faq .sidebar ul li a::before {
content: counter(list-counter) ". ";
counter-increment: list-counter;
width: 1.88vw;
display: inline-block;
}
.section-faq .article-content {
background-color: rgba(225, 236, 251, 0.8);
padding: 4.38vw 10.42vw 5.83vw 3.96vw;
}
.acc-wrap {
margin-bottom: 4.17vw;
}
.section-faq .article-content h2 {
font-size: 2.5vw;
line-height: 1.26;
font-weight: 300;
margin-bottom: 0.97vw;
}
.acc-main .acc {
padding: 1.81vw 0vw 1.39vw;
border-bottom: 1px solid rgba(80, 74, 74, 0.4);
margin-bottom: 0.35vw;
}
.acc-main .acc h3 {
font-size: 1.11vw;
line-height: 1.58;
font-weight: 400;
letter-spacing: 0.01vw;
padding-right: 6.25vw;
position: relative;
cursor: pointer;
}
.acc-main .acc h3::before {
content: "";
width: 1.67vw;
height: 1.67vw;
background: transparent
url('data:image/svg+xml,')
no-repeat scroll center center;
position: absolute;
top: 0.21vw;
right: 0vw;
margin: auto;
background-size: cover;
}
.acc-main .acc.active h3 {
font-weight: 700;
}
.acc-main .acc.active h3::before {
background-image: url('data:image/svg+xml,');
}
.acc-main .acc .acc-content {
display: none;
}
.acc-main .acc .acc-data {
padding-top: 1.53vw;
color: var(--et-gray-100);
font-size: 1.04vw;
line-height: 1.67vw;
}
.acc-main .acc .acc-data p {
font-size: 1.04vw;
line-height: 1.67vw;
text-align: left;
margin-bottom: 1.25vw;
}
.acc-main .acc .acc-data ol {
margin-bottom: 1.25vw;
}
.acc-main .acc .acc-data ol li {
list-style: number;
}
.acc-main .acc .acc-data ul {
padding-left: 1.81vw;
margin-bottom: 1.25vw;
}
.acc-main .acc .acc-data ul li {
margin-bottom: 0.49vw;
list-style: disc;
}
.acc-main .acc .acc-data ol li ul li {
list-style: circle;
}
.needsclick {
height: auto !important;
padding: 0 !important;
min-height: initial !important;
}
.needsclick input {
appearance: none !important;
border: 0.1389vw solid var(--et-purple) !important;
width: 100% !important;
font-size: 1.1806vw !important;
padding: 0.7639vw 0.8333vw 0.7639vw 4.4444vw !important;
-webkit-border-radius: 1.1111vw !important;
-moz-border-radius: 1.1111vw !important;
border-radius: 1.1111vw !important;
font-family: var(--et-font) !important;
background: transparent
url('data:image/svg+xml,')
no-repeat scroll left 1.6667vw center !important;
background-size: 1.388888888888889vw 1.041666666666667vw !important;
height: auto !important;
width: 100% !important;
letter-spacing: 0 !important;
}
.needsclick input::placeholder {
font-family: var(--et-font) !important;
font-size: 1.1806vw !important;
}
.needsclick button {
display: inline-block !important;
padding: 1.0417vw 2.2222vw !important;
font-family: "Poppins", sans-serif !important;
font-size: 1.1111vw !important;
font-weight: 500 !important;
line-height: 1 !important;
text-align: center !important;
text-decoration: none !important;
color: var(--et-btn-color) !important;
cursor: pointer !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
user-select: none !important;
border: 0.1389vw solid var(--et-btn-border-color) !important;
-webkit-border-radius: 50rem !important;
-moz-border-radius: 50rem !important;
border-radius: 50rem !important;
background-color: var(--et-btn-bg) !important;
margin-left: 1.3889vw;
letter-spacing: 0 !important;
}
.needsclick button {
--et-btn-color: var(--et-white) !important;
--et-btn-bg: var(--et-purple) !important;
--et-btn-border-color: var(--et-purple) !important;
--et-btn-hover-color: var(--et-white) !important;
--et-btn-hover-bg: #7c45c9 !important;
--et-btn-hover-border-color: #7c45c9 !important;
--et-btn-focus-shadow-rgb: 49, 132, 253 !important;
--et-btn-active-color: var(--et-white) !important;
--et-btn-active-bg: #7c45c9 !important;
--et-btn-active-border-color: #7c45c9 !important;
--et-btn-active-shadow: inset 0 0.2083vw 0.3472vw rgba(0, 0, 0, 0.125) !important;
--et-btn-disabled-color: var(--et-white) !important;
--et-btn-disabled-bg: var(--et-purple) !important;
--et-btn-disabled-border-color: var(--et-purple) !important;
}