/*
Theme Name: baxx-shop
Author: Baxx dev-team
Author URI: http://www.baxx.app
Description: Baxx shop theme
Version: 1.0.10
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

/* 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: 'Material Symbols Outlined', 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;
     --color-gray-blue: #f8f9fc;
     --color-border: rgba(57, 107, 254, 0.5);
     --color-gradient-end: #537efd;
     --color-hover-blue: #5f94f75d;
     --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);
     margin-top: 0 !important;
}
 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 {
     position: relative;
     padding: 15px;
     width: 100%;
     height: 51px;
     font-family: var(--font-family-base);
     font-size: var(--font-size-base);
     color: rgba(var(--color-primary), 0.8);
     border: 1px solid var(--color-border);
     border-radius: 8px;
     background-color: var(--color-gray-blue);
}
 input::placeholder, textarea::placeholder {
     color: rgba(var(--color-primary), 0.8);
}
 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, a:visited {
     color: var(--color-light-blue);
     display: inline-block;
     text-decoration: none;
     transition: 0.2s color ease-in-out
}
 a:active, a:hover {
     color: #0834bf 
}
 :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;
}
 .align-flex-start {
     align-self: flex-start;
}
 .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-flex;
     align-items: center;
     font-size: 20px;
     font-weight: 700;
     text-align: center;
     color: var(--color-white)!important;
     border-radius: 50px;
     background: linear-gradient(86.42deg, var(--color-light-blue) 0%, var(--color-gradient-end) 100%);
     box-shadow: 0 10px 30px 0 rgba(69, 82, 243, 0.3);
     transition: background .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 .material-symbols-outlined {
     font-size: 20px;
     margin-right: 5px;
}
 .button-secondary {
     background: linear-gradient(49.43deg, var(--color-green) 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: var(--color-light-blue);
     border: 2px solid var(--color-light-blue);
     background: transparent;
     box-shadow: none;
}
 .button-outline:hover {
     color: var(--color-white);
     background: var(--color-light-blue);
}
 .button-outline-visible {
     background: linear-gradient(86.42deg, var(--color-light-blue) 0%, var(--color-gradient-end) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
}
 .button-outline-visible:hover {
     -webkit-text-fill-color: var(--color-white);
}
 .material-symbols-outlined {
     font-variation-settings: 'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 48
}
/* ### 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 .custom-logo-link {
     position: relative;
     z-index: 5;
     width: 25%;
}
 #headerCntr .custom-logo-link img {
     max-width: 100%;
}
 #headerCntr .logo .dark-theme {
     display: none;
}

.custom-logo-link{
    height: 70px;
}
 #headerCntr .navigation {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     width: 75%;
     overflow: visible;
}
 #headerCntr .button {
     z-index: 1;
     padding: 10px 15px;
     font-size: var(--font-size-base);
     transition: none;
}
 #headerCntr .button.d-phone {
     display: none;
}
 #headerCntr .button .cart-badge {
     margin-left: 8px;
     display: flex;
     justify-content: center;
     align-items: center;
     background: var(--color-white);
     padding: 0px 5px;
     width: auto;
     min-width: 22px;
     height: 22px;
     font-size: 12px;
     border-radius: 25px;
     color: var(--color-light-blue) 
}
 #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);
}
/* ### menu box ### */
 .menuBox {
     margin-right: 60px;
}
 .menuBox ul > li {
     margin-right: 60px;
     padding-top: 23px;
     padding-bottom: 21px;
     display: inline-block;
}
 .menuBox ul > .dropdown:hover {
    cursor: pointer;
}
 .menuBox ul > li:hover a {
    color: var(--color-light-blue)
}
 .menuBox ul > li:hover:after {
    color: var(--color-light-blue)
}
 .menuBox ul > li:last-child {
     margin-right: 0;
}
 .menuBox ul > li > a {
     cursor: pointer;
     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 {
     display: inline-block;
     font-family: var(--font-family-icon);
     vertical-align: middle;
     content: '\e5cf';
}
 .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;
}
/* ### 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 a, .mega-menu a:visited {
    color: rgba(11, 14, 48, 0.8)!important;
}
 .mega-menu a:hover {
    color: var(--color-light-blue)!important;
}
 .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, var(--color-light-blue) 0%, var(--color-gradient-end) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
}
 .mega-menu .range-slider .range {
     background-color: #dce5ff;
}
 .country-selector {
     min-width: 400px;
     width: auto;
     left: auto;
}
 .country-selector .wrap {
    box-shadow: 0 12px 30px 0 rgba(75, 120, 254, 0.15);
}
 .country-selector .left {
     width: 100%;
     padding: 40px 50px 25px;
}
 .country-selector .item {
     width: 100%;
}
 .country-selector .holder {
    margin-bottom: 0;
}
 .country-selector .text {
     z-index: 1;
     padding-left: 55px;
}
 .country-selector .text svg{
     position: absolute;
     top: 0;
     left: 0;
     width: 33px;
     height: 22px;
     border-radius: 3px;
}
 .country-selector .holder .item .text.active:before {
     content: '';
     position: absolute;
     background: var(--color-gray);
     width: 100%;
     z-index: -1;
     height: 100%;
    top: 0;
    margin: -12px -15px;
     border-radius: 10px;
     padding: 12px 15px;
     left: 0;
}
 .dropdown svg {
     position: absolute;
     top: 1px;
     left: 0;
     height: 20px;
     width: 30px;
     border-radius: 3px;
}
 .dropdown span {
     padding-left: 45px;
}
 .text span {
    padding: 0;
}
 .text.active span.active {
    font-weight: 600;
}
/* ### 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);
}
/* ### content container ### */
 #contentCntr {
     width: 100%;
}
/* ### hero box ### */
 .heroBox {
     margin-bottom: 120px;
     padding-top: 175px;
     position: relative;
}
 .heroBox select {
     color: var(--black);
     -webkit-appearance: none;
     cursor: pointer;
}
 .heroBox input, select {
     padding: 10px 20px;
     background-color: var(--color-gray-blue);
     width: 100%;
     height: 54px;
     border: 1px solid var(--color-border);
     border-radius: 8px;
     font-size: var(--font-size-base);
}
 .heroBox .wrap {
     align-items: center;
     justify-content: space-around;
}
 .heroBox .content {
     padding-left: 30px;
     position: relative;
     z-index: 1;
     width: 40%;
}
 .heroBox .image {
     position: relative;
     z-index: 1;
     width: 40%;
}
 .heroBox .image .category-picker {
     max-height: 102px;
     transition: max-height 0.5s ease-in-out;
     overflow: hidden;
     display: grid;
     grid-template-columns: repeat(auto-fill,minmax(90px,1fr));
     justify-content: space-between;
     gap: 10px;
     margin-bottom: 5px;
}
 .heroBox .image .full-height {
    max-height: 100%;
     transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}
 .heroBox .image .category-picker:after {
    content: "";
     flex: auto;
}
 .heroBox .image .category-picker .c-hidden {
     display: none;
}
 .heroBox .image .category-picker .c-hidden.active {
     display: block;
}
 .heroBox .image .c-phone {
     display: flex;
     justify-content: flex-end;
}
 .heroBox .image .c-phone-link {
     cursor:pointer;
     grid-column-start: -1;
     grid-column-end: 1;
     display: flex;
     justify-content: flex-end;
     margin-bottom: 20px;
    padding-top:4px;
     align-items: center;
}
 .heroBox .image .search-browse {
     gap: 15px;
     margin-bottom: 20px;
     display: flex;
}
 .heroBox .image .search-browse input{
     background: none;
     border: none;
     transition: all 0.2s ease-in-out;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     padding: 8px 13px;
     height: 43px;
     width: 100%;
     border-radius: 8px;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     cursor: pointer;
}
 .heroBox .image input[type=radio]:checked~.sb-radio-text  {
     background: linear-gradient(86.42deg, var(--color-light-blue) 0%, var(--color-gradient-end) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
}
 .heroBox .image .search-browse input[type=radio]:checked {
    transition: all 0.2s linear
}
 .heroBox .image .search-browse input[type=radio]:checked:before {
     background: var(--color-gray-blue);
     -webkit-text-fill-color: transparent;
    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 8px;
     content: "";
     cursor: pointer;
}
 .heroBox .image .sb-radio-text {
     gap: 5px;
     position: absolute;
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     text-align: center;
     text-transform: capitalize;
     cursor: pointer;
     user-select: none;
     font-family: var(--font-family-base);
     font-weight: 700;
     line-height: var(--line-height-heading);
}
 .heroBox .image .sb-option {
     width: 110px;
}
 .heroBox .image .sb-option label {
     display: flex;
     position: relative;
}
 .heroBox .image .search-picked {
     display: none;
}
.heroBox .image:has(#sbSearch:checked) .search-picked {
     display: block;
}
.heroBox .image .browse-option {
    display: none;
}
.heroBox .image:has(#sbBrowse:checked) .browse-option {
     display: grid;
}


 .heroBox .image .category-picker .category-radio-text .material-symbols-outlined {
     font-size: 50px;
     font-weight: 200;
     margin-bottom: 3px;
     opacity: 0.8 
}
 .heroBox .image .view-more-categories {
     cursor: pointer;
     font-size: 15px;
     font-weight: 600;
     background: linear-gradient(86.42deg, var(--color-primary) 0%, var(--color-blue) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
}
 .heroBox .image .category-picker .category-option {
     width: 100%;
}
 .heroBox .image .category-picker .category-option label {
     display: flex;
     position: relative;
}
 .heroBox .image .category-picker .category-radio-text {
     position: absolute;
     width: 100%;
     font-size: 13px;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     text-transform: capitalize;
     cursor: pointer;
     user-select: none;
}
.heroBox .image .category-picker .category-radio-text img{
    max-width: 90%;
    max-height: calc(90% - 30px);
}
 .heroBox .image .category-picker .category-radio-text .material-symbols-outlined {
     font-size: 50px;
     font-weight: 200;
     margin-bottom: 3px;
     opacity: 0.8 
}
 .heroBox .image .category-picker input[type=radio] {
     transition: all 0.2s ease-in-out;
     background-color: var(--color-white);
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     padding: 45px 10px;
     width: 100%;
     border: 1px solid rgb(9 25 65 / 7%);
     border-radius: 8px;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     cursor: pointer;
}
 .heroBox .image .category-picker input[type=radio]:checked {
     border: 1px solid var(--color-border);
     transition: border 0.2s linear
}
 .heroBox .image .category-picker input[type=radio]:checked:before {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 8px;
     background: var(--color-gray-blue);
     content: "";
     cursor: pointer;
}
 .heroBox .image span.icon {
     margin-left: 5px;
     transition: transform 0.3s ease-in-out;
     display: inline-flex;
     font-size: 16px;
     vertical-align: middle;
     color: var(--color-blue)
}
 .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 {
}
/* ### select-2 ### */
 .form-field .select {
     margin-bottom: 10px;
}
 .select2-search__field {
     height: 44px;
}
 .select2-dropdown {
     margin-top: 15px;
     padding-top: 10px;
     padding-bottom: 10px;
     border: 0;
     background: var(--color-white);
     filter: drop-shadow(3.82px 21.666px 24px rgba(9, 25, 65, 0.152));
}
 .select2-search--dropdown {
     padding: 0 20px 10px;
}
 .select2-results__option {
     padding: 10px 20px;
     position: relative;
     font-size: 14px;
}
 .select2-results__option.select2-results__option--highlighted:before {
     opacity: 1;
     visibility: visible;
}
 .select2-results__option:before {
     position: absolute;
     top: 50%;
     right: 15px;
     transform: translateY(-50%);
     content: '\e86c';
     font-family: var(--font-family-icon);
     color: var(--secondary-color);
     opacity: 0;
     visibility: hidden;
}
 .select2-container--default .select2-selection--single {
     background-color: var(--color-gray-blue);
     color: rgba(var(--color-primary), 0.8);
     border: 1px solid var(--color-border);
}
 .select2-container--default .select2-results__option[aria-selected=true] {
     background-color: transparent;
     color: var(--primary-color);
}
 .select2-container--default .select2-results__option--highlighted[aria-selected] {
     background-color: var(--color-gray-blue);
     color: var(--black);
}
 .select2-container--default .select2-selection--single {
     padding: 12px 20px;
     height: 54px;
     border-radius: 8px;
     border: 1px solid var(--color-border);
}
 .select2-container--default .select2-selection--single .select2-selection__rendered {
     padding: 0;
     color: var(--primary-color);
     position: relative;
}
 .select2-container--default .select2-selection--single .select2-selection__rendered:after {
     position: absolute;
     top: 50%;
     right: 0;
     transform: translateY(-50%);
     content: '\e5cf';
     font-family: var(--font-family-icon);
     font-size: 16px;
}
 .select2-container--open .select2-dropdown--below {
     border-radius: 8px;
}
 .select2-container--default .select2-search--dropdown .select2-search__field {
     padding: 4px 10px;
     border: 1px solid #dadde5;
}
 .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
}
 .select2-container--default .select2-selection--single .select2-selection__arrow b {
     display: none;
}
 .select2-container--default.select2-container--disabled .select2-selection--single {
     border: 1px solid rgb(9 25 65 / 7%);
}
 .select2-container--default.select2-container--disabled .select2-selection--single span {
    opacity: 0.4
}
/* ### logo box ### */

.logo>img{
    /* height: 70px; */
    max-height: 70px;
    max-width: 200px;
}

 .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;
}
/* ### 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, var(--color-light-blue) 0%, var(--color-gradient-end) 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: 395px;
     font-size: 20px;
}
 .graphBox .image {
     width: 50%;
}
 .graphBox .d-dark-theme {
     display: none;
}
 .graphBox ul {
     padding-top: 10px;
}
 .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, var(--color-light-blue) 0%, var(--color-gradient-end) 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: var(--color-light-blue);
     content: '\e86c';
}
 .graphBox.inner {
     padding-top: 100px;
     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 .item .material-symbols-outlined {
    background: white;
     opacity: 1;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
    font-size: 180px;
     margin:0;
     padding:0
}
 .graphBox.inner .item span.material-symbols-outlined {
     font-weight: 200;
     font-size: 160px;
     margin:0;
     padding:0
}
 .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%;
}
/* ### 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);
}
/* ### manage box ### */
 .manageBox {
     margin-bottom: 80px;
     padding-top: 50px;
}
 .manageBox .wrap a, .manageBox .wrap a:visited {
     color: var(--color-primary)
}
 .manageBox .head {
     margin: 0 auto 70px;
     max-width: 816px;
     text-align: center;
}
 .manageBox h2 {
     padding-bottom: 15px;
     background: linear-gradient(271.35deg, var(--color-green) -12.66%, var(--color-black) 54.15%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}
 .manageBox .head .button {
     display: none;
}
 .manageBox .head p {
     font-size: 20px;
     color: rgba(var(--color-blue), 0.8);
}
 .manageBox .wrap {
     margin: 0 -15px;
     align-items: flex-start;
     justify-content: center;
     display: grid;
     grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
}
 .manageBox .item {
     margin-bottom: 20px;
     padding: 0 15px;
     width: 100%;
     height: 100%;
     transition: ease-in-out filter, transform 0.3s;
}
 .manageBox .item:hover {
     cursor: pointer;
     transition: ease-in-out filter, transform 0.3s;
     transform-origin: center;
     transform: scale(1.08);
}
 .manageBox .image {
     align-items: center;
     justify-content: center;
    width:100%;
     padding: 30px 25px;
     position: relative;
     display: flex;
     min-height: 236px;
     border-radius: 15px;
     background-color: var(--color-yellow);
     overflow: hidden;
}
 .manageBox .image.blue {
     background-color: var(--color-sky-blue);
}
 .manageBox .image.green {
     background-color: var(--color-green);
}
 .manageBox .image.purple {
     background-color: var(--color-purple);
}
 .manageBox .image .manage-img {
     position: relative;
     z-index: 1;
     width: 100%;
}
 .manageBox .image .manage-img.dark-theme {
     display: none;
}
 .manageBox .text {
     padding: 20px 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 .category-image {
    width: 200px;
    z-index: 1;
}
 .manageBox .item .material-symbols-outlined {
     font-size: 100px;
     font-weight: 300;
}
 .manageBox .d-phone {
     padding: 0 20px;
     display: none;
}
 .manageBox .view-more {
     cursor: pointer;
     font-size: 18px;
     font-weight: bold;
     background: linear-gradient(86.42deg, var(--color-light-blue) 0%, var(--color-gradient-end) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
}
 .manageBox .view-more-icon {
     display: inline-block;
     font-size: 16px;
     position: relative;
     top: 2px;
}
/* ### category ### */
 .categoryMain .faqBox {
     padding-top: 80px;
}
 .categoryBox.inner {
     padding-top: 85px;
     padding-bottom: 0px;
}
 .categoryBox .breadcrumb {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 25px;
}
 .categoryBox .breadcrumb ul {
    font-weight: 500;
     max-width: 300px;
}
 .categoryBox .breadcrumb ul li {
     margin-right: 25px;
     display: inline-flex;
     align-items: center;
}
 .categoryBox .breadcrumb li:before {
     content: '\e5cf';
     transform: rotate(90deg);
     top: inherit;
}
 .categoryBox .search-recommendations {
     gap: 9px;
     -ms-overflow-style: none;
    /* IE and Edge */
     scrollbar-width: none;
    /* Firefox */
     overflow-y: scroll;
     display: flex;
     justify-content: flex-start;
     align-items: center;
     margin-top: 12px;
}
 .categoryBox .search-recommendations::-webkit-scrollbar {
     display: none;
}
 .categoryBox .search-recommendations .reco {
     cursor: pointer;
     display: inline-flex;
     padding: 6px 11px;
     font-weight:600;
     background: linear-gradient(86.42deg, var(--color-light-blue) 0%, var(--color-gradient-end) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     position: relative;
     border-radius: 14px;
     transition: all 0.2s ease-in-out;
}
 .categoryBox .search-recommendations .reco:before{
     background: #f9f9f9;
     position: absolute;
     height:100%;
     width: 100%;
     z-index: -1;
     top:0;
     left:0;
     border-radius: 14px;
     content: "";
     transition: all 0.2s ease-in-out;
}
 .categoryBox .search-recommendations .reco:hover:before{
     filter: brightness(0.95);
     transition: all 0.2s ease-in-out;
}
 .category-products {
     margin-bottom: 150px;
}
 .category-products .wrap {
     align-items: flex-start;
     justify-content: center;
     display: grid;
     grid-template-columns: repeat(auto-fill,minmax(190px,1fr));
     gap: 25px;
}
 .category-products .item {
     border-radius: 15px;
     background: #f9f9f9;
     margin-bottom: 20px;
     padding: 0 15px;
     width: 100%;
     height: 100%;
     transition: ease-in-out filter, transform 0.3s;
}
 .category-products .item h6 {
     font-size: 0.9rem;
     color: var(--color-primary) 
}
 .category-products .item p {
     font-size: 0.9rem;
}
 .category-products .item .image {
     background: var(--color-white);
     padding: 10px;
     margin: 15px 0px;
     border-radius: 5px;
 }
 .category-products .item .image img {
    max-width: 180px;
    max-height: 180px;
}
.category-products .item .text span{
    white-space: nowrap;
}
 .category-products .item:hover {
     cursor: pointer;
     transition: ease-in-out filter, transform 0.3s;
     transform-origin: center;
     transform: scale(1.08);
}
.search-recommendations .active{
    border: 1px solid;
}
 .showmoreContainer {
     margin: 40px 0;
     text-align: center;
}


/* ### search ### */

.searchResultBox{
    padding: 10px 20px;
    background-color: var(--color-gray-blue);
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: var(--font-size-base);
    z-index: 10;
    max-height: 550px;
    overflow: auto;
    transition: 0.2s;
    cursor: pointer;
}
.search:not(:focus-within) .searchResultBox{
    display: none;
}   
.search .searchResultBox li:hover{
    background-color: var(--color-hover-blue);
}

/* ### questions ### */

.value .question-bar{
    position: relative;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.value .question-bar .return {
    flex-grow: 1;
    color: var(--color-light-blue);
    font-weight: 500;
    padding-left: 30px;
    align-self: center;
    margin-right: 15px;
}
.value .question-bar .return span {
    cursor: pointer;
    padding-left: 5px;
}

.value .question-bar .return span:before {
    position: absolute;
    top: -8px;
    left: 0;
    font-family: var(--font-family-icon);
    font-size: 27px;
    color: var(--color-light-blue);
    content: '\e5cf';
    transform: rotate(90deg);
}


.value .question-box{
    margin: 20px 0 40px;
    opacity: 0;
    transition: opacity .4s;
}
.value .question-box.showMe{    
    opacity: 1;
}

.value .question-box .question-nav{
    margin-top: 20px;
    margin-bottom: 50px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.value .question-box .question-nav .question-bullet {
    font-weight: bold;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-sky-blue);
    width: 32px;
    height: 32px;
    border-radius: 100%;
}

.value .question-box .question-nav .value-bullet{
    width: auto;
    border-radius: 20px;
    padding: 5px 10px;
    background: var(--color-sky-blue);
    font-weight: bold;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: bold;
}

.value .question-box .question-nav .current {
    cursor: default;
    border: 1px solid var(--color-border);
    background-color: var(--color-gray-blue);
    background: linear-gradient(86.42deg, var(--color-light-blue) 0%, var(--color-gradient-end) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.value .question-box .question {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px;
    font-size: 1.3rem;
    font-weight: 700;
    background-color: var(--color-gray-blue);
    
}
.value .question-box .option-picker {
    margin: 30px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.value .question-box .option-picker .checked .answer-box{
    border: 3px solid var(--color-border);
}

.value .question-box .answer-box{
    cursor: pointer;
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
    align-items: center;
    border-radius: 8px;
    font-family: var(--font-family-base);
    font-weight: 700;
    line-height: var(--line-height-heading);
    background-color: var(--color-gray-blue);
    border: 1px solid var(--color-gray-blue);
    transition: all 0.2s ease-in-out;
    user-select: none;
    color: var(--color-light-blue);
}
.value .question-box .answer-box .answer-info{
    font-size: 1rem;
    font-weight: normal;
    background-color: rgb(111 197 164 / 15%);;
    color: #335d4d;
    padding: 20px 18px;
    margin: 10px 0 5px;
    border-radius: 8px;
}
.value .question-box .question-info{
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #335d4d;
    background: rgb(111 197 164 / 15%);
    border-radius: 8px;
    padding: 20px 18px;
    margin: 30px 0 30px;
}
.value .question-box .question-info ul li{
    list-style: disc;
    margin-left: 20px;
}


.value .question-box .question-info .material-symbols-outlined {
    padding-right: 15px;
    margin-bottom: auto;
}

 .questionnaireBox .option-radio {
     display: inline-flex;
}
 .questionnaireBox .option-radio input {
     opacity: 0;
     position: absolute;
     width: 0;
     height: 0;
     z-index: -1;
}
 .questionnaireBox .option-radio label {
     cursor: pointer;
     display: inline-flex;
     position: relative;
     align-items: center;
     border-radius: 8px;
     font-family: var(--font-family-base);
     font-weight: 700;
     line-height: var(--line-height-heading);
     padding: 0 22px;
     height: 45px;
     -webkit-transition: all .12s ease-out 0s;
     background: linear-gradient(86.42deg, var(--color-light-blue) 0%, var(--color-gradient-end) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     border: 1px solid var(--color-gray-blue);
    transition: all 0.2s ease-in-out;
     user-select: none;
}
 .questionnaireBox .option-radio label:before {
     background-color: var(--color-gray-blue);
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     content: '';
     border-radius: 6px;
     overflow: hidden;
     z-index: -1;
     transition: all 0.2s ease-in-out;
}
 .questionnaireBox .option-radio input[type=radio]:checked+label, .questionnaireBox .option-radio .checked {
     /* border: 1px solid var(--color-border); */
     border: 3px solid var(--color-border);
     transition: all 0.2s ease-in-out;
}
 .questionnaireBox .option-radio label:hover {
     border: 1px solid #eceffa;
     transition: all 0.2s ease-in-out;
}
 .questionnaireBox .option-radio input:checked+label:hover:before {
     background-color: var(--color-gray-blue);
}
 .questionnaireBox .option-radio input+label:hover:before {
     background-color: #eceffa;
     transition: all 0.2s ease-in-out;
}
 .questionnaireBox .radioOn .option-radio label{
    border-color: var(--color-light-blue)
}
 .questionnaireBox .optionContainer {
    margin-bottom: 50px;
}
 .questionnaireBox .optionContainer .disabled-option input+label {
     background: linear-gradient(86.42deg, #ccc 0%, #ccc 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     transition: all 0.2s ease-in-out;
     /* cursor: not-allowed!important; */
     border: 1px solid #eee!important;
}
 .questionnaireBox .optionContainer .disabled-option input+label:before {
     background: repeating-linear-gradient(135deg, var(--color-white), var(--color-white) 7px, #eee 7px, #eee 14px)!important;
}
 .questionnaireBox .optionContainer .button {
    margin-top: 10px;
}
 .questionnaireBox .optionName {
     font-weight: 600;
     margin: 15px 0;
}
 .questionnaireBox .optionPicker {
    margin: 30px 0;
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
}
 .questionnaireBox .questionBox, .selectorBox {
     margin: 20px 0 40px;
}
 .questionnaireBox .questionBox p, .selectorBox p {
     margin: 30px 0;
}
 .questionnaireBox .questionExpl {
     display: flex;
     align-items: center;
     font-size: 1rem;
     color: #335d4d;
     background: rgb(111 197 164 / 15%);
     border-radius: 8px;
     padding: 20px 18px;
     margin: 30px 0 30px;
}
 .questionnaireBox .questionExpl span {
     margin-right: 15px;
}
 .questionnaireBox .questionExpl p {
     margin: 0;
}
 .questionnaireHeader img {
     margin: 0 auto;
}
 .questionnaireBox .questionBar {
     position: relative;
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     margin-bottom: 40px;
}
 .questionnaireBox .questionNav {
     margin-top: 20px;
     margin-bottom: 50px;
     display: flex;
     gap: 8px;
     align-items: center;
}
 .questionnaireBox .questionNav .question-bullet {
     font-weight: bold;
     cursor: pointer;
     font-size: 0.875rem;
     color: var(--color-white);
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--color-sky-blue);
     width: 32px;
     height: 32px;
     border-radius: 100%;
}
 .questionnaireBox .questionNav .current {
     cursor: default;
     border: 1px solid var(--color-border);
     background-color: var(--color-gray-blue);
     background: linear-gradient(86.42deg, var(--color-light-blue) 0%, var(--color-gradient-end) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
}
/* .questionnaireBox .questionNav .question-bullet:last-child {
     cursor: default;
     border: 1px solid var(--color-border);
     background-color: var(--color-gray-blue);
     background: linear-gradient(86.42deg, var(--color-light-blue) 0%, var(--color-gradient-end) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
}
 */
 .questionnaireBox .questionBar .return {
     flex-grow: 1;
     color: var(--color-light-blue);
     font-weight: 500;
     padding-left: 30px;
     align-self: center;
     margin-right: 15px;
}
 .questionnaireBox .questionBar .return span {
     cursor: pointer;
     padding-left: 5px;
}
 .questionnaireBox .questionSubtitle {
     margin-right: 5px;
     color: var(--color-dark-gray);
}
 .questionnaireBox .questionBar .return span:before {
     position: absolute;
     top: -8px;
     left: 0;
     font-family: var(--font-family-icon);
     font-size: 27px;
     color: var(--color-light-blue);
     content: '\e5cf';
     transform: rotate(90deg);
}
 .questionnaireBox .buttonContainer {
     padding-top: 30px;
     display: grid;
     grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
     justify-content: space-between;
     align-items: center;
     gap: 15px;
}


.questionnaireBox .option-radio .question-box{
    height: auto;
    padding: 10px 15px;
}


.questionnaireBox .question-box{
    display: flex;
    flex-direction: column;

}


.questionnaireBox .option-radio label .question-info{
    font-size: 1rem;
    font-weight: normal;
    background: #335d4d;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    padding: 20px 18px;
    margin: 10px 0 5px;
    position: relative;
    border-radius: 8px;
}
.questionnaireBox .option-radio label .question-info:before{
    background: rgb(111 197 164 / 15%);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: '';
    z-index: -1;
    border-radius: 8px;
}

.questionnaireBox .quest{
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px;
    background-color: var(--color-gray-blue);
}



 .questionnaireBox button {
     font-family: var(--font-family-base);
     font-weight: 700;
     background: linear-gradient(86.42deg, var(--color-light-blue) 0%, var(--color-gradient-end) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: bold;
     font-size: 1rem;
     border: none;
     padding: 8px 13px;
     height: 45px;
     position: relative;
     border-radius: 8px;
     transition: all 0.2s ease-in-out;
     cursor: pointer;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .questionnaireBox button:before {
     z-index: 2;
     content: '';
     border-radius: 8px;
     position: absolute;
     width: 100%;
     height: 100%;
     background-color: var(--color-gray-blue);
     transition: all 0.2s ease-in-out;
}
 .questionnaireBox button:hover:before {
     z-index: 3;
     background-color: #eceffa;
     transition: all 0.2s ease-in-out;
     transform: scale(1.08);
}
 .questionnaireBox button span {
     background: linear-gradient(86.42deg, var(--color-light-blue) 0%, var(--color-gradient-end) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     z-index: 9;
     -webkit-text-fill-color: transparent;
     transition: all 0.2s ease-in-out;
}
 .questionnaireBox button:hover span {
     z-index: 9;
     transform: scale(1.08);
     background: linear-gradient(86.42deg, var(--color-light-blue) 0%, var(--color-gradient-end) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     transition: all 0.2s ease-in-out;
}
 .subDealtext {
     margin-bottom: 0;
}
 .questionBox .questionNav .value {
    width: auto;
    border-radius: 20px;
    padding: 0 10px;
}
 .dealContainer {
     margin: 0 0 30px;
     font-family: var(--font-family-base);
    text-align: center;
     background: linear-gradient(31.15deg, #73c4a5 51.56%, #90efcb 118.71%);
     padding: 50px 40px;
     color: #FFF;
     font-weight: bold;
     font-size: 1.375rem;
     border-radius: 25px;
}
 .dealPrice {
     font-size: 3rem;
     padding: 12px 0 20px;
     font-weight: bold;
}
 .dealPrice span:first-child {
    font-size: 1.5rem;
     font-weight: 600;
}
 .questionBox .questionNav .value {
    width: auto;
    border-radius: 20px;
    padding: 0 10px;
}
 #sw{
     width: 100%;
     overflow: hidden;
     overflow-wrap: anywhere;
     -webkit-overflow-scrolling: touch;
}
 .scrolling-wrapper {
     display: flex;
     width: 100%;
    /* transition: transform .5s ease-out;
     */
     transform: translate(calc(var(--i, 0) *-100%));
}
 .scrolling-wrapper .card {
     flex: 0 0 auto;
     width: 100%;
     user-select: none;
}
/* ### faq box ### */
 .faqBox {
     margin-bottom: 106px;
     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);
}
/* ### 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: 'Material Symbols Outlined';
     font-size: 25px;
     transition: var(--base-duration);
     content: '\e145';
}
 .card-accordion.active .accordion-title:before {
     content: '\e15b';
}
 .card-accordion .accordion-content {
     padding: 0 32px 12px;
     display: none;
     max-width: 540px;
     color: rgba(var(--color-blue), 0.8);
}
/* ### checkout and cart ### */
 .cartBox {
     padding-top:125px;
}
 .cartContent {
     position:relative;
     max-width:100%;
     width:825px;
     z-index: 1;
}
 .cartHeader {
     margin-bottom:45px!important;
     font-weight:900;
     text-align:center;
     background:linear-gradient(271.35deg, var(--color-green) -12.66%, var(--color-black) 54.15%);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
}
.cartContent .minPrice{
	margin-bottom: 50px;
}
 .cartProductcontainer {
     display:flex;
     flex-direction:column;
     box-shadow:0 0 0 40px var(--color-gray);
     position:relative;
     z-index:-1;
     border-radius:30px;
     padding:50px;
}
 .cartProduct {
     display:flex;
     padding:30px 0 0;
     border-top:1px solid rgb(238 238 238);
     align-items:center;
     justify-content:space-between;
}
 .cartProduct:first-of-type {
     border-top:none;
}
 .cartProduct input[type=number] {
     width:70px;
     padding:5px 11px 5px 18px 
}
 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
     opacity:1;
     cursor:pointer;
     width:20px;
     height:25px;
}
.cartProduct .cartQty select option{
    padding: 5px 0px!important;
    text-align: center;
    text-align-last: center;
    width: 50px!important;
    direction: rtl;
}
.cartProduct .cartQty select{
    padding: 5px 0px!important;
    width: 50px!important;
    text-align: center;
    text-align-last: center;
    direction: rtl;
}
 .cartButton {
     text-align:right;
     margin:15px 0;
}
 .cartImage {
     width:100px;
}
 .cartImage img {
     padding:10px;
}
 .cartInfo {
     flex-grow:1;
     padding:0 10px 0 15px;
}
 .cartInfo h2 {
     font-size:1rem;
}
 .cartInfo span {
     display:block;
     color: var(--color-dark-gray);
     width: 80%;
}
 .cartInfo .showSpecs {
     cursor:pointer;
     color:var(--color-light-blue) 
}
 .cartInfo .showSpecs:after {
     margin-left:2px;
     display:inline-block;
     color:var(--color-light-blue);
     font-family:var(--font-family-icon);
     font-size:16px;
     vertical-align:middle;
     transform:rotate(0deg);
     transition:transform 0.3s ease-in-out;
     content:'\e5cf';
}
 .cartInfo .rotate:after {
     transform:rotate(180deg)!important;
}
 .specifications {
     padding:5px 0 25px;
     display:grid;
     grid-template-rows:0fr;
     transition:grid-template-rows 0.5s ease-in-out;
}
 .spectifications-open {
     grid-template-rows:1fr;
}
 .specifications span {
     overflow:hidden;
}
 .cartPrice {
     padding:0 15px;
     font-weight:600;
     white-space: nowrap;
}
 .cartQty {
     padding:0 40px;
     position:relative;
}
 .cartManage {
     display:flex;
     gap:20px;
     min-width:60px;
     text-align:right;
}
 .cartManage span {
     opacity:0.5;
     transition:opacity 0.3s ease 
}
 .cartManage span:hover {
     cursor:pointer;
     opacity:0.9 
}
 .cartTotal {
     font-size:1rem;
     margin:30px 0 0 0;
     font-weight:700;
     flex-direction: column;
     align-items: flex-end;
     display:flex;
     justify-content:space-between;
}
 .cartTotalleft {
     font-weight:400;
     font-size:1rem;
}
 .cartTotalright {
     font-weight:700;
}
 .summaryToggle:after {
     margin-left:7px;
     display:inline-block;
     font-family:var(--font-family-icon);
     font-size:13px;
     vertical-align:middle;
     transform:rotate(0deg);
     transition:transform 0.3s ease-in-out;
     content:'\e5cf';
}
 .cartSummary {
     z-index:1;
     display: grid;
     grid-template-rows: 1fr;
     transition: grid-template-rows 0.5s ease-in-out;
}
 .cartSummary .cartProductcontainer {
     background:white;
     box-shadow:none;
     padding:0;
     overflow:hidden;
     border-radius: 0;
}
 .cartSummary .cartQty {
     position: absolute;
     top: 0;
     right: 0;
     font-size: 0.875rem;
     font-weight: 600;
     background: var(--color-gray-blue);
     padding: 0 8px;
     align-items: center;
     display: flex;
     transform: translateX(10%);
     justify-content: center;
     min-width: 26px;
     color: var(--color-sky-blue);
     height: 26px;
     border-radius: 35px;
}
 .summaryToggle {
     cursor: pointer;
}
 .summaryToggle:after {
     margin-left:7px;
     display:inline-block;
     font-family:var(--font-family-icon);
     font-size:13px;
     vertical-align:middle;
     transform:rotate(180deg);
     transition:transform 0.3s ease-in-out;
     content:'\e5cf';
}
 .summaryToggle.rotate:after {
     transform:rotate(0deg)!important;
}
 .summary-close {
     grid-template-rows: 0fr;
}
 .cartSummary .cartImage {
     position: relative;
     max-width:80px;
}
 .checkoutBox .content {
     padding-left:0;
}
 .checkoutForm .form {
     width:100%;
     border-radius:10px;
     padding:0 0 5px;
     display:inline-block;
     margin:0 auto 
}
 .iban {
     margin-bottom:25px;
}
 .checkoutForm p {
     margin-bottom:25px;
     color: var(--color-dark-gray) 
}
 .checkoutForm .radio {
     width:auto 
}
.caps{
    text-transform:uppercase
}
.checkoutForm .form-field{
    display: flex;
    gap: 8px;
}
.checkoutForm .form-field>div{
    flex-grow: 2;
}

.checkoutForm .form-group {
     display:flow-root;
}
.checkoutForm .agreement {
     width:100%;
     text-align:right;
     color:var(--color-dark-gray);
     margin-bottom:25px;
}
.checkoutForm .agreement a, .checkoutForm .agreement a:visited {
     color:var(--color-dark-gray);
     text-decoration: underline;
}
.checkoutForm .agreement span {
     display:inline-block;
     vertical-align:middle;
     font-size:0.875rem;
}
.shipping {
     margin-top:15px;
}
.shipping .checkoutHeader {
     margin-bottom:15px;
}
.checkoutForm .right {
     float:right;
}
.checkoutForm .cat-right {
     display:flow-root 
}
.checkoutForm .inputq {
     width:100%;
     padding:.95rem 0 .85rem .9rem;
     font-size:1rem;
     line-height:1.5;
     margin-bottom:12px;
     font-weight:500;
     color:#3c4043;
     background-clip:padding-box;
     border:1px solid var(--color-broken-white);
     background-color:var(--color-white);
     border-radius:8px;
     transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out 
}
.checkoutForm .checkout-input {
     color:#3c4043 
}
.checkoutForm .shipping-info-title {
     text-align:center;
     font-weight:600;
     display:block;
     margin:15px auto;
}
.checkoutForm .shipping-method input {
     width:20px;
     height:20px;
}
.checkoutForm .shipping-method label:focus-within {
     border: 1px solid var(--color-border);
}
.checkoutForm .shipping-method label {
     margin-bottom: 20px;
     cursor:pointer;
     display:flex;
     align-items:stretch;
     justify-content:space-between;
     padding:18px 14px;
     border-radius:8px;
     width:100%;
     background:var(--color-gray-blue);
     border: 1px solid var(--color-gray-blue);
}
.leftLabel {
     display:flex;
     flex-direction:column;
     justify-content:space-between;
     width:100%;
     gap:16px;
}
 .lefttopLabel {
     display:flex;
     flex-wrap:wrap;
     gap:8px 
}
 .leftbottomLabel {
     display:inline-flex;
     color:var(--color-dark-gray);
     flex-wrap:wrap;
     gap:10px;
     font-size: 0.875rem;
}
 .shippingRemarks {
     display:flex;
     align-items:flex-start;
     margin-right:15px;
     width: 100%;
     gap:8px;
}
 .shippingRemarks .material-symbols-outlined {
    font-size: 22px;
}
 .rightLabel {
     display:flex;
     align-items:flex-start;
}
 .rightLabel img, .rightLabel svg {
     filter: grayscale(1);
     transition: filter 0.25s;
}
.rightLabel img.colorLogo {
    filter: grayscale(0);
}
 .checkoutForm .shipping-method label:hover {
     background:var(--color-gray-blue);
}
 input[type="radio"]:checked+label {
     font-weight:bold;
}
 .checkoutForm .shipping-method .displayName {
     font-weight:500;
     padding-left:4px;
     line-height:20px;
     flex-grow:1;
     text-align:left;
}
 .shipping-method {
     margin-bottom:25px;
     position: relative;
}
 .checkoutForm .shipping-method span img {
     width:23px;
     margin-right:10px;
}
 .checkoutBox .content {
     text-align:left!important;
}
 .checkoutForm .agreement {
     text-align: left;
}
 .checkoutForm .right {
     float: none;
}
 .checkoutBox button {
     /* margin-bottom: 100px; */
     width: 100%;
     justify-content: center;
}
 .checkoutForm .noprint {
     line-height:23px;
}
 .checkoutForm .shipping-info {
     background:var(--color-white);
     border-radius:10px;
     padding:25px 26px;
}
 .checkoutForm .shipping-info p {
     text-align:center;
     font-weight:500!important;
     margin:0 0 5px!important;
}
 .checkoutForm .shipping-logo {
     margin:5px auto;
     display:block;
     text-align:center;
}
 .checkoutForm .shipping-logo img {
     display:inline-block;
     width:70px;
}
 .checkoutForm .timeslotstext {
     line-height:19px;
     font-size:0.88rem;
     text-align:left!important;
     padding:0px 5px;
}
 .checkoutForm .pickdate {
     display:flex;
     padding:8px 4px 4px;
     justify-content:space-between;
}
 .checkoutForm .shipping .timeslots {
     border-radius:4px;
     -webkit-transition:all .25s ease-out 0s;
     transition:all .25s ease-out 0s;
}
 .checkoutForm .shipping .timeslots label:hover {
     background-color:#e7e7e7;
     -webkit-transition:all .17s ease-in 0s;
     transition:all .17s ease-in 0s;
}
 .checkoutForm .shipping .timeslots label {
     text-align:left;
     display:inline-block;
     background:#f3f3f5;
     padding:10px 12px;
     border-radius:5px;
     margin:0px 3px;
     -webkit-transition:all .25s ease-out 0s;
     transition:all .25s ease-out 0s;
}
 .checkoutForm .shipping .timeslots .selected {
     background:#00af70;
     color:var(--color-white);
}
 .checkoutForm .dateslot {
     padding:5px 12px;
     width:30px;
     border:1px solid #ddd;
     border-radius:5px;
     text-align:center;
}
 .checkoutForm .dateslot span {
     display:block;
}
 .checkoutForm .dateslot span:nth-child(2) {
     font-size:1.2rem;
     font-weight:600;
}
 .checkoutForm .selectedslot {
     border:1px solid #00af70!important;
     background-color:#c8ffeb!important;
}
 .checkoutForm .shipping .timeslots label {
     border:1px solid #ddd;
     text-align:left;
     display:flex;
     justify-content:space-around;
     background:var(--color-white);
     padding:10px 12px;
     font-size:0.88rem;
     font-weight:600;
     border-radius:5px;
     margin:15px 3px 0;
     -webkit-transition:all .25s ease-out 0s;
     transition:all .25s ease-out 0s;
}
 .checkoutForm .last {
     margin-bottom:25px!important 
}
 .checkoutForm .input-field.half {
     width:49%;
     display:inline-block 
}
 .checkoutForm input[type=number] {
     -moz-appearance:textfield 
}
 .checkoutForm input[type=email],.checkoutForm input[type=number],.checkoutForm input[type=password],.checkoutForm input[type=search],.checkoutForm input[type=tel],.checkoutForm input[type=text],select,textarea {
     box-sizing:border-box;
     width:100%;
     padding:0;
     outline:0;
     font-weight:400;
}
 .checkoutForm:focus {
     border:1px solid var(--color-border) !important;
}
 .checkoutForm input[type=email]::-webkit-input-placeholder,.checkoutForm input[type=number]::-webkit-input-placeholder,.checkoutForm input[type=password]::-webkit-input-placeholder,.checkoutForm input[type=search]::-webkit-input-placeholder,.checkoutForm input[type=tel]::-webkit-input-placeholder,.checkoutForm input[type=text]::-webkit-input-placeholder,.checkoutForm select::-webkit-input-placeholder,.checkoutForm textarea::-webkit-input-placeholder {
     color:#b2afb6 
}
 .checkoutForm input[type=email]::-moz-placeholder,.checkoutForm input[type=number]::-moz-placeholder,.checkoutForm input[type=password]::-moz-placeholder,.checkoutForm input[type=search]::-moz-placeholder,.checkoutForm input[type=tel]::-moz-placeholder,.checkoutForm input[type=text]::-moz-placeholder,.checkoutForm select::-moz-placeholder,.checkoutForm textarea::-moz-placeholder {
     color:#b2afb6 
}
 .checkoutForm input[type=email]:-ms-input-placeholder,.checkoutForm input[type=number]:-ms-input-placeholder,.checkoutForm input[type=password]:-ms-input-placeholder,.checkoutForm input[type=search]:-ms-input-placeholder,.checkoutForm input[type=tel]:-ms-input-placeholder,.checkoutForm input[type=text]:-ms-input-placeholder,.checkoutForm select:-ms-input-placeholder,.checkoutForm textarea:-ms-input-placeholder {
     color:#b2afb6 
}
 .checkoutForm input[type=email]:-webkit-autofill,.checkoutForm input[type=number]:-webkit-autofill,.checkoutForm input[type=password]:-webkit-autofill,.checkoutForm input[type=search]:-webkit-autofill,.checkoutForm input[type=tel]:-webkit-autofill,.checkoutForm input[type=text]:-webkit-autofill,.checkoutForm select:-webkit-autofill,.checkoutForm textarea:-webkit-autofill {
     box-shadow:inset 0 0 0 1000px var(--color-white);
     font-size:15px!important;
     -webkit-text-fill-color:#3c4043 
}
 .checkoutForm input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,select:-webkit-autofill,select:-webkit-autofill:focus,select:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover {
     -webkit-text-fill-color:#3c4043 
}
 .checkoutForm input[type=email]:-moz-read-only,input[type=number]:-moz-read-only,input[type=password]:-moz-read-only,input[type=search]:-moz-read-only,input[type=tel]:-moz-read-only,input[type=text]:-moz-read-only,select:-moz-read-only,textarea:-moz-read-only {
     cursor:default 
}
 .checkoutForm input[type=email]:read-only, .checkoutForm input[type=number]:read-only, .checkoutForm input[type=password]:read-only, .checkoutForm input[type=search]:read-only, .checkoutForm input[type=tel]:read-only, .checkoutForm input[type=text]:read-only, .checkoutForm select:read-only, .checkoutForm textarea:read-only {
     cursor:default 
}
 .checkoutForm input[type=email].simple-input,.checkoutForm input[type=number].simple-input,.checkoutForm input[type=password].simple-input,.checkoutForm input[type=search].simple-input,.checkoutForm input[type=tel].simple-input,.checkoutForm input[type=text].simple-input,.checkoutForm select.simple-input,.checkoutForm textarea.simple-input {
     font-size:16px;
     line-height:20px;
     letter-spacing:.2px;
     font-weight:500;
     border-bottom:2px solid #d3d1d6;
     padding-bottom:8px;
     border-radius:0 
}
 .checkoutForm input[type=email].simple-input:focus,input[type=number].simple-input:focus,input[type=password].simple-input:focus,input[type=search].simple-input:focus,input[type=tel].simple-input:focus,input[type=text].simple-input:focus,select.simple-input:focus,textarea.simple-input:focus {
     border-bottom-color:#8952da 
}
 .checkoutForm input.default-grey-input[type=email],.checkoutForm input.default-grey-input[type=number],.checkoutForm input.default-grey-input[type=password],.checkoutForm input.default-grey-input[type=search],.checkoutForm input.default-grey-input[type=tel],.checkoutForm input.default-grey-input[type=text],.checkoutForm input[type=email].default-input,.checkoutForm input[type=number].default-input,.checkoutForm input[type=password].default-input,input[type=search].default-input,input[type=tel].default-input,input[type=text].default-input,select.default-grey-input,select.default-input,textarea.default-grey-input,textarea.default-input {
     font-size:14px;
     line-height:20px;
     letter-spacing:.2px;
     font-weight:500;
     width:100%;
     padding:14px 16px;
     border-radius:8px;
}
 .checkoutForm input.default-grey-input[type=email]+.field-btn,input.default-grey-input[type=number]+.field-btn,input.default-grey-input[type=password]+.field-btn,input.default-grey-input[type=search]+.field-btn,input.default-grey-input[type=tel]+.field-btn,input.default-grey-input[type=text]+.field-btn,input[type=email].default-input+.field-btn,input[type=number].default-input+.field-btn,input[type=password].default-input+.field-btn,input[type=search].default-input+.field-btn,input[type=tel].default-input+.field-btn,input[type=text].default-input+.field-btn,select.default-grey-input+.field-btn,select.default-input+.field-btn,textarea.default-grey-input+.field-btn,textarea.default-input+.field-btn {
     top:4px 
}
 .checkoutForm input[type=email].default-grey-input,input[type=number].default-grey-input,input[type=password].default-grey-input,input[type=search].default-grey-input,input[type=tel].default-grey-input,input[type=text].default-grey-input,select.default-grey-input,textarea.default-grey-input {
     background-color:#f2f1f4 
}
 .checkoutForm input[type=email].filter-input,input[type=number].filter-input,input[type=password].filter-input,input[type=search].filter-input,input[type=tel].filter-input,input[type=text].filter-input,select.filter-input,textarea.filter-input {
     font-size:14px;
     line-height:20px;
     letter-spacing:.2px;
     font-weight:500;
     width:100%;
     padding:10px 16px;
     border-radius:8px;
}
 .checkoutForm input[type=email].grey,input[type=number].grey,input[type=password].grey,input[type=search].grey,input[type=tel].grey,input[type=text].grey,select.grey,textarea.grey {
     background-color:#f2f1f4 
}
 .checkoutForm input[type=email].grey:-webkit-autofill,input[type=number].grey:-webkit-autofill,input[type=password].grey:-webkit-autofill,input[type=search].grey:-webkit-autofill,input[type=tel].grey:-webkit-autofill,input[type=text].grey:-webkit-autofill,select.grey:-webkit-autofill,textarea.grey:-webkit-autofill {
     box-shadow:inset 0 0 0 1000px #f2f1f4 
}
 .checkoutForm label {
     font-weight:400;
     -webkit-tap-highlight-color:transparent 
}
 .checkoutForm .input-field {
     position:relative;
     margin-bottom:16px 
}
.checkoutForm .shipping .notValid label,
.checkoutForm .input-field.notValid{
    border: 3px solid #d94506;
    border-radius: 8px;
}
.checkoutForm .shipping label:has(input:checked) {
    background: var(--color-gray-blue);
    cursor: default;
    border: 1px solid var(--color-border);
}

.checkoutForm .shipping .dropoffStore .shippingRemarks span{
    flex-grow: 2;
}

.checkoutForm .business_message{
    padding-bottom: 10px;
}

 .checkoutForm .input-field label {
     pointer-events:none;
     -webkit-user-select:none;
     -moz-user-select:none;
     -ms-user-select:none;
     user-select:none;
     color:var(--color-dark-gray);
     position:absolute;
     top:18px;
     left:16px;
     transition:all .15s ease-out 
}
 .checkoutForm .disabled {
     opacity:.7 
}
 .checkoutForm .disabled:hover {
     opacity:.7;
     margin:-2px 0 0 0;
     border-bottom:4px var(--color-white) solid;
     cursor:default 
}
 .checkoutForm .bdisabled {
     color:#ccc;
     box-shadow:none;
     border:1px solid #ddd;
     background:repeating-linear-gradient(135deg, var(--color-white), var(--color-white) 5px, #eee 5px, #eee 10px);
}
 .checkoutForm .side-tab-content .bdisabled {
     border:none;
     color:#3c4043;
}

 .checkoutForm .error-msg {
     position:absolute;
     top:-23px;
     left:5px;
     color:#d94506;
     padding-left: 5px;
     display: none;
}
 .checkoutForm .error-msg span {
     font-size: 11px;
     opacity:0;
     transition:all .15s ease-out;
}
 .checkoutForm .notValid .error-msg span {
     opacity:1 
}
 .checkoutForm .input-field input,.input-field label,.input-field textarea {
     font-size:14px;
     line-height:20px;
}
 .checkoutForm .input-field input,.input-field textarea {
     color:#3c4043;
     border-radius:8px;
     padding:28px 16px 8px;
     white-space:pre;
     -moz-tab-size:70px;
     tab-size:70px;
     border:1px solid var(--color-broken-white);
     background-color:var(--color-white);
}
 .checkoutForm .input-field input::placeholder {
     color:transparent 
}
 .notValid p,
 .checkoutForm:not(:has(.shipping)).notValid label {
     color:#d94506 
}


 .checkoutForm .pickupValid {
     color:#d94506;
     position:relative;
     font-size:.8em;
     right:-311px;
     bottom:39px;
}


 .pointer {
     cursor:pointer!important 
}
 .checkoutForm .input-field input:focus~label,.input-field textarea:focus~label {
     font-size:12px;
     line-height:16px;
     letter-spacing:.2px;
     font-weight:600;
     transform:translateY(-10px);
     color:var(--color-primary-color);
}
 .checkoutForm .input-field input:not(:placeholder-shown)+label,.input-field textarea:not(:placeholder-shown)+label {
     font-size:12px;
     line-height:16px;
     letter-spacing:.2px;
     font-weight:600;
     transform:translateY(-10px);
     color:#3c4043 
}
 .checkoutForm .input-field input:not(:checked)~label .text {
     opacity: 0.5 
}
 .checkoutForm select input:not(:placeholder-shown)+label {
     color:white;
}
 .checkoutForm .input-field input:not(:-ms-input-placeholder)+label,.input-field textarea:not(:-ms-input-placeholder)+label {
     font-size:12px;
     line-height:16px;
     letter-spacing:.2px;
     font-weight:600;
     transform:translateY(-10px) 
}

.checkoutForm .notValid .error-msg,
.checkoutForm .input-field.notValid .error-msg{
    display: block;
}

 .checkoutForm select {
     -webkit-appearance:none;
     -moz-appearance:none;
     background-image:linear-gradient(45deg,transparent 50%,gray 50%),linear-gradient(135deg,gray 50%,transparent 50%),radial-gradient(#f5f5f5 70%,transparent 72%);
     background-position:calc(100% - 20px) calc(1em + 8px),calc(100% - 15px) calc(1em + 8px),calc(100% - .5em) .85em;
     background-size:5px 5px,5px 5px,1.5em 1.5em;
     background-repeat:no-repeat;
}
 .checkoutForm .consorbus {
     background:#f5f5f5;
     border:0;
     cursor:pointer;
     padding:16.25px 0;
     -webkit-transition:all .12s ease-out 0s;
     transition:all .12s ease-out 0s 
}
 .checkoutForm .consorbus:hover {
     -webkit-transition:all .12s ease-out 0s;
     transition:all .12s ease-out 0s 
}
 .checkoutForm .consorbus.chosen {
     background:#9e9ea8;
     cursor:default 
}
 .checkoutForm .busbuttons input {
     width:1px;
     height:0;
     opacity:0;
     margin-left:4px 
}
 .checkoutForm .busbuttons label {
     font-size:1rem!important;
     border-radius:8px;
     display:inline-block;
     width:100%;
     text-align:center;
     color:var(--color-white);
     -webkit-transition:all .12s ease-out 0s;
     transition:all .12s ease-out 0s;
     user-select:none;
     pointer-events:unset;
     position:relative;
     top:0;
     left:0;
     margin:-11px 0;
     border:1px solid var(--color-gray-blue);
     background:var(--color-gray-blue);
     line-height:initial!important 
}
 .checkoutForm .busbuttons input:checked~label {
     background:var(--color-gray-blue);
     cursor:default;
     border:1px solid var(--color-border);
}
 .checkoutForm .busbuttons label:hover {
     background:#e6e9f2;
     border:1px solid #e6e9f2;
}
 .checkoutBox .cartTotal {
     margin: 30px 0;
}
 .checkoutForm .cartMessage {
     margin:20px 0 0;
     text-align:center;
     display:flow-root 
}
 .checkoutForm .cartManage {
     margin:auto 0;
     min-width:15%;
     width:auto 
}
 .checkoutForm .cartImage {
     width:20%;
     height:inherit;
}
 .checkoutForm .cartMessage p {
     font-weight:600 
}
 .checkoutForm .inputq::placeholder {
     color:#bbb 
}
 .checkoutForm .formContent p {
     margin:40px 0 30px;
     font-weight:600;
}
 .checkoutHeader {
     font-size:1.2rem;
     font-weight:600;
     margin-bottom:25px;
}
 .checkoutBox button {
     border:none;
     cursor:pointer;
     padding:13px 25px;
     position:relative;
     display:inline-flex;
     align-items:center;
     font-size:20px;
     font-weight:700;
     text-align:center;
     color:var(--color-white)!important;
     border-radius:50px;
     background:linear-gradient(86.42deg, var(--color-light-blue) 0%, var(--color-gradient-end) 100%);
     box-shadow:0 10px 30px 0 rgba(69, 82, 243, 0.3);
     transition:background .4s ease-in-out;
     background-size:300% 100%;
}
 .checkoutBox 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;
}
 .cartBox .formContent .material-symbols-outlined {
     position:relative;
     top:6px;
     margin-right:5px;
}

.emailresponseBox{
    display: flex;
    align-items: center;
    font-size: 1.1em;
    color: #335d4d;
    background: rgb(111 197 164 / 15%);
    border-radius: 8px;
    padding: 20px 18px;
    margin: 30px 0 30px;
    flex-direction: column;
    gap: 20px;
}

/*Dialog Styles*/
 dialog {
     padding:1rem 3rem 2rem;
     background:white;
     margin:auto;
     max-width:600px;
     padding-top:2rem;
     border-radius:20px;
     border:0;
     box-shadow:0 5px 30px 0 rgb(0 0 0 / 10%);
     animation:fadeIn 1s ease both;
}
 dialog::backdrop {
     animation:fadeIn 1s ease both;
     background:rgb(255 255 255 / 40%);
     z-index:2;
     backdrop-filter:blur(20px);
     -webkit-backdrop-filter:blur(20px);
}
 .close-x {
     filter:grayscale(1);
     border:none;
     background:none;
     position:absolute;
     top:38px;
     right:40px;
     font-size:20px;
     font-weight:900;
     transition:ease filter, transform 0.3s;
     cursor:pointer;
     transform-origin:center;
}
 .close-x:hover {
     transform:scale(1.1);
}
 .close-x {
     position:absolute;
     top:30px;
     right:25px;
     z-index:15;
     width:22px;
     height:22px;
     transition:var(--base-duration);
     cursor:pointer;
}
 .close-x {
     position:absolute;
     display:block;
     text-indent:-9999px;
     border-radius:5px;
}
 .close-x:before,.close-x:after {
     position:absolute;
     top:0;
     left:0;
     display:block;
     width:100%;
     height:3px;
     border-radius:5px;
     background-color:var(--color-primary);
     transition-duration:0.2s, 0.2s;
     content:'';
}
 .close-x:before {
     top:0;
     transform:rotate(45deg);
}
 .close-x:after {
     bottom:0;
     transform:rotate(-45deg);
}
.dialog-wrapper{
    padding: 20px;
}
 .dialog-wrapper h2 {
     font-size:2rem;
     padding-bottom:1.5rem;
}
 .dialog-wrapper p {
     font-size:1rem;
     line-height:1.3rem;
     padding:0.5rem 0;
     a {
         &:visited {
             color:rgb(var(--vs-primary));
        }
    }
}
/* ### footer container ### */
 #footerCntr {
     width: 100%;
}
/* ### footer box ### */
 .footerBox {
     padding-top: 64px;
     padding-bottom: 25px;
     background-color: var(--color-gray);
}
 .footerBox .custom-logo-link {
     margin-bottom: 35px;
}
 .footerBox .custom-logo {
     max-width: 105px;
}
 .footerBox .dark-theme {
     display: none;
}
 .footerBox .wrap {
     margin: 0 -5px 35px;
}
 .footerBox .item {
     padding: 0 5px;
     width: 25%;
}
 .footerBox .title {
     margin-bottom: 25px;
     font-size: var(--font-size-base);
     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);
     cursor: pointer;
}
 .footerBox li a:hover {
     color: var(--color-light-blue);
}
/* ### copyright box ### */
 .copyright {
     padding-top: 30px;
     text-align: center;
     border-top: 1px solid #9ea4b2;
}
 .copyright p {
     font-weight: 500;
     color: var(--color-dark-gray);
}

/* COOKIE BANNER */
.footerLink{
    margin: 0; 
    color: #ff4322;
    display: inline-block;
}
.consentTable {
    overflow: auto;
    width: 100%;
}

.consentTable th,
.consentTable td{
    border-left: 1px solid #f3f3f3;
    padding: 3px 0.8em;
    text-align: left;
    white-space: nowrap;
}
.consentTable td:last-child{
    border-right: 1px solid #f3f3f3;
}
.consentTable th {
    background-color: #f3f3f5;
    color: #555;
}
.consentTable tr:last-child td{
    border-bottom: 1px solid #f3f3f3;
}

.consent{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 5px;
    background-color: transparent;
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2147483551;
    overflow: hidden;
  }
  .consentButtons{
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding-top: 15px;
    gap: 20px;
  }
  .consentButtons>div{
    padding-left: 4%;
    padding-right: 4%;
  }
  .consentButtons label{
    cursor: pointer;
  }

  .consent>div{
    background-color: #fff;
    width: 50%;
    margin: auto;
    height: 100%;
    max-height: calc(100vh - 20px);
    overflow: auto;
    padding: 25px 25px 15px 25px;
    border-radius: 10px;
    background-color: #fff;
    -webkit-box-shadow: rgb(0 15 20 / 19%) 0 1px 2px, rgb(0 20 24 / 9%) 0 3px 12px;
    -moz-box-shadow: rgba(0,15,20,.19) 0 1px 2px,rgba(0,20,24,.09) 0 3px 12px;
    box-shadow: rgb(0 15 20 / 19%) 0 1px 2px, rgb(0 20 24 / 9%) 0 3px 12px;
  }
  .consent>div>p{
    padding-bottom: 20px;
  }

  .consentSettings{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    position: fixed;
    z-index: 2147483551;
  }

  .consentSettings .cBody a {
    margin-left: 40px;
  }

.consentButton{
    text-align: center;
    padding: 10px 15px;
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: 700;
    border-radius: 50px;
    background-size: 300% 100%;
}


.consentButtonYes{
    background: linear-gradient(86.42deg, #0645ff 0%, #537efd 100%);
    box-shadow: 0 10px 30px 0 rgba(69, 82, 243, 0.3);
}
.consentButtonYes:hover {
    background: linear-gradient(to right, rgba(83, 126, 253, 1) 0%, rgba(6, 68, 255, 1) 100%);
    background-position: 100% 0;
}

.consentButtonNo{
    background: linear-gradient(86.42deg, rgb(122 131 155 / 69%) 0%, rgb(175 181 193) 100%);
    box-shadow: 0 10px 30px 0 #7a7c944d;
}
.consentButtonNo:hover {
    background: linear-gradient(to right, rgb(175 181 193) 0%, rgb(122 130 155 / 71%) 100%);
    background-position: 100% 0;
}



  .consentButton span{
    padding: 20px 10px;
    color: #fff;
    font-weight: 700;
  }

  .consentSettings h4,
  .consent h4{
   margin: 0;
  }
  .consentSettings p{
    margin-block-start: 0;
    padding-block-start: 0.5em;
  }

  .consentSettings .cPopupBox{
    max-height: 100vh;
    overflow: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    min-height: calc(100vh - 650px);
    position: relative;
    max-height: 100%;
    width: 50%;
    margin: auto;
  }

  .consentSettings .cPopup{
    background-color: #fff;
    border-radius: 10px;
    background-color: #fff;
    -webkit-box-shadow: rgb(0 15 20 / 19%) 0 1px 2px, rgb(0 20 24 / 9%) 0 3px 12px;
    -moz-box-shadow: rgba(0,15,20,.19) 0 1px 2px,rgba(0,20,24,.09) 0 3px 12px;
    box-shadow: rgb(0 15 20 / 19%) 0 1px 2px, rgb(0 20 24 / 9%) 0 3px 12px;
    position: relative;
  }

  .consentSettings>div svg{
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    stroke: #131d5a;
  }

  .consentSettings .cHead{
    padding: 25px 30px 10px 40px;
  }

  .consentSettings .cBody{
    padding: 10px 30px 80px 40px;
  }

  .slider-checkbox .label>span{
  /* .consentSettings .cTitle{ */
    font-weight: 600;
    display: inline-block;
    width: auto;
  }

  .consentSettings .consentButtons{
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
  }

  .consent a {
    cursor: pointer;
  }



  .slider-checkbox {
    position: relative;
    list-style: none;
    padding: 10px 50px 10px 0;
  }
  .slider-checkbox input[type=checkbox] {
    margin: 0px;
    margin-top: 1px;
    cursor: pointer;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    background: red;
    width: 40px;
    height: 20px;

  }
  .slider-checkbox input[type=checkbox]:checked + .label:before {
    background-color: #1c55fe;
    content: " ";
    padding-left: 6px;
  }
  .slider-checkbox input[type=checkbox]:checked + .label:after {
    left: 21px;
  }

  .slider-checkbox .label{
    display: inline-block;
    width: -webkit-fill-available;
  }

  .slider-checkbox .label {
    position: relative;
    padding-left: 60px;
    cursor: pointer;
  }
  .slider-checkbox .label:before, .slider-checkbox .label:after {
    position: absolute;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    transition: background-color 0.3s, left 0.3s;
  }
  .slider-checkbox .label:before {
    content: "";
    color: #fff;
    box-sizing: border-box;
    padding-left: 23px;
    font-size: 12px;
    line-height: 20px;
    background-color: #888;
    left: 0px;
    top: 3px;
    /* top: 0px; */
    height: 20px;
    width: 40px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
  .slider-checkbox .label:after {
    content: "";
    letter-spacing: 20px;
    background: #fff;
    left: 1px;
    top: 4px;
    /* top: 1px; */
    height: 18px;
    width: 18px;
  }

  .busy-spinner{
    display: flex;
    justify-content: center;
  }




  @media (max-width: 767px){
    .consentSettings .cPopupBox,
    .consent>div{
      width: 100%;
      box-sizing: border-box;
      border-radius: 0px;
    }
  }






/* #Media Queries ================================================== */
 @media only screen and (max-width: 1405px) {
     h1 {
         font-size: 50px;
    }
     .centered {
         padding-right: 10px;
         padding-left: 10px;
    }
     .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;
    }
}
 @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;
    }
     .checkoutBox .content {
        width: 55%
    }
     .checkoutBox .image {
        width: 40%;
    }
}
 @media only screen and (max-width: 991px) {
     .checkoutBox .wrap{
         flex-direction: column-reverse;
    }
     .checkoutBox .content {
        width: 100%
    }
     .checkoutBox .image {
        width: 100%;
    }
     .cartContent {
        width: 100%!important;
    }
     .cartContent .cartProductcontainer {
         padding:10px 20px 
    }
     .checkoutBox .cartProductcontainer {
         padding:0px 
    }
     .checkoutBox .image {
         margin-right: 0!important;
         margin-left: 0!important;
         width: 100%!important;
         margin-top: 0!important;
         margin-bottom: 25px!important;
         border-bottom: 1px solid #f1f1f1 
    }
     h1 {
         font-size: 34px;
    }
     h2 {
         font-size: 40px;
    }
     h3 {
         font-size: 32px;
    }
     .heroBox .content {
         padding-left: 0;
    }
     .heroBox .sub-title {
         font-size: 20px;
    }
     .heroBox .x-layer img {
         max-width: 340px;
    }
     .manageBox {
         margin-bottom: 80px;
    }
     .startBox {
         margin-bottom: 100px;
    }
     .requestBox {
         padding-bottom: 100px;
    }
     .bannerBox h1 {
         font-size: 33px;
    }
     .bannerBox .image {
         margin-right: -50px;
         width: calc(60% + 50px);
    }
     .footerBox li a {
         font-size: 14px;
    }
}
 @media only screen and (min-width: 768px) {
     .mega-menu {
         display: block !important;
         height: auto !important;
    }
     .footerBox ul {
         display: block !important;
         height: auto !important;
    }
     .menuBox ul > li .mega-menu {
        display:none!important;
         cursor: default;
    }
     .menuBox ul > li:hover .mega-menu {
         display: block!important;
         opacity: 1;
         visibility: visible;
         transition: all 0.35 ease;
         -webkit-animation: fadeIn 0.35s;
         animation: fadeIn 0.35s;
    }
}
 @media only screen and (max-width: 767px) {
     .card-accordion .accordion-title:before {
         top: 13px;
    }
     .cartButton .button {
         width: 100%;
         justify-content: center;
    }
     .cartProduct {
         flex-wrap: wrap;
         row-gap: 20px;
    }
     .cartTotal {
        flex-direction: column;
         padding: 30px 0;
    }
     .questionnaireHeader img {
         max-height: 180px;
    }
     .cartImage {
        width: 25%!important;
    }
     .cartManage {
        gap: 25px!important;
    }
     .cartManage span.material-symbols-outlined {
        font-size:27px!important;
    }
    /* .cartBox .cartQty:before {
         content:'-';
         position:absolute;
         width:30px;
         color:#3c4043;
         display:flex;
         height:100%;
         font-size:30px;
         opacity:0.5;
         align-items:center;
         font-weight:700;
         top:0;
         left:0;
         justify-content:center;
    }
     .cartBox .cartQty:after {
         content:'+';
         position:absolute;
         width:30px;
         opacity:0.5;
         display:flex;
         height:100%;
         font-size:30px;
         align-items:center;
         font-weight:700;
         top:0;
         right:0;
         justify-content:center;
    }
     */
     .cartProduct input[type=number]::-webkit-inner-spin-button,.cartProduct input[type=number]::-webkit-outer-spin-button {
         opacity:0!important;
         cursor:pointer;
         display:none;
    }
     .cartProduct input[type=number] {
         padding: 5px 0px!important;
         text-align: center;
         width: 50px!important;
    }
     dialog {
         max-width: 95%;
    }
     h1 {
         font-size: 48px;
    }
     .switch-btn {
         margin-right: 0;
         z-index: 2;
    }
     #headerCntr.active:before {
         position: absolute;
         top: 0;
         left: 0;
         z-index: 3;
         width: 100%;
         height: 100%;
         background-color: var(--color-white);
         content: '';
    }
     #headerCntr .wrap {
         padding-right: 16px;
         padding-left: 15px;
    }
     #headerCntr {
         padding-top: 19px;
         padding-bottom: 18px;
    }
     #headerCntr .button .d-desktop {
         display: none;
    }
     #headerCntr .button .d-material-symbols-outlined {
         margin: 0 
    }
     #headerCntr .button.d-phone {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 5px;
    }
     #headerCntr .custom-logo-link {
         width: 50%;
    }
     #headerCntr .custom-logo-link 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: 25px;
         padding: 0;
         display: block;
    }
     .menuBox ul > li.dropdown:after {
         display: none;
    }
     .menuBox ul > li.dropdown > a:after {
         position: absolute;
         top: 1px;
         right: -20px;
         font-family: var(--font-family-icon);
         content: '\e5cf';
    }
     .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%;
         box-shadow: none;
    }
     .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: 30px;
         padding-left: 55px;
    }
     .mega-menu strong {
         margin-bottom: 25px;
    }
     .mega-menu p {
         font-size: var(--font-size-base);
    }
     .mega-menu h6 {
         font-size: 18px;
    }
     .mega-menu ul {
         margin-bottom: 0!important;
    }
     .heroBox {
         margin-bottom: 0;
         padding-top: 120px;
    }
     .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);
         margin-top: 25px;
         margin-bottom: 60px;
    }
     .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;
    }
    #contentCntr{
        position: relative;
        margin-top: 0;
    }
     .heroBox .mobile-search {
        /* position: fixed; */
        background: white;
        z-index: 9;
        left: 0;
        top: 0;
        /* height: 100vh; */
        margin: 0;
        width: 100%;
        padding: 20px;
    }
     .logoBox {
         margin-bottom: 80px;
    }
     .logoBox .wrap {
         justify-content: space-around;
         gap: 25px 10px;
    }
     .logoBox .custom-logo-link {
         margin-bottom: 20px;
         max-width: 50%;
    }
     .logoBox .custom-logo-link img {
         margin: 0 auto;
    }
     .graphBox {
         padding-bottom: 65px;
    }
     .graphBox .content {
         padding-top: 0;
         padding-right: 0;
         order: 2;
         width: 100%;
    }
     .graphBox .image {
         margin-bottom: 0px;
         order: 1;
         width: 100%;
    }
     .graphBox .card-graph {
         padding-left: 20px;
    }
     .graphBox .card-graph:before {
         width: 100%;
    }
     .graphBox.inner {
         padding-top: 65px;
    }
     .categoryMain .categoryBox {
         padding-top: 90px;
    }
     .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;
    }
     .category-products .wrap {
         gap: 15px 12px!important;
         grid-template-columns: repeat(auto-fill,minmax(168px,1fr))!important;
    }
     .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;
    }
     .faqBox h2 {
         font-size: 32px;
    }
     .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;
    }
     .reviewBox {
         padding-bottom: 60px;
    }
     .reviewBox .swiper {
         width: 75%;
    }
     .reviewBox .swiper-slide.swiper-slide-active .card-review h6 {
         font-size: var(--font-size-base);
    }
     .reviewBox .swiper-slide.swiper-slide-active .card-review p {
         font-size: var(--font-size-base);
    }
     .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%;
    }
     .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;
    }
     .footerBox {
         text-align: center;
    }
     .footerBox .title {
         cursor: pointer;
         font-size: 15px;
    }
     .footerBox .wrap {
         margin-bottom: 10px;
    }
     .footerBox ul {
         display: none;
    }
}
.checkout-button{
    display: flex;
    gap: 10px;
    align-items: center;
}
.checkoutBox button .loading{
    position: absolute;
    left: 30px;
}
 .loading {
     -webkit-animation:spin 2s linear infinite;
     -moz-animation:spin 2s linear infinite;
     animation:spin 2s linear infinite 
}
 @-moz-keyframes spin {
     100% {
         -moz-transform:rotate(360deg) 
    }
}
 @-webkit-keyframes spin {
     100% {
         -webkit-transform:rotate(360deg) 
    }
}
 @keyframes spin {
     100% {
         -webkit-transform:rotate(360deg);
         transform:rotate(360deg) 
    }
}
 @keyframes fadeIn {
     from {
         opacity:0;
    }
     to {
         opacity:1;
    }
}
 @-webkit-keyframes fadeIn {
     from {
         opacity:0;
    }
     to {
         opacity:1;
    }
}