/* Hero Global ---------------------------------- */
.th-hero-wrapper {
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.th-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;

    img {
        position: relative;
        height: 100%;
        width: 100%;
        object-fit: cover;
        overflow: hidden;
    }
}


/* Hero 1 ---------------------------------- */
.hero-1 {
    position: relative;
    overflow: hidden;

    .th-hero-bg {
        z-index: 2;

        &:before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(13, 13, 12, 0.5);
            mix-blend-mode: normal;
            z-index: -1;

        }
    }

    .th-swiper-custom {
        position: absolute;
        top: 47%;
        margin: 0;
        transform: rotate(-90deg);
        right: 55px;
        z-index: 9;

        @include sm {
            display: none;
        }

        .swiper-pagination-bullets {
            position: relative;
            z-index: 3;
            text-align: center;
            margin: 25px 0 0px 0;
            line-height: 10px;
            height: 3px;

            .swiper-pagination-bullet {
                display: inline-block;
                --swiper-pagination-bullet-size: 24px;
                --swiper-pagination-bullet-horizontal-gap: 12px;
                margin: 5px 7px;
                height: 2px;
                opacity: 1;
                border-radius: 0;
                background-color: $white-color;
                border: 1px solid $white-color;
                position: relative;
                transition: 0.4s;
                cursor: pointer;

                &:before {
                    display: none;
                }

                &:hover,
                &.swiper-pagination-bullet-active {
                    background-color: $theme-color;
                    border: 1px solid $theme-color;
                }

                &:first-child {
                    margin-left: 0;
                }

                &:last-child {
                    margin-right: 0;
                }
            }


        }
    }

    .slider-pagination {
        .swiper-pagination-bullets {
            .swiper-pagination-bullet {
                width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
                background: $white-color;
                height: 3px;
            }
        }
    }

    .slider-arrow {
        --icon-size: 64px;
        background: rgba(250, 252, 244, 0.2);
        backdrop-filter: blur(5px);
        border-radius: 36px;
        color: $white-color;
        box-shadow: none;
        border: none;
        opacity: 1;
        visibility: visible;
        left: var(--pos-x, -90px);


        @media(max-width: 1399px) {
            display: none;
        }

        img {
            transform: rotate(-90deg);
        }

        &.slider-next {
            right: var(--pos-x, -90px);
            left: auto;
        }


        &:hover {
            background-color: $theme-color;
            color: $white-color;
        }
    }

    &:hover {
        .slider-arrow {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
        }
    }
}

.hero-style1 {
    position: relative;
    z-index: 9;
    max-width: 700px;
    padding: 206px 0 260px 0;


    .sub-title {
        color: $white-color;
        margin-bottom: 0px;
        display: block;
    }

    .hero-title {
        color: $white-color;
        margin-bottom: 45px;
    }

    .hero-text {
        max-width: 582px;
        line-height: 26px;
        margin-bottom: 30px;
    }

    .btn-group {
        gap: 16px;

        @media(max-width: 480px) {
            justify-content: center;
        }
    }
}

@include md {
    .hero-style1 {
        max-width: 550px;

        .hero-title {
            font-size: 58px;
            line-height: 68px;
        }
    }
}

@include sm {
    .hero-1 {
        .hero-img {
            position: static;
            max-width: 100%;
            text-align: center;
            margin: 0 auto 50px auto;
        }

        .hero-shape2 {
            display: none;
        }
    }

    .hero-style1 {
        padding: 130px 0 185px 0;
        text-align: center;
        margin-left: auto;
        margin-right: auto;

        .title1,
        .title2 {
            margin-left: auto;
            margin-right: auto;
        }

        .title-img {
            max-width: 40px;
            right: 5%;
        }
    }
}

@include sm {
    .hero-style1 {
        .hero-title {
            font-size: 44px;
            line-height: 54px;
        }
    }
}

@include xs {
    .hero-style1 {
        padding: 130px 0 180px 0;

        .title-img {
            right: 3%;
        }
    }

    .hero-title {
        font-size: 42px;
        line-height: 1.24;
        margin-bottom: 35px;
    }
}

@include vxs {
    .hero-style1 {
        .hero-title {
            font-size: 40px;
            line-height: 50px;
        }
    }
}

@media (max-width: 330px) {
    .hero-title {
        font-size: 32px;
    }
}

/* Hero 1 end ----------------------------------*/

/* Hero 2 --------------------------------------*/
.hero-2 {
    position: relative;
    z-index: 6;
    height: 780px;
    overflow: hidden;

    @include lg {
        height: 100%;
    }

    &.style2 {}

    .hero2-overlay {
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    .hero-slider-2 {
        max-width: 1776px;
        display: block;
        margin: auto;
        border-radius: 24px;

        @media(min-width: 1930px) {
            max-width: 100%;
        }
    }

    video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 24px;
        overflow: hidden;

        source {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }
    }

    .scroll-down {
        transform: rotate(-90deg);
        transform-origin: left;
        position: absolute;
        bottom: 0px;
        left: calc(50% - 0px);
        width: 150px;
        height: 141px;
        text-align: center;
        z-index: 2;
        color: $white-color;

        @media(max-width: 1699px) {
            left: calc(50% - 50px);
        }

        @media(max-width: 1599px) {
            left: calc(50% - 100px);
        }

        @media(max-width: 1599px) {
            left: calc(50% - 150px);
        }

        @include xl {
            display: none;
        }

        .scroll-wrap {
            display: flex;
            gap: 16px;
            align-items: center;
            font-family: $title-font;
            font-size: 16px;
            color: $white-color;
            font-weight: 300;

            span {
                min-width: 40px;
                height: 40px;
                line-height: 40px;
                border-radius: 50%;
                border: 1px solid $white-color;

                img {
                    transform: rotate(90deg);
                    margin-bottom: 4px;
                }
            }
        }
    }

    .th-hero-bg {
        border-radius: 24px;
        overflow: hidden;

        &:before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(13, 13, 12, 0.4), rgba(13, 13, 12, 0.4)), url(2218.jpg);
            border-radius: 24px;
        }
    }

    .th-swiper-custom {
        position: absolute;
        top: 55%;
        margin: 0;
        right: 209px;
        z-index: 9;
        width: 550px;
        display: flex;
        align-items: center;
        gap: 36px;

        @include xl {
            right: 20px;
        }

        @include lg {
            top: unset;
            bottom: 30px;
        }

        @include sm {
            bottom: 0;
        }

        @include vxs {
            display: none;
        }
    }

    .hero-icon {
        display: flex;
        gap: 8px;
    }

    .hero-arrow {
        width: 32px;
        height: 32px;
        line-height: 1;
        border-radius: 50%;
        border: 1px solid $white-color;
        background-color: transparent;
        transition: all 0.4s ease;

        img {
            filter: brightness(0) invert(1);
            transition: all 0.4s ease;
        }

        &:hover {
            background-color: $white-color;

            img {
                filter: none;
            }
        }
    }

    .swiper-pagination {
        position: relative;
        border-radius: 8px;
        width: 424px;
        display: flex;
    }

    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0;
    }

    .swiper-pagination-bullet {
        width: 100%;
        height: 3px;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 0.2);
        border: none;
        margin: 0;
        position: relative;
        overflow: hidden;

        &::before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    }

    .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background-color: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.2);

        &::before {
            background-color: $white-color;
            animation: slide-progress 2s cubic-bezier(.3, 0, .3, 1) forwards;

            .swiper-paused & {
                animation-play-state: paused;
            }
        }
    }

    @keyframes slide-progress {
        0% {
            transform: translateX(-100%);
        }

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

}

.heroThumbs {
    max-width: 848px;
    position: absolute;
    bottom: 70px;
    bottom: 250px;
    right: 0;
    margin-right: 0 !important;

    &.style2 {

        bottom: 70px;
    }

    @include lg {
        display: none;
    }
}


.hero-style2 {
    position: relative;
    z-index: 6;
    max-width: 451px;
    padding: 230px 0;

    .hero-title {
        color: $white-color;
        font-weight: 700;
        font-size: 80px;
        color: $white-color;
        display: block;
        margin-top: -0.8rem;
        margin-bottom: 2px;

    }

    .hero-text {
        color: $white-color;
        font-weight: 600;
        font-size: 28px;
        display: block;
        margin-bottom: 10px;

        @include xl {
            font-size: 18px;
            line-height: 28px;
        }

        @media(max-width: 320px) {
            font-size: 16px;
            line-height: 26px;
        }
    }

    .hero-desc {
        font-size: 18px;
        color: $white-color;
        margin-bottom: 38px;

    }

    .th-btn {
        padding: 19px 40px;

        &:after {
            mask-image: url(../img/icon/arrow-right.svg);
            background-color: #202020;
        }

        &:hover {
            color: $white-color;

            &:after {
                background-color: $white-color;
            }

            &:before {
                background-color: $title-color;
            }
        }
    }

}

.hero-card {
    &_wrapp {
        position: absolute;
        bottom: 72px;
        right: 0;
        display: flex;
        gap: 16px;

    }

    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    gap: 16px;
    cursor: pointer;

    .hero-img {
        position: relative;
        max-width: 168px;
        height: 168px;
        border-radius: 16px;

        &:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(13, 13, 12, 0.2), rgba(13, 13, 12, 0.2));
            border-radius: 16px;
        }

        img {
            width: 100%;
            height: 100%;
            border-radius: 16px;
            object-fit: cover;
        }

        .play-btn {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            >i {
                width: var(--icon-size, 40px);
                height: var(--icon-size, 40px);
                line-height: var(--icon-size, 40px);
                text-align: center;
                background: transparent;
                border: 1px solid var(--white-color);
                backdrop-filter: none;
                color: var(--white-color);
                font-size: var(--icon-font-size, 1.2em);
            }
        }
    }

    .box-title {
        color: $white-color;
        margin-bottom: 0;
    }

    &_price {
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0.02em;
        text-transform: capitalize;
        color: $white-color;

    }

    span {
        font-weight: 400;
        font-size: 16px;
        color: $white-color;

        i {
            margin-right: 10px;
        }
    }

    .th-btn {
        padding: 8px 24px;
        margin-top: 20px;
    }

}

@include lg {
    .hero-style2 {
        padding: 180px 0;

        .hero-title {
            font-size: 74px;
            font-size: 84px;
        }
    }
}

@include md {
    .hero-style2 {
        .hero-title {
            font-size: 64px;
            line-height: 74px;
        }

        .hero-text {
            font-size: 16px;
            line-height: 26px;
        }

    }
}

@include sm {
    .hero-style2 {
        padding: 150px 0;

        .hero-text {
            color: $white-color;
        }
    }
}

@include xs {
    .hero-style2 {
        padding: 130px 0;

        .hero-title {
            font-size: 54px;
            line-height: 64px;
        }
    }
}

@include vxs {
    .hero-style2 {
        .sub-title {
            font-size: 16px;
        }

        .hero-title {
            font-size: 40px;
            line-height: 50px;
        }
    }
}



/* hero 3  start ------------------------ */
.hero-3 {
    position: relative;
    z-index: 3;
    overflow: initial;

    .th-hero-bg {
        width: 100%;
        height: 100%;

        &:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(282.07deg, rgba(13, 13, 12, 0) -4.13%, rgba(13, 13, 12, 0.7) 84.33%);

        }
    }

    video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        overflow: hidden;
    }

    .scroll-down {
        transform: rotate(-90deg);
        transform-origin: left;
        position: absolute;
        bottom: 30px;
        right: -50px;
        width: 150px;
        height: 141px;
        text-align: center;
        z-index: 2;
        color: $white-color;

        @media(max-width: 1699px) {
            right: -70px;
            width: 142px;
            height: 10px;
        }

        @media(max-width: 1699px) {
            display: none;
        }


        .scroll-wrap {
            display: flex;
            gap: 16px;
            align-items: center;
            font-family: $title-font;
            font-size: 16px;
            color: $white-color;
            font-weight: 300;

            span {
                min-width: 40px;
                height: 40px;
                line-height: 40px;
                border-radius: 50%;
                border: 1px solid $white-color;

                img {
                    transform: rotate(90deg);
                    margin-bottom: 4px;
                }
            }
        }
    }
}

.hero-slider-3 {
    position: relative;
}

.hero-style3 {
    position: relative;
    padding: 285px 0 292px 0;
    max-width: 760px;
    display: block;
    z-index: 4;

    @include lg {
        padding: 250px 0 340px 0;
    }

    @include md {
        text-align: center;
        padding: 235px 0 150px 0;
    }

    @include vxs {
        padding: 200px 0 115px 0;
    }

    .hero-title {
        font-size: 80px;
        line-height: 96px;
        text-transform: capitalize;
        color: $white-color;
        margin-top: -1.2rem;
        margin-bottom: 7px;

        @include xl {
            font-size: 74px;
            line-height: 84px;
        }

        @include lg {
            font-size: 64px;
            line-height: 74px;
            margin-top: -1.0rem;
        }

        @include sm {
            font-size: 54px;
            line-height: 64px;
        }

        @include xs {
            font-size: 40px;
            line-height: 50px;
            margin-top: -0.8rem;
        }

        @include vxs {
            font-size: 30px;
            line-height: 40px;
        }
    }

    .hero-text {
        color: $white-color;
        font-size: 18px;
        max-width: 451px;
        margin-bottom: 40px;

        @include md {
            display: block;
            margin: auto auto 40px auto;
        }

    }
}

.hero3Thumbs {
    position: relative;
    right: 0;
    bottom: 110px;
    max-width: 424px;
    height: 186px;

    @include xl {
        bottom: 99px;
    }

    @include lg {
        bottom: 65px;
    }

    @include md {
        display: none;
    }
}

.hero3-card {
    cursor: pointer;

    &_wrapp {
        position: absolute;
        bottom: 0;
        background-color: $theme-color;
        border-radius: 24px 24px 0 0;
        max-width: 424px;
        min-height: 296px;
        z-index: 9;

    }

    .hero-img {
        position: relative;
        overflow: hidden;
        border-radius: 24px 24px 0 0;
        z-index: 2;

        &:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(13, 13, 12, 0.2), rgba(13, 13, 12, 0.2));
            border-radius: 16px 16px 0px 0px;
            z-index: 1;

        }

        .play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            >i {
                background: transparent;
                --icon-size: 40px;
                backdrop-filter: none;
                font-size: 16px;
            }
        }
    }
}

.hero3-swiper-custom {
    position: relative;
    right: 0;
    bottom: -186px;
    min-width: 424px;
    height: 110px;
    background-color: $theme-color;
    z-index: 99;

    @media(max-width: 1399px) {
        min-width: 390px;
    }

    @include xl {
        min-width: 100%;
    }

    @include md {
        bottom: 0;
    }

    .swiper-button-next,
    .swiper-button-prev {
        @include lg {
            top: var(--swiper-navigation-top-offset, 55%);
        }
    }

    .swiper-button-next {
        right: var(--swiper-navigation-sides-offset, 32px);
    }

    .swiper-button-prev {
        left: var(--swiper-navigation-sides-offset, 32px);
    }

    .swiper-pagination-fraction {
        bottom: var(--swiper-pagination-bottom, 40px);
        z-index: 8;
    }

    .swiper-button-next,
    .swiper-button-prev {
        padding: 8px;
        width: 32px;
        height: 32px;
        border: 1px solid #FFFFFF;
        background-color: transparent;
        border-radius: 48px;
        transition: all 0.4s ease-in-out;

        &:after {
            display: none !important;
        }

        img {
            filter: brightness(0) invert(1);
            transition: all 0.4s ease-in-out;
        }

        &:hover {
            background-color: $white-color;

            img {
                filter: none;
            }
        }
    }

    .swiper-pagination {
        color: $white-color;
    }
}

.hero3-wrapper {
    position: relative;
    margin-top: -294px;

    @include md {
        margin-top: 0;

        .container {
            max-width: 100%;
        }
    }
}

/* hero 4 start -------------------------*/
.hero-4 {
    min-height: 1066px;
    border-radius: 0 0px 48px 48px;

    @media(min-width: 1930px) {
        width: 100%;
        background-size: 100% 80%;
        object-fit: cover;
        background-position: bottom center;
    }

    @include lg {
        border-radius: 0 0px 30px 30px;

    }

    .shape-mockup {
        @media(max-width: 1699px) {
            display: block !important;
        }

        @include lg {
            display: none !important;
        }
    }
}

.hero-style4 {
    padding: 80px 0 0px 0;
    max-width: 960px;
    display: block;
    margin: auto;

    .hero-title {
        font-weight: 800;
        margin-bottom: 30px;

        @include xl {
            font-size: 70px;
        }

        @include sm {
            font-size: 55px;
        }

        @media(max-width: 480px) {
            font-size: 40px;
        }
    }

    .btn-group {
        @media(max-width: 450px) {
            justify-content: center;
        }
    }
}

/* hero 4 end -------------------------*/
/* hero 5 start ----------------------*/
.hero-5 {
    &:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(257.5deg, rgba(13, 13, 12, 0.7) 4.1%, rgba(0, 0, 0, 0.3) 96.33%);
        transform: matrix(-1, 0, 0, 1, 0, 0);

    }

    .th-swiper-custom {
        position: absolute;
        top: 47%;
        margin: 0;
        transform: rotate(-90deg);
        right: 55px;
        z-index: 9;

        @media(max-width: 1599px) {
            display: none;
        }

        .swiper-pagination-bullets {
            position: relative;
            z-index: 3;
            text-align: center;
            margin: 25px 0 0px 0;
            line-height: 10px;
            height: 3px;

            .swiper-pagination-bullet {
                display: inline-block;
                --swiper-pagination-bullet-size: 24px;
                --swiper-pagination-bullet-horizontal-gap: 12px;
                margin: 5px 7px;
                height: 2px;
                opacity: 1;
                border-radius: 0;
                background-color: $white-color;
                border: 1px solid $white-color;
                position: relative;
                transition: 0.4s;
                cursor: pointer;

                &:before {
                    display: none;
                }

                &:hover,
                &.swiper-pagination-bullet-active {
                    background-color: $theme-color;
                    border: 1px solid $theme-color;
                }

                &:first-child {
                    margin-left: 0;
                }

                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }

    .slider-arrow {
        --icon-size: 64px;
        background: rgba(250, 252, 244, 0.2);
        backdrop-filter: blur(5px);
        border-radius: 36px;
        color: $white-color;
        box-shadow: none;
        border: none;
        opacity: 1;
        visibility: visible;
        left: var(--pos-x, -90px);


        @media(max-width: 1599px) {
            display: none;
        }

        img {
            transform: rotate(-90deg);
        }

        &.slider-next {
            right: var(--pos-x, -90px);
            left: auto;
        }


        &:hover {
            background-color: $theme-color;
            color: $white-color;
        }
    }

    &:hover {
        .slider-arrow {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
        }
    }

    .th-hero-image {
        display: flex;
        align-items: center;
        position: absolute;
        top: 22.5%;
        right: 10%;

        @media(max-width: 1599px) {
            right: 2%;
        }

        @include xl {
            position: relative;
            right: unset;
            text-align: center;
            justify-content: center;
            padding-bottom: 180px;
        }

        @include xs {
            display: block;
        }

        .hero-img {
            position: relative;
            border-radius: 300px;
            min-width: 274px;
            height: 416px;
            z-index: 2;

            @include vxs {
                min-width: 100%;
                height: 100%;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 300px;
                border: 10px solid $white-color;
            }
        }

        .hero-img2 {
            border-radius: 300px;
            min-width: 327px;
            height: 496px;
            margin-left: -50px;

            @include xs {
                margin: 20px 0 0 0;
            }

            @include vxs {
                min-width: 100%;
                height: 100%;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 300px;
                border: 10px solid $white-color;
            }
        }

    }

    .cilent-box {
        &_title {
            color: $title-color;
            font-weight: 700;
            display: block;

        }
    }

}

.hero-style5 {
    padding: 303px 0 307px 0;
    max-width: 730px;

    @include ml {
        max-width: 703px;
    }

    @include xl {
        text-align: center;
        display: block;
        margin: auto;
        padding: 220px 0 50px;
    }

    @include md {
        max-width: 100%;
    }

    @include sm {
        padding: 180px 0 50px;
    }

    .hero-title {
        @include ml {
            font-size: 70px;
        }

        @include sm {
            font-size: 50px;
        }

        @include xs {
            font-size: 40px;
        }
    }

    .hero-text {
        font-size: 18px;
        color: $white-color;
        max-width: 703px;
        margin-bottom: 38px;

        @include ml {
            max-width: 650px;
        }
    }
}

/* hero 5 end ----------------------*/

/* hero 6 start --------------------------*/
.hero-6 {
    position: relative;
    padding: 24px 24px 0 24px;
    border-radius: 24px;
    overflow: hidden;

    @include xxl {
        padding: 0;
    }

    @media(max-width: 480px) {
        border-radius: 0;
    }

    .th-hero-bg {
        mask-image: url("../img/bg/hero_bg_6_1.png");
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
        z-index: 2;

        @include md {
            mask-size: cover;
        }

        @media(max-width: 480px) {
            mask-image: none !important;
        }

        &:before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(17, 61, 72, 0.6);
            border-radius: 0px;
            transform: matrix(-1, 0, 0, 1, 0, 0);

        }
    }

    .hero6-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .hero6Thumbs {
        position: absolute;
        right: 0px;
        bottom: 0px;
        max-width: 270px;
        min-height: 120px;
        height: 120px;
        border-radius: 16px;

        @media(min-width: 2430px) {
            max-width: 365px;
        }

        @media(max-width: 1899px) {
            max-width: 250px;
        }

        @media(max-width: 1699px) {
            max-width: 220px;
        }

        @media(max-width: 1499px) {
            max-width: 200px;
        }

        @media(max-width: 1399px) {
            max-width: 190px;
        }

        @include xl {
            max-width: 170px;
        }

        @include lg {
            max-width: 150px;
        }

        @media(max-width: 480px) {
            position: relative;
            max-width: 100%;
            border-radius: 0;
            margin-top: 25px;
        }
    }

    .th-swiper-custom {
        position: absolute;
        bottom: 8%;
        margin: 0;
        right: 24%;
        z-index: 9;

        @media(max-width: 1599px) {
            display: none;
        }

        .swiper-pagination-bullets {
            position: relative;
            z-index: 3;
            text-align: center;
            margin: 25px 0 0px 0;
            line-height: 10px;
            height: 3px;

            .swiper-pagination-bullet {
                display: inline-block;
                --swiper-pagination-bullet-size: 24px;
                --swiper-pagination-bullet-horizontal-gap: 12px;
                margin: 5px 7px;
                height: 2px;
                opacity: 1;
                border-radius: 0;
                background-color: $white-color;
                border: 1px solid $white-color;
                position: relative;
                transition: 0.4s;
                cursor: pointer;

                &:before {
                    display: none;
                }

                &:hover,
                &.swiper-pagination-bullet-active {
                    background-color: $theme-color;
                    border: 1px solid $theme-color;
                }

                &:first-child {
                    margin-left: 0;
                }

                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }

    .slider-arrow {
        --icon-size: 64px;
        background: rgba(250, 252, 244, 0.2);
        backdrop-filter: blur(5px);
        border-radius: 36px;
        color: $white-color;
        box-shadow: none;
        border: none;
        opacity: 1;
        visibility: visible;
        left: var(--pos-x, -60px);


        @media(max-width: 1599px) {
            display: none;
        }

        img {
            transform: rotate(-90deg);
        }

        &.slider-next {
            right: var(--pos-x, -90px);
            left: auto;
        }


        &:hover {
            background-color: $theme-color;
            color: $white-color;
        }
    }

    &:hover {
        .slider-arrow {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
        }
    }

    .hero6-swiper-custom {
        position: absolute;
        bottom: 2%;
        left: 45%;

        @media(max-width: 480px) {
            left: 50%;
        }

        .swiper-pagination {
            color: #ffffff00;
        }

        .swiper-pagination-total {
            display: none;
        }

        .swiper-pagination-current {
            color: $white-color;
            font-size: 48px;
            font-weight: 700;
        }
    }
}

.hero-style6 {
    position: relative;
    padding: 285px 0 284px 0;
    max-width: 1057px;
    display: block;
    text-align: center;
    margin: auto;
    z-index: 4;

    @include ml {
        padding: 250px 0 284px 0;
    }

    @include lg {
        padding: 250px 0 240px 0;
    }

    @include md {
        text-align: center;
        padding: 140px 0 210px 0;
    }

    @media(max-width: 480px) {
        padding: 140px 0 140px 0;
    }

    @include vxs {
        padding: 100px 0 115px 0;
    }

    .hero-title {
        font-size: 80px;
        line-height: 96px;
        text-transform: capitalize;
        color: $white-color;
        margin-top: -1.2rem;
        margin-bottom: 7px;

        @include xl {
            font-size: 74px;
            line-height: 84px;
        }

        @include lg {
            font-size: 64px;
            line-height: 74px;
            margin-top: -1.0rem;
        }

        @include md {
            font-size: 50px;
            line-height: 60px;
        }

        @include sm {
            font-size: 38px;
            line-height: 48px;
            margin-top: -0.8rem;
        }

        @include vxs {
            font-size: 30px;
            line-height: 40px;
        }
    }

    .hero-text {
        color: $white-color;
        font-size: 18px;
        max-width: 599px;
        display: block;
        margin: auto auto 40px auto;

        @include sm {
            font-size: 16px;
        }

    }

    .btn-group {
        @media(max-width: 480px) {
            justify-content: center;
        }
    }
}

.hero6-card {
    .hero-img {
        position: relative;
        z-index: 2;
        height: 120px;
        border-radius: 16px;

        @media(max-width: 480px) {
            border-radius: 0px;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &:before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(13, 13, 12, 0.5);
            border-radius: 16px;

            @media(max-width: 480px) {
                border-radius: 0px;
            }

        }

        img {
            border-radius: 16px;

            @media(max-width: 480px) {
                border-radius: 0px;
            }
        }
    }
}

/* hero 7 start --------------------------*/
.hero-7 {
    &:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(257.5deg, rgba(13, 13, 12, 0.7) 4.1%, rgba(0, 0, 0, 0.3) 96.33%);
        transform: matrix(-1, 0, 0, 1, 0, 0);
        z-index: -1;
    }
}

.hero-style7 {
    padding: 216px 0;
    margin-right: 40px;

    @include md {
        text-align: center;
        margin: 0;
        padding: 150px 0 40px 0;
    }

    @include xs {
        padding: 100px 0 40px 0;
    }

    .hero-title {
        margin-bottom: 42px;

        @include xl {
            font-size: 60px;
        }

        @include xl {
            font-size: 50px;
        }

        @include xs {
            font-size: 40px;
        }

        @include vxs {
            font-size: 30px;
        }
    }

    .btn-group {
        @media(max-width: 480px) {
            justify-content: center;
        }
    }
}

.hero-form {
    background: linear-gradient(146.48deg, rgba(255, 255, 255, 0.2) 1.3%, rgba(0, 0, 0, 0.1) 117.69%);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    padding: 40px;
    margin-left: -26px;

    @include xl {
        padding: 30px;
    }

    @include md {
        margin: 0 0 80px 0;
    }

    @include vxs {
        padding: 30px 20px;
    }

    .sub-title2 {
        font-size: 20px;
        display: block;
        margin-bottom: 5px;

        @include vxs {
            font-size: 18px;
        }

    }

    .sec-title {
        font-size: 28px;
        font-weight: 600;

        @include vxs {
            font-size: 25px;
        }
    }

    .form-item {
        position: relative;
        align-items: center;
        background-color: transparent;
        border: 1px solid #E1E4E6;
        border-radius: 8px;
        padding: 14px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &:before {
            content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
            position: absolute;
            top: 15px;
            right: 20px;
        }

        label {
            color: $white-color;
            font-size: 14px;
            font-weight: 400;
            display: block;
            margin: 0;
        }

        input {
            max-width: 105px;
        }

        input,
        .nice-select {
            color: $white-color;
            height: auto;
            line-height: unset;
            background-color: transparent;
            border-radius: 0;
            border: none;
            font-weight: 400;
            padding: 0;
        }

        .nice-select {
            min-width: 90px;
            display: flex;
            justify-content: center;

            &:after {
                display: none;
            }

            option {
                color: $title-color;

                &.selected {
                    color: $theme-color !important;
                    background: $theme-color !important;

                    &.focus {
                        color: #fff !important;
                        background: $theme-color !important;
                    }
                }

                &:hover,
                &.focus {
                    background: $theme-color !important;
                    color: #fff !important;
                }
            }

            &.open {
                .list {
                    border-bottom: 3px solid $theme-color;
                }
            }
        }
    }
}

/* hero 5 start ----------------------*/
.hero-8 {
    overflow: visible;

    .th-hero-image {
        position: absolute;
        top: 0%;
        right: 0%;

        @include xl {
            position: relative;
        }

        .hero-img {
            width: 969px;
            height: 950px;

            @media(max-width: 1799px) {
                width: 850px;
            }

            @media(max-width: 1599px) {
                width: 750px;
            }

            @include ml {
                width: 640px;
            }

            @include xl {
                width: 100%;
                height: 100%;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .booking-sec {
        position: absolute;
        width: 100%;
        bottom: 60px;
    }
}

.hero-style8 {
    padding: 233px 0 285px 0;
    max-width: 650px;

    @include ml {
        max-width: 703px;
    }

    @include xl {
        text-align: center;
        display: block;
        margin: auto;
        padding: 220px 0 50px;
    }

    @include md {
        max-width: 100%;
    }

    @include sm {
        padding: 180px 0 50px;
    }

    .sub-title {
        display: block;
    }

    .hero-title {
        text-transform: uppercase;
        margin-bottom: 48px;

        @include ml {
            font-size: 60px;
        }

        @include xl {
            font-size: 50px;
        }

        @include sm {
            font-size: 40px;
        }

        @include vxs {
            font-size: 35px;
        }
    }

    .hero-text {
        font-size: 18px;
        color: $white-color;
        max-width: 703px;
        margin-bottom: 38px;

        @include ml {
            max-width: 650px;
        }
    }
}

/* hero 8 end ----------------------*/

/* hero 9 start -----------------*/
.hero-9 {
    position: relative;
    //overflow: inherit;

    .slider-wrap {
        margin: 0 100px;

        @include xxl {
            margin: 0 0px;
        }
    }

    .hero9-wrapp {
        margin-top: -67px;
        position: relative;
        z-index: 2;
        overflow: initial;

        @include md {
            .container {
                max-width: 100%;
            }
        }
    }

    .slider-controller {
        position: absolute;
        right: calc(50% - 660px);
        bottom: 0px;
        min-width: 424px;
        height: 98px;
        padding: 0 32px;
        border-radius: 0 24px 0 0px;
        background-color: var(--theme-color);
        z-index: 9;
        margin-top: 0;

        @include ml {
            right: calc(50% - 648px);
            bottom: 1px;
        }

        @include xl {
            right: calc(50% - 564px);
            min-width: 342px;
        }

        @include lg {
            right: calc(50% - 472px);
            min-width: 300px;
            height: 167px;
        }

        @include md {
            position: relative;
            bottom: unset;
            top: 0;
            right: 0;
            height: 100px;
            min-width: 100%;
            border-radius: 0;
        }

        .swiper-pagination-fraction {
            text-align: center;
            color: $white-color;
        }
    }

    .slider-next,
    .slider-prev {
        padding: 8px;
        min-width: 32px;
        height: 32px;
        line-height: 20px;
        border: 1px solid #FFFFFF;
        background-color: transparent;
        border-radius: 48px;
        padding: 0 0 5px 0;
        transition: all 0.4s ease-in-out;

        &:after {
            display: none !important;
        }

        img {
            filter: brightness(0) invert(1);
            transition: all 0.4s ease-in-out;
        }

        &:hover {
            background-color: $white-color;

            img {
                filter: none;
            }
        }
    }

    .th-hero-bg {
        border-radius: 0px 40px 40px 40px;

        @include md {
            border-radius: 0;
        }

        &:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
            border-radius: inherit;
        }
    }

    .hero-left {
        position: absolute;
        z-index: 2;
        left: -11%;
        top: 50%;
        transform: rotate(-90deg);

        @media(min-width: 1930px) {
            left: -8%;
        }

        @media(max-width: 1699px) {
            left: -13%;
        }

        @include xxl {
            display: none;
        }
    }

}

.hero-style9 {
    padding: 210px 0 340px 0;
    text-align: center;
    max-width: 853px;
    display: block;
    margin: auto;

    @include xl {
        padding: 150px 0 265px 0;
    }

    @include md {
        padding: 130px 0;
    }

    @include xs {
        padding: 100px 0;
    }

    .hero-title {
        color: $white-color;
        margin-bottom: 35px;

        @include vxs {
            font-size: 40px;
        }
    }
}

/* hero 9 end -----------------*/

/* hero 10  start ------------------------ */
.hero-10 {
    .hero3-wrapper {
        margin-top: -195px;
    }

    .th-hero-bg {
        z-index: 2;

        &:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(13, 13, 12, 0.5), rgba(13, 13, 12, 0.5));
            z-index: -1;

        }
    }


    .hero10Thumbs {
        position: relative;
        right: 0;
        bottom: 80px;
        max-width: 294px;
        height: 85px;

        .swiper-slide {
            &.swiper-slide-active {
                .hero10-card {
                    .hero-img {
                        border: 1px solid $white-color;
                        border-radius: 50%;

                        img {
                            transform: scale(0.9);
                        }
                    }
                }
            }
        }
    }

    .booking-form {
        padding: 27px 32px;
        margin-top: 0px;

        @include xl {
            padding: 18px 32px;
        }

        &.style5 {
            @include md {
                margin-top: 0;
            }
        }

    }

    .scroll-down {
        transform: rotate(-90deg);
        transform-origin: left;
        position: absolute;
        bottom: 30px;
        right: -50px;
        width: 150px;
        height: 141px;
        text-align: center;
        z-index: 2;
        color: $white-color;

        @media(max-width: 1699px) {
            right: -70px;
            width: 142px;
            height: 10px;
        }

        @media(max-width: 1699px) {
            display: none;
        }


        .scroll-wrap {
            display: flex;
            gap: 16px;
            align-items: center;
            font-family: $title-font;
            font-size: 16px;
            color: $white-color;
            font-weight: 300;

            span {
                min-width: 40px;
                height: 40px;
                line-height: 40px;
                border-radius: 50%;
                border: 1px solid $white-color;

                img {
                    transform: rotate(90deg);
                    margin-bottom: 4px;
                }
            }
        }
    }

    .hero10-swiper-custom {
        position: relative;
        right: 0;
        bottom: -85px;
        min-width: 425px;
        height: 110px;
        background-color: $theme-color;
        z-index: 1;

        @media(max-width: 1399px) {
            min-width: 390px;
        }

        @include xl {
            min-width: 100%;
        }


        .swiper-button-next,
        .swiper-button-prev {
            @include lg {
                top: var(--swiper-navigation-top-offset, 55%);
            }
        }

        .swiper-button-next {
            right: var(--swiper-navigation-sides-offset, 32px);
        }

        .swiper-button-prev {
            left: var(--swiper-navigation-sides-offset, 32px);
        }

        .swiper-pagination-fraction {
            bottom: 26px;
            z-index: 8;
        }

        .swiper-button-next,
        .swiper-button-prev {
            padding: 8px;
            width: 32px;
            height: 32px;
            border: 1px solid #FFFFFF;
            background-color: transparent;
            border-radius: 48px;
            transition: all 0.4s ease-in-out;

            &:after {
                display: none !important;
            }

            img {
                filter: brightness(0) invert(1);
                transition: all 0.4s ease-in-out;
            }

            &:hover {
                background-color: $white-color;

                img {
                    filter: none;
                }
            }
        }

        .swiper-pagination {
            color: $white-color;
        }
    }

    .hero10-card {
        position: relative;
        z-index: 2;

        .hero-img {
            position: relative;
            max-width: 82px;
            z-index: 3;

            img {
                width: 82px;
                height: 82px;
                object-fit: cover;
                border-radius: 50%;
                transition: all 0.4s ease-in-out;
                cursor: pointer;
            }
        }
    }

    h3 {
        display: none;
    }

    .hero-booking.style2.booking {
        padding: 27px 32px;
    }
}

.hero-style10 {
    position: relative;
    padding: 210px 0 300px 0;
    z-index: 2;
    text-align: center;

    @include xl {
        padding: 150px 0 380px 0;
    }

    @include sm {
        padding: 120px 0 300px 0;
    }

    .hero-title {
        color: $white-color;
        margin-bottom: 32px;

        .hero-title2 {
            font-family: $style-font;
            font-weight: 400;
            font-size: 80px;
            line-height: 110px;
            color: #F8BC22;
            display: block;

            @include sm {
                font-size: 40px;
                line-height: 70px;
            }
        }
    }
}

/* hero-11 start -------------------------*/
.hero-11 {
    //overflow-x: hidden;

    .slider-arrow {
        --pos-x: 60px;
        --icon-size: 64px;
        top: 60%;
        background: rgba(250, 252, 244, 0.5);
        border: 1px solid transparent;
        backdrop-filter: blur(5px);
        border-radius: 36px;
        box-shadow: none;

        img {
            filter: brightness(0) invert(1);
        }

        &:hover {
            background-color: $theme-color;
        }

        &.slider-next {
            right: var(--pos-x, -120px);
            left: auto;
        }
    }
}

.hero-style11 {
    padding: 296px 0 390px 0;
    text-align: center;
    max-width: 900px;
    display: block;
    margin: auto;

    @include lg {
        padding: 200px 0 290px 0;
    }

    @include xs {
        padding: 200px 0 190px 0;
    }

    .sub-title {
        font-weight: 400;
        font-size: 78px;
        line-height: 110px;
        color: #F8BC22;

        @include sm {
            font-size: 48px;
            line-height: 70px;
        }
    }

    .hero-title {
        font-weight: 800;
        font-size: 94px;
        text-transform: capitalize;
        margin-bottom: 30px;

        @include md {
            font-size: 70px;
        }

        @include sm {
            font-size: 50px;
        }
    }

}

.booking-form.style7 {
    max-width: 1094px;
    position: relative;
    bottom: 240px;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: #E9F5F9;
    border: none;
    border-radius: 100px;
    box-shadow: none;

    @include lg {
        bottom: 160px;
    }

    @include md {
        padding: 20px 40px;
    }

    @include xs {
        position: relative;
        bottom: 0;
        overflow: visible;
    }

    .form-group select,
    .form-group .form-control,
    .form-group .form-select,
    .form-group textarea,
    .form-group .nice-select,
    .form-group input {
        background-color: transparent;
    }
}

/* hero-12 start ----------------------------------------*/
/* hero-12 start ----------------------------------------*/
.hero-12 {
    margin: 0 80px;
    background-size: 100% 100%;
    overflow: hidden;

    @media(max-width: 1799px) {
        margin: 0;
    }

    .hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 5;
        background-repeat: no-repeat;
        overflow: hidden;
    }


    .th-hero-bg {
        z-index: 2;
        border-radius: 50px;
        overflow: hidden;

        @include xl {
            border-radius: 0;
        }

        &:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, #113D48 0%, rgba(41, 147, 174, 0) 86%);
            border-radius: inherit;
            z-index: 1;
        }
    }

    .slider-arrow {
        --pos-x: 120px;
        --icon-size: 64px;
        top: 60%;
        background: rgba(250, 252, 244, 0.5);
        border: 1px solid transparent;
        backdrop-filter: blur(5px);
        border-radius: 36px;
        box-shadow: none;

        @media(max-width: 1799px) {
            display: none;
        }

        img {
            filter: brightness(0) invert(1);
        }

        &:hover {
            background-color: $theme-color;
        }

        &.slider-next {
            right: var(--pos-x, -120px);
            left: auto;
        }
    }

    .hero12-shape1 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 262px;
        mask-image: url("../img/shape/hero-shape1.png");
        background-color: $white-color;
        mask-repeat: repeat-x;
        mask-size: auto;
        z-index: 5;
    }

    .hero12-shape2 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 317.19px;
        mask-image: url("../img/shape/hero-shape2.png");
        background-color: $theme-color;
        mask-repeat: repeat-x;
        mask-size: auto;
        z-index: 4;
    }
}

.hero-style12 {
    position: relative;
    max-width: 800px;
    padding: 140px 0 460px 0;
    z-index: 3;

    @include md {
        text-align: center;
        max-width: 100%;
    }

    @include sm {
        padding: 100px 0 420px 0;
    }

    .hero-title {
        font-size: 84px;
        text-transform: capitalize;
        color: $white-color;

        @include md {
            font-size: 74px;
        }

        @include sm {
            font-size: 54px;
        }

        @include xs {
            font-size: 44px;
        }
    }

    .hero-desc {
        font-weight: 400;
        font-size: 24px;
        color: $white-color;
        margin-bottom: 40px;

        @include sm {
            font-size: 18px;
        }
    }
}

/* hero-12 end ----------------------------------------*/

/* hero-13 start ----------------------------------------*/
.hero-13 {
    position: relative;

    .scroll-down {
        transform: rotate(-90deg);
        transform-origin: left;
        position: absolute;
        top: 30%;
        right: -50px;
        width: 150px;
        height: 141px;
        text-align: center;
        z-index: 2;
        color: $white-color;

        @media(max-width: 1499px) {
            right: -70px;
            width: 142px;
            height: 10px;
        }

        @media(max-width: 1699px) {
            display: none;
        }


        .scroll-wrap {
            display: flex;
            gap: 16px;
            align-items: center;
            font-family: $title-font;
            font-size: 16px;
            color: $white-color;
            font-weight: 300;

            span {
                min-width: 40px;
                height: 40px;
                line-height: 40px;
                border-radius: 50%;
                border: 1px solid $white-color;

                img {
                    transform: rotate(90deg);
                    margin-bottom: 4px;
                }
            }
        }
    }
}

.hero-13-wrapp {
    background-color: $title-color;
}

.hero-style13 {
    padding: 130px 0 105px 0;
    max-width: 1013px;
    display: block;
    margin: auto;

    @include xs {
        padding: 100px 0 75px 0;
    }

    .hero-title {
        font-weight: 800;
        font-size: 74px;
        text-transform: capitalize;
        color: $white-color;

        @include md {
            font-size: 64px;
        }

        @include sm {
            font-size: 54px;
        }

        @include vxs {
            font-size: 44px;
        }
    }

    .hero-desc {
        font-weight: 400;
        font-size: 18px;
        color: $white-color;
        max-width: 710px;
        display: block;
        margin: auto;
    }
}

.booking-form.style9 {
    max-width: 1094px;
    border: none;
    background: #E9F5F9;
    border-radius: 100px;
    padding: 27px 32px;
    box-shadow: none;
    margin-bottom: 277px;

    @include xs {
        margin-bottom: 300px;
    }

    .form-group .nice-select {
        background-color: transparent;
    }
}

.hero-video-img {
    position: relative;
    margin-top: -230px;
    z-index: 2;

    &.hero13-video-img {
        margin-top: 0;
    }

    @include sm {
        margin-top: -200px;
    }

    @include xs {
        margin-top: -240px;
    }

    img {
        width: 100%;
    }

    .play-btn {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;


        &:before,
        &:after {
            border: 1px solid rgba(255, 255, 255, 1);
        }

        >i {
            --icon-size: 120px;
            color: $theme-color;
            background: rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.59);
            backdrop-filter: blur(17.1px);


        }
    }
}

/* hero-13 end ----------------------------------------*/
/* hero-14 start ----------------------------------------*/
.hero-14 {
    background-color: #E9F1EC;
    background-size: 100% 100%;
    overflow: hidden;

    &:before {
        content: "";
        position: absolute;
        inset: 0;
        height: 700px;
        background-color: #405749;

    }

    @media(max-width: 1799px) {
        margin: 0;
    }


    .th-hero-bg {
        z-index: 2;
        border-radius: 30px;
        margin: 0 80px;
        overflow: hidden;

        @include xl {
            border-radius: 0;
        }

        @include lg {
            margin: 0;
        }

        &:before {
            content: "";
            position: absolute;
            inset: 0;
            background: #0D0D0C;
            opacity: 0.5;
            border-radius: inherit;
            z-index: 1;
        }
    }

    .slider-arrow {
        --pos-x: 120px;
        --icon-size: 64px;
        top: 60%;
        background: rgba(250, 252, 244, 0.5);
        border: 1px solid transparent;
        backdrop-filter: blur(5px);
        border-radius: 36px;
        box-shadow: none;

        @media(max-width: 1799px) {
            display: none;
        }

        img {
            filter: brightness(0) invert(1);
        }

        &:hover {
            background-color: $theme-color;
        }

        &.slider-next {
            right: var(--pos-x, -120px);
            left: auto;
        }
    }
}

.hero-style14 {
    position: relative;
    padding: 165px 0 223px 0;
    z-index: 3;
    text-align: center;

    @include md {
        text-align: center;
        max-width: 100%;
    }

    @include sm {
        padding: 100px 0 140px 0;
    }

    .sub-title {
        font-weight: 400;
        font-size: 120px;
        color: #F8BC22;
        margin-bottom: -0.4rem;

        @include md {
            font-size: 70px;
        }

        @include xs {
            font-size: 50px;
        }

        @include vxs {
            font-size: 40px;
        }

    }

    .hero-title {
        font-weight: 800;
        font-size: 244px;
        text-transform: capitalize;
        color: $white-color;
        margin-bottom: 0;

        @include xxl {
            font-size: 174px;
        }

        @include md {
            font-size: 130px;
        }

        @include sm {
            font-size: 100px;
        }

        @include xs {
            font-size: 90px;
        }

        @include vxs {
            font-size: 60px;
        }
    }

    .hero-desc {
        font-weight: 400;
        font-size: 24px;
        color: $white-color;
        max-width: 930px;
        display: block;
        margin: auto auto 40px auto;

        @include sm {
            font-size: 18px;
        }
    }
}

.booking-form.style10 {
    max-width: 1094px;
    border: none;
    border-radius: 100px;
    padding: 27px 32px;
    box-shadow: none;
    display: block;
    margin: -60px auto 48px auto;

    .form-group .nice-select {
        background-color: transparent;
    }
}

/* hero-12 end ----------------------------------------*/

/* hero 13 -------------------------------------------*/

.hero-15 {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;

    @media(max-width: 788px) {
        min-height: 80vh;
    }

    .slick-slider {
        width: 100%;
        position: relative;
        overflow: hidden;
        min-height: 100vh;

        @media(max-width: 788px) {
            min-height: 80vh;
        }
    }

    .slide {
        transition: all .5s;
        position: absolute;
        top: 368px;
        left: 12%;
        width: 389px;
        height: 466px;
        overflow: hidden;
        display: flex;
        z-index: 1;

        @include ml {
            width: 300px;
        }

        @include xl {
            top: unset;
            bottom: 4%;
            height: 300px;
        }

        @media(max-width: 788px) {
            display: none;
        }

        &:nth-child(3) {
            width: 314px;
            height: 230px;
            top: 70%;
            left: 80%;

            @media(max-width: 1699px) {
                left: 70%;
            }

            @include lg {
                left: 65%;
            }

        }

        @include xl {
            &:nth-child(3) {
                margin-bottom: 60px;
            }
        }

        @include md {
            &:nth-child(3) {
                left: 60%;
            }
        }

        @media(max-width: 1699px) {
            left: 3%;

        }

    }

    .bg-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center center;
        background: linear-gradient(0deg, rgba(17, 61, 72, 0.4), rgba(17, 61, 72, 0.4));
        background-position: 77% 100%;
        background-size: cover;
        border-radius: 24px;
        z-index: 2;

        &:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(17, 61, 72, 0.4), rgba(17, 61, 72, 0.4));
            z-index: 1;
            border-radius: 24px;

        }

        &:after {
            transition: visibility .5s;
            content: '';
            visibility: hidden;
            position: absolute;
            bottom: 0;
            top: 0;
            left: 0;
            right: 0;
            background: linear-gradient(0deg, rgba(17, 61, 72, 0.4), rgba(17, 61, 72, 0.4));
            z-index: 1;
            border-radius: 24px;

        }
    }

    .hide {
        font-size: 11px;

        .hero-style15 {
            position: relative;
            z-index: 5;
            margin-left: 300px;

            @include xl {
                padding: 250px 0 80px 0;
                margin-left: 80px;
            }

            @include md {
                padding: 200px 0 80px 0;
                margin: 0 100px;
            }


        }
    }

    @media (min-width: 567px) {

        .slide:nth-child(1) {
            z-index: 3;
        }

        .slide:nth-child(2) {
            left: 33.33%;
        }




        .slide {
            &:hover {
                width: 100%;
                min-height: 100%;
                left: 0;
                z-index: 4;
                top: 0;
                left: 0;


                .bg-img {
                    border-radius: 0;

                    &:before {
                        border-radius: 0;
                    }

                    &:after {
                        visibility: visible;
                        border-radius: 0;
                    }
                }

                .hero-title {
                    animation-name: MoveText;
                    animation-duration: .9s;

                }
            }
        }

        .title {
            font-size: 20px;
            display: block;
            text-transform: uppercase;
        }



        @keyframes MoveText {
            0% {
                transform: translateX(-1000px);
            }

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

        @keyframes MoveText2 {
            0% {
                transform: translateX(-900px);
            }

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

        .hide {
            transition: opacity .3s, visibility .3s, ease-in-out;
            opacity: 0;
            visibility: hidden;
            height: 0;
            font-size: 0;

        }

        .hide p {
            transition: transform 2s;
            transform: translateX(-1000px);
            margin-bottom: 40px;
        }

        .slide:hover .hide {
            opacity: 1;
            visibility: visible;
            height: 100%;
            font-size: 16px;
        }

        .slide:hover p {
            transform: translateX(0);
        }

        .btn-more {
            transform: translateX(1000px);
            padding: 15px 35px;
            font-size: 16px;
        }

        .slide:hover .btn-more {
            transform: translateX(0);
        }
    }
}

.hero-slide-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    @include xl {
        justify-content: center;
    }

}

.hero-style15 {
    position: relative;
    max-width: 900px;
    padding: 368px 0 269px 0;
    z-index: 2;

    @include xl {
        padding: 280px 0 240px 0;
        text-align: center;
    }

    @include md {
        padding: 200px 0 280px 0;
    }

    @media(max-width: 788px) {
        padding: 150px 0 70px 0;
    }

    .sub-title {
        font-weight: 400;
        font-size: 48px;
        color: #F8BC22;
    }

    .hero-title {
        font-weight: 700;
        font-size: 80px;
        text-transform: capitalize;
        color: $white-color;

        @include lg {
            font-size: 60px;
        }

        @media(max-width: 788px) {
            font-size: 50px;
        }

        span {
            margin-left: 60px;
            display: block;

            @media(max-width: 788px) {
                margin-left: 0;
            }
        }
    }

    .hero-desc {
        font-size: 24px;
        color: $white-color;
        margin-bottom: 40px;
        margin-left: 60px;

        @include md {
            font-size: 18px;
            margin-left: 0;
        }
    }

    .btn-group {
        margin-left: 60px;

        @media(max-width: 788px) {
            margin: 0;
        }
    }
}


/*hero-16 ------------------------*/
.hero-16 {
    position: relative;
    z-index: 2;
    border-radius: 150px 0px 0px 150px;
    overflow: visible;

    @media(max-width: 1699px) {
        border-radius: inherit;
    }

    &:before {
        content: "";
        position: absolute;
        inset: 0;
        left: 167px;
        border-radius: inherit;
        background-color: #ECF2F7;
        z-index: -1;

        @media(max-width: 1699px) {
            left: 0;
        }

    }


    .hero-img {
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 150px 0px 0px 150px;
        z-index: -1;

        @include xl {
            max-width: 50%;
        }

        img {
            border-radius: 150px 0px 0px 150px;
        }

    }

    .hero-left {
        position: absolute;
        z-index: 2;
        left: -10%;
        top: 50%;
        transform: rotate(-90deg);

        @media(min-width: 1930px) {
            left: -8%;
        }

        @media(max-width: 1699px) {
            left: -13%;
        }

        @include xxl {
            display: none;
        }
    }

    .booking-sec {
        position: absolute;
        width: 100%;
        bottom: 133px;

        @include md {
            bottom: 80px;
        }
    }

    .booking-form {
        box-shadow: 0px 14px 24px rgba(13, 13, 12, 0.03);
        border-radius: 100px;
        border: none;
        margin: 0;
        max-width: 1094px;

        @include md {
            padding: 36px;
        }
    }
}

.hero-style16 {
    padding: 253px 0 373px 0;

    @include sm {
        padding: 253px 0 473px 0;
    }

    .sub-title {
        color: $theme-color;
        font-weight: 400;
        font-size: 58px;
        margin-bottom: 20px;

        @include xs {
            font-size: 40px;
        }
    }

    .hero-title {
        color: #0D0D0C;
        margin-bottom: 50px;
    }
}

/*hero-17 ------------------------*/
.hero-17 {
    position: relative;
    z-index: 2;
    background-color: #ECF2F7;
    overflow: visible;


    .hero-img {
        position: absolute;
        left: 16%;
        bottom: 30%;
        border-radius: 32px;
        z-index: -1;

        @media(max-width: 1799px) {
            left: 12%;
        }

        @include xxl {
            left: 1%;
        }

        @include xl {
            display: none;
        }

        img {
            border-radius: 32px;
        }
    }

    .hero-img2 {
        position: absolute;
        right: 80px;
        bottom: 80px;
        z-index: -1;
        border-radius: 32px;

        @include xxl {
            right: 1%;
        }

        @include md {
            position: relative;
            bottom: 0;
        }

        img {
            border-radius: 32px;
        }
    }

    .hero-left {
        position: absolute;
        z-index: 2;
        left: -6%;
        top: 50%;
        transform: rotate(-90deg);

        @media(min-width: 1930px) {
            left: -8%;
        }

        @media(max-width: 1699px) {
            left: -13%;
        }

        @include xxl {
            display: none;
        }
    }

    .booking-sec {
        position: absolute;
        width: 100%;
        bottom: 133px;

        @include md {
            bottom: 80px;
        }
    }

    .booking-form {
        box-shadow: 0px 14px 24px rgba(13, 13, 12, 0.03);
        border-radius: 0px;
        border: none;
        margin: 0;
        max-width: 1094px;

        @include md {
            padding: 36px;
        }
    }
}

.hero-style17 {
    padding: 265px 0 350px 0;

    @include md {
        padding: 265px 0 133px 0;
    }
    @include sm {
        padding: 200px 0 80px 0;
    }


    .hero-title {
        font-size: 94px;
        margin-bottom: 10px;

        @include md {
            font-size: 74px;
        }

        @include sm {
            font-size: 54px;
        }

        @media(max-width: 480px) {
            font-size: 44px;
        }

        @include vxs {
            font-size: 38px;
        }
    }

    .hero-content {
        margin-left: 438px;

        @include xl {
            margin-left: 50px;
        }

        @include md {
            margin-left: 0;
        }

        .hero-text {
            font-weight: 400;
            font-size: 24px;
            line-height: 40px;
            color: #6E7070;
            max-width: 460px;
            margin-bottom: 50px;


        }
    }
}