/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('../fonts/sf-pro/stylesheet.css');

/* #Site Styles
================================================== */
:root {
	--width-base: 1375px;
	--width-base-sm: 1105px;
	--font-size-base: 16px;
	--line-height-base: 1.5;
	--font-family-base: 'Inter', sans-serif;
	--font-family-sf-pro: 'SF Pro Display', sans-serif;
	--font-family-icon: 'icomoon', sans-serif;
	--line-height-heading: 1.1;
	--bgcolor-blue: rgb(11 14 48 / 88%);
	--bgcolor-white: rgb(255 255 255 / 88%);
	--color-primary: #0a1841;
	--color-blue: #0b0e30;
	--color-gray: #fafafa;
	--color-black: #000;
	--color-white: #fff;
	--color-broken-white: #e8e8ed;
	--color-green: #70c5a4;
	--color-yellow: #fae5a2;
	--color-purple: #9a80f7;
	--color-sky-blue: #5f94f7;
	--color-dark-gray: #4b5262;
	--color-light-blue: #0645ff;
	--base-duration: all 0.3s;
	--font-size-h1: 60px;
	--font-size-h2: 48px;
	--font-size-h3: 40px;
	--font-size-h4: 30px;
	--font-size-h5: 25px;
	--font-size-h6: 20px;
}

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
html,
body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-primary); }
body { background: var(--color-white); }
body.active { background: var(--color-blue); color: var(--color-broken-white);}
img { display: block; max-width: 100%; height: auto; border: 0;  -moz-user-select: none; -webkit-user-select: none; user-select: none;}
input,
textarea { padding: 15px; width: 100%; height: 51px; font-family: var(--font-family-base); font-size: 16px; color: rgba(var(--color-primary), 0.8); border: 1px solid rgba(57, 107, 254, 0.5); border-radius: 8px; background-color: #f8f9fc; }
input::placeholder,
textarea::placeholder { color: rgba(var(--color-primary), 0.66); opacity: 0.66;}
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
	-webkit-appearance: none;
}
ul,
li { list-style: none; }
a { display: inline-block; text-decoration: none; }
body.active a { color: #5f94f7; }
body.active .button { color: #fff;}
:focus { outline: none; }
h1,
h2,
h3,
h4,
h5,
h6 { font-family: var(--font-family-base); font-weight: 700; line-height: var(--line-height-heading); }
h1 { font-size: var(--font-size-h1); font-weight: 900; }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

/* ### global classes ### */
.clear { visibility: hidden; clear: both; height: 0; line-height: 0; }
.centered { padding-right: calc((100% - var(--width-base)) / 2); padding-left: calc((100% - var(--width-base)) / 2); }
.centered-sm { padding-right: calc((100% - var(--width-base-sm)) / 2); padding-left: calc((100% - var(--width-base-sm)) / 2); }
.wrap { display: flex; flex-wrap: wrap; }
.button { padding: 13px 25px; position: relative; display: inline-block; font-size: 20px; font-weight: 700; text-align: center; color: var(--color-white); border-radius: 50px; background: linear-gradient(86.42deg, #0645ff 0%, #537efd 100%); box-shadow: 0 10px 30px 0 rgba(69, 82, 243, 0.3); transition: all .4s ease-in-out; background-size: 300% 100%; }
.button:hover { background: linear-gradient(to right, rgba(83, 126, 253, 1) 0%, rgba(6, 68, 255, 1) 100%);  background-position: 100% 0; transition: all .4s ease-in-out; }
.button-secondary { background: linear-gradient(49.43deg, #70c5a4 12.47%, #15b375 88.12%); box-shadow: 0 10px 30px 0 rgba(112, 197, 164, 0.3); }
.button-secondary:hover { background: linear-gradient(to right, rgba(21, 179, 116, 1) 0%, rgba(112, 197, 164, 1) 100%); background-position: 100% 0; transition: all .4s ease-in-out; }
.button-outline { padding: 11px 25px; color: #0645ff; border: 2px solid #0645ff; background: transparent; box-shadow: none; }
.button-outline:hover { color: var(--color-white); background: #0645ff; }
body.active .button-outline { color: var(--color-sky-blue); border: 2px solid var(--color-sky-blue); }
body.active .button-outline:hover { color: var(--color-broken-white); background: var(--color-sky-blue); }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; overflow: hidden; }

/* ### main container ### */
#mainCntr { width: 100%; }

/* ### header container ### */
#headerCntr { position: fixed; top: 0; left: 0; z-index: 9; width: 100%; }
#headerCntr .wrap { align-items: center; }
#headerCntr .logo { position: relative; z-index: 2; width: 25%; }
#headerCntr .logo img { max-width: 100%; }
#headerCntr .logo .dark-theme { display: none; }
#headerCntr .navigation { display: flex; align-items: center; justify-content: flex-end; width: 75%; }
#headerCntr .button { padding: 10px 15px; font-size: 16px; transition: none; }
#headerCntr .button.d-phone { display: none; }
#headerCntr.inner { background-color: var(--color-white); }
#headerCntr.sticky { background-color: var(--bgcolor-white); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -ms-backdrop-filter: blur(10px); box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.15); }
body.active #headerCntr .logo .dark-theme { display: block; }
body.active #headerCntr .logo .light-theme { display: none; }
body.active #headerCntr.sticky { background-color: var(--bgcolor-blue); }
body.active #headerCntr.inner { background-color: var(--color-blue); }

/* ### switch-btn ### */
.switch-btn { margin-top: -5px; margin-right: 47px; position: relative; z-index: 2; }
.switch-btn .switch-button { cursor: pointer; position: relative; width: 35px; height: 17px; border: 0; border-radius: 100px; background-color: rgba(128, 159, 184, 0.6); }
.switch-btn .switch-button.active:before { left: 16px; color: var(--color-primary); background-color: var(--color-white); content: '\e919'; }
.switch-btn .switch-button:before { position: absolute; top: -4px; left: -6px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-family: var(--font-family-icon); color: var(--color-white); border-radius: 50%; background-color: var(--color-primary); transition: var(--base-duration); content: '\e912'; cursor: pointer; }

/* ### menu box ### */
.menuBox { margin-right: 60px; }
.menuBox ul > li { margin-right: 27px; padding-top: 23px; padding-bottom: 21px; display: inline-block; }
.menuBox ul > li:hover .mega-menu { opacity: 1; visibility: visible; }
.menuBox ul > li:last-child { margin-right: 0; }
.menuBox ul > li > a { position: relative; font-family: var(--font-family-sf-pro); font-weight: 500; color: var(--color-primary); transition: var(--base-duration); }
.menuBox ul > li > a:hover { color: var(--color-light-blue); }
.menuBox ul > li.dropdown:after { margin-left: 7px; display: inline-block; font-family: var(--font-family-icon); font-size: 13px; vertical-align: middle; content: '\e901'; }
.menuBox ul > li > ul { padding: 10px; position: absolute; top: 100%; left: 0; opacity: 0; visibility: hidden; width: 110px; background-color: var(--color-white); transition: var(--base-duration); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); }
.menuBox ul > li > ul > li { margin-right: 0; padding: 0; display: block; }
.menuBox ul > li > ul > li > a { padding: 5px; display: block; }
body.active .menuBox:not(.mm-menu) ul > li > a { color: var(--color-broken-white); }
body.active .menuBox:not(.mm-menu) ul > li.dropdown:after { color: var(--color-broken-white); }
body.active .menuBox:not(.mm-menu) ul > li > a:hover { color: var(--color-light-blue); }
body.active .menuBox:not(.mm-menu) ul > li > ul { background-color: var(--color-blue); }

/* ### mega-menu ### */
.mega-menu { position: absolute; top: 100%; left: 50%; opacity: 0; visibility: hidden; width: 100%; transform: translateX(-50%); transition: var(--base-duration); max-width: 1105px; }
.mega-menu .wrap { margin: 0 auto; align-items: unset !important; border-radius: 20px; background-color: var(--color-white); box-shadow: 0 24px 30px 0 rgba(75, 120, 254, 0.1);  }
.mega-menu .left { padding: 50px 52px 45px 55px; width: 65%; }
.mega-menu .right { width: 35%; border-radius: 0 20px 20px 0; background-color: #f1f2ff; }
.mega-menu .form-box { padding: 94px 50px 40px; box-shadow: none; border-radius: 0; background: none; }
.mega-menu .holder { margin: 0 -15px 30px; display: flex; flex-wrap: wrap; }
.mega-menu .item { padding: 0 15px; width: 50%; }
.mega-menu .text { margin-bottom: 34px; padding-left: 47px; position: relative; }
.mega-menu h6 { margin-bottom: 2px; font-size: 18px; }
.mega-menu p { color: rgba(11, 14, 48, 0.8); }
.mega-menu .icon { position: absolute; top: 0; left: 0; font-size: 30px; color: var(--color-light-blue); }
.mega-menu strong { margin-bottom: 34px; display: block; font-family: var(--font-family-sf-pro); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: rgba(11, 14, 48, 0.8); }
.mega-menu ul { display: flex; }
.mega-menu li { margin-right: 15px !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 8px; background: #d7efc7; }
.mega-menu li.orange { background: linear-gradient(to right, rgba(236, 205, 193, 1) 0%, rgba(252, 240, 235, 1) 100%); }
.mega-menu li.sky-blue { background: linear-gradient(to right, rgba(196, 201, 245, 1) 0%, rgba(224, 227, 255, 1) 100%); }
.mega-menu li:last-child { margin-right: 0; }
.mega-menu .form-box h5 { color: var(--color-sky-blue); background: linear-gradient(86.42deg, #0645ff 0%, #537efd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.mega-menu .range-slider .range { background-color: #dce5ff; }
body.active .mega-menu .wrap { background-color: #192353; }
body.active .mega-menu .right { border-left: 1px solid var(--color-sky-blue); background-color: #192353; }
body.active .mega-menu strong { color: var(--color-broken-white); }
body.active .mega-menu h6 { color: var(--color-broken-white); }
body.active .mega-menu p { color: var(--color-broken-white); }
body.active .mega-menu .icon { color: var(--color-broken-white); }
body.active .mega-menu .form-box h5 { background: var(--color-broken-white); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body.active .mega-menu .form-box { border-top-right-radius: 20px; }

/* ### mobileMenu ### */
.mobileMenu { position: absolute; top: 25px; right: 25px; z-index: 15; display: none; width: 40px; height: 40px; transition: var(--base-duration); cursor: pointer; overflow: hidden; }
.mobileMenu span { position: absolute; top: 34%; left: 50%; display: block; width: 23px; height: 3px; text-indent: -9999px; border-radius: 5px; background: var(--color-primary); transform: translateX(-50%); transition: 0.2s; }
.mobileMenu span:before,
.mobileMenu span:after { position: absolute; left: 0; display: block; width: 100%; height: 3px; border-radius: 5px; background-color: var(--color-primary); transition-duration: 0.2s, 0.2s; content: ''; }
.mobileMenu span:before { top: -7px; }
.mobileMenu span:after { bottom: -7px; }
.mobileMenu.active span { background: none; }
.mobileMenu.active span:before,
.mobileMenu.active span:after { transition-delay: 0s, 0.2s; }
.mobileMenu.active span:before { top: 0; transform: rotate(45deg); }
.mobileMenu.active span:after { bottom: 0; transform: rotate(-45deg); }
body.active .mobileMenu span { background: var(--color-broken-white); }
body.active .mobileMenu span:before,
body.active .mobileMenu span:after { background: var(--color-broken-white); }
body.active .mobileMenu.active span { background: none; }

/* ### content container ### */
#contentCntr { width: 100%; }

/* ### hero box ### */
.heroBox { margin-bottom: 20px; padding-top: 90px; position: relative; }
.heroBox .wrap { align-items: center; }
.heroBox .content { padding-left: 30px; position: relative; z-index: 1; width: 40%; }
.heroBox .image { position: relative; z-index: 1; width: 60%; }
.heroBox h1 { margin-bottom: 20px; }
.heroBox h1 span { background: linear-gradient(90.76deg, #4753f2 0.82%, #d361d8 43.51%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.heroBox .sub-title { margin-bottom: 20px; max-width: 335px; font-size: 24px; color: rgba(11, 14, 48, 0.8); }
.heroBox .image .d-phone { display: none; }
.heroBox .d-dark-theme { display: none; }
.heroBox .x-layer { position: absolute; top: 0; left: 0; }
.heroBox .x-layer img { }
.d-phone .dark-theme { display: none; }
body.active .heroBox h1 { color: var(--color-broken-white); }
body.active .heroBox h1 span { background: linear-gradient(92.02deg, #f4b77e 2.08%, #f8d598 46.51%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body.active .heroBox .sub-title { color: var(--color-broken-white); }
body.active .heroBox .d-desktop { display: none; }
body.active .heroBox .d-dark-theme { display: block; }
body.active .heroBox .d-phone.dark-theme { display: none; }
body.active .heroBox .d-phone { display: none; }

/* ### logo box ### */
.logoBox { margin-bottom: 141px; }
.logoBox h6 { margin-bottom: 41px; font-size: 14px; text-align: center; text-transform: uppercase; color: rgba(var(--color-blue), 0.8); }
.logoBox .wrap { margin: 0 -5px; align-items: center; justify-content: space-between; }
.logoBox .logo { padding: 0 5px; max-width: 16.6%; }
.logoBox .logo:last-child img { margin-left: auto; }
.logoBox .d-dark-theme { display: none; }
body.active .logoBox h6 { color: var(--color-broken-white); }
body.active .logoBox .d-white-theme { display: none; }
body.active .logoBox .d-dark-theme { display: block; }

/* ### graph box ### */
.graphBox { padding-bottom: 95px; }
.graphBox .wrap { align-items: center; }
.graphBox .content { padding-top: 29px; padding-right: 30px; padding-bottom: 29px; width: 50%; }
.graphBox span { margin-bottom: 15px; display: block; font-size: 14px; font-weight: 700; background: linear-gradient(86.42deg, #0645ff 0%, #537efd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.graphBox h2 { margin-bottom: 15px; }
.graphBox h3 { margin-bottom: 15px; }
.graphBox .paragraph { margin-bottom: 16px; max-width: 440px; font-size: 20px; }
.graphBox .image { width: 50%; }
.graphBox .d-dark-theme { display: none; }
.graphBox ul { padding-top: 25px; }
.graphBox li { margin-bottom: 9px; padding-left: 37px; position: relative; }
.graphBox li strong { display: block; font-size: 20px; font-weight: 400; background: linear-gradient(86.42deg, #0645ff 0%, #537efd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.graphBox li:before { position: absolute; top: -4px; left: 0; font-family: var(--font-family-icon); font-size: 27px; color: #0645ff; content: '\e906'; }
.graphBox.inner { padding-top: 150px; padding-bottom: 75px; background: linear-gradient(180deg, rgba(250, 229, 162, 0.2) 0%, rgba(250, 229, 162, 0) 100%); }
.graphBox.inner-1 { padding-bottom: 120px; }
.graphBox.inner-1 .content,
.graphBox.inner .content { padding-right: 0; padding-left: 50px; order: 2; }
.graphBox.inner span { background: var(--color-green); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.graphBox.inner-1 .image,
.graphBox.inner .image { order: 1; }
.graphBox.inner-1 .card-graph,
.graphBox.inner .card-graph { padding-right: 0; padding-left: 25px; }
.graphBox.inner-1 .card-graph:before { right: auto; left: 0; }
.graphBox.inner .card-graph:before { right: auto; left: 0; background: var(--color-green); }
.graphBox.gap { padding-top: 174px; }
.graphBox.gap .content { padding-top: 0; }
.graphBox.gap .card-graph:before { width: 92%; }
.graphBox .autoBox { margin: 0 auto; max-width: 916px; }
body.active .graphBox .duo-image.d-white-theme { display: none; }
body.active .graphBox .duo-image.d-dark-theme { display: block; filter: drop-shadow(0px 18px 76px rgba(40, 61, 197, 0.11)) drop-shadow(0px 7.51997px 31.751px rgba(40, 61, 197, 0.079074)) drop-shadow(0px 4.02054px 16.9756px rgba(40, 61, 197, 0.0655718)) drop-shadow(0px 2.25388px 9.51638px rgba(40, 61, 197, 0.055)) drop-shadow(0px 1.19702px 5.05408px rgba(40, 61, 197, 0.0444282)) drop-shadow(0px 0.498106px 2.10311px rgba(40, 61, 197, 0.030926));}
body.active .graphBox.inner .card-graph:before { background: linear-gradient(87.58deg, #f4b77e 65.03%, #f8d598 99.53%); }
body.active .graphBox span { background: linear-gradient(87.58deg, #f4b77e 65.03%, #f8d598 99.53%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body.active .graphBox h2 { color: var(--color-broken-white); }
body.active .graphBox h3 { color: var(--color-broken-white); }
body.active .graphBox .paragraph { color: var(--color-broken-white); }
body.active .graphBox .button.button-secondary { background: linear-gradient(86.42deg, #0645ff 0%, #537efd 100%); box-shadow: 0 10px 30px 0 rgba(69, 82, 243, 0.3); }
body.active .graphBox li strong { background: var(--color-broken-white); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body.active .graphBox li:before { color: var(--color-broken-white); }
body.active .graphBox .image-wrap { position: relative; }
body.active .graphBox .image-wrap:before { content: "";  display: block;  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  z-index: 99;  width: 100%;  border-radius: 25px;  height: 100%; background: rgb(95 76 43); opacity: 0.125; }


/* ### card-graph ### */
.card-graph { padding-top: 28px; padding-right: 20px; position: relative; border-radius: 25px; filter: drop-shadow(0 15px 80px rgba(0, 0, 0, 0.07)); }
.card-graph:before { position: absolute; top: 0; right: 0; z-index: -1; width: 98%; height: 92%; border-radius: 30px; background: linear-gradient(86.42deg, #0645ff 0%, #537efd 100%); content: ''; }
.card-graph img { width: 100%; border-radius: 25px; }
.card-graph.green { padding-top: 0; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; }
.card-graph.green:before { width: 100%; height: 100%; background: var(--color-green); top: -28px; }
.card-graph.green img { margin-top: 0px; }
.card-graph.green .d-white-theme { display: inline-block; }
.card-graph.green .d-dark-theme { display: none; }
body.active .card-graph:before { background: linear-gradient(87.58deg, #f4b77e 65.03%, #f8d598 99.53%); }
body.active .card-graph.green .d-white-theme { display: none; }
body.active .card-graph.green .d-dark-theme { display: inline-block; }

/* ### faster box ### */
.fasterBox { margin-bottom: 99px; }
.fasterBox .wrap { margin: 0 -10px; }
.fasterBox .item { padding-right: 20px; padding-left: 63px; position: relative; }
.fasterBox .icon { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; font-size: 28px; color: var(--color-white); border-radius: 16px; background-color: var(--color-purple); }
.fasterBox .icon.blue { background-color: var(--color-sky-blue); }
.fasterBox .icon.green { background-color: var(--color-green); }
.fasterBox h6 { margin-bottom: 5px; }
.fasterBox .slick-dots { padding-top: 15px; display: flex; align-items: center; justify-content: center; }
.fasterBox .slick-dots li { margin-right: 7px; }
.fasterBox .slick-dots li:last-child { margin-right: 0; }
.fasterBox .slick-dots li button { width: 13px; height: 13px; font-size: 0; border: 0; border-radius: 50%; background-color: #cecfd6; cursor: pointer; }
.fasterBox .slick-dots li.slick-active button { background-color: var(--color-blue); }
body.active .fasterBox h6 { color: var(--color-broken-white); }
body.active .fasterBox p { color: var(--color-broken-white); }
body.active .fasterBox .slick-dots li button { background-color: #6d6e83; }
body.active .fasterBox .slick-dots li.slick-active button { background-color: var(--color-broken-white); }

/* ### auto box ### */
.autoBox { padding-top: 97px; }
.autoBox .wrap { margin: 0 -10px; }
.autoBox .item { padding: 0 10px; padding-left: 58px; position: relative; width: 20%; font-family: var(--font-family-sf-pro); font-size: 12px; line-height: 1.35; text-transform: uppercase; }
.autoBox .icon { position: absolute; top: -5px; left: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 22px; color: var(--color-white)!important; border-radius: 10px; background-color: var(--color-green); }
body.active .autoBox .text { color: var(--color-broken-white); }
body.active .autoBox .icon { background: linear-gradient(86.42deg, #0645ff 0%, #537efd 100%); }

/* ### review box ### */
.reviewBox { padding-top: 105px; padding-bottom: 100px; background: linear-gradient(180deg, rgba(116, 78, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); }
.reviewBox .text { margin: 0 auto 40px; max-width: 656px; text-align: center; }
.reviewBox h2 { margin-bottom: 20px; color: var(--color-white); }
.reviewBox .swiper { width: 35%; overflow: visible; }
.reviewBox .text p { font-size: 24px; font-weight: 500; color: var(--color-white); }
.reviewBox .swiper-slide.swiper-slide-active { opacity: 1; box-shadow: 0 27px 30px 0 rgba(0, 0, 0, 0.07); border-radius: 20px; }
.reviewBox .swiper-slide.swiper-slide-active .card-review h6 { font-size: 18px; }
.reviewBox .swiper-slide.swiper-slide-active .card-review p { font-size: 18px; }

/* ### manage box ### */
.card-review { padding: 40px 45px 30px; border-radius: 20px; background-color: var(--color-white); }
.card-review ul { margin-bottom: 18px; display: flex; }
.card-review li { margin-right: 5px; font-size: 20px; color: #f59e0b; }
.card-review li:last-child { margin-right: 0; }
.card-review h6 { margin-bottom: 3px; font-size: 16px; }
.card-review p { margin-bottom: 20px; font-size: 16px; }
.card-review .total { margin-bottom: 25px; display: block; font-size: 16px; color: var(--color-primary); }
.card-review .client { display: flex; align-items: center; }
.card-review strong { padding-left: 7px; display: block; font-size: 14px; }
.card-review strong span { display: block; font-weight: 400; }
.card-review .client img { width: 38px; height: 38px; }
body.active .card-review { background-color: var(--color-blue); }
body.active .card-review h6 { color: var(--color-broken-white); }
body.active .card-review p { color: var(--color-broken-white); }
body.active .card-review .total { color: var(--color-broken-white); }
body.active .card-review strong { color: var(--color-broken-white); }

/* ### manage box ### */
.manageBox { margin-bottom: 150px; padding-top: 50px; }
.manageBox .head { margin: 0 auto 70px; max-width: 816px; text-align: center; }
.manageBox h2 { margin-bottom: 15px; background: linear-gradient(271.35deg, #70c5a4 -12.66%, #000 54.15%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.manageBox .head .button { display: none; }
.manageBox .wrap { margin: 0 -15px; }
.manageBox .item { margin-bottom: 20px; padding: 0 15px; width: 33.3%; height: 100%; }
.manageBox .image { padding: 30px 25px 0; position: relative; display: flex; align-items: flex-end; min-height: 236px; border-radius: 15px; background-color: var(--color-yellow); overflow: hidden; }
.manageBox .image.blue { background-color: #5f94f7; }
.manageBox .image.green { background-color: var(--color-green); }
.manageBox .image.purple { background-color: var(--color-purple); }
.manageBox .image .image-wrap { position: relative}
.manageBox .image .manage-img { position: relative; z-index: 1; width: 100%; }
.manageBox .image .manage-img.dark-theme { display: none; }
.manageBox .text { padding: 30px 15px 10px; }
.manageBox h6 { margin-bottom: 4px; }
.manageBox .lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.manageBox .lines img { height: 100%; }
.manageBox .d-phone { padding: 0 20px; display: none; }
.manageBox .view-more { font-family: var(--font-family-icon); font-size: 18px; font-weight: bold; background: linear-gradient(86.42deg, #0645ff 0%, #537efd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.manageBox .view-more i { display: inline-block; font-size: 14px; vertical-align: middle; }
.manageBox .wrap .button { margin: 30px auto;}
body.active .manageBox h2 { background: linear-gradient(271.35deg, #70c5a4 -12.66%, #fff 54.15%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body.active .manageBox h6 { color: var(--color-broken-white); }
body.active .manageBox p { color: var(--color-broken-white); }
body.active .manageBox .image .image-wrap:before { content: "";  display: block;  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  z-index: 99;  width: 100%;  border-radius: 22px 22px 0 0;  height: 100%; opacity: 0.125; background: rgb(11 14 48); }
body.active .manageBox .image .manage-img { display: block; }
/* body.active .manageBox .image .manage-img.dark-theme { display: none; }
body.active .manageBox .view-more { background: var(--color-broken-white); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
*/
/* ### faq box ### */
.faqBox { margin-bottom: 156px; padding-top: 26px; }
.faqBox .box { margin: 0 auto; max-width: 737px; }
.faqBox .head { margin-bottom: 56px; text-align: center; }
.faqBox .head h2 { margin-bottom: 20px; }
.faqBox .head p { font-size: 20px; color: rgba(var(--color-blue), 0.8); }
body.active .faqBox h2 { color: var(--color-broken-white); }
body.active .faqBox p { color: var(--color-broken-white); }

/* ### copy box ### */
.card-accordion { margin-bottom: 27px; padding-bottom: 13px; position: relative; border: 1px solid #e4e4e7; border-radius: 10px; background-color: var(--color-white); }
.card-accordion.active { box-shadow: 0 4px 4px rgba(35, 40, 105, 0.08); }
.card-accordion:before { position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; visibility: hidden; width: 100%; height: 100%; border-radius: 15px; background: linear-gradient(90deg, #27eea0 -2.83%, #44b0ff 21.95%, #8b44ff 48.92%, #f64 75.86%, #f8e3a1 102.87%); transition: var(--base-duration); content: ''; filter: blur(32.251px); }
.card-accordion.active:before { opacity: 1; visibility: visible; }
.card-accordion .accordion-title { padding: 22px 40px 12px 32px; position: relative; font-size: 20px; font-weight: 700; cursor: pointer; }
.card-accordion .accordion-title:before { position: absolute; top: 20px; right: 20px; font-family: var(--font-family-icon); transition: var(--base-duration); content: '\e917'; }
.card-accordion.active .accordion-title:before { content: '\e910'; }
.card-accordion .accordion-content { padding: 0 32px 0px; display: none; max-width: 100%; color: rgba(var(--color-blue), 0.8); }
.card-accordion .accordion-content p { margin-bottom: 12px; }
.card-accordion .accordion-content ul { margin-left: 20px; margin-bottom: 12px;}
.card-accordion .accordion-content ul li {list-style: decimal; margin-bottom: 8px;}
body.active .card-accordion { background-color: var(--color-blue); }
body.active .card-accordion .accordion-title { color: var(--color-broken-white); }
body.active .card-accordion .accordion-content { color: var(--color-broken-white); }

/* ### plan box ### */
.planBox { margin-bottom: 71px; padding-top: 145px; text-align: center; }
.planBox .text { margin: 0 auto; max-width: 850px; }
.planBox h2 { margin-bottom: 26px; }
.planBox .btn { margin-bottom: 35px; }
.planBox .btn .button { font-size: 16px; }
.planBox .range-slider { margin: 0 auto; max-width: 604px; }
body.active .planBox h2 { color: var(--color-broken-white); }

/* ### range-slider ### */
.range-slider .order { margin-bottom: 8px; display: block; font-size: 24px; color: rgba(var(--color-primary), 0.8); }
.range-slider .order-subtitle {opacity: 0.66; margin-bottom: 12px; display: block;}
.range-slider .js-result { display: block; font-size: 30px; font-weight: 800; background: linear-gradient(86.42deg, #0645ff 0%, #537efd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.range-slider .range { padding: 0; width: 100%; height: 12px; border: 0; border-radius: 20px; background-color: #f2f5fe; -webkit-appearance: none; }
.range-slider .range::-webkit-slider-thumb { width: 35px; height: 24px; border-radius: 70px; background: linear-gradient(86.42deg, #0645ff 0%, #537efd 100%); -webkit-appearance: none; cursor: pointer; }
.range-slider .day { margin-bottom: 38px; display: block; color: rgba(10, 24, 65, 0.6); }
.range-slider .subheader {margin: 15px 0;  display: block;  font-size: 14px;color: var(--color-light-blue);}
.range-slider .boxed { background: #f2f5fe; border-radius: 4px; padding: 4px 8px;}
.range-slider .calculated { display: block; margin-top: 12px;}
body.active .range-slider .order { color: var(--color-broken-white); }
body.active .range-slider .day { color: var(--color-broken-white); }
body.active .range-slider .range { background: #1b2272; }
body.active .range-slider .boxed { background: #1b2272; }

/* ### start box ### */
.startBox { margin-bottom: 200px; }
.startBox .slick-list { margin: 0 -250px; overflow: visible; }
.startBox .slide { padding: 0 10px; }
.startBox .slick-center { transform: translateY(0); }
.startBox .slick-center .card-start { padding: 73px 35px; }

/* ### plan cards new style ### */
.plan-cards {
    display: flex;
    align-items: stretch; /* Makes all children same height */
    gap: 20px; /* Adjust spacing between cards as needed */
	flex-wrap: wrap;
}
.slide {
    flex: 1; /* All slides get equal width */
    min-width: 0; /* Allows text to wrap properly */
	display: flex; /* Add this */
    flex-direction: column; /* Add this */
}
.card-start {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.card-start .button {
    margin-top: auto;
}
.startBox {
    padding: 0 100px;
}

/* ### card-start ### */
.card-start { padding: 49px 35px; display: flex; flex-direction: column; border-radius: 30px; background: linear-gradient(86.42deg, #0645ff 0%, #537efd 100%); }
.card-start h6 { margin-bottom: 7px; font-weight: 600; color: var(--color-white); }
.card-start h6 strong { font-weight: 900; }
.card-start p { margin-bottom: 28px; line-height: 1.3; color: var(--color-white); }
.card-start p span { display: block; }
.card-start p strong { font-weight: 600; }
.card-start .price { margin-bottom: 32px; display: block; font-size: 45px; font-weight: 600; line-height: 1; color: var(--color-white); height: 100px; }
.card-start .price span { font-size: 24px; font-weight: 400; }
.card-start ul { margin-bottom: 30px; }
.card-start li { margin-bottom: 13px; padding-left: 40px; position: relative; color: var(--color-white); }
.card-start li i { position: absolute; top: -1px; left: 0; font-size: 24px; }
.card-start li strong { font-weight: 600; }
.card-start.orange { background: linear-gradient(86.42deg, #f28016 0%, #df9e3c 100%); }
.card-start.purple { background: linear-gradient(30.15deg, #987ff4 20.71%, #bdabff 104.38%); }
.card-start.green { background: linear-gradient(31.15deg, #73c4a5 51.56%, #90efcb 118.71%); }
.card-start.red { background: #e83a3a; }
.card-start .button { padding: 10px 15px; display: block; width: 100%; font-size: 16px; text-align: center; background: var(--color-white); box-shadow: 0 10px 30px 0 rgba(69, 82, 243, 0.5)}
.card-start .button .trial { background: linear-gradient(86.42deg, #0645ff 0%, #537efd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.card-start.orange .button { box-shadow: 0 10px 30px 0 rgb(223 158 60 / 50%); }
.card-start.purple .button { box-shadow: 0 10px 30px 0 rgb(189 171 255 / 50%); }
.card-start.green .button { box-shadow: 0 10px 30px 0 rgb(144 239 203 / 50%); }
.card-start.red .button { box-shadow: 0 10px 30px 0 rgb(232 58 58 / 50%); }
.card-start.orange .button .trial { background: linear-gradient(86.42deg, #f28016 0%, #df9e3c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.card-start.purple .button .trial { background: linear-gradient(30.15deg, #987ff4 20.71%, #bdabff 104.38%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.card-start.green .button .trial { background: linear-gradient(31.15deg, #73c4a5 51.56%, #90efcb 118.71%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.card-start.red .button .trial { background: #e83a3a; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ### introBox box ### */
.introBox .content { margin: 0 auto 63px; max-width: 583px; text-align: center; }
.introBox strong { margin-bottom: 15px; display: block; font-size: 14px; color: var(--color-light-blue); }
.introBox h2 { margin-bottom: 15px; }
.introBox span { margin-bottom: 17px; display: block; font-size: 20px; color: rgba(11, 14, 48, 0.8); }
.introBox ul { display: flex; justify-content: center; }
.introBox ul li { margin-right: 15px; }
.introBox ul li:last-child { margin-right: 0; }
body.active .introBox h2 { color: var(--color-broken-white); }
body.active .introBox span { color: var(--color-broken-white); }
body.active .introBox strong { color: var(--color-sky-blue); }

/* ### grow box ### */
.growBox { padding-bottom: 120px; }
.growBox ul { display: flex; justify-content: center; margin: 0 auto}
.growBox ul li { margin-right: 15px; }
.growBox ul li:last-child { margin-right: 0; }
.growBox .box { margin: 0 auto; max-width: 950px; }
.growBox .wrap { margin: 0 -30px; }
.growBox .holder { padding: 0 60px; width: 50%; }
.growBox .item { margin-bottom: 62px; padding-left: 66px; position: relative; }
.growBox .item h6 { margin-bottom: 5px; }
.growBox .item p { line-height: 1.35; }
.growBox .icon { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; font-size: 28px; color: var(--color-white); border-radius: 16px; background-color: var(--color-sky-blue); }
.growBox .icon-watch { transform: scaleX(-1); }
.growBox .icon.yellow { color: var(--color-blue); background-color: var(--color-yellow); }
.growBox .icon.green { background-color: var(--color-green); }
.growBox .icon.purple { background-color: var(--color-purple); }
body.active .growBox .item h6 { color: var(--color-broken-white); }
body.active .growBox .item p { color: var(--color-broken-white); }

/* ### boost box ### */
.boostBox { padding-top: 111px; padding-bottom: 158px; position: relative; background: linear-gradient(181.28deg, rgba(6, 69, 255, 0.8) 1.12%, rgba(83, 126, 253, 0) 99.01%); }
.boostBox .text { margin-bottom: 88px; margin-left: auto; position: relative; z-index: 2; max-width: 445px; }
.boostBox h3 { margin-bottom: 15px; color: var(--color-white); }
.boostBox p { margin-bottom: 15px; font-size: 20px; color: var(--color-white); }
.boostBox .button-outline { font-size: 16px; color: var(--color-white); border: 2px solid var(--color-white); }
.boostBox .button-outline:hover { color: var(--color-blue); background-color: var(--color-white); }
.boostBox .box { color: var(--color-primary); padding: 24px 25px 24px 80px; position: relative; border-radius: 20px; background-color: var(--color-white); box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.2); }
.boostBox .js-boost-slider { padding-bottom: 20px; }
.boostBox .js-boost-slider .slick-list { margin: 0 -150px; }
.boostBox .js-boost-slider-1 { padding-bottom: 0; z-index: 2; }
.boostBox .js-boost-slider-1 .slick-list { margin: 0 -150px; }
.boostBox .slide { padding: 0 11px 20px; }
.boostBox .icon { position: absolute; top: 50%; left: 25px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 24px; color: var(--color-white); border-radius: 8px; background-color: var(--color-sky-blue); transform: translateY(-50%); }
.boostBox .icon.yellow { color: var(--color-primary); background-color: var(--color-yellow); }
.boostBox .icon.green { background-color: var(--color-green); }
.boostBox .icon.purple { background-color: var(--color-purple); }
.boostBox .image { margin-left: -572px; position: absolute; top: 98px; left: 50%; z-index: 1; border-radius: 30px; }
.boostBox .image img { border-radius: 30px; }
body.active .boostBox .button-outline { font-size: 16px; color: var(--color-broken-white); border: 2px solid var(--color-broken-white); }
body.active .boostBox .button-outline:hover { color: var(--color-blue); background-color: var(--color-broken-white); }

/* ### request box ### */
.requestBox { padding-top: 108px; padding-bottom: 188px; background: linear-gradient(180deg, rgba(250, 229, 162, 0.2) 0%, rgba(250, 229, 162, 0) 100%); }
.requestBox .content { padding-right: 30px; width: 50%; }
.requestBox .form { padding-top: 30px; padding-right: 30px; position: relative; width: 50%; }
.requestBox .form:after { position: absolute; top: 0; right: 0; width: 96%; height: 93%; border-radius: 25px; background-color: var(--color-purple); content: ''; }
.requestBox h2 { margin-bottom: 52px; }
.requestBox .paragraph { margin-bottom: 85px; font-size: 20px; color: rgba(var(--color-primary, 0.8)); }
.requestBox .paragraph span { font-size: 16px; color: var(--color-dark-gray);}
.requestBox .box { padding: 20px 10px 26px 20px; position: relative; max-width: 385px; border-radius: 25px; overflow: hidden; background-color: var(--color-purple); transform: rotate(-4.6deg); }
.requestBox .box:after { position: absolute; top: 142px; right: -265px; width: 543px; height: 633px; border: 6px solid rgba(255, 255, 255, 0.3); border-radius: 50%; content: ''; }
.requestBox ul { margin-bottom: 20px; position: relative; z-index: 1; display: flex; }
.requestBox li { margin-right: 5px; color: #fde047; }
.requestBox p { margin-bottom: 18px; position: relative; z-index: 1; }
.requestBox .box p {color: var(--color-white);}
.requestBox .holder { position: relative; z-index: 1; display: flex; align-items: center; }
.requestBox .holder img { border-radius: 50%; }
.requestBox .holder strong { padding-left: 12px; display: block; font-size: 14px; color: var(--color-white); }
.requestBox .holder span { display: block; font-weight: 400; }
.requestBox .sub { margin-bottom: 15px;display: block;  font-size: 14px;  font-weight: 700;  background: linear-gradient(86.42deg, #0645ff 0%, #537efd 100%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;}
.requestDemo .requestBox {padding-top: 168px!important;}
.contactBox .paragraph {  margin-bottom: 65px;}
.contactBox { padding-top: 168px!important; }
body.active .requestBox .paragraph span { color: var(--color-broken-white);}
body.active .requestBox { background: var(--color-blue); }
body.active .requestBox h2 { color: var(--color-broken-white); }
body.active .requestBox .paragraph { color: var(--color-broken-white); }
body.active .requestBox p { color: var(--color-broken-white); }
body.active .requestBox .box { background-color: var(--color-light-blue); }
body.active .requestBox .form:after { background-color: #f4b77e; }

/* ### form-box ### */
.form-box { padding: 55px 50px; position: relative; z-index: 1; border-radius: 25px; background-color: var(--color-white); box-shadow: 0 100px 80px rgba(83, 126, 253, 0.05), 0 41.778px 33.422px rgba(83, 126, 253, 0.036); }
.form-box h5 { margin-bottom: 30px; font-size: 24px; }
.form-box .form-field { margin-bottom: 9px; }
.form-box .form-field-check { margin: 9px 0; display: flex; align-items: center; gap: 12px;}
.form-box .form-field-check label {opacity:0.8}
.form-box .range-slider { padding-top: 16px; padding-bottom: 25px; }
.form-box .range-slider .order { font-size: 19px; }
.form-box .range-slider .day { margin-bottom: 20px; }
.form-box .button { font-size: 16px; border: 0; }
.form-box label {cursor: pointer; }
.form-box .radio-wrapper { cursor: pointer; display: flex; gap: 15px 20px; margin-bottom: 20px; flex-wrap: wrap;}
.form-box .radio-option {display: flex; align-items: center; gap: 8px}
.form-box .form-radio { cursor: pointer;  width: 21px; height: 21px;}
.form-box textarea { height: auto; resize: none;}
body.active .form-box { background-color: #192354; }
body.active .form-box h5 { color: var(--color-broken-white); }
body.active .form-box .range-slider .js-result { background: var(--color-sky-blue); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
body.active .form-box .form-input, body.active .form-box textarea { color: var(--color-broken-white); background-color: var(--color-blue); }
body.active .form-box input::placeholder { color: var(--color-broken-white); }
body.active .form-box .range-slider .range { border: 1px solid rgba(57, 107, 254, 0.5); background-color: var(--color-blue); }
body.active .form-box .range-slider .range::-webkit-slider-thumb { background: var(--color-sky-blue); }

/* ### banner box ### */
.bannerBox { padding-top: 100px; padding-bottom: 0; position: relative; background: linear-gradient(78.32deg, #2c61fe 0.8%, rgba(255, 255, 255, 0) 168.59%, rgba(46, 99, 254, 0) 168.59%); overflow: hidden; }
.bannerBox .wrap { align-items: center; }
.bannerBox .content { position: relative; z-index: 1; width: 40%; }
.bannerBox .image { margin-right: -66px; padding-left: 30px; position: relative; z-index: 1; width: calc(60% + 66px); }
.bannerBox .image img { margin-left: auto; }
.bannerBox h1 { margin-bottom: 30px; font-size: 48px; color: var(--color-white); }
.bannerBox .paragraph { margin-bottom: 27px; font-size: 20px; color: var(--color-white); }
.bannerBox .button-outline { font-size: 16px; color: var(--color-light-blue); border: 2px solid var(--color-white); background: var(--color-white); }
.bannerBox .button-outline:hover { color: var(--color-white); border: 2px solid var(--color-light-blue); background: var(--color-light-blue); }
.bannerBox .image .dark-theme { display: none; }
.bannerBox .image-x { position: absolute; bottom:0; left: 0; height:100%; }
.bannerBox .image-x img { height:100%; }
.bannerBox .image .light-theme { transition: all 0.3s ease}
body.active .bannerBox { background: linear-gradient(0deg, rgba(0, 55, 216, 0.6) -13.41%, rgba(11, 14, 48, 0) 80.33%); }
body.active .bannerBox .image .light-theme { display: block; opacity: 0.875; transition: all 0.3s ease }
body.active .bannerBox .image .dark-theme { display: block; }
body.active .bannerBox .button-outline { color: var(--color-broken-white); border: 2px solid var(--color-light-blue); background: var(--color-light-blue); }
body.active .bannerBox .button-outline:hover { color: var(--color-light-blue); border: 2px solid var(--color-broken-white); background: var(--color-broken-white); }

/* ### video box ### */
.videoBox { margin-bottom: 200px; padding-top: 105px; }
.videoBox .text { padding-top: 50px; padding-right: 30px; width: 39%; }
.videoBox .item { margin-bottom: 60px; padding-right: 20px; padding-left: 63px; position: relative; }
.videoBox .item:last-child { margin-bottom: 0; }
.videoBox .icon { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; font-size: 28px; color: var(--color-white); border-radius: 16px; background-color: var(--color-purple); }
.videoBox .icon.blue { background-color: var(--color-sky-blue); }
.videoBox .icon.green { background-color: var(--color-green); }
.videoBox h6 { margin-bottom: 5px; }
.videoBox .image { width: 61%; }
.videoBox .led-img { position: relative; }
.videoBox .dark-theme { display: none; }
.videoBox .popup-youtube { position: absolute; top: 50%; left: 50%; font-size: 125px; color: var(--color-light-blue); transform: translate(-50%, -65%); }
body.active .videoBox .light-theme { display: none; }
body.active .videoBox .dark-theme { display: block; }
body.active .videoBox h6 { color: var(--color-broken-white); }
body.active .videoBox p { color: var(--color-broken-white); }

/* ### story box ### */
.storyBox { margin-bottom: 100px; padding-top: 120px; }
.storyBox .introBox strong { background: linear-gradient(121.52deg, #70c5a4 3.33%, #35c08a 98.12%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.storyBox .holder { margin: 0 auto; max-width: 920px; }
.storyBox .wrap { margin: 0 -12px; }
.storyBox .item { padding: 0 12px; width: 50%; }

/* ### card-story ### */
.card-story { padding: 45px 40px; position: relative; height: 100%; border-radius: 30px; background: linear-gradient(221.74deg, #f4ac80 -20.97%, #db7d49 100%); overflow: hidden; }
.card-story .date { margin-bottom: 20px; display: block; font-size: 20px; color: var(--color-white); }
.card-story h2 { margin-bottom: 20px; color: var(--color-white); }
.card-story .paragraph { margin-bottom: 10px; max-width: 304px; line-height: 1.35; color: var(--color-white); }
.card-story .text .button { font-size: 16px; color: #f4ac80; background: var(--color-white); box-shadow: none; }
.card-story .image { position: absolute; bottom: 0; left: 0; width: 100%; }
.card-story .image img { width: 100%; border-radius: 0 0 30px 30px; }
.card-story .text { position: relative; z-index: 1; }
.card-story.green { background: linear-gradient(121.52deg, #70c5a4 3.33%, #35c08a 98.12%); }
.card-story.green .button { color: #70c5a4; }

/* ### footer container ### */
#footerCntr { width: 100%; }

/* ### footer box ### */
.footerBox { padding-top: 64px; padding-bottom: 25px; background-color: var(--color-gray); }
.footerBox .logo { margin-bottom: 35px; }
.footerBox .logo img { max-width: 105px; }
.footerBox .dark-theme { display: none; }
.footerBox .wrap { margin: 0 -5px 35px; }
.footerBox .item { padding: 0 5px; width: 20%; }
.footerBox .title { margin-bottom: 25px; font-size: 16px; font-weight: 700; }
.footerBox li { margin-bottom: 9px; }
.footerBox li a { font-weight: 500; color: rgba(var(--color-blue), 0.8); transition: var(--base-duration); }
.footerBox li a:hover { color: var(--color-light-blue); }
body.active .footerBox { background-color: var(--color-blue); }
body.active .footerBox .title { color: var(--color-broken-white); }
body.active .footerBox li a { color: var(--color-broken-white); }
body.active .footerBox li a:hover { color: var(--color-light-blue); }
body.active .footerBox .light-theme { display: none; }
body.active .footerBox .dark-theme { display: block; }

/* ### copyright box ### */
.copyright { padding-top: 30px; text-align: center; border-top: 1px solid #9ea4b2; }
.copyright p { font-weight: 500; color: #4b5262; }
body.active .copyright p { color: var(--color-broken-white); }

/* #Media Queries
================================================== */

@media only screen and (max-width: 1405px) {
	h1 { font-size: 50px; }
	.centered { padding-right: 15px; padding-left: 15px; }
	.startBox .slick-center .card-start { padding: 58px 30px; }
	.card-start { padding: 35px 30px; }
	.card-start .price { font-size: 34px; }
	.card-start .price span { font-size: 18px; }
	.card-start p { font-size: 14px; }
	.card-start li { font-size: 14px; }
	.boostBox .js-boost-slider.second .slick-list { margin: 0 -300px 0 15px; }
}

@media only screen and (max-width: 1199px) {
	h1 { font-size: 40px; }
	.centered-sm { padding-right: 15px; padding-left: 15px; }
	.heroBox .x-layer img { max-width: 450px; }
	.graphBox.inner .content { padding-left: 30px; }
	.manageBox .image { min-height: 202px; }
	.card-start p { font-size: 16px; }
	.card-start li { font-size: 16px; }
	.boostBox .image { margin-left: 0; left: 15px; width: 50%; }
	.form-box { padding: 55px 35px; }
	.form-box .range-slider .order { font-size: 16px; }
	.mega-menu { padding-right: 15px; padding-left: 15px; max-width: 100%; }
	.mega-menu .holder { margin: 0 -15px; }
	.mega-menu .left { padding: 40px 30px; }
	.mega-menu .form-box { padding: 50px 30px 40px; }
	.bannerBox h1 { font-size: 40px; }
	.videoBox .item { padding-right: 0; }
	.storyBox { padding-top: 80px; }
}

@media only screen and (max-width: 991px) {
	h1 { font-size: 34px; }
	h2 { font-size: 40px; }
	h3 { font-size: 32px; }
	.switch-btn { margin-right: 30px; }
	.menuBox { margin-right: 30px; }
	.menuBox ul > li { margin-right: 15px; }
	.mega-menu .holder { margin: 0 -15px; }
	.mega-menu p { font-size: 14px; }
	.mega-menu .text { margin-bottom: 25px; }
	.mega-menu .form-box { padding: 40px 20px; }
	.mega-menu .left { padding: 40px 20px; }
	.mega-menu h6 { font-size: 16px; }
	.mega-menu strong { margin-bottom: 25px; }
	.heroBox .content { padding-left: 0; }
	.heroBox .sub-title { font-size: 20px; }
	.heroBox .x-layer img { max-width: 340px; }
	.autoBox .item { padding-left: 50px; }
	.manageBox { margin-bottom: 80px; }
	.reviewBox .swiper { width: 50%; }
	.startBox { margin-bottom: 100px; }
	.boostBox { padding-top: 80px; padding-bottom: 100px; }
	.boostBox .image { padding: 30px 15px 0; position: unset; width: 100%; }
	.boostBox .image img { width: 100%; }
	.boostBox .text { margin-bottom: 40px; max-width: 100%; }
	.requestBox { padding-bottom: 100px; }
	.bannerBox h1 { font-size: 33px; }
	.bannerBox .image { margin-right: -50px; width: calc(60% + 50px); }
	.videoBox { margin-bottom: 120px; }
	.videoBox .text { padding-top: 10px; }
	.videoBox .item { margin-bottom: 30px; }
	.footerBox li a { font-size: 14px; }
	
	.startBox { padding: 0 20px; }
	.slide {min-width: unset;}
}
@media only screen and (min-width: 768px) {
	.mega-menu { display: block !important; height: auto !important; }
	.footerBox ul { display: block !important; height: auto !important; }
}

@media only screen and (max-width: 767px) {
	h1 { font-size: 48px; }
	.switch-btn { margin-right: 0; }
	#headerCntr.active:before { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: var(--color-white); content: ''; }
	body.active #headerCntr.active:before { background-color: var(--color-blue); }
	#headerCntr .wrap { padding-right: 16px; padding-left: 15px; }
	#headerCntr { padding-top: 19px; padding-bottom: 18px; }
	#headerCntr .button.d-desktop { display: none; }
	#headerCntr .button.d-phone { display: block; }
	#headerCntr .logo { width: 50%; }
	#headerCntr .logo img { max-width: 120px; }
	#headerCntr .navigation { padding-right: 50px; padding-bottom: 1px; width: 50%; }
	#headerCntr .mobileMenu { display: block; }
	#headerCntr.inner .menuBox ul > li { padding-bottom: 0; }
	.menuBox { margin-right: 0; padding: 120px 30px 50px; position: fixed; top: 0; left: 0; opacity: 0; visibility: hidden; width: 100%; height: 100vh; background-color: var(--color-white); transition: var(--base-duration); overflow-y: scroll; }
	.menuBox.active { opacity: 1; visibility: visible; }
	.menuBox ul { margin-bottom: 40px; }
	.menuBox ul > li { margin-right: 0; margin-bottom: 15px; padding: 0; display: block; }
	.menuBox ul > li.dropdown:after { display: none; }
	.menuBox ul > li.dropdown > a:after { position: absolute; top: 3px; right: -20px; font-family: var(--font-family-icon); font-size: 13px; content: '\e901'; }
	body.active .menuBox { background-color: var(--color-blue); }
	body.active .menuBox ul > li > a { color: var(--color-broken-white); }
	body.active .menuBox ul > li > a:hover { color: var(--color-light-blue); }
	.mega-menu { padding-right: 0; padding-left: 0; position: unset; display: none; opacity: 1; visibility: visible; height: 100%; transition: unset; transform: translateX(0); }
	.mega-menu .wrap { padding-right: 0 !important; padding-left: 0 !important; overflow-y: unset; height: 100%; }
	.mega-menu .centered-sm { padding-right: 0; padding-left: 0; }
	.mega-menu .left { padding: 30px 20px; width: 100%; }
	.mega-menu .right { width: 100%; border-radius: 0 0 20px 20px; }
	.mega-menu .item { width: 100%; }
	.mega-menu .form-box { padding: 40px 20px; }
	.mega-menu .icon { font-size: 25px; }
	.mega-menu .text { margin-bottom: 25px; padding-left: 40px; }
	.mega-menu strong { margin-bottom: 25px; }
	.mega-menu p { font-size: 16px; }
	.mega-menu h6 { font-size: 18px; }
	.mega-menu ul { margin-bottom: 0!important; }
	body.active .form-box { border-radius: 20px; }
	.heroBox { margin-bottom: 0; padding-top: 150px; }
	.heroBox .content { width: 100%; text-align: center; }
	.heroBox .sub-title { margin: 0 auto 20px; }
	.heroBox .image { margin-right: -15px; margin-left: -15px; width: calc(100% + 30px); }
	.heroBox .image .d-desktop { display: none; }
	.heroBox .image .d-phone { display: block; width: 100%; }
	.heroBox .x-layer { display: none; }
	.heroBox .d-phone.dark-theme { display: none; }
	body.active .heroBox { margin-bottom: 50px; }
	body.active .heroBox .d-dark-theme { display: none; }
	body.active .heroBox .d-phone.dark-theme { display: block; }
	.logoBox { margin-bottom: 80px; }
	.logoBox .wrap { justify-content: space-around; gap: 25px 10px; }
	.logoBox .logo { margin-bottom: 20px; max-width: 50%; }
	.logoBox .logo img { margin: 0 auto; }
	.graphBox { padding-bottom: 65px; }
	.graphBox .content { padding-top: 0; padding-right: 0; order: 2; width: 100%; }
	.graphBox .image { margin-bottom: 50px; order: 1; width: 100%; }
	.graphBox .card-graph { padding-left: 20px; }
	.graphBox .card-graph:before { width: 100%; }
	.graphBox.inner { padding-top: 65px; }
	.graphBox.inner-1 .content,
	.graphBox.inner .content { padding-left: 0; }
	.graphBox.inner .card-graph { padding-right: 25px; }
	.graphBox .paragraph { max-width: 100%; }
	.graphBox.gap .card-graph:before { width: 100%; }
	.graphBox.gap { padding-top: 0; }
	.graphBox.gap .content { margin-bottom: 50px; order: 1; }
	.graphBox.gap .image { margin-bottom: 0; order: 2; }
	.growBox { padding-bottom: 50px; }
	.fasterBox { margin-bottom: 70px; }
	.fasterBox .item { margin-bottom: 30px; padding-left: 90px; width: 100%; }
	.fasterBox .item:last-child { margin-bottom: 0; }
	.fasterBox .icon { left: 20px; }
	.autoBox .icon { transition:.5s; margin: 0 auto 5px; position: unset; }
	.autoBox .item { padding-right: 0; padding-left: 0; font-weight: bold; text-align: center; }
	.autoBox .text { transition:.5s; padding-top: 5px; opacity: 0; visibility: hidden; }
	.autoBox .item.is-active .text { opacity: 1; visibility: visible; }
	.autoBox .item.is-active .icon { transform: scale(1.3); }
	.manageBox { margin-bottom: 50px; }
	.manageBox .wrap { margin: 0; }
	.manageBox .item { padding: 0 20px; width: 100%; }
	.manageBox .item.d-hidden { display: none; }
	.manageBox .item.d-hidden.active { display: block; }
	.manageBox .image { min-height: auto; }
	.manageBox .d-phone { display: block; }
	.manageBox h2 { font-size: 32px; }
	.manageBox .head { margin-bottom: 50px; }
	.manageBox .head .button { display: inline-block; font-size: 18px; }
	.faqBox { margin-bottom: 65px; }
	.card-accordion { padding-bottom: 8px; }
	.card-accordion .accordion-title { padding: 18px 45px 10px 15px; font-size: 18px; }
	.card-accordion .accordion-content { padding: 0 15px 10px; }
	.card-accordion .accordion-content p { font-size: 14px; }
	.card-accordion .accordion-content li { font-size: 14px; }
	.reviewBox { padding-bottom: 60px; }
	.reviewBox .swiper { width: 75%; }
	.reviewBox .swiper-slide.swiper-slide-active .card-review h6 { font-size: 16px; }
	.reviewBox .swiper-slide.swiper-slide-active .card-review p { font-size: 16px; }
	.startBox .slick-list { margin: 0; padding: 0 !important; }
	.startBox .slide { padding: 0 15px; transform: translateY(0); }
	.startBox .slick-center .card-start { padding: 35px 30px; }
	.growBox .holder { width: 100%; }
	.boostBox { padding-bottom: 80px; }
	.boostBox .js-boost-slider .slick-list { margin: 0; overflow: hidden; }
	.boostBox .js-boost-slider.second .slick-list { margin: 0; }
	.requestBox { padding-top: 80px; padding-bottom: 80px; }
	.requestBox h2 { margin-bottom: 30px; }
	.requestBox .paragraph { margin-bottom: 50px; }
	.requestBox .content { padding-right: 0; padding-bottom: 40px; width: 100%; }
	.requestBox .form { width: 100%; }
	.form-box { padding: 40px 30px; }
	.bannerBox h1 { font-size: 30px; }
	.bannerBox .paragraph { font-size: 18px; }
	.bannerBox .content { margin: 40px 0; width: 100%; text-align: center}
	.bannerBox .image { margin-right: -35px; padding-left: 0; width: calc(100% + 35px); }
	.bannerBox .image img { width: 100%; }
	.videoBox { margin-bottom: 80px; }
	.videoBox .text { margin-bottom: 40px; padding-top: 0; padding-right: 0; width: 100%; }
	.videoBox .image { width: 100%; }
	.videoBox .led-img img { width: 100%; }
	.videoBox .popup-youtube { font-size: 80px; }
	.storyBox { padding-top: 40px; }
	.storyBox .item { margin-bottom: 25px; padding: 0; width: 100%; }
	.storyBox .item:last-child { margin-bottom: 0; }
	.footerBox { text-align: center; }
	.footerBox .title { cursor: pointer; font-size: 15px; }
	.footerBox .wrap { margin-bottom: 10px; }
	.footerBox ul { display: none; }
}



/* The Modal (background) */
.modal {
	position: fixed;
    height: 100%;
    width: 100%;
    animation: fadeIn 1s ease both;
    background: rgb(255 255 255 / -24%);
    z-index: 2;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .modal-content{
	width: 500px;
    left: calc(50% - 250px);
    height: 300px;
    top: calc(50% - 150px);
    position: fixed;
  }
  .modal-content .button{
	position: absolute;
    bottom: 40px;
	cursor: pointer;
  }