html {
    font-size: calc(0.43750000000000056rem + 0.5208333333333329vw);
}

html,
body {
    overflow-x: hidden !important;
    max-width: 1440px;
}

.section {
    padding: 9.75rem 2rem 6rem;
}

.header {
    max-width: 82rem !important;
    margin: 0 auto;
    border: 1px solid transparent;
}

.header.scrolled{
    border: 1px solid #E1E1E108;
}


/* Hero Section */
.section.hero .img-wrapper {
    height: 21rem;
    flex: 1;
    align-items: center;
    padding-left: 4rem;
    display: flex;
    position: relative;
}

.section.hero .card-img {
    transition: .3s .2s;
    height: 21rem;
    max-width: none;
    position: absolute;
    box-shadow: 0 17px 1.75rem .875rem rgba(0, 0, 0, .05);
}

.section.hero .card-img img {
    max-width: 40rem;
    object-fit: contain;
}

.section.hero.fadeIn .card-img.one {
    z-index: 4;
    margin-left: 4rem;
    top: 0%;
    bottom: 0%;
    left: auto;
    right: auto;
}

.section.hero.fadeIn .card-img.two {
    transform: translate3d(17.019rem, -21.645rem, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(60deg) skew(0deg);
    transform-style: preserve-3d;

    z-index: 6;
    top: auto;
    bottom: 0%;
    left: 0%;
    right: auto;
}

.section.hero.fadeIn .card-img.three {
    transform: translate3d(7.394rem, -12.778rem, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(30deg) skew(0deg);
    transform-style: preserve-3d;

    z-index: 5;
    border-radius: 2rem;
    top: auto;
    bottom: 0%;
    left: 0%;
    right: auto;
}

.section.hero.fadeIn .card-img.four {
    transform: translate3d(7.394rem, 12.778rem, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(-30deg) skew(0deg);
    transform-style: preserve-3d;

    z-index: 3;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: auto;
}

.section.hero.fadeIn .card-img.five {
    transform: translate3d(17.019rem, 21.645rem, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(-60deg) skew(0deg);
    transform-style: preserve-3d;

    z-index: 2;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: auto;
}


/* Benefits Section */
.section.benefits .link {
    transition: .3s;
}

.section.benefits .link:hover {
    gap: .75rem;
}


.section.testimonials .card {
    height: 31.5rem;
    box-sizing: border-box;
}



@media screen and (max-width: 1920px) {
    html {
        font-size: calc(0.43749999999999944rem + 0.5208333333333338vw);
    }
}

@media screen and (max-width: 1728px) {
    html {
        font-size: calc(0.43750000000000006rem + 0.5208333333333333vw);
    }
}

@media screen and (max-width: 767px) {
    .section.hero .img-wrapper {
        height: 20rem;
    }

    .section.hero .card-img {
        height: 20rem;
    }

    .section.hero.fadeIn .card-img.one {
        z-index: 5;
        top: 50%;
        transform: translate(-4rem, -50%);
    }

    .section.hero.fadeIn .card-img.two {
        transform: translate3d(14.12rem, -6.26rem, 0) scale(1) rotateZ(30deg) skew(0deg);
        transform-style: preserve-3d;
    }

    .section.hero.fadeIn .card-img.three {
        transform: translate3d(4.95rem, -6.26rem, 0) scale(1) rotateZ(15deg) skew(0deg);
        transform-style: preserve-3d;
    }

    .section.hero.fadeIn .card-img.four {
        transform: translate3d(4.95rem, 6.26rem, 0) scale(1) rotateZ(-15deg) skew(0deg);
        transform-style: preserve-3d;
    }

    .section.hero.fadeIn .card-img.five {
        transform: translate3d(14.12rem, 6.26rem, 0) scale(1) rotateZ(-30deg) skew(0deg);
        transform-style: preserve-3d;
        z-index: 6;
    }
}