@charset "utf-8";

.home {
    overflow: hidden
}

.footer {
    margin-top: 6em
}

.content__hero__bg .bg-hero {
    position: absolute;
    bottom: -1%;
    right: 15vw;
    height: 101%;
    width: calc(100% - 15vw);
    min-width: 1000px;
    min-height: 800px
}

.content__hero__bg .bg-hero>.path {
    fill: url(#pink-blue-grad)
}

.content__hero__bg .hero-img {
    position: absolute;
    right: -10px;
    top: -60px;
    width: calc(50% + 70px);
    height: 110%;
    min-height: 600px;
    z-index: 2
}

.content__hero__bg .hero-img>figure {
    width: 100%;
    height: 100%;
    -webkit-clip-path: url(#home-hero-mask);
    clip-path: url(#home-hero-mask);
    position: relative;
    z-index: 1
}

.content__hero__bg .hero-img>figure::before {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    content: '';
    z-index: 2;
    background: rgb(27, 27, 27);
    background: linear-gradient(180deg, rgba(27, 27, 27, .8) 10%, rgba(27, 27, 27, 0) 70%)
}

.content__hero__bg .hero-img>figure>img {
    position: relative;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    max-width: none;
    z-index: -1;
    opacity: 0
}

.content__hero__bg .hero-img>figure>img:not(.active):not(.next) {
    display: none
}

.content__hero__bg .hero-img>figure>img:is(.next, .active) {
    opacity: 1
}

.content__hero__bg .hero-img>figure>img.active {
    z-index: 1
}

.content__hero__bg .hero-img>figure>img.next {
    position: absolute;
    top: 0;
    left: 0
}

.content__hero__bg .hero-img>figure>img.fade-out {
    animation: fadeOut 1.5s ease forwards
}

.content__hero__bg .hero-img>figure>img.right {
    object-position: center right
}

.content__hero__bg .hero-img>figure>img.left {
    object-position: center left
}
/* .content__wrapper {
    text-align: center;
} */
.partner-logo button {
    display: none !important;
}


@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.content__hero .feature-list>li::before {
    font-size: 1.8em
}

.content__hero .btn--lg {
    border-radius: 34px;
    height: 68px;
    max-width: 350px;
    font-size: 1.4em;
    margin-top: 5px
}

.content__section {
    margin-top: 5em
}

.content__section__bg {
    overflow: visible
}

.content__section__bg .bg-quad {
    max-height: none;
    min-height: 400px;
    min-width: 1300px;
    max-width: none;
    width: auto
}

#products.content__section {
    margin-top: 3em
}

#products .content__section__bg .bg-quad {
    left: calc(50% - 350px);
    top: 17.5%;
    height: 100%
}

#reviews .content__section__bg .bg-quad {
    right: calc(50% - 250px);
    top: 0;
    height: 110%;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.trustpilot-widget {
    text-align: center
}

.tp-widget-logo {
    margin: 0 auto 8px
}

@media screen and (min-width:1500px) {
    .content__hero .content__wrapper {
        max-width: 57.5vw;
        min-width: calc(var(--width-content) + 2em)
    }
}

@media screen and (max-width:768px) {
    .content__hero {
        margin-bottom: 3em
    }

    .content__hero .content__wrapper.full--height {
        height: 70%;
        min-height: 500px
    }

    .content__hero .btn--lg {
        border-radius: 32px;
        height: 64px;
        max-width: 330px;
        font-size: 1.3em
    }

    .content__hero__bg .bg-hero {
        bottom: 20%;
        right: -15%;
        height: 100%;
        width: 115%;
        min-width: 0
    }

    .content__hero__bg .hero-img {
        left: -5%;
        top: 55%;
        bottom: initial;
        width: 110%;
        height: 52.5%;
        min-width: 0;
        min-height: 50%;
        max-height: 55%
    }

    .content__hero__bg .hero-img>figure::before {
        background: rgb(27, 27, 27);
        background: linear-gradient(180deg, rgba(27, 27, 27, .2) 10%, rgba(27, 27, 27, .1) 90%)
    }
}

@media screen and (max-width:768px) and (max-height:800px) {
    .content__hero .feature-list>li {
        padding-left: 43px
    }

    .content__hero .feature-list>li::before {
        font-size: 1.7em
    }

    .content__hero :is(p, ul) {
        font-size: .95em
    }
}

@media screen and (max-width:600px) {
    .content__hero {
        margin-bottom: 3em
    }

    .content__hero .content__wrapper.full--height {
        height: 70%;
        min-height: 500px
    }

    .content__hero .feature-list>li {
        padding-left: 36px
    }

    .content__hero .feature-list>li::before {
        font-size: 1.5em
    }

    .content__hero :is(p, ul) {
        font-size: .9em
    }

    .content__hero__bg .bg-hero {
        bottom: 20%;
        right: -15%;
        height: 100%;
        width: 115%;
        min-width: 0
    }

    .content__hero__bg .hero-img {
        left: -5%;
        top: 55%;
        bottom: initial;
        width: 110%;
        height: 52.5%;
        min-width: 0;
        min-height: 50%;
        max-height: 55%
    }

    .content__hero__bg .hero-img>figure::before {
        background: rgb(27, 27, 27);
        background: linear-gradient(180deg, rgba(27, 27, 27, .2) 10%, rgba(27, 27, 27, .1) 90%)
    }
}

@media screen and (max-width:450px) {
    .content__hero :is(h1, h2) {
        font-size: 2.75em
    }
}

@media screen and (max-width:400px) {
    .content__hero :is(h1, h2) {
        font-size: 2.5em
    }
}



.sec-thanks {
    min-height: 100vh;
    align-content: center;
}
.sec-thanks .desc {
    text-align: center;
}
.sec-thanks .desc .logo {
    height: 100px;
    object-fit: contain;
    object-position: center;
    margin: 0 0 20px 0;
}
.sec-thanks .desc h1 {
    text-transform: capitalize;
    font-size: clamp(24px,8vw,70px);
    color: var(--theme);
    margin: 0 0 20px 0;
}
.sec-thanks .desc h6 {
    text-transform: capitalize;
    font-size: clamp(16px,2vw,40px);
    margin: 0 0 20px 0;
}

.iti--allow-dropdown {
    width: 100%;
}
label.error {
    color: red;
    font-size: 12px;
    font-weight: 500;
}