:root{
    --color-primary: #09216E;
    --color-dark: #222222;
    --color-border: #ECF5F6;
    --color-body: #424851;
    --color-white: #FFFFFF;
    --color-border-dark: #626262;
    --color-border-lightblue: #d9e6e7;
    --color-danger: #dc3545;
}

body{font-family: "Inter", sans-serif; font-weight: 400; color: var(--color-body); font-size: 1rem; line-height: 1.6;}
h1, h2, h3, h4, h5, h6{font-weight: 700; color: var(--color-dark);}
h1{font-size: 2.5rem;}
h2{font-size: 2rem;}
h3{font-size: 1.5rem;}

.cursor-pointer{cursor: pointer !important;}

.img-primary{filter: brightness(0) saturate(100%) invert(12%) sepia(64%) saturate(2793%) hue-rotate(219deg) brightness(95%) contrast(109%);}
.img-dark{filter: brightness(0) saturate(100%) invert(7%) sepia(1%) saturate(261%) hue-rotate(314deg) brightness(102%) contrast(86%);}
.img-white{filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(19deg) brightness(109%) contrast(101%);}
.img-danger{filter: brightness(0) saturate(100%) invert(15%) sepia(50%) saturate(3552%) hue-rotate(336deg) brightness(91%) contrast(91%);}
.img-success{filter: brightness(0) saturate(100%) invert(22%) sepia(32%) saturate(991%) hue-rotate(100deg) brightness(100%) contrast(94%);}
.img-info{filter: brightness(0) saturate(100%) invert(19%) sepia(72%) saturate(2106%) hue-rotate(203deg) brightness(92%) contrast(102%);}
.img-warning{filter: brightness(0) saturate(100%) invert(25%) sepia(70%) saturate(519%) hue-rotate(7deg) brightness(106%) contrast(102%);}

.check-list li{position: relative; padding-left: 2rem; background: url("/content/images/patch-check-icon.svg") no-repeat left; background-size: 1.5rem;} 
.check-list li + li{margin-top: 0.75rem;}

.checkmark-list li{position: relative; padding-left: 2rem; background: url("/content/images/check-icon.svg") no-repeat left 8px;}
.grid-cols-2{display: grid; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));}

/*=== Background ===*/
.bg-primary{background-color: var(--color-primary) !important;}
.bg-dark{background-color: var(--color-dark) !important;}
.bg-light{background-color: var(--color-border) !important;}

/*=== Text ===*/
.text-body{color: var(--color-body) !important;}
.text-primary{color: var(--color-primary) !important;}
.text-dark{color: var(--color-dark) !important;}
.text-tranparent{color: transparent !important;}

.fw-medium{font-weight: 500 !important;}
.fw-semibold{font-weight: 600 !important;}

/*=== Buttons ===*/
.btn{text-transform: uppercase; font-weight: 500; display: inline-flex; align-items: center; justify-content: center;}
.btn:focus, .btn:active{box-shadow: inherit;}
.btn-lg{font-size: 1rem; padding: 0.875rem 1.5rem;}

.btn-dark{background-color: var(--color-dark); color: var(--color-white); border: 2px solid var(--color-dark);}
.btn-dark img{filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(19deg) brightness(109%) contrast(101%);}
.btn-dark:hover{background-color: transparent; color: var(--color-dark);}
.btn-dark:hover img{filter: brightness(0) saturate(100%) invert(7%) sepia(1%) saturate(261%) hue-rotate(314deg) brightness(102%) contrast(86%);}
.btn-outline-dark{color: var(--color-dark); border: 2px solid var(--color-dark);}
.btn-outline-dark img{filter: brightness(0) saturate(100%) invert(7%) sepia(1%) saturate(261%) hue-rotate(314deg) brightness(102%) contrast(86%);}
.btn-outline-dark:hover{background-color: var(--color-dark); color: var(--color-white);}
.btn-outline-dark:hover img{filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(19deg) brightness(109%) contrast(101%);}

.btn-primary{background-color: var(--color-primary); color: var(--color-white); border: 2px solid var(--color-primary);}
.btn-primary img{filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(19deg) brightness(109%) contrast(101%);}
.btn-primary:hover{background-color: transparent; color: var(--color-primary); border: 2px solid var(--color-primary);}
.btn-primary:hover img{filter: brightness(0) saturate(100%) invert(12%) sepia(64%) saturate(2793%) hue-rotate(219deg) brightness(95%) contrast(109%);}
.btn-outline-primary{color: var(--color-primary); border: 2px solid var(--color-primary);}
.btn-outline-primary img{filter: brightness(0) saturate(100%) invert(12%) sepia(64%) saturate(2793%) hue-rotate(219deg) brightness(95%) contrast(109%);}
.btn-outline-primary:hover{background-color: var(--color-primary); color: var(--color-white); border: 2px solid var(--color-primary);}
.btn-outline-primary:hover img{filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(19deg) brightness(109%) contrast(101%);}

.btn-white{background-color: var(--color-white); color: var(--color-primary); border: 2px solid var(--color-white);}
.btn-white img{filter: brightness(0) saturate(100%) invert(12%) sepia(64%) saturate(2793%) hue-rotate(219deg) brightness(95%) contrast(109%);}
.btn-white:hover{background-color: transparent; color: var(--color-white);}
.btn-white:hover img{filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(19deg) brightness(109%) contrast(101%);}
.btn-outline-white{color: var(--color-white); border: 2px solid var(--color-white);}
.btn-outline-white img{filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(19deg) brightness(109%) contrast(101%);}
.btn-outline-white:hover{background-color: var(--color-white); color: var(--color-primary);}
.btn-outline-white:hover img{filter: brightness(0) saturate(100%) invert(25%) sepia(19%) saturate(353%) hue-rotate(177deg) brightness(95%) contrast(88%);}

.btn-danger{background-color: var(--color-danger); color: var(--color-white); border: 2px solid var(--color-danger);}
.btn-danger img{filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(19deg) brightness(109%) contrast(101%);}
.btn-danger:hover{background-color: transparent; color: var(--color-danger); border: 2px solid var(--color-danger);}
.btn-danger:hover img{filter: brightness(0) saturate(100%) invert(22%) sepia(86%) saturate(2611%) hue-rotate(339deg) brightness(94%) contrast(82%);}

/*=== Form ===*/
.form-control, .form-select{padding: 0.75rem 1rem;}

/*=== Borders ===*/
.border, .border-start, .border-end, .border-top, .border-bottom{border-color: var(--color-border-lightblue) !important;}
.border-dark{border: 1px solid var(--color-border-dark) !important;}
.border-lightblue{border: 1px solid var(--color-border-lightblue) !important;}
.border-top-lightblue{border-top: 1px solid var(--color-border-lightblue) !important;}
.border-bottom-lightblue{border-bottom: 1px solid var(--color-border-lightblue) !important;}
.rounded-8{border-radius: 0.5rem !important;}
.rounded-16{border-radius: 1rem !important;}
.rounded-20{border-radius: 1.25rem !important;}
.rounded-24{border-radius: 1.5rem !important;}

/*=== Table ===*/
.table > thead th{border-bottom: none !important; font-weight: normal;}
.table > :not(caption) > * > *, .type-compare-table > th:not(caption) > * > *{padding: 1rem;}
.table .border-bottom-0{border-bottom: none !important;}
.type-compare-table > thead th{padding: 0 !important;}

.compare-table tbody td:not(:first-child){text-align: center; vertical-align: middle;}

/*=== Navigation ===*/
header .navbar-nav .nav-item .dropdown-item{padding-top: 0.5rem; padding-bottom: 0.5rem;}
header .navbar-nav .nav-item .dropdown-item:hover{background-color: var(--color-border);}

.header-top{border-bottom: 1px solid var(--color-border);}
.header-top .navbar-nav .nav-item .nav-link{color: var(--color-body); padding: 0.5rem 0;}

.header-container{z-index: 99;}
.header-container.is-fixed{position: fixed; width: 100%; transform: translateY(0%); top: 0; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);}

.header-container .navbar-nav .nav-item{position: inherit;}
.header-container .navbar-nav .nav-item .nav-link{text-transform: uppercase; color: var(--color-dark);}
.nav-cart span{top: 0rem; right: -0.25rem; font-size: 0.75rem; height: 1.25rem; width: 1.25rem; line-height: 1.25rem;}

header .navbar-nav .nav-item .dropdown-toggle:after{border: none; background-image: url("/content/images/arrow-down.svg"); background-repeat: no-repeat; width: 0.75rem; height: 0.375rem; align-self: center;}
header .navbar-nav .nav-item .dropdown-toggle.show:after{transform: rotate(-180deg);}

.header-cart-top{position: fixed; top: 0; width: 100%; z-index: 99; opacity: 0; transform: translateY(-100px); transition: all 0.5s ease;}
.header-cart-top.is-fixed {opacity: 1; transform: translateY(0);}

/*=== Banner ===*/
.banner{background-image: url("/content/images/banner-bg.svg"); background-repeat: no-repeat; background-position: right top;}
.banner .carousel-indicators{bottom: -3rem;}
.banner .carousel-indicators button{width: 1rem; height: 1rem; border: 1px solid var(--color-white); border-radius: 50%; background-color: transparent; opacity: 1; margin: 0 0.5rem;}
.banner .carousel-indicators button.active{background-color: var(--color-white);}

.section{padding: 5rem 0;}
.section-inside{padding-top: 5rem; margin-top: 5rem;}

.shop-boxes .shop-box:hover{box-shadow: 0 0  24px rgba(0, 0, 0, 0.16);}

.types-section, .key-features{background-image: url("/content/images/types-pettern.svg"); background-repeat: no-repeat; background-position: left bottom;}
.types-boxes > a{border: 1px solid var(--color-white); border-radius: 0.5rem;}
.types-boxes > a > span{background-color: var(--color-white); height: 6.25rem; min-width: 6.25rem; font-weight: 700; color: var(--color-primary); font-size: 2.25rem;}
.types-boxes > a h3, .types-boxes > a p{color: var(--color-white);}
.types-boxes > a img{filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(19deg) brightness(109%) contrast(101%);}
.types-boxes > a:hover{background-color: var(--color-white);}
.types-boxes > a:hover > span{background-color: var(--color-primary); color: var(--color-white);}
.types-boxes > a:hover h3{color: var(--color-dark);}
.types-boxes > a:hover p{color: var(--color-body);}
.types-boxes > a:hover img{filter: brightness(0) saturate(100%) invert(25%) sepia(19%) saturate(353%) hue-rotate(177deg) brightness(95%) contrast(88%);}

.platform-box{border-radius: 0.75rem; box-shadow: 0 0 24px rgba(0, 0, 0, 0.16);}
.platform-box span{min-height: 6rem; border-radius: 0.5rem;}
.platform-box:hover strong{color: var(--color-primary) !important;}

.benefits-darkbox{background-image: url("/content/images/benifits-bg.svg"); background-repeat: no-repeat; background-position: center bottom; border-radius: 1.5rem;}
.benefit-icon{min-width: 3.75rem; height: 3.75rem; border-radius: 0.5rem;}

.text-outline{font-weight: 700; -webkit-text-stroke: 1px var(--color-body);}
.faq-question + .faq-question{border-top: 1px solid var(--color-white); margin-top: 1.5rem; padding-top: 1.5rem;}

.post-box{ display: block;}
.post-box img{border-radius: 1.5rem 1.5rem 0 0; transition: all 0.5s;}
.post-box:hover h3{color: var(--color-primary) !important;}
.post-box:hover img{transform: scale(1.05);}

.testimonials{background-image: url(/content/images/bg-maps.jpg); background-repeat: no-repeat; background-position: center top;}
.testimonials-box{border-radius: 0.5rem; box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);}
.support-section{border-radius: 1rem; position: relative; z-index: 9;}
.support-section span{border-radius: 0.5rem; min-width: 3.75rem; height: 3.75rem;}

/*=== Footer ===*/

.footer{background-image: url("/content/images/footer-bg.png"); background-repeat: no-repeat; background-position: left top; padding-top: 6rem; margin-top: -3rem;}
.subscribe .form-control{border: 1px solid var(--color-border-dark); color: var(--color-white);}

.footer-cols{border-top: 1px solid var(--color-border-dark); border-bottom: 1px solid var(--color-border-dark);}
.footer-cols ul li{line-height: 36px;}
.footer-cols ul li a{color: var(--color-white); text-decoration: none;}

.footer-bottom{font-size: 0.875rem;}
.footer-bottom .nav-link{color: var(--color-white);}

.cookie-toast{width: 420px; z-index: 99;}

/*=== Product Page ===*/
.price-control .form-check .form-check-input{position: absolute; top: 1.25rem; left: 1.25rem;}
.price-control .form-check-input:checked {background-color: var(--color-primary); border-color: var(--color-primary);}
.price-control .form-check-input:focus{box-shadow: none;}
.price-control .form-check .form-check-label strong{color: var(--color-dark);}
.price-control .form-check .form-check-input:checked ~ .form-check-label{background-color: var(--color-border);}
.price-control .form-check .form-check-input:checked~.form-check-label strong{color: var(--color-primary);}
.price-control .best-deal{background-color: var(--color-primary); position: absolute; right: 1rem; top: -1.5rem; padding: 0.5rem 0.75rem; color: var(--color-white); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; border-radius: 0 0 0.25rem 0.25rem;}
.price-control .best-deal::before, .price-control .best-deal::after{content: ""; position: absolute; top: 0; border-bottom: 8px solid var(--color-primary);}
.price-control .best-deal::before{border-left: 4px solid transparent; right:100%;}
.price-control .best-deal::after{border-right: 4px solid transparent; left:100%;}

.product-features .icon{min-width: 4rem; height: 4rem;}

.order-install-steps{counter-reset: my-sec-counter;}
.order-install-steps li{position: relative; padding-left: 4rem;}
.order-install-steps li + li{margin-top: 2rem;}
.order-install-steps li::before{counter-increment: my-sec-counter; content: "0" counter(my-sec-counter) ". "; font-weight: 700; -webkit-text-stroke: 1px var(--color-body); font-size: 2rem; position: absolute; left: 0; top: 0; line-height: 1; color: transparent;}

.year-selection-group .btn{border-width: 1px !important;}
.year-selection-group .btn-check:checked + .btn-outline-dark, .year-selection-group .btn-outline-dark:active{background-color: var(--color-dark); border-color: var(--color-dark);}
.year-selection-group .btn-check:focus + .btn-outline-dark{box-shadow: none !important;}

.cta-card{background-image: url("/content/images/footer-bg.png"); background-repeat: no-repeat; background-position: left bottom;}

.support-list li + li{margin-top: 1rem;}
.support-list li a{background-image: url(/content/images/arrow-long.svg); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; color: var(--color-body); text-decoration: none; padding: 0.75rem 3rem 0.75rem 1rem; display: flex; border-radius: 0.25rem; border: 1px solid var(--color-border-lightblue);}
.support-list li a:hover{color: var(--color-primary); background-color: var(--color-white);}

/*=== Responsive ===*/
.main-checkout{min-height: calc(100vh - 225px);}
.nav-tabs .nav-link{color: var(--color-body);}
.nav-tabs .nav-link.active{background-color: var(--color-border); color: var(--color-primary);}
.nav-tabs .nav-link:hover{color: var(--color-primary);}

.checkout-steps{z-index: 1;}
.checkout-step + .checkout-step::before{content: ""; border: 1px solid var(--color-border-lightblue); width: 2rem; left: 0.5rem; position: absolute; top: calc(50% - 1px);}
.checkout-steps-no{width: 2.5rem; height: 2.5rem; border: 1px solid var(--color-primary);}

.mb-7{margin-bottom:7rem !important;}

.tooltiptext {
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 12px;    
}
/*=== Responsive ===*/
@media (min-width: 992px) {
    .navbar-toggler, .header-container .offcanvas-header{display: none;}
    .header-container .offcanvas{position: inherit; width: auto; visibility: visible !important; flex-direction: row; border:none; transform: inherit;}
    .header-container .navbar-nav{flex-direction: row; padding-right: 0 !important;}
    .header-container .offcanvas-body{padding: 0; overflow: inherit;}
    .header-container .navbar-nav .dropdown-menu{position: absolute; left: 0;}
    
    header .navbar-nav .nav-item + .nav-item{margin-left: 1.5rem;}
    header .navbar-nav .nav-item .dropdown-menu.dropdown-menu-end{right: 0;z-index:10000;}
    header .navbar-nav .nav-item:hover .dropdown-menu{display: block;}

}
@media (min-width: 992px) and (max-width: 1200px) {
    header .navbar-nav .nav-item + .nav-item {margin-left: 0.5rem;}
    .header-container .navbar-nav .nav-item .nav-link{font-size: 0.938rem;}
    .header-container .btn{padding: 0.875rem 1rem; font-size: 0.875rem;}
}
@media (max-width: 992px) {
    .header-container .offcanvas{height: 100vh;}
    .header-container .dropdown-menu{box-shadow: none !important;}
    .header-container .dropdown-menu .dropdown-item{border: none !important; padding: 1rem !important;}
    .header-container .dropdown-menu .dropdown-item span, .header-container .dropdown-menu .dropdown-item img{display: none !important;}
    .header-container .dropdown-menu .dropdown-item strong{font-size: 1rem !important; font-weight: 400 !important;}

    .section{padding: 3rem 0;}
    .section-inside{padding-top: 3rem; margin-top: 3rem;}
}
@media (max-width: 768px) {
     .section{padding: 2rem 0;}
     .section-inside{padding-top: 2rem; margin-top: 2rem;}
}
@media (max-width: 576px) {
    .cookie-toast{width: 90vw; z-index: 99;}
}