/*!
 * @project        Dome Automation
 */

html {
    box-sizing: border-box
}

*,
:after,
:before {
    box-sizing: inherit
}

::-moz-selection {
    background: #000;
    color: #fff
}

::selection {
    background: #000;
    color: #fff
}

body,
html {
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    font-smooth: always;
    -webkit-font-smoothing: antialiased
}

blockquote,
body,
caption,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
ul {
    margin: 0;
    padding: 0
}

body,
#site-wrapper {
    max-width: 100% !important;
    box-shadow: none !important;
    background: none;
    font-family: 'MarkPro';
    font-weight: normal;
    font-style: normal;
}

.c-help-panel__contact .InfoLabel {
    color: white;
    font-family: Mark Pro;
    font-size: 22px;
    margin-top: 20px;
    display: block;
}

/*! Project CSS */
[class*=ratio-] {
    position: relative;
    display: block
}

.u-inherit-style p,
.u-inherit-style ul li {
    font-family: inherit;
    font-size: large;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit
}

.u-wysiwyg-text a {
    transition: opacity var(--animation-time) var(--easing);
    text-decoration: underline
}

.u-wysiwyg-text a:hover {
    opacity: .6
}

.u-wysiwyg-text p:not(:last-child) {
    margin-bottom: 1.5rem
}

.u-opacity-hover a,
.u-opacity-hover button {
    transition: opacity var(--animation-time) var(--easing)
}

.u-opacity-hover a:focus,
.u-opacity-hover a:hover,
.u-opacity-hover button:focus,
.u-opacity-hover button:hover {
    opacity: .6
}

.u-text-underline-animation {
    --underline-color: var(--gray-600)
}

.u-text-underline-animation.is-gray-400 {
    --underline-color: var(--gray-400)
}

.u-text-underline-animation.is-light {
    --underline-color: var(--gray-100)
}

.u-text-underline-animation a,
.u-text-underline-animation button {
    position: relative
}

.u-text-underline-animation a:before,
.u-text-underline-animation button:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    background-color: var(--underline-color);
    transition: transform var(--animation-time-fast) var(--easing);
    transform-origin: left
}

.u-text-underline-animation a:focus:before,
.u-text-underline-animation a:hover:before,
.u-text-underline-animation button:focus:before,
.u-text-underline-animation button:hover:before {
    transform: scaleX(1)
}

.c-site-footer {
    position: relative
}

.c-site-footer .p {
    position: center;
    ;
}

.c-site-footer:before {
    display: none;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    opacity: .1;
    pointer-events: none
}

.c-site-footer:before,
.c-site-footer__divider {
    --bg-opacity: 1;
    background-color: #151518;
    background-color: rgba(21, 21, 24, var(--bg-opacity))
}

.c-site-footer__divider {
    width: 14px;
    height: 2px;
    border: none;
    margin: 10px 0 16px
}

.c-site-footer__top--solutions {
    position: relative
}

.c-site-footer__top--solutions:after,
.c-site-footer__top--solutions:before {
    display: none;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    height: 100%;
    --bg-opacity: 1;
    background-color: #151518;
    background-color: rgba(21, 21, 24, var(--bg-opacity));
    opacity: .1;
    pointer-events: none
}

.c-site-footer__top--solutions:before {
    left: -40px
}

.c-site-footer__top--solutions:after {
    right: 20px
}

.c-site-footer__bottom--socials svg {
    width: 1.5rem;
    height: 1.5rem
}

.c-site-footer__download svg {
    max-width: 100%
}

.c-site-footer__download--link:first-child svg {
    width: 128px
}

.c-site-footer__download--link:last-child svg {
    width: 114px
}

.c-site-footer__bottom--socials ul li {
    background-color: rgba(0, 0, 0, 0.1);
    /* Light black background */
    padding: 10px;
    /* Padding inside each box */
    border-radius: 35px;
    /* Rounded corners */
    display: inline-flex;
    /* Center the icon inside the box */
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    /* Smooth hover effect */
}

.c-site-footer__bottom--socials ul li:hover {
    background-color: rgba(0, 0, 0, 0.2);
    /* Darker on hover */
}


.c-site-header.header--unpinned {
    transform: translate3d(0, -100px, 0)
}

.c-site-header.is-theme-transparent {
    background-color: transparent
}

.c-site-header.is-theme-transparent.header--not-top {
    --bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255, 255, 255, var(--bg-opacity))
}

.c-site-header.is-theme-transparent-light {
    background-color: transparent
}

.c-site-header.is-theme-transparent-light.header--not-top {
    --bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255, 255, 255, var(--bg-opacity))
}

.c-site-header.is-theme-transparent-light.header--top .u-text-underline-animation a:before,
.c-site-header.is-theme-transparent-light.header--top .u-text-underline-animation button:before {
    background-color: var(--gray-100)
}

.c-site-header.is-theme-transparent-light.header--top .c-site-header__logo path,
.c-site-header.is-theme-transparent-light.header--top .c-site-header__right path,
.c-site-header.is-theme-transparent-light.header--top .menu-dots rect {
    fill: var(--gray-100)
}

.c-site-header.is-theme-transparent-light.header--top .c-site-header__menu {
    border-color: hsla(0, 0%, 98.8%, .2)
}

.c-site-header.is-theme-transparent-light.header--top .c-site-header__menu:focus,
.c-site-header.is-theme-transparent-light.header--top .c-site-header__menu:hover {
    background-color: var(--gray-500)
}

.c-site-header.is-theme-transparent-light.header--top .c-site-header__right--menu a,
.c-site-header.is-theme-transparent-light.header--top .c-site-header__right--menu button,
.c-site-header.is-theme-transparent-light.header--top .menu-text {
    color: var(--gray-100)
}

.c-site-header.is-theme-transparent-light.header--top .c-site-header__download {
    background-color: var(--gray-100);
    color: var(--gray-600)
}

.c-site-header.is-theme-transparent-light.header--top .download-card {
    color: var(--gray-100)
}

.c-site-header__menu {
    width: 5.938rem;
    height: 2.25rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    transition: background-color var(--animation-time-fast) var(--easing)
}

.c-site-header__menu:focus,
.c-site-header__menu:hover {
    background-color: var(--border-color)
}

.c-site-header__menu:focus .menu-dots,
.c-site-header__menu:hover .menu-dots {
    transform: translate3d(0, -50%, 0) rotate(90deg)
}

.c-site-header__menu .menu-dots {
    top: 50%;
    transform: translate3d(0, -50%, 0);
    left: .875rem;
    transition: transform var(--animation-time-fast) var(--easing)
}

.c-site-header__menu svg {
    width: .75rem;
    height: .75rem
}

.c-site-header__menu .menu-text {
    font-weight: 500;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    right: .813rem;
    font-size: .75rem;
    line-height: 1.1;
    letter-spacing: .08rem
}

.c-site-header.header--not-top {
    box-shadow: 0 0 25px rgba(0, 0, 0, .075)
}

.c-site-header__logo svg {
    width: 10.875rem;
    height: .813rem
}

.c-site-header__right--menu a,
.c-site-header__right--menu button {
    font-size: .938rem
}

.c-site-header__right--socials svg {
    width: 1.5rem;
    height: 1.5rem
}

.c-site-header__download .download-card {
    transform: translate3d(0, -105%, 0);
    transition: transform var(--animation-time-fast) var(--easing)
}

.c-site-header__download:focus .download-card,
.c-site-header__download:hover .download-card {
    transform: translateZ(0)
}

.c-site-header__download a {
    transition: opacity var(--animation-time-fast) var(--easing)
}

.c-site-header__download a:first-child {
    position: relative;
    top: -1px
}

.c-site-header__download a:hover {
    opacity: .7
}

html:not(.has-loaded) .c-help-panel {
    display: none
}

.c-help-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding: 18px 0;
    opacity: 0;
    transform: translate3d(0, -100%, 0);
    will-change: transform;
    transition: transform var(--animation-time) var(--easing), opacity var(--animation-time-fast) var(--easing);
    -webkit-overflow-scrolling: touch;
    z-index: 20
}

.c-help-panel.is-open {
    opacity: 1;
    transform: translateZ(0)
}

.caption h3{
    color: var(--bg-theme);
    font-size: 26px;
    font-weight: 700;
}

.c-help-panel__close {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    --bg-opacity: 1;
    background-color: #151518;
    background-color: rgba(21, 21, 24, var(--bg-opacity));
    --bg-opacity: 0.6;
    transition: opacity var(--animation-time-fast) var(--easing);
    opacity: 0;
    pointer-events: none;
    z-index: 19
}

.c-help-panel__close.is-open {
    pointer-events: auto;
    opacity: 1
}

.c-help-panel__close:hover {
    opacity: .85
}

.c-help-panel__close-contact rect,
.c-help-panel__close-help rect {
    transition: opacity var(--animation-time-fast) var(--easing)
}

.c-help-panel__close-contact path,
.c-help-panel__close-help path {
    transition: transform var(--animation-time-fast) var(--easing);
    transform-origin: center
}

.c-help-panel__close-contact:focus,
.c-help-panel__close-contact:hover,
.c-help-panel__close-help:focus,
.c-help-panel__close-help:hover {
    outline: none
}

.c-help-panel__close-contact:focus rect,
.c-help-panel__close-contact:hover rect,
.c-help-panel__close-help:focus rect,
.c-help-panel__close-help:hover rect {
    opacity: 1
}

.c-help-panel__close-contact:focus path,
.c-help-panel__close-contact:hover path,
.c-help-panel__close-help:focus path,
.c-help-panel__close-help:hover path {
    transform: translate3d(-2px, 0, 0)
}

.c-help-panel__close-contact {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--animation-time-fast) var(--easing)
}

.c-help-panel__close-contact.is-open {
    opacity: 1;
    pointer-events: auto
}

.c-help-panel__close-help:focus,
.c-help-panel__close-help:hover {
    outline: none
}

.c-help-panel__close-help:focus rect,
.c-help-panel__close-help:hover rect {
    opacity: 1
}

.c-help-panel__close-help:focus path,
.c-help-panel__close-help:hover path {
    transform: rotate(90deg)
}

.c-help-panel__list svg {
    transition: transform var(--animation-time-fast) var(--easing);
    transform-origin: right
}

.c-help-panel__list a,
.c-help-panel__list button {
    --text-opacity: 1;
    color: #cacdd1;
    color: rgba(202, 205, 209, var(--text-opacity));
    transition: color var(--animation-time-slow) var(--easing)
}

.c-help-panel__list a:hover,
.c-help-panel__list button:hover {
    --text-opacity: 1;
    color: #e6b501;
    color: rgba(230, 181, 1, var(--text-opacity))
}

.c-help-panel__list a:hover svg,
.c-help-panel__list button:hover svg {
    transform: translate3d(-3px, 0, 0)
}

.c-help-panel__list li {
    padding: 26px 0;
    border-top: 1px solid var(--border-color-dark)
}

.c-help-panel__list li:last-child {
    border-bottom: 1px solid var(--border-color-dark)
}

.c-help-panel__wrapper {
    position: relative
}

.c-help-panel__menu {
    transition: transform var(--animation-time-fast) var(--easing) .3s, opacity var(--animation-time-fast) var(--easing) .3s;
    transform: translateZ(0)
}

.c-help-panel__contact,
.c-help-panel__menu.is-closed {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 40px, 0);
    transition: transform var(--animation-time-fast) var(--easing), opacity var(--animation-time-fast) var(--easing)
}

.c-help-panel__contact {
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.c-help-panel__contact.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateZ(0);
    transition: transform var(--animation-time-fast) var(--easing) .3s, opacity var(--animation-time-fast) var(--easing) .3s
}

html:not(.has-loaded) .c-site-nav {
    display: none
}

.c-site-nav {
    --bg-opacity: 1;
    background-color: #009fe2;
    background-color: #009fe2;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow-y: scroll;
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    will-change: transform;
    transition: transform var(--animation-time) var(--easing), opacity var(--animation-time-fast) var(--easing);
    -webkit-overflow-scrolling: touch;
    z-index: 0
}

.c-site-nav.is-open {
    opacity: 1;
    transform: translateZ(0)
}

.c-site-nav__close {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    --bg-opacity: 1;
    background-color: #151518;
    background-color: rgba(21, 21, 24, var(--bg-opacity));
    --bg-opacity: 0.6;
    transition: opacity var(--animation-time-fast) var(--easing);
    opacity: 0;
    pointer-events: none;
    z-index: 19
}

.c-site-nav__close.is-open {
    pointer-events: auto;
    opacity: 1
}

.c-site-nav__close:hover {
    opacity: .85
}

.c-site-nav__close-button rect {
    transition: opacity var(--animation-time-fast) var(--easing)
}

.c-site-nav__close-button path {
    transition: transform var(--animation-time-fast) var(--easing);
    transform-origin: center
}

.c-site-nav__close-button:focus,
.c-site-nav__close-button:hover {
    outline: none
}

.c-site-nav__close-button:focus rect,
.c-site-nav__close-button:hover rect {
    opacity: 1
}

.c-site-nav__close-button:focus path,
.c-site-nav__close-button:hover path {
    transform: rotate(90deg)
}

.c-site-nav__top {
    padding: .938rem 1.25rem 1.875rem;
    --bg-opacity: 1;
    background-color: #151518;
    background-color: rgba(21, 21, 24, var(--bg-opacity))
}

.c-site-nav__bottom {
    padding: 1.563rem 1.25rem 1.875rem
}

.c-site-nav__label {
    --text-opacity: 1;
    color: #e1e3e6;
    color: rgba(225, 227, 230, var(--text-opacity));
    font-weight: 500;
    font-size: .875rem;
    padding-top: .5rem;
    margin-bottom: 1.25rem;
    border-top: 1px solid #393a3d;
    opacity: .5
}

.c-site-nav__socials {
    border-top: 1px solid #393a3d;
    margin-top: 1.625rem;
    padding-top: 1.875rem
}

/* [data-scroll-reveal=fade-in-stagger] .js-stagger-target,
[data-scroll-reveal=fade-in] {
    opacity: 0;
    will-change: opacity
}

[data-scroll-reveal=fade-in-up-stagger] .js-stagger-target,
[data-scroll-reveal=fade-in-up] {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    will-change: opacity, transform
} */

.o-container {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px
}

.o-container.is-fluid {
    max-width: 100%
}

.o-container.is-small-mobile {
    padding-left: 10px;
    padding-right: 10px
}

.is-dev-mode [class^=col-],
.is-dev-mode [class^=flexcol-],
.is-dev-mode [class^=w-] {
    min-height: 100px;
    border: 1px solid #000;
    margin-bottom: 16px
}

.is-dev-mode [class^=col-] div,
.is-dev-mode [class^=flexcol-] div,
.is-dev-mode [class^=w-] div {
    background: #00f;
    margin: 0 16px 0 0
}

.is-dev-mode [class^=col-] div:last-child,
.is-dev-mode [class^=flexcol-] div:last-child,
.is-dev-mode [class^=w-] div:last-child {
    margin-right: 0
}

:root {
    --bg-theme: #009fe2;
    --black: #000;
    --white: #fff;
    --gray-100: #fcfcfc;
    --gray-200: #f3f3f3;
    --gray-300: #e1e3e6;
    --gray-400: #cacdd1;
    --gray-500: #29292e;
    --gray-600: #151518;
    --blue: #18a5d1;
    --yellow: #e6b501;
    --easing: cubic-bezier(0, 0, 0.58, 1);
    --animation-time-fast: 0.2s;
    --animation-time: 0.3s;
    --animation-time-slow: 0.6s;
    --border-color: #d0d0d1;
    --border-color-form: #6e6e70;
    --border-color-form-light: #9b9ca0;
    --border-color-dark: var(--gray-400);
    --border-color-partners: #b5b7bb;
    --text-color-form: #8b8d90;
    --background-color: var(--gray-200);
    --main-color: var(--gray-600);
    --active-color: var(--yellow);
}

body {
    font-size: 1rem;
    line-height: 1.5;
    background-color: var(--gray-200);
    color: var(--main-color);
    isolation: isolate;
    min-width: 320px
}

/* body:not(.no-padding-top) {
    padding-top: 66px
} */

::-moz-selection {
    background: var(--gray-500);
    color: var(--gray-100)
}

::selection {
    background: var(--gray-500);
    color: var(--gray-100)
}

img,
video {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

a:focus,
button:focus {
    outline: 0
}

a:focus-visible,
button:focus-visible {
    outline: 1px
}

button:focus {
    outline: none
}

hr {
    --bg-opacity: 1;
    background-color: #151518;
    background-color: rgba(21, 21, 24, var(--bg-opacity))
}

input,
select {
    -webkit-border-radius: 0;
    border-radius: 0
}

.bg-theme {
    background-color: var(--bg-theme);
}

/* .lazyload:not([src]) {
    visibility: hidden
} */

/* .lazyload {
    display: block;
    transition: opacity .6s var(--easing);
    opacity: 0
} */

.text-style-d-0 {
    font-size: 48px
}

.text-style-d-0,
.text-style-d-1 {
    font-weight: bold;
    line-height: 1;
    letter-spacing: -.03em
}

.text-style-d-1 {
    font-size: 42px
}

.text-style-d-2 {
    font-size: 38px;
    letter-spacing: -.03em
}

.text-style-d-2,
.text-style-d-3 {
    font-weight: bold;
    line-height: 1.1
}

.text-style-d-3 {
    font-size: 36px;
    letter-spacing: -.02em
}

.text-style-d-4 {
    font-size: 32px;
    letter-spacing: -.03em
}

.text-style-d-4,
.text-style-d-5 {
    font-weight: bold;
    line-height: 1.2;
}

.text-style-d-5 {
    font-size: 28px;
    letter-spacing: -.01em
}

.text-style-d-6 {
    font-weight: bold;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -.01em
}

.text-style-d-6.font-mark-medium {
    font-weight: 500;
}

.text-style-d-6.font-mark-book,
.text-style-l-1 {
    font-family: 'MarkPro-Book';
}

.text-style-l-1 {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -.01em
}

.text-style-l-1.is-llh {
    line-height: 1.2
}

.text-style-b-1,
.text-style-l-1.font-mark-medium {
    font-weight: 500;
}

.text-style-b-1 {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -.01em
}

.text-style-b-1.font-mark-bold {
    font-weight: bold;
    line-height: 1.2
}

.text-style-b-1.font-mark-book {
    font-family: 'MarkPro-Book';
}

.text-style-b-1.is-footer {
    font-size: 13px;
    line-height: 1.2
}

.text-style-b-2 {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -.01em
}

.text-style-b-2.is-form {
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: 0
}

.text-style-b-2.font-mark-book {
    font-family: 'MarkPro-Book';
}

.text-style-b-3 {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.1;
    letter-spacing: -.02em
}

.text-style-b-3.font-mark-book {
    font-family: 'MarkPro-Book';
    line-height: 1.6;
    letter-spacing: -.01em
}

.text-style-m-1 {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2
}

.text-style-m-1.font-mark-book {
    font-family: 'MarkPro-Book';
    line-height: 1.5
}

/* .text-style-m-1.is-cta {
    font-size: 10px
} */

.text-style-m-2 {
    font-weight: 500;
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: .08em
}

.text-style-m-2.font-mark-book {
    font-family: 'MarkPro-Book';
    line-height: 1;
    letter-spacing: .01em
}

.text-style-q {
    font-family: Mark Pro, helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -.01em
}

.text-style-c-1 {
    font-size: 16px
}

.text-style-c-1,
.text-style-c-2 {
    /* font-family: Rokkitt; */
    line-height: 1.2;
    letter-spacing: .13em
}

.text-style-c-2 {
    font-size: 14px
}

.c-about-awards__images .image {
    width: 30%;
    max-width: 78px;
    overflow: hidden;
    margin-right: 32px;
    margin-bottom: 30px
}

.c-about-awards__images .c-image {
    height: 0;
    padding-bottom: 100%
}

.c-about-awards__images .c-image img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.c-about-awards__list,
.c-about-awards__list--item {
    border-bottom: 1px solid var(--gray-600)
}

.c-about-awards__list--item {
    margin-bottom: -1px
}

.c-about-case-stories__container {
    position: relative
}

.c-about-case-stories__container:before {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: -10px;
    bottom: 0;
    width: 1000%
}

.c-about-case-stories__container:before,
.c-about-case-stories__list .title:before {
    content: "";
    --bg-opacity: 1;
    background-color: #cacdd1;
    background-color: rgba(202, 205, 209, var(--bg-opacity))
}

.c-about-case-stories__list .title:before {
    display: block;
    width: 20px;
    height: 2px;
    margin-bottom: 1rem
}

.c-about-case-stories__list .image {
    position: relative;
    margin-right: -10px
}

.c-about-case-stories__list--grid:not(:last-child) {
    margin-bottom: 4rem
}

.c-accordion__header--item {
    transition: opacity var(--animation-time-fast) var(--easing)
}

.c-accordion__header--item:not(:last-child) {
    margin-right: 2.125rem
}

.c-accordion__header--item:focus,
.c-accordion__header--item:hover {
    outline: none
}

.c-accordion__header--item:not(.is-active),
.c-accordion__header--item:not(.is-active):hover {
    opacity: .5
}

.c-accordion__header--item.is-active:before,
.c-accordion__header--item.is-active:focus:before,
.c-accordion__header--item:hover:before {
    transform: scaleX(1)
}

.c-accordion__content--item {
    transition: opacity var(--animation-time-slow) var(--easing)
}

.c-accordion__content--item .highlight-text {
    font-weight: bold;
    /* Highlight the font */
    color: #000;
    /* Change the color to make it stand out */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    /* Add shadow effect */
    padding: 2px 4px;
    /* Add padding for spacing around the text */
    border-radius: 4px;
    /* Slightly round the corners */
}

.c-accordion__content--item:not(.is-active) {
    overflow: hidden;
    height: 0;
    opacity: 0
}

.c-budgeting-tool .c-form__input {
    border-bottom: 1px solid var(--border-color-form-light);
    color: var(--gray-600)
}

.c-budgeting-tool .c-form__input:focus {
    border-bottom: 1px solid var(--gray-500)
}

.c-budgeting-tool .c-form__select select {
    color: var(--gray-500);
    border-bottom: 1px solid var(--border-color-form-light)
}

.c-budgeting-tool .c-form__submit {
    --text-opacity: 1;
    color: #fcfcfc;
    color: rgba(252, 252, 252, var(--text-opacity));
    --bg-opacity: 1;
    background-color: #151518;
    background-color: rgba(21, 21, 24, var(--bg-opacity))
}

.c-budgeting-tool .c-form__submit:focus,
.c-budgeting-tool .c-form__submit:hover {
    --bg-opacity: 1;
    background-color: #18a5d1;
    background-color: rgba(24, 165, 209, var(--bg-opacity))
}

.c-budgeting-tool .c-form__checkbox {
    --text-opacity: 1;
    color: #151518;
    color: rgba(21, 21, 24, var(--text-opacity))
}

.c-budgeting-tool .c-form__checkbox .checkmark {
    border: 1px solid var(--border-color-form-light);
    background-color: transparent
}

.checkmark.c-budgeting-tool .c-form__checkbox:before {
    border-bottom: 2px solid var(--yellow);
    border-right: 2px solid var(--yellow)
}

.c-budgeting-tool .c-form__checkbox:focus input~.checkmark,
.c-budgeting-tool .c-form__checkbox:hover input~.checkmark {
    background-color: var(--border-color-form);
    border: 1px solid var(--border-color-form)
}

.c-budgeting-tool .c-form__checkbox input:checked~.checkmark {
    background-color: var(--gray-600);
    border: 1px solid var(--gray-600)
}

.c-budgeting-tool .c-form__newsletter-message,
.c-budgeting-tool .c-form__submit-message {
    --text-opacity: 1;
    color: #151518;
    color: rgba(21, 21, 24, var(--text-opacity))
}

.c-button-icon {
    background-color: #f3f3f3;
    --bg-opacity: 0.3;
    padding: .75rem;
    margin-right: .5rem;
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .05);
    min-width: 112px;
    border-radius: 22px;
    transition: all 0.3s;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.c-button-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #009fe2;
    opacity: 0;
    visibility: hidden;
    width: 0;
    height: 0;
    border-radius: 50%;
    transition: all 0.3s;
    z-index: -1;
}

.c-button-icon:hover::after {
    opacity: 1;
    visibility: visible;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.c-button-icon:hover .c-icon img {
    filter: brightness(100);
}

.c-button-icon:hover h4 {
    color: #FFFFFF
}

/* --------------------------------------------------------------- */
.bg-gray-100 .c-button-icon {
    background-color: #009fe2;
}

.bg-gray-100 .c-button-icon::after {
    background-color: #f3f3f3;
}

.bg-gray-100 .c-button-icon .c-icon img {
    filter: brightness(100);
}

.bg-gray-100 .c-button-icon:hover .c-icon img {
    filter: none;
}

.bg-gray-100 .c-button-icon h4 {
    color: #FFFFFF
}

.bg-gray-100 .c-button-icon:hover h4 {
    color: inherit
}

.c-button-icon .c-icon img {
    max-height: 100%;
}

.c-btn {
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    padding: 0 .875rem;
    background-color: var(--gray-600);
    color: var(--gray-100);
    border-radius: 6px;
    font-size: .938rem;
    line-height: 1;
    height: 2.188rem;
    letter-spacing: -.01rem;
    transition: color var(--animation-time-fast) var(--easing), background-color var(--animation-time-fast) var(--easing)
}

.c-btn:focus,
.c-btn:hover {
    color: var(--yellow)
}

.c-btn.is-light {
    background-color: var(--gray-100);
    color: var(--gray-600)
}

.c-btn.is-light:focus,
.c-btn.is-light:hover {
    background-color: var(--gray-600);
    color: var(--gray-100)
}

.c-btn.is-big {
    padding: 0 1.5rem;
    height: 2.5rem
}

.c-call-to-action__text span {
    --text-opacity: 1;
    color: #000;
}

.c-call-to-action__text br {
    display: none
}

.c-call-to-action__image .c-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.c-call-to-action__image img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}


.c-call-to-action__form .c-form__submit {
    position: relative;
    display: flex;
    align-items: center;
    --bg-opacity: 1;
    background-color: #009fe2;
    background-color: #009fe2;
    --text-opacity: 1;
    color: #e1e3e6;
    color: rgba(225, 227, 230, var(--text-opacity));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    width: auto
}

.c-call-to-action__form .c-form__submit svg {
    margin-left: 8px
}

.c-call-to-action__form .c-form__submit svg path {
    transition: stroke var(--animation-time-fast) var(--easing)
}

.c-call-to-action__form .c-form__submit:focus,
.c-call-to-action__form .c-form__submit:hover {
    --bg-opacity: 1;
    background-color: #18a5d1;
    background-color: rgba(24, 165, 209, var(--bg-opacity));
    --text-opacity: 1;
    color: #009fe2;
    color: rgba(41, 41, 46, var(--text-opacity))
}

.c-call-to-action__form .c-form__submit:focus path,
.c-call-to-action__form .c-form__submit:hover path {
    stroke: var(--gray-500)
}

.c-call-to-action__form .c-form__input {
    margin-bottom: 0
}

.c-call-to-action__download--link {
    transition: opacity var(--animation-time-fast) var(--easing)
}

.c-call-to-action__download--link:hover {
    opacity: .6
}

.c-card-grid__item.is-link {
    transition: transform var(--animation-time-fast) var(--easing)
}

.c-card-grid__item.is-link:focus .c-card-grid__cta svg,
.c-card-grid__item.is-link:hover .c-card-grid__cta svg {
    transform: translate3d(5px, 0, 0)
}

.c-card-grid__cta svg {
    transition: transform var(--animation-time-fast) var(--easing)
}

.c-card-grid__image .c-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%
}

.c-card-grid__image img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.c-form__input {
    font-family: 'MarkPro-Book';
    padding: 0 0 14px;
    margin: 0 0 24px;
    border-bottom: 1px solid var(--border-color-form);
    width: 100%;
    background: none;
    color: var(--gray-400)
}

.c-form__input:focus {
    outline: 0;
    border-bottom: 1px solid var(--border-color)
}

.c-form__privacy {
    font-size: 14px
}

.c-form__privacy a {
    text-decoration: underline;
    transition: opacity var(--animation-time-fast) var(--easing)
}

.c-form__privacy a:hover {
    opacity: .75
}

.c-form__select select {
    font-family: 'MarkPro-Book';
    width: 100%;
    padding: 0 0 14px;
    margin: 0 0 24px;
    background: none;
    color: var(--gray-400);
    border-bottom: 1px solid var(--border-color-form);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.c-form__select select:focus {
    outline: none
}

.c-form__submit {
    --text-opacity: 1;
    color: #151518;
    color: rgba(21, 21, 24, var(--text-opacity));
    --bg-opacity: 1;
    background-color: #cacdd1;
    background-color: rgba(202, 205, 209, var(--bg-opacity));
    font-weight: 500;
    border-radius: 6px;
    height: 40px;
    width: 100%;
    font-size: 14px;
    cursor: pointer;
    padding: 0 34px;
    transition: color var(--animation-time-fast) var(--easing), background-color var(--animation-time-fast) var(--easing)
}

.c-form__submit:focus,
.c-form__submit:hover {
    outline: none;
    --bg-opacity: 1;
    background-color: #e6b501;
    background-color: rgba(230, 181, 1, var(--bg-opacity))
}

.c-form__checkbox {
    display: block;
    position: relative;
    padding-left: 34px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.3;
    --text-opacity: 1;
    color: #e1e3e6;
    color: rgba(225, 227, 230, var(--text-opacity));
    font-family: Mark Pro, helvetica, sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.c-form__checkbox input {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border: 1px solid var(--border-color);
    background-color: transparent;
    transition: background-color var(--animation-time-fast) var(--easing);
}

.c-form__checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border: 1px solid var(--border-color);
    background-color: transparent;
    transition: background-color var(--animation-time-fast) var(--easing)
}

.c-form__checkbox .checkmark:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1px;
    transform: translate3d(-50%, -50%, 0) rotate(45deg);
    height: 12px;
    width: 6px;
    opacity: 0;
    border-bottom: 2px solid var(--yellow);
    border-right: 2px solid var(--yellow);
    transition: opacity var(--animation-time-fast) var(--easing)
}

.c-form__checkbox:focus input~.checkmark,
.c-form__checkbox:hover input~.checkmark {
    background-color: var(--gray-500)
}

.c-form__checkbox input:checked~.checkmark:before {
    opacity: 1
}

.c-form__submit-message {
    font-size: 16px
}

.c-form__newsletter-message,
.c-form__submit-message {
    --text-opacity: 1;
    color: #e6b501;
    color: rgba(230, 181, 1, var(--text-opacity));
    font-weight: 500;
}

.c-form__newsletter-message {
    font-size: 14px
}

.c-full-screen-image-text {
    position: relative;
    height: 100vh
}

.c-full-screen-image-text .c-image,
.c-full-screen-image-text .c-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.c-full-screen-image-text .c-image img,
.c-full-screen-image-text .c-image video,
.c-full-screen-image-text .c-video img,
.c-full-screen-image-text .c-video video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.c-full-screen-image-text .c-image:before,
.c-full-screen-image-text .c-video:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2);
    bottom: 0;
    pointer-events: none;
    z-index: 1
}

.c-full-screen-image-text__scroll-down svg {
    width: 40px;
    height: 40px
}

.c-hero-compact {
    height: 400px
}

.c-hero-compact__icon {
    max-width: 220px
}

.c-hero-marketing-full:before {
    content: "";
    --bg-opacity: 1;
    background-color: #cacdd1;
    background-color: rgba(202, 205, 209, var(--bg-opacity));
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5rem;
    pointer-events: none;
    z-index: 0
}

.c-hero-marketing-full__text {
    position: absolute;
    width: 100%;
    bottom: 1.25rem;
    left: 0;
    z-index: 2
}

.c-hero-marketing-full .c-image,
.c-hero-marketing-full .c-video {
    position: relative
}

.c-hero-marketing-full .c-image:before,
.c-hero-marketing-full .c-video:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 12.5rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent);
    bottom: 0;
    pointer-events: none;
    z-index: 1
}

.c-hero-marketing:before {
    content: "";
    --bg-opacity: 1;
    background-color: #cacdd1;
    background-color: rgba(202, 205, 209, var(--bg-opacity));
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5rem;
    pointer-events: none;
    z-index: 0
}

.c-hero-marketing__grid {
    --bg-opacity: 1;
    background-color: #e1e3e6;
    background-color: rgba(225, 227, 230, var(--bg-opacity))
}

.c-hero-marketing__image .c-image,
.c-hero-marketing__image .c-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%
}

.c-hero-marketing__image img,
.c-hero-marketing__image video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.c-hero-marketing.is-theme-dark .c-hero-marketing__grid {
    --bg-opacity: 1;
    background-color: #009fe2;
    background-color: rgba(41, 41, 46, var(--bg-opacity))
}

.c-hero-marketing.is-theme-dark .c-hero-marketing__grid h2,
.c-hero-marketing.is-theme-dark .c-hero-marketing__grid h3,
.c-hero-marketing.is-theme-dark .c-hero-marketing__grid p {
    --text-opacity: 1;
    color: #fcfcfc;
    color: rgba(252, 252, 252, var(--text-opacity))
}

.c-hero-marketing.is-theme-normal .scroll-down svg circle {
    stroke: var(--gray-500)
}

.c-hero-marketing.is-theme-normal .scroll-down svg path {
    stroke: var(--gray-600)
}

.c-hero-marketing .scroll-down {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 40px
}

.c-hero-marketing .scroll-down svg {
    width: 100%
}

.c-hero-product {
    position: relative
}

.bg-gray-401 {
    --bg-opacity: 1;
    background-color: #cacdd1;
    border-radius: 7px;
    border-color: #000;
    /* background-color: #ffffff; */
}

.bg-gray-402 {
    --bg-opacity: 1;

    border-radius: 7px;
    border-color: #000;
    /* background-color: #ffffff; */
}


.c-hero-product:after {
    content: "";
    position: absolute;
    bottom: 0;
    pointer-events: none;
    --bg-opacity: 1;
    background-color: #e1e3e6;
    background-color: rgba(225, 227, 230, var(--bg-opacity));
    display: none;
    top: -88px;
    left: 0;
    right: calc(50% - 100px)
}

.c-hero-product:before,
.c-hero-product__image:before {
    content: "";
    position: absolute;
    bottom: 0;
    pointer-events: none;
    --bg-opacity: 1;
    background-color: #cacdd1;
    background-color: rgba(202, 205, 209, var(--bg-opacity))
}

.c-hero-product:before {
    display: none;
    top: -88px;
    /* top: -692px; */
    right: 0;
    left: calc(50% + 100px)
}

.c-hero-product__image:before {
    top: -66px;
    left: -20px;
    right: -20px;
    height: 200px
}

.c-hero-product__image .c-image,
.c-hero-product__image .c-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 72%
}

.c-hero-product__image img,
.c-hero-product__image video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.c-hero-product .icon {
    width: 60px
}

.c-hero-product .scroll-down {
    width: 40px
}

.c-hero-product .scroll-down svg {
    width: 100%
}


/* start-product-slider */





/* end-product-slider */

.c-hero-text-over-image__text {
    position: absolute;
    height: 100%;
    z-index: 2
}

.c-hero-text-over-image .c-image:before,
.c-hero-text-over-image .c-video:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2);
    bottom: 0;
    pointer-events: none;
    z-index: 1
}

.c-home-comfort__image {
    position: relative
}



.c-home-comfort__content .subtitle:before {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    --bg-opacity: 1;
    background-color: #151518;
    background-color: rgba(21, 21, 24, var(--bg-opacity));
    margin-bottom: 1rem
}

/* .c-home-hero:before {
    display: none;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    bottom: 0;
    z-index: 0;
    --bg-opacity: 1;
    background-color: #f3f3f3;
    background-color: rgba(243, 243, 243, var(--bg-opacity));
    pointer-events: none;
    transition: opacity var(--animation-time-fast) var(--easing)
} */

.c-home-hero.is-animated:before {
    opacity: 1
}

.whatsappwidget-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
}

.whatsappwidget-link {
    display: flex;
    align-items: center;
}

/* Apply the shake animation only to the img */

.whatsappwidget-link img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: black;
    /* Outer portion black */
    padding: 10px;
    /* Space for green WhatsApp icon */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
    animation: shake 0.25s infinite;
    /* Faster shake effect */
}

.whatsapp-text {
    font-size: 14px;
    color: white;
    /* Text color */
    margin-left: 10px;
    background-color: black;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: bold;
    opacity: 0.9;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6);
}

/* No shaking effect for the text */

.whatsappwidget-link:hover img {
    transform: scale(1.1);
    box-shadow: 0px 4px 20px rgb(0, 159, 226);
    /* Highlighted effect */
}

/* Shaking animation for a damru-like effect */
@keyframes shake {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-3px);
        /* Further decreased left movement */
    }

    40% {
        transform: translateX(3px);
        /* Further decreased right movement */
    }

    60% {
        transform: translateX(-2px);
        /* Further decreased left movement */
    }

    80% {
        transform: translateX(2px);
        /* Further decreased right movement */
    }

    100% {
        transform: translateX(0);
    }
}


.c-home-hero__image {
    position: relative;
}

.c-home-hero__text-desktop-bottom {
    position: relative !important;
    padding-bottom: 40px;
}

.c-home-hero__image-wrapper .c-image {
    position: relative;
    width: 100%;
}

.c-home-hero__image-wrapper .c-image img {
    /* position: absolute; */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.c-home-hero__text-desktop {
    top: 10%;
}

.c-home-hero__text-desktop .text-wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    --bg-opacity: 1;
    background-color: #009fe2;
    background-color: #009fe2;
    right: 100%;
    pointer-events: none
}

.c-home-hero .arrow-link {
    width: 40px
}

.c-home-hero .arrow-link svg {
    width: 100%
}

.c-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --bg-opacity: 1;
    /* background-color: #151518;
    background-color: rgba(21, 21, 24, var(--bg-opacity)); */
    border-radius: 13px;
    /* box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .13); */
    width: 60px;
    height: 60px
}

.c-icon img {
    max-width: 100%;
    max-height: 60%
}

.c-icon.is-big {
    width: 70px;
    height: 70px
}

.c-icon.is-big img {
    width: 100%;
    max-height: 100%;
}

.c-icon.is-big.is-product,
.c-icon.is-product-catalog {
    width: 60px;
    height: 60px
}

.c-icon.is-button-icon {
    width: 52px;
    height: 52px
}

.c-image-single {
    position: relative
}

.c-image-single:before {
    content: "";
    position: absolute;
    left: 0;
    height: 80px;
    bottom: 0;
    width: 100%;
    pointer-events: none
}

.c-image-single:before,
.c-image-text-featured__top {
    --bg-opacity: 1;
    background-color: #e1e3e6;
    background-color: rgba(225, 227, 230, var(--bg-opacity))
}

.c-image-text-featured__bottom {
    --bg-opacity: 1;
    background-color: #cacdd1;
    background-color: rgba(202, 205, 209, var(--bg-opacity))
}

.c-image-text-featured .title a,
.c-image-text-featured .title strong {
    --text-opacity: 1;
    color: #18a5d1;
    color: rgba(24, 165, 209, var(--text-opacity))
}

.c-image-text-featured__image {
    position: relative;
    top: -5rem;
    margin-bottom: -3.75rem
}

.c-image-text-featured__spacing {
    height: 5rem
}

.c-image-text-featured .text-bottom-icon {
    position: absolute;
    right: 100%;
    margin-top: .188rem;
    margin-right: .75rem
}

.c-image-text-featured.is-bottom-bg-light .c-image-text-featured__bottom {
    --bg-opacity: 1;
    background-color: #fcfcfc;
    background-color: rgba(252, 252, 252, var(--bg-opacity))
}

.c-image-text-featured.is-theme-top-mid .c-image-text-featured__top {
    --bg-opacity: 1;
    background-color: #cacdd1;
    background-color: rgba(202, 205, 209, var(--bg-opacity))
}

.c-image-text-featured.is-theme-boxed-dark .c-image-text-featured__top {
    --bg-opacity: 1;
    background-color: #151518;
    background-color: rgba(21, 21, 24, var(--bg-opacity))
}

.c-image-text-featured.is-theme-boxed-dark .title strong {
    --text-opacity: 1;
    color: #e6b501;
    color: rgba(230, 181, 1, var(--text-opacity))
}

.c-image-text-featured.is-theme-boxed-dark .title a {
    display: inline-block;
    --text-opacity: 1;
    color: #cacdd1;
    color: rgba(202, 205, 209, var(--text-opacity));
    border-bottom: 1px dashed var(--gray-400);
    transition: opacity var(--animation-time-fast) var(--easing)
}

.c-image-text-featured.is-theme-boxed-dark .title a:hover {
    opacity: .5
}

.c-image-text-featured.is-theme-boxed-dark h2,
.c-image-text-featured.is-theme-boxed-dark h3,
.c-image-text-featured.is-theme-boxed-dark p {
    --text-opacity: 1;
    color: #cacdd1;
    color: rgba(202, 205, 209, var(--text-opacity))
}

.c-image-text-featured.is-theme-boxed-light .c-image-text-featured__top--bg {
    display: block;
    position: absolute;
    top: 0;
    left: calc(100% - 20px);
    width: 1000%;
    height: calc(100% + 80px);
    --bg-opacity: 1;
    background-color: #cacdd1;
    background-color: rgba(202, 205, 209, var(--bg-opacity))
}

.c-image-text .button-item {
    --bg-opacity: 1;
    background-color: #e1e3e6;
    background-color: rgba(225, 227, 230, var(--bg-opacity));
    transition: opacity var(--animation-time-fast) var(--easing)
}

.c-image-text .button-item:hover {
    opacity: .6
}

.c-image-text .button-item__title:before {
    content: "";
    display: block;
    width: 14px;
    height: 2px;
    margin-bottom: 8px;
    --bg-opacity: 1;
    background-color: #151518;
    background-color: rgba(21, 21, 24, var(--bg-opacity))
}

.c-image-text .text-bottom-icon {
    position: absolute;
    right: 100%;
    margin-top: 8px;
    margin-right: 20px
}

.c-image-text .is-theme-normal .button-item {
    --bg-opacity: 1;
    background-color: #cacdd1;
    background-color: rgba(202, 205, 209, var(--bg-opacity))
}

.c-image-text .is-theme-boxed-dark {
    --bg-opacity: 1;
    background-color: #151518;
    background-color: rgba(21, 21, 24, var(--bg-opacity));
    padding-bottom: 1.875rem
}

.c-image-text .is-theme-boxed-dark h2,
.c-image-text .is-theme-boxed-dark h3,
.c-image-text .is-theme-boxed-dark p {
    --text-opacity: 1;
    color: #cacdd1;
    color: rgba(202, 205, 209, var(--text-opacity))
}

.c-image-text .is-theme-boxed-dark .title strong {
    --text-opacity: 1;
    color: #e6b501;
    color: rgba(230, 181, 1, var(--text-opacity))
}

.c-image-text .is-theme-boxed-dark .c-image-text__content {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.c-image-text .is-theme-boxed-light {
    --bg-opacity: 1;
    background-color: #e1e3e6;
    background-color: rgba(225, 227, 230, var(--bg-opacity));
    padding-bottom: 1.875rem
}

.c-image-text .is-theme-boxed-light .button-item {
    --bg-opacity: 1;
    background-color: #f3f3f3;
    background-color: rgba(243, 243, 243, var(--bg-opacity))
}

.c-image-text .is-theme-boxed-light .c-image-text__content {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.c-image img,
.c-image video,
.c-video img,
.c-video video {
    width: 100%
}

.c-video {
    position: relative;
    overflow: hidden;
    padding-bottom: 56.25%
}

.c-video video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.c-image.is-fixed-size {
    position: relative;
    overflow: hidden
}

.c-image.is-fixed-size img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.c-marketing-menu {
    border-top: 1px solid var(--gray-300)
}

.c-product-catalog-list__grid {
    grid-gap: .5rem;
    gap: .5rem
}

.c-product-catalog-list__item {
    min-height: 220px
}

.c-product-catalog-list__item,
.c-product-catalog-list__item .cta svg {
    transition: transform var(--animation-time-fast) var(--easing)
}

.c-product-catalog-list__item:focus .cta svg,
.c-product-catalog-list__item:hover .cta svg {
    transform: translate3d(5px, 0, 0)
}

.c-product-catalog-partners__grid {
    grid-gap: .5rem;
    gap: .5rem
}

.c-product-catalog-partners__item {
    min-height: 210px;
    border: 1px solid var(--border-color-partners);
    transition: transform var(--animation-time-fast) var(--easing)
}

.c-product-catalog-partners__item .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0)
}

.c-product-catalog-partners__item .cta svg {
    transition: transform var(--animation-time-fast) var(--easing)
}

.c-product-catalog-partners__item:focus .cta svg,
.c-product-catalog-partners__item:hover .cta svg {
    transform: translate3d(5px, 0, 0)
}

.c-product-slider__swiper {
    overflow: visible;
    opacity: 0;
    transition: opacity var(--animation-time-fast) var(--easing)
}

.c-product-slider__swiper.swiper-container-initialized {
    opacity: 1
}

.c-product-slider__item {
    width: 65%;
    max-width: 210px;
    border-radius: 22px;
    transition: transform var(--animation-time-fast) var(--easing)
}

.c-product-slider__item:focus .cta svg,
.c-product-slider__item:hover .cta svg {
    transform: translate3d(5px, 0, 0)
}

.c-product-slider .cta svg {
    transition: transform var(--animation-time-fast) var(--easing)
}

.c-product-slider .button-next,
.c-product-slider .button-prev {
    position: absolute;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    width: 26px;
    transition: opacity var(--animation-time-fast) var(--easing)
}

.c-product-slider .button-next.swiper-button-disabled,
.c-product-slider .button-prev.swiper-button-disabled {
    opacity: .2
}

.c-product-slider .button-next:hover,
.c-product-slider .button-prev:hover {
    opacity: .6
}

.c-product-slider .button-next:focus,
.c-product-slider .button-prev:focus {
    outline: 0
}

.c-product-slider .button-prev {
    margin-right: -26px;
    right: 100%
}

.c-product-slider .button-next {
    left: 100%;
    margin-left: -26px
}

.c-product-slider .pagination {
    height: 1px;
    --bg-opacity: 1;
    background-color: #151518;
    background-color: rgba(21, 21, 24, var(--bg-opacity));
    --bg-opacity: 0.1;
    width: calc(100% - 100px);
    left: 50%;
  transform: translateX(-50%);
}

/* .swiper-button-lock,
.swiper-pagination-lock{display: block;} */

.c-product-slider .swiper-pagination-progressbar-fill {
    --bg-opacity: 1;
    background-color: var(--bg-theme);
    /* background-color: rgba(21, 21, 24, var(--bg-opacity)) */
}

.c-products-grid__item {
    min-height: 270px;
    transition: transform var(--animation-time-fast) var(--easing)
}

.c-products-grid__item.is-link:focus .cta svg,
.c-products-grid__item.is-link:hover .cta svg {
    transform: translate3d(5px, 0, 0)
}

.c-products-grid__item.is-full-image .cta,
.c-products-grid__item.is-full-image .title {
    --text-opacity: 1;
    color: #fcfcfc;
    color: rgba(252, 252, 252, var(--text-opacity))
}

.c-products-grid__item.is-full-image .cta path {
    stroke: var(--gray-100)
}

.c-products-grid .cta svg {
    transition: transform var(--animation-time-fast) var(--easing)
}

.c-products-grid .variations {
    position: absolute;
    bottom: 1.25rem;
    left: 1.5rem
}

.c-products-grid .variations .variation {
    width: 14px;
    height: 14px;
    border-radius: 50%
}

.c-products-grid .variations .variation:not(:last-child) {
    margin-right: 8px
}

.c-products-grid .image {
    width: 70%
}

.c-products-grid .image.is-full-image {
    margin: 0;
    width: auto;
    min-width: 0;
    max-width: none
}

.c-products-grid .image.is-full-image,
.c-products-grid .image.is-full-image .c-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.c-products-grid .image.is-full-image .c-image img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.c-scroll-to-anchor {
    padding-top: 66px;
    margin-top: -66px
}

.scroll-down__link {
    transition: opacity var(--animation-time-fast) var(--easing)
}

.scroll-down__link:focus,
.scroll-down__link:hover {
    opacity: .5
}

.c-support-chat {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 42px;
    z-index: 10
}

.c-testimonials.is-no-image .c-testimonials__quote:before,
.c-testimonials.is-no-image:before {
    display: none
}

.c-testimonials:before,
.c-testimonials__image:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 33.3vw;
    bottom: 0;
    --bg-opacity: 1;
    background-color: #cacdd1;
    background-color: rgba(202, 205, 209, var(--bg-opacity));
    pointer-events: none
}

.c-testimonials.is-theme-light:before,
.c-testimonials.is-theme-light__image:before {
    --bg-opacity: 1;
    background-color: #e1e3e6;
    background-color: rgba(225, 227, 230, var(--bg-opacity))
}

.c-testimonials:before {
    display: none
}

.c-testimonials__image {
    position: relative
}

.c-testimonials__image .c-image,
.c-testimonials__image .c-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.c-testimonials__image img,
.c-testimonials__image video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.c-testimonials__image:before {
    top: -3rem;
    bottom: -3rem;
    width: 90%;
    left: -1.25rem;
    z-index: -1
}

.c-testimonials__quote {
    line-height: 1.3
}

.c-testimonials__quote:before {
    content: "";
    display: block;
    width: 1.25rem;
    height: .125rem;
    --bg-opacity: 1;
    background-color: #151518;
    background-color: rgba(21, 21, 24, var(--bg-opacity));
    margin-bottom: 1.25rem
}

.c-testimonials__quote strong {
    font-weight: 500;
    font-weight: 500
}

.c-testimonials__testimonial--image {
    position: relative;
    width: 3.875rem;
    height: 3.875rem
}

.c-testimonials__testimonial--image img {
    position: relative;
    border-radius: 50%;
    margin-left: .125rem;
    z-index: 1
}

.c-testimonials__testimonial--image:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    --bg-opacity: 1;
    background-color: #e6b501;
    background-color: rgba(230, 181, 1, var(--bg-opacity));
    top: .75rem;
    width: 3.438rem;
    height: 3.438rem;
    border-radius: 50%;
    z-index: 0
}

.c-testimonials__testimonial--text {
    width: calc(100% - 3.875rem)
}

.c-text-intro .title:before {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    margin-bottom: 20px;
    --bg-opacity: 1;
    background-color: #151518;
    background-color: rgba(21, 21, 24, var(--bg-opacity))
}

.c-text-intro .c-btn {
    background-color: transparent;
    border: 1px solid var(--gray-600);
    color: var(--gray-600)
}

.c-text-intro .c-btn:focus,
.c-text-intro .c-btn:hover {
    background-color: var(--gray-600);
    color: var(--gray-100)
}

.c-youre-in-control-partners__item {
    min-height: 80px;
    transition: transform var(--animation-time-fast) var(--easing)
}

.c-youre-in-control-partners__item .icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0)
}

.c-youre-in-control-partners__item .cta svg {
    transition: transform var(--animation-time-fast) var(--easing)
}

.c-youre-in-control-partners__item:focus .cta svg,
.c-youre-in-control-partners__item:hover .cta svg {
    transform: translate3d(5px, 0, 0)
}

.c-youre-in-control-products__item {
    width: 60vw;
    transition: transform var(--animation-time-fast) var(--easing)
}

.c-youre-in-control-products .swiper-wrapper {
    display: grid;
    grid-auto-flow: column
}

@media (min-width:60em) {
    .c-site-footer:before {
        display: block
    }

    .c-site-footer__divider {
        margin: 12px 0 18px
    }

    .c-site-footer__top--solutions {
        padding-bottom: 120px
    }

    .c-site-footer__top--solutions:after,
    .c-site-footer__top--solutions:before {
        display: block
    }

    .c-site-footer__download--link:first-child svg,
    .c-site-footer__download--link:last-child svg {
        width: auto
    }

    .c-site-header {
        height: 85px
    }

    .c-site-header__logo svg {
        width: 12.688rem;
        height: 1.125rem
    }

    .c-help-panel {
        padding-top: 2rem;
        padding-bottom: 5.375rem;
        height: auto
    }

    .c-site-nav {
        width: 33.125rem;
        transform: translate3d(-100%, 0, 0)
    }

    .c-site-nav__top {
        padding: 1.5rem 2.5rem 3.5rem 3rem
    }

    .c-site-nav__bottom {
        padding: 3rem 2.5rem 3.5rem 3rem
    }

    .o-container,
    .o-container.is-small-mobile {
        padding-left: 32px;
        padding-right: 32px
    }

    /* body:not(.no-padding-top) {
        padding-top: 85px
    } */

    .text-style-d-0 {
        font-size: 56px
    }

    .text-style-d-1 {
        font-size: 48px
    }

    .text-style-d-2 {
        font-size: 44px
    }

    .text-style-d-3 {
        font-size: 42px
    }

    .text-style-d-4 {
        font-size: 36px
    }

    .text-style-d-5 {
        font-size: 32px
    }

    .text-style-d-6 {
        font-size: 28px
    }

    .text-style-l-1 {
        font-size: 21px
    }

    .text-style-b-2.is-form {
        font-size: 16px
    }

    .text-style-m-1.is-cta {
        font-size: 18px
    }

    .text-style-q {
        font-size: 20px
    }

    .c-about-awards__images .image {
        width: 13%;
        max-width: none;
        margin-right: 0;
        margin-bottom: 0
    }

    .c-about-awards__list--item:nth-child(2n) {
        padding-left: 70px
    }

    .c-about-case-stories__container:before {
        margin-left: -32px
    }

    .c-about-case-stories__list .image {
        margin-right: 0
    }

    .c-about-case-stories__list--grid:not(:last-child) {
        margin-bottom: 6rem
    }

    .c-about-case-stories__list--grid.is-reversed {
        direction: rtl
    }

    .c-about-case-stories__list--grid.is-reversed>div {
        direction: ltr
    }

    .c-button-icon {
        padding: 1rem;
        margin-right: .75rem;
        min-width: 140px
    }

    .c-call-to-action__text br {
        display: block
    }

    .c-call-to-action__image {
        height: 100%;
        min-height: 350px
    }

    .c-call-to-action__image .c-image {
        height: 100%;
        padding-bottom: 0
    }

    .c-call-to-action__form .c-form__input {
        padding-top: 15px
    }

    .c-card-grid__item.is-link:focus,
    .c-card-grid__item.is-link:hover {
        transform: translate3d(0, -5px, 0)
    }

    .c-card-grid__image .c-image {
        padding-bottom: 108%
    }

    .c-form__submit {
        width: auto;
        height: 45px
    }

    .c-full-screen-image-text .c-image:before,
    .c-full-screen-image-text .c-video:before {
        display: none
    }

    .c-full-screen-image-text__scroll-down svg {
        width: 60px;
        height: 60px
    }

    .c-hero-compact {
        height: 30rem
    }

    .c-hero-compact__icon {
        max-width: 420px
    }

    .c-hero-marketing-full__text {
        bottom: 3.125rem
    }

    .c-hero-marketing-full .c-image:before,
    .c-hero-marketing-full .c-video:before {
        display: none
    }

    .c-hero-marketing .scroll-down {
        width: 60px;
        bottom: 50px
    }

    .c-hero-product:after,
    .c-hero-product:before {
        display: block
    }

    .c-hero-product__image:before {
        display: none
    }

    .c-hero-product__wrapper {
        direction: rtl
    }

    .c-hero-product__wrapper>div {
        direction: ltr
    }

    .c-hero-product__image .c-image,
    .c-hero-product__image .c-video {
        padding-bottom: 82%
    }

    .c-hero-product .icon {
        width: 88px
    }

    .c-hero-product .scroll-down {
        width: 60px
    }

    .c-hero-text-over-image .c-image:before,
    .c-hero-text-over-image .c-video:before {
        display: none
    }

    .c-home-comfort__image {
        left: -32px;
        margin-right: -50px
    }

    .c-home-convenience .c-image-text__image {
        margin-right: -32px;
    }


    .c-home-convenience .banner-5-pu {
        max-width: 450px;
        height: auto;
        width: 1492px;
        margin-top: 70px;
        margin-left: -15px;
    }

    .c-home-convenience .banner-5-pu {
        max-width: 450px;
        height: auto;
        width: 1492px;
        margin-top: 70px;
        /* Initial top margin */
        margin-left: -15px;
        /* Initial left margin */
    }

    /* Media Query for Tablets */
    @media (max-width: 768px) {
        .c-home-convenience .banner-5-pu {
            width: 100%;
            /* Make the banner full-width */
            max-width: 100%;
            /* Remove max-width restriction */
            margin: revert;
            /* Use revert for margins */
        }
    }

    /* Media Query for Mobile Devices */
    @media (max-width: 480px) {
        .c-home-convenience .banner-5-pu {
            width: 100%;
            /* Make the banner full-width */
            max-width: 100%;
            /* Remove max-width restriction */
            margin: revert;
            /* Use revert for margins */
            margin-top: 30px;
            /* Reduce margin-top for better spacing if necessary */
        }
    }


    .c-home-convenience .custom-caption {
        position: absolute;
        bottom: 30px;
        /* Adjust as per your preference */
        background-color: rgba(0, 0, 0, 0.5);
        /* Semi-transparent black background */
        padding: 10px;
        border-radius: 5px;
        color: white;
        /* Text color */
        font-size: 1.2rem;
        /* Adjust font size */
        margin-left: 300px;
        right: 5%;
        text-align: center;
    }

    .c-home-convenience.model-pricing.buy-box span {
        font-family: "FF Mark Pro Bold", sans-serif;
        margin-bottom: 15px;
        /* display: block; */
    }

    .c-home-convenience .carousel-inner img {
        width: 800px;
        height: 520px;
        object-fit: cover;
    }

    .c-home-hero:before {
        display: block
    }

    /* .c-home-hero__image-wrapper .c-image {
        padding-bottom: 55%
    } */

    .c-home-hero__text-desktop {
        top: 10%;
    }

    .c-home-hero__text-desktop-bottom {
        position: absolute !important;
        left: 0;
        bottom: 0;
        padding-bottom: 0;
    }

    .c-home-hero .arrow-link {
        width: 60px
    }

    .c-icon {
        width: 64px;
        height: 64px
    }

    .c-icon.is-big.is-product,
    .c-icon.is-product-catalog {
        width: 80px;
        height: 80px
    }

    .c-icon.is-button-icon {
        width: 55px;
        height: 55px
    }

    .c-image-single:before {
        height: 130px
    }

    .c-image-text-featured__image {
        top: -13.125rem;
        margin-bottom: -8.75rem
    }

    .c-image-text-featured__spacing {
        height: 13.125rem
    }

    .c-image-text-featured.is-theme-boxed-light .c-image-text-featured__top--bg {
        left: calc(100% - 32px);
        height: calc(100% + 13.125rem)
    }

    .c-image-text .is-theme-boxed-dark {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem
    }

    .c-image-text .is-theme-boxed-dark.is-you-are-in-control {
        padding-top: 0;
        padding-bottom: 5.625rem
    }

    .c-image-text .is-theme-boxed-dark .c-image-text__content {
        padding-left: 0;
        padding-right: 0
    }

    .c-image-text .is-theme-boxed-light {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem
    }

    .c-image-text .is-theme-boxed-light .c-image-text__content {
        padding-left: 0;
        padding-right: 0
    }

    .c-image-text .is-aligned-row-reversed {
        direction: rtl
    }

    .c-image-text .is-aligned-row-reversed div {
        direction: ltr
    }

    .c-product-catalog-list__grid {
        grid-gap: 1.875rem;
        gap: 1.875rem
    }

    .c-product-catalog-list__item {
        min-height: 20.625rem
    }

    .c-product-catalog-list__item:focus,
    .c-product-catalog-list__item:hover {
        transform: translate3d(0, -5px, 0)
    }

    .c-product-catalog-partners__grid {
        grid-gap: 1.875rem;
        gap: 1.875rem
    }

    .c-product-catalog-partners__item {
        min-height: 13.125rem
    }

    .c-product-catalog-partners__item:focus,
    .c-product-catalog-partners__item:hover {
        transform: translate3d(0, -5px, 0)
    }

    .c-product-slider__item {
        width: 20%;
        max-width: none;
        min-width: 240px;
        border-radius: 22px;
    }

    .c-product-slider__item:focus,
    .c-product-slider__item:hover {
        transform: translate3d(0, -5px, 0)
    }

    .c-product-slider .button-next,
    .c-product-slider .button-prev {
        width: 42px
    }

    .c-product-slider .button-prev {
        margin-right: 0
    }

    .c-product-slider .button-next {
        margin-left: 0
    }

    .c-product-slider .pagination {
        width: calc(100% - 120px)
    }

    .c-products-grid__item {
        min-height: 25rem
    }

    .c-products-grid__item.is-link:focus,
    .c-products-grid__item.is-link:hover {
        transform: translate3d(0, -5px, 0)
    }

    .c-products-grid .image {
        width: 50%
    }

    .c-scroll-to-anchor {
        padding-top: 85px;
        margin-top: -85px
    }

    .c-support-chat {
        width: 64px
    }

    .c-testimonials:before {
        display: block
    }

    .c-testimonials__image:before {
        display: none
    }

    .c-testimonials__testimonial--image {
        width: 5.125rem;
        height: 5.125rem
    }

    .c-testimonials__testimonial--image img {
        margin-left: .25rem
    }

    .c-testimonials__testimonial--image:before {
        top: .875rem;
        width: 4.625rem;
        height: 4.625rem
    }

    .c-testimonials__testimonial--text {
        width: 25rem
    }

    .c-youre-in-control-partners__item {
        min-height: 8rem
    }

    .c-youre-in-control-partners__item:focus,
    .c-youre-in-control-partners__item:hover {
        transform: translate3d(0, -5px, 0)
    }

    .c-youre-in-control-products__item {
        width: 30%;
        min-width: 24.375rem
    }
}

@media (min-width:68.75em) {
    .c-icon.is-product-catalog {
        width: 90px;
        height: 90px
    }
}

@media (min-width:87.5em) {
    .text-style-d-0 {
        font-size: 64px
    }

    .text-style-d-1 {
        font-size: 56px
    }

    .text-style-d-2 {
        font-size: 52px
    }

    .text-style-d-3 {
        font-size: 48px
    }

    .text-style-d-4 {
        font-size: 40px
    }

    .text-style-d-5 {
        font-size: 36px
    }

    .text-style-d-6 {
        font-size: 32px
    }

    .text-style-l-1 {
        font-size: 24px
    }

    .text-style-b-1.is-footer {
        font-size: 18px
    }

    .text-style-b-1 {
        font-size: 20px
    }

    .text-style-m-2 {
        font-size: 12px
    }

    .text-style-q {
        font-size: 22px
    }

    .text-style-c-1 {
        font-size: 18px
    }

    .text-style-c-2 {
        font-size: 15px
    }

    /* .c-home-hero__image-wrapper .c-image {
        padding-bottom: 50%
    } */
}

@media (min-width:100em) {
    .text-style-d-0 {
        font-size: 4rem
    }

    .text-style-d-1 {
        font-size: 3.5rem
    }

    .text-style-d-2 {
        font-size: 3.25rem
    }

    .text-style-d-3 {
        font-size: 3rem
    }

    .text-style-d-4 {
        font-size: 2.5rem
    }

    .text-style-d-5 {
        font-size: 2.25rem
    }

    .text-style-d-6 {
        font-size: 2rem
    }

    .text-style-l-1 {
        font-size: 1.5rem
    }

    .text-style-b-1.is-footer {
        font-size: 1.125rem
    }

    .text-style-b-1 {
        font-size: 1.25rem
    }

    .text-style-b-2 {
        font-size: 1rem
    }

    .text-style-b-3 {
        font-size: .938rem
    }

    .text-style-m-1 {
        font-size: .875rem
    }

    .text-style-m-2 {
        font-size: .75rem
    }

    .text-style-q {
        font-size: 1.375rem
    }

    .text-style-c-1 {
        font-size: 1.125rem
    }

    .text-style-c-2 {
        font-size: .938rem
    }

    .c-youre-in-control-products__item {
        min-width: 25vw
    }
}

@media (min-width:1600px) {
    html {
        font-size: 16px
    }
}

@media (min-width:1800px) {
    html {
        font-size: 18px
    }
}

@media (min-width:2000px) {
    html {
        font-size: 20px
    }
}

@media (min-width:2400px) {
    html {
        font-size: 22px
    }
}

@media (max-width:959px) {
        .c-image-text__image {
        margin-bottom: 40px;
    }
}



@media (max-width:767px) {




    .u-media-1\/1-mobile .c-image,
    .u-media-1\/1-mobile .c-video {
        position: relative;
        height: 0;
        padding-bottom: 100%
    }

    .u-media-1\/1-mobile .c-image img,
    .u-media-1\/1-mobile .c-image video,
    .u-media-1\/1-mobile .c-video img,
    .u-media-1\/1-mobile .c-video video {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -o-object-fit: cover;
        object-fit: cover;
        height: 100%
    }

    .u-media-hero-mobile .c-image,
    .u-media-hero-mobile .c-video {
        position: relative;
        height: 0;
        padding-bottom: 160%
    }

    .u-media-hero-mobile .c-image img,
    .u-media-hero-mobile .c-image video,
    .u-media-hero-mobile .c-video img,
    .u-media-hero-mobile .c-video video {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -o-object-fit: cover;
        object-fit: cover;
        height: 100%
    }
}

/* Whatsapp */


.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    display: inline-block;
    background-color: #25D366;
    border-radius: 50%;
    padding: 10px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.whatsapp-logo {
    width: 50px;
    height: 50px;
}

.whatsapp-button:hover {
    transform: scale(1.1);
    /* Slight zoom on hover */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
    /* Shadow effect on hover */
}





.elfsight-app {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    animation: pulseAttract 2s infinite ease-in-out;
    transition: all 0.3s ease;
    width: 60px;
    /* Default width */
    height: 60px;
    /* Default height */
}

/* Add the pulsing effect */
@keyframes pulseAttract {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(37, 211, 102, 0.5);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 30px rgba(37, 211, 102, 0.8);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(37, 211, 102, 0.5);
    }
}

/* Media query for larger screens (desktops and large tablets) */
@media (min-width: 768px) {
    .elfsight-app {
        width: 70px;
        /* Larger widget on larger screens */
        height: 70px;
        bottom: 30px;
        /* Adjust position */
        right: 30px;
    }
}

/* Media query for small screens (phones) */
@media (max-width: 767px) {
    .elfsight-app {
        width: 50px;
        /* Smaller widget for mobile devices */
        height: 50px;
        bottom: 15px;
        /* Adjust position */
        right: 15px;
    }
}

/* Media query for extra small screens (very small phones) */
@media (max-width: 480px) {
    .elfsight-app {
        width: 40px;
        /* Even smaller widget for very small screens */
        height: 40px;
        bottom: 10px;
        /* Further adjust position */
        right: 10px;
    }
}





html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

a {
    background-color: transparent
}

b,
strong {
    font-weight: bolder
}

img {
    border-style: none
}

button,
input,
select {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button;
    appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

[hidden],
template {
    display: none
}

blockquote,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p {
    margin: 0
}

button {
    background-color: transparent;
    background-image: none
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color
}

ul {
    list-style: none;
    margin: 0;
    padding: 0
}

html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    line-height: 1.5
}

*,
:after,
:before {
    box-sizing: border-box;
    border: 0 solid
}

hr {
    border-top-width: 1px
}

img {
    border-style: solid
}

input::-moz-placeholder {
    color: #a0aec0
}

input:-ms-input-placeholder {
    color: #a0aec0
}

input::placeholder {
    color: #a0aec0
}

[role=button],
button {
    cursor: pointer
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

button,
input,
select {
    padding: 0;
    line-height: inherit;
    color: inherit
}

audio,
iframe,
img,
object,
svg,
video {
    vertical-align: middle;
}

img,
video {
    max-width: 100%;
    height: auto
}

.bg-gray-100 {
    --bg-opacity: 1;
    background-color: #fcfcfc;
    background-color: rgba(252, 252, 252, var(--bg-opacity))
}

.bg-gray-200 {
    --bg-opacity: 1;
    background-color: #f3f3f3;
    background-color: rgba(243, 243, 243, var(--bg-opacity))
}

.bg-gray-300 {
    --bg-opacity: 1;
    background-color: #e1e3e6;
    background-color: rgba(225, 227, 230, var(--bg-opacity))
}

.bg-gray-400 {
    --bg-opacity: 1;
    background-color: rgba(202, 205, 209, var(--bg-opacity));
    /* border-radius: 7px; */
    border-color: #000;
    /* background-color: #ffffff; */
}


.bg-gray-500 {
    --bg-opacity: 1;
    background-color: #009fe2;
}

.bg-gray-600 {
    --bg-opacity: 1;
    background-color: #009fe2;
}

.bg-blue {
    --bg-opacity: 1;
    background-color: #18a5d1;
}

.cursor-default {
    cursor: default
}

.block {
    display: inline-block;
}

.flex {
    display: flex
}

.grid {
    display: grid
}

.contents {
    display: contents
}

.hidden {
    display: none
}

.flex-row-reverse {
    flex-direction: row-reverse
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.self-end {
    align-self: flex-end
}

.self-center {
    align-self: center
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.font-mark-bold {
    font-weight: bold;
}

.font-mark-book {
    font-family: 'MarkPro-Book';
}

.u-text-underline-animation .link-sites {
    margin-top: 25px;
}

.font-mark-medium,
.font-medium {
    font-weight: 500
}

.h-full {
    height: 100%
}

.my-24 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem
}

.mx-36 {
    margin-left: 2.25rem;
    margin-right: 2.25rem
}

.my-40 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.-mx-10 {
    margin-left: -.625rem;
    margin-right: -.625rem
}

.mb-4 {
    margin-bottom: .25rem
}

.mt-8 {
    margin-top: .5rem
}

.mr-8 {
    margin-right: .5rem
}

.mb-8 {
    margin-bottom: .5rem
}

.mt-12 {
    margin-top: .75rem
}

.mr-12 {
    margin-right: .75rem
}

.mb-12 {
    margin-bottom: .75rem
}

.mb-14 {
    margin-bottom: .875rem
}

.mt-16 {
    margin-top: 1rem
}

.mr-16 {
    margin-right: 1rem
}

.mb-16 {
    margin-bottom: 1rem
}

.mb-20 {
    margin-bottom: 1.25rem
}

.mt-24 {
    margin-top: 1.5rem
}

.mr-24 {
    margin-right: 1.5rem
}

.mb-24 {
    margin-bottom: 1.5rem
}

.mb-25 {
    margin-bottom: 1.563rem
}

.mb-30 {
    margin-bottom: 1.875rem
}

.mt-32 {
    margin-top: 2rem
}

.mr-32 {
    margin-right: 2rem
}

.mb-32 {
    margin-bottom: 2rem
}

.mb-35 {
    margin-bottom: 2.188rem
}

.mt-38 {
    margin-top: 2.375rem
}

.mb-38 {
    margin-bottom: 2.375rem
}

.mb-40 {
    margin-bottom: 2.5rem
}

.mt-42 {
    margin-top: 2.625rem
}

.mb-48 {
    margin-bottom: 2rem
}

.mt-50 {
    margin-top: 3.125rem
}

.mb-50 {
    margin-bottom: 3.125rem
}

.mt-54 {
    margin-top: 3.375rem
}

.mb-96 {
    margin-bottom: 6rem
}

.mt-100 {
    margin-top: 6.25rem
}

.-mt-12 {
    margin-top: -.75rem
}

.max-w-sm {
    max-width: 24rem
}

.opacity-10 {
    opacity: .1
}

.opacity-20 {
    opacity: .2
}

.opacity-40 {
    opacity: .5
}

.opacity-60 {
    opacity: .6
}

.opacity-70 {
    opacity: .7
}

.focus\:outline-none:focus {
    outline: 0
}

.overflow-hidden {
    overflow: hidden
}

.p-10 {
    padding: .625rem
}

.p-20 {
    padding: 1.25rem
}

.py-8 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.px-10 {
    padding-left: .625rem;
    padding-right: .625rem
}

.py-14 {
    padding-top: .875rem;
    padding-bottom: .875rem
}

.px-16 {
    padding-left: 1rem;
    padding-right: 1rem
}

.py-20 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem
}

.px-20 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.px-24 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.px-30 {
    padding-left: 1.875rem;
    padding-right: 1.875rem
}

.px-40 {
    padding-left: 2.5rem;
    padding-right: 2.5rem
}

.py-48 {
    padding-top: 3rem;
    padding-bottom: 3rem
}

.px-50 {
    padding-left: 3.125rem;
    padding-right: 3.125rem
}

.py-70 {
    padding-top: 4.375rem;
    padding-bottom: 4.375rem
}

.py-120 {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem
}

.pb-1 {
    padding-bottom: .0625rem
}

.pr-10 {
    padding-right: .625rem
}

.pb-16 {
    padding-bottom: 1rem
}

.pt-20 {
    padding-top: 1.25rem
}

.pr-20 {
    padding-right: 1.25rem
}

.pt-24 {
    padding-top: 1.5rem
}

.pr-24 {
    padding-right: 1.5rem
}

.pl-24 {
    padding-left: 1.5rem
}

.pb-28 {
    padding-bottom: 1.75rem
}

.pt-30 {
    padding-top: 1.875rem
}

.pr-32 {
    padding-right: 2rem
}

.pt-40 {
    padding-top: 2.5rem
}

.pb-42 {
    padding-bottom: 2.625rem
}

.pb-44 {
    padding-bottom: 2.75rem
}

.pt-48 {
    padding-top: 3rem
}

.pb-48 {
    padding-bottom: 3rem
}

.pb-50 {
    padding-bottom: 3.125rem
}

.pb-56 {
    padding-bottom: 3.5rem
}

.pt-64 {
    padding-top: 4rem
}

.pb-70 {
    padding-bottom: 4.375rem
}

.pt-72 {
    padding-top: 4.5rem
}

.pb-80 {
    padding-bottom: 5rem
}

.pt-100 {
    padding-top: 6.25rem
}

.placeholder-gray-400::-moz-placeholder {
    --placeholder-opacity: 1;
    color: #cacdd1;
    color: rgba(202, 205, 209, var(--placeholder-opacity))
}

.placeholder-gray-400:-ms-input-placeholder {
    --placeholder-opacity: 1;
    color: #cacdd1;
    color: rgba(202, 205, 209, var(--placeholder-opacity))
}

.placeholder-gray-400::placeholder {
    --placeholder-opacity: 1;
    color: #cacdd1;
    color: rgba(202, 205, 209, var(--placeholder-opacity))
}

.placeholder-gray-600::-moz-placeholder {
    --placeholder-opacity: 1;
    color: #151518;
    color: rgba(21, 21, 24, var(--placeholder-opacity))
}

.placeholder-gray-600:-ms-input-placeholder {
    --placeholder-opacity: 1;
    color: #151518;
    color: rgba(21, 21, 24, var(--placeholder-opacity))
}

.placeholder-gray-600::placeholder {
    --placeholder-opacity: 1;
    color: #151518;
    color: rgba(21, 21, 24, var(--placeholder-opacity))
}

.placeholder-opacity-30::-moz-placeholder {
    --placeholder-opacity: 0.3
}

.placeholder-opacity-30:-ms-input-placeholder {
    --placeholder-opacity: 0.3
}

.placeholder-opacity-30::placeholder {
    --placeholder-opacity: 0.3
}

.placeholder-opacity-40::-moz-placeholder {
    --placeholder-opacity: 0.5
}

.placeholder-opacity-40:-ms-input-placeholder {
    --placeholder-opacity: 0.5
}

.placeholder-opacity-40::placeholder {
    --placeholder-opacity: 0.5
}

.placeholder-opacity-60::-moz-placeholder {
    --placeholder-opacity: 0.6
}

.placeholder-opacity-60:-ms-input-placeholder {
    --placeholder-opacity: 0.6
}

.placeholder-opacity-60::placeholder {
    --placeholder-opacity: 0.6
}

.pointer-events-none {
    pointer-events: none
}

.pointer-events-auto {
    pointer-events: auto;
    color: black;
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.right-0 {
    right: 0
}

.bottom-0 {
    bottom: 0
}

.left-0 {
    left: 0
}

.resize {
    resize: both
}

.text-center {
    text-align: center
}

.text-gray-100 {
    --text-opacity: 1;
    color: #fcfcfc;
    color: rgba(252, 252, 252, var(--text-opacity))
}

.text-gray-400 {
    --text-opacity: 1;
    color: #cacdd1;
    color: rgba(202, 205, 209, var(--text-opacity))
}

.text-gray-600 {
    --text-opacity: 1;
    color: #151518;
    color: rgba(21, 21, 24, var(--text-opacity))
}

.focus\:text-gray-100:focus,
.hover\:text-gray-100:hover {
    --text-opacity: 1;
    color: #fcfcfc;
    color: rgba(252, 252, 252, var(--text-opacity))
}

.uppercase {
    text-transform: uppercase
}

.w-8\/24 {
    width: 33.333%
}

.w-12\/24 {
    width: 50%
}

.w-15\/24 {
    width: 62.5%
}

.w-18\/24 {
    width: 75%
}

.w-24\/24,
.w-full {
    width: 100%
}

.z-1 {
    z-index: 1
}

.z-2 {
    z-index: 2
}

.z-3 {
    z-index: 3
}

.gap-2 {
    grid-gap: .5rem;
    gap: .5rem
}

.gap-4 {
    grid-gap: 1rem;
    gap: 1rem
}

.gap-6 {
    grid-gap: 1.5rem;
    gap: 1.5rem
}

.gap-x-2 {
    grid-column-gap: .5rem;
    -moz-column-gap: .5rem;
    column-gap: .5rem
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr))
}

.grid-cols-8 .bottom-footer {
    text-align: center;
}

.grid-cols-24 {
    grid-template-columns: repeat(24, minmax(0, 1fr))
}

.col-span-2 {
    grid-column: span 2/span 2
}

.col-start-1 {
    grid-column-start: 1
}

.col-start-3 {
    grid-column-start: 3
}

.col-start-5 {
    grid-column-start: 5
}

.col-end-5 {
    grid-column-end: 5
}

.col-end-7 {
    grid-column-end: 7
}

.col-end-9 {
    grid-column-end: 9
}

.transform {
    --transform-translate-x: 0;
    --transform-translate-y: 0;
    --transform-rotate: 0;
    --transform-skew-x: 0;
    --transform-skew-y: 0;
    --transform-scale-x: 1;
    --transform-scale-y: 1;
    transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))
}

@-webkit-keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

@keyframes ping {

    75%,
    to {
        transform: scale(2);
        opacity: 0
    }
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

@keyframes bounce {

    0%,
    to {
        transform: translateY(-25%);
        -webkit-animation-timing-function: cubic-bezier(.8, 0, 1, 1);
        animation-timing-function: cubic-bezier(.8, 0, 1, 1)
    }

    50% {
        transform: none;
        -webkit-animation-timing-function: cubic-bezier(0, 0, .2, 1);
        animation-timing-function: cubic-bezier(0, 0, .2, 1)
    }
}

@media (min-width:60em) {
    .md\:bg-gray-300 {
        --bg-opacity: 1;
        background-color: #e1e3e6;
        background-color: rgba(225, 227, 230, var(--bg-opacity))
    }

    .md\:bg-gray-600 {
        --bg-opacity: 1;
        background-color: #151518;
        background-color: rgba(21, 21, 24, var(--bg-opacity))
    }

    .md\:block {
        display: block
    }

    .md\:flex {
        display: flex
    }

    .md\:hidden {
        display: none
    }

    .md\:flex-row {
        flex-direction: row
    }

    .md\:flex-no-wrap {
        flex-wrap: nowrap
    }

    .md\:self-start {
        align-self: flex-start
    }

    .md\:self-end {
        align-self: flex-end
    }

    .md\:self-center {
        align-self: center
    }

    .md\:justify-start {
        justify-content: flex-start
    }

    .md\:justify-end {
        justify-content: flex-end
    }

    .md\:justify-between {
        justify-content: space-between
    }

    .md\:mx-0 {
        margin-left: 0;
        margin-right: 0
    }

    .md\:my-40 {
        margin-top: 2.5rem;
        margin-bottom: 2.5rem
    }

    /* .md\:mb-0 {
        margin-bottom: 0
    } */

    .md\:mb-14 {
        margin-bottom: .875rem
    }

    .md\:mt-16 {
        margin-top: 1rem
    }

    .md\:mr-16 {
        margin-right: 1rem
    }

    .md\:mb-16 {
        margin-bottom: 1rem
    }

    .md\:mt-18 {
        margin-top: 1.125rem
    }

    .md\:mb-18 {
        margin-bottom: 1.125rem
    }

    .md\:mt-20 {
        margin-top: 1.25rem
    }

    .md\:mb-20 {
        margin-bottom: 1.25rem
    }

    .md\:ml-20 {
        margin-left: 1.25rem
    }

    .md\:mt-22 {
        margin-top: 1.375rem
    }

    .md\:mb-24 {
        margin-bottom: 1.5rem
    }

    .md\:mt-32 {
        margin-top: 2rem
    }

    .md\:mr-32 {
        margin-right: 2rem
    }

    .md\:mb-32 {
        margin-bottom: 2rem
    }

    .md\:ml-32 {
        margin-left: 2rem
    }

    .md\:mb-36 {
        margin-bottom: 2.25rem
    }

    .md\:mt-40 {
        margin-top: 2.5rem
    }

    .md\:mb-40 {
        margin-bottom: 2.5rem
    }

    .md\:mb-46 {
        margin-bottom: 2.875rem
    }

    .md\:mb-48 {
        margin-bottom: 3rem
    }

    .md\:mb-50 {
        margin-bottom: 3.125rem
    }

    .md\:mt-56 {
        margin-top: 3.5rem
    }

    .md\:mb-56 {
        margin-bottom: 3.5rem
    }

    .md\:mb-60 {
        margin-bottom: 3.75rem
    }

    .md\:mb-62 {
        margin-bottom: 3.875rem
    }

    .md\:mb-64 {
        margin-bottom: 4rem
    }

    .md\:mt-70 {
        margin-top: 4.375rem
    }

    .md\:ml-70 {
        margin-left: 4.375rem
    }

    .md\:mb-72 {
        margin-bottom: 4.5rem
    }

    .md\:mt-80 {
        margin-top: 5rem
    }

    .md\:mb-80 {
        margin-bottom: 5rem
    }

    .md\:mb-82 {
        margin-bottom: 5.125rem
    }

    .md\:mb-98 {
        margin-bottom: 6.125rem
    }

    .md\:mb-100 {
        margin-bottom: 6.25rem
    }

    .md\:mb-120 {
        margin-bottom: 7.5rem
    }

    .md\:-mt-8 {
        margin-top: -.5rem
    }

    .md\:py-0 {
        padding-top: 0;
        padding-bottom: 0
    }

    .md\:px-0 {
        padding-left: 0;
        padding-right: 0
    }

    .md\:py-18 {
        padding-top: 1.125rem;
        padding-bottom: 1.125rem
    }

    .md\:py-20 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem
    }

    .md\:px-24 {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }

    .md\:py-30 {
        padding-top: 1.875rem;
        padding-bottom: 1.875rem
    }

    .md\:py-48 {
        padding-top: 3rem;
        padding-bottom: 3rem
    }

    .md\:px-58 {
        padding-left: 3.625rem;
        padding-right: 3.625rem
    }

    .md\:px-60 {
        padding-left: 3.75rem;
        padding-right: 3.75rem
    }

    .md\:py-70 {
        padding-top: 4.375rem;
        padding-bottom: 4.375rem
    }

    .md\:py-80 {
        padding-top: 5rem;
        padding-bottom: 5rem
    }



    .md\:py-94 {
        padding-top: 5.875rem;
        padding-bottom: 5.875rem
    }

    .md\:py-96 {
        padding-top: 6rem;
        padding-bottom: 6rem
    }

    .md\:py-120 {
        padding-top: 7.5rem;
        padding-bottom: 7.5rem
    }

    .md\:pt-0 {
        padding-top: 0
    }

    .md\:pr-0 {
        padding-right: 0
    }

    .md\:pb-0 {
        padding-bottom: 0
    }

    .md\:pt-2 {
        padding-top: .125rem
    }

    .md\:pr-12 {
        padding-right: .75rem
    }

    .md\:pb-22 {
        padding-bottom: 1.375rem
    }

    .md\:pl-26 {
        padding-left: 1.625rem
    }

    .md\:pl-28 {
        padding-left: 1.75rem
    }

    .md\:pt-40 {
        padding-top: 2.5rem
    }

    .md\:pr-40 {
        padding-right: 2.5rem
    }

    .md\:pt-48 {
        padding-top: 3rem
    }

    .md\:pt-56 {
        padding-top: 3.5rem
    }

    .md\:pr-56 {
        padding-right: 3.5rem
    }

    .md\:pb-60 {
        padding-bottom: 3.75rem
    }

    .md\:pt-70 {
        padding-top: 4.375rem
    }

    .md\:pr-70 {
        padding-right: 4.375rem
    }

    .md\:pb-70 {
        padding-bottom: 4.375rem
    }

    .md\:pt-74 {
        padding-top: 4.625rem
    }

    .md\:pt-80 {
        padding-top: 5rem
    }

    .md\:pb-80 {
        padding-bottom: 5rem
    }

    .md\:pb-90 {
        padding-bottom: 5.625rem
    }

    .md\:pt-96 {
        padding-top: 6rem
    }

    .md\:pb-96 {
        padding-bottom: 6rem
    }

    .md\:pt-100 {
        padding-top: 6.25rem
    }

    .md\:pb-100 {
        padding-bottom: 6.25rem
    }

    .md\:pb-110 {
        padding-bottom: 6.875rem
    }

    .md\:pb-120 {
        padding-bottom: 7.5rem
    }

    .md\:w-initial {
        width: auto
    }

    .md\:w-8\/24 {
        width: 33.333%
    }

    .md\:w-18\/24 {
        width: 75%
    }

    .md\:w-full {
        width: 100%
    }

    .md\:gap-0 {
        grid-gap: 0;
        gap: 0
    }

    .md\:gap-4 {
        grid-gap: 1rem;
        gap: 1rem
    }

    .md\:gap-6 {
        grid-gap: 1.5rem;
        gap: 1.5rem
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .md\:grid-cols-24 {
        grid-template-columns: repeat(24, minmax(0, 1fr))
    }

    .md\:col-start-1 {
        grid-column-start: 1
    }

    .md\:col-start-2 {
        grid-column-start: 2
    }

    .md\:col-start-3 {
        grid-column-start: 3
    }

    .md\:col-start-4 {
        grid-column-start: 4
    }

    .md\:col-start-5 {
        grid-column-start: 5
    }

    .md\:col-start-6 {
        grid-column-start: 6
    }

    .md\:col-start-7 {
        grid-column-start: 7
    }

    .md\:col-start-9 {
        grid-column-start: 9
    }

    .md\:col-start-11 {
        grid-column-start: 11
    }

    .md\:col-start-13 {
        grid-column-start: 13
    }

    .md\:col-start-14 {
        grid-column-start: 14
    }

    .md\:col-start-15 {
        grid-column-start: 15
    }

    .md\:col-start-16 {
        grid-column-start: 16
    }

    .md\:col-start-17 {
        grid-column-start: 17
    }

    .md\:col-start-19 {
        grid-column-start: 19
    }

    .md\:col-end-5 {
        grid-column-end: 5
    }

    .md\:col-end-6 {
        grid-column-end: 6
    }

    .md\:col-end-7 {
        grid-column-end: 7
    }

    .md\:col-end-9 {
        grid-column-end: 9
    }

    .md\:col-end-10 {
        grid-column-end: 10
    }

    .md\:col-end-11 {
        grid-column-end: 11
    }

    .md\:col-end-12 {
        grid-column-end: 12
    }

    .md\:col-end-13 {
        grid-column-end: 13
    }

    .md\:col-end-14 {
        grid-column-end: 14
    }

    .md\:col-end-15 {
        grid-column-end: 15
    }

    .md\:col-end-16 {
        grid-column-end: 16
    }

    .md\:col-end-18 {
        grid-column-end: 18
    }

    .md\:col-end-19 {
        grid-column-end: 19
    }

    .md\:col-end-21 {
        grid-column-end: 21
    }

    .md\:col-end-22 {
        grid-column-end: 22
    }

    .md\:col-end-23 {
        grid-column-end: 23
    }

    .md\:col-end-24 {
        grid-column-end: 24
    }

    .md\:col-end-25 {
        grid-column-end: 25
    }
}

@media (min-width:68.75em) {
    .lg\:gap-4 {
        grid-gap: 1rem;
        gap: 1rem
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .lg\:col-start-15 {
        grid-column-start: 15
    }

    .lg\:col-start-16 {
        grid-column-start: 16
    }

    .lg\:col-start-19 {
        grid-column-start: 19
    }

    .lg\:col-end-13 {
        grid-column-end: 13
    }
}

@media (min-width:87.5em) {
    .xl\:col-start-14 {
        grid-column-start: 14
    }

    .xl\:col-end-10 {
        grid-column-end: 10
    }

    .xl\:col-end-12 {
        grid-column-end: 12
    }

    .xl\:col-end-14 {
        grid-column-end: 14
    }
}

@media (min-width:100em) {
    .xxl\:col-start-10 {
        grid-column-start: 10
    }
}


.c-support-chat {
    display: none;
}



/* ---------------------------------------------------------- */
/* Add these color classes if they don't already exist */
.bg-black-400 {
    background-color: #000000;
}

.bg-red-600 {
    background-color: #DD2F28;
}

.bg-red-700 {
    background-color: #009fe2;
    /* Darker shade for hover state */
}

.text-red-600 {
    color: #DD2F28;
}

.text-black {
    color: #000000;
}

.text-white {
    color: #FFFFFF;
}

/* Add hover styles for buttons */
.c-button:hover {
    opacity: 0.9;
}


.c-product-slider__item .image img {
    width: 205px;
    height: 205px;
    object-fit: cover;
}

.c-home-comfort.relative .c-home-comfort__title-desktop .title {
    background: #00000094;
    padding: 26px;
    border-radius: 5%;
}


/* Product-Page */

/* Banner Container */
.banner {
    position: relative;
    height: 400px;
    /* Fixed height for the banner */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    width: 100%;
    /* Full width */
}

/* Banner Overlay */
.banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #cacdd1;
    /* Dark overlay */
}

/* Banner Content */
.banner-content {
    position: relative;
    text-align: center;
    z-index: 1;
    /* Ensures content appears on top of the overlay */
}

.banner img {
    height: 400px;
    /* Fixed height */
    width: auto;
    /* The width adjusts based on the image's aspect ratio */
    max-width: 100%;
    /* Ensures the image doesn't exceed the container's width */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .banner img {
        height: 300px;
        /* Reduce the height on smaller screens */
    }
}

@media (max-width: 480px) {
    .banner img {
        height: 200px;
        /* Further reduce the height on very small screens */
    }
}


.banner h1 {
    font-size: 4em;
    margin-bottom: 0.5em;
    font-family: 'Atkinson Hyperlegible', sans-serif;
}

.banner-btn:hover {
    background-color: #2ecc71;
}



.c-hero-product .thumbnails {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}


.c-hero-product .thumbnails-container {
    display: flex;
    overflow-x: hidden;
    scroll-behavior: smooth;
    width: 100%;
    padding: 20px;
}

.c-hero-product .thumbnails img {
    width: 80px;
    height: 80px;
    margin: 0 10px;
    cursor: pointer;
    border: 1px solid #ddd;
    transition: border 0.3s ease;
}


.c-hero-product .thumbnails img:hover {
    border: 2px solid #000;
}

/* Navigation Icons for Thumbnail Carousel */
.c-hero-product .carousel-prev-icon, .carousel-next-icon {
    font-size: 24px;
    /* background-color: rgba(0, 0, 0, 0.5); */
    color: red;
    /* padding: 10px; */
    cursor: pointer;
}

.c-hero-product .carousel-prev-icon {
    position: absolute;
    left: 5px;
}

.c-hero-product .carousel-next-icon {
    position: absolute;
    right: 0;
}

.c-hero-product .main-image {
    position: relative;
    width: 100%;
    height: 400px;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    overflow: hidden;
}

.c-hero-product .main-image img {
    width: 100%;
    max-height: 100%;
    /* object-fit: contain; */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.c-hero-product .main-image:hover img {
    transform: scale(1.5);
    /* Zoom effect on hover */
    opacity: 0.9;
}

.c-hero-product .thumbnails .prev-icon, .next-icon {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
}

/* Thumbnail Carousel Styling */

.c-hero-product .thumbnails .prev-icon {
    left: 10px;
}

.c-hero-product .thumbnails .next-icon {
    right: 10px;
}

/* Contact-Us-Page */

.contact-us-content .heading {
    font-size: 2.5rem;
    font-weight: 900;
}


.c-call-to-action__form .form-label,
input::placeholder, textarea::placeholder {
    color: #fff;
}

.c-call-to-action__form form.form input,
.c-call-to-action__form form.form textarea {
    border-color: #fff;
    border-width: 1px;
    background: transparent;
    padding: 10px 10px 10px 10px;
    width: 100%;
    border-radius: 5px;
}

.c-call-to-action__form form.form input:focus {
    box-shadow: none;
}

.c-call-to-action__form form.form input:focus-visible {
    box-shadow: none;
    outline: none;
}

form.form button {
    background-color: #000;
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 46px;
    padding-left: 46px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}


.k13-widgets .text-panel .headline{
  font-size: 2.25rem;
  line-height: 3.375rem;
  color: #41484f;
  padding-bottom: 1rem;
}