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

    .swiper-wrapper {
        gap: 0 !important;
        margin: 0 !important;
    }

    .sub-title {
        padding: 0;
        font-size: 20px;
        font-weight: 600;
        line-height: 30px;

    }
}

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

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

.banner-shape { 
    background-size: auto;
    background-repeat: repeat-x;
    background-position: top left;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 74px;
    animation: headerShapeAnim 80s linear infinite; 
    z-index: 3;

    &.style2 {
        bottom: -52px;
        left: 0;
        height: 74px;

        @include md {
            bottom: -60px;
        }

    }
}

/* Hero 1  start ---------------------------------- */
.hero-1 {
    position: relative;
    overflow: initial;
    padding: 241px 0 141px 0;
    z-index: 2;

    @include vxs {
        padding: 270px 0 180px 0;
    }

    .bottom-shape {
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 260px;
        background-size: auto;
        background-repeat: repeat-x;
        background-position: bottom center;
        z-index: 5;
    }
}

.hero-style1 {
    position: relative;
    max-width: 880px;
    padding: 179px 110px;
    margin-left: -90px;
    text-align: center;
    background: url(../img/shape/hero_shape1.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 2;

    @include xxl {
        margin-left: 0;
    }

    @include lg {
        padding: 179px 110px;
    }

    .sub-title {
        color: $theme-color4;
        text-transform: capitalize;
        margin-top: -0.5rem;
        margin-bottom: 10px;

        &:before {
            margin-left: -3.7rem;
        }

        &:before,
        &:after {
            width: 50px;
            background-color: $theme-color4;
        }
    }

    .hero-title {
        font-weight: 800;
        font-size: 94px;
        line-height: 104px;
        text-transform: capitalize;
        color: $title-color;
    }

    .th-btn {
        padding: 21px 62px;
    }
}

@include md {
    .hero-style1 {
        max-width: 100%;
        padding: 144px 110px;
        margin-left: 0;


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

@include sm {
    .hero-style1 {
        padding: 76px 50px;
    }
}

@include xs {
    .hero-style1 {
        padding: 104px 50px;

        .sub-title {
            font-size: 16px;
        }

        .hero-title {
            font-size: 44px;
            line-height: 55px;
        }
    }
}

@media(max-width: 520px) {
    .hero-style1 {
        background: none;
        padding: 40px 0 50px 0;
    }
}

@include vxs {
    .hero-style1 {
        background: none;
        padding: 0;
    }
}

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

/* Hero 2  start --------------------------------------*/
.hero-2 {
    position: relative;
    z-index: 6;


    &:before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: $theme-color;
        clip-path: path("M0 0H1920V849.574C1920 849.574 1429 931.533 960 849.574C491 767.615 0 849.574 0 849.574V0Z");
        z-index: -1;

        @media(min-width: 1930px) {
            clip-path: path("M0 0H3520V850C3520 850 2509.83 976 1760 850C1010.17 724 0 850 0 850V0Z");
        }
    }

    .th-hero-bg {
        clip-path: path("M0 0H1920V850C1920 850 1369 976 960 850C551 724 0 850 0 850V0Z");
        z-index: 3;

        @include md {
            background-position: left;
        }


        @media(min-width: 1930px) {
            clip-path: path("M0 0H3520V849.574C3520 849.574 2619.83 931.533 1760 849.574C900.167 767.615 0 849.574 0 849.574V0Z");
        }

    }
    .banner-shape {
        top: -10px;
    }
}

.hero-style2 {
    position: relative;
    z-index: 6;
    max-width: 620px;
    padding: 240px 0 310px 0;

    @include md {
        max-width: 520px;
    }

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

    .sub-title {
        margin-top: -0.3rem;
        text-transform: none;
        margin-bottom: 10px;

        &.sub-title2 {
            padding-left: 65px;

            &:before {
                width: 50px;
                margin-left: -4.0rem;
            }

            &:after {
                display: none;
            }
        }
    }

    .hero-title {
        font-weight: 800;
        font-size: 74px;
        line-height: 84px;
        margin-bottom: 18px;
    }

    .hero-text {
        max-width: 488px;
        color: #888C97;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        margin-bottom: 33px;

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

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

    .th-btn {
        padding: 21px 53px;

    }

}

@include lg {
    .hero-style2 {
        padding: 150px 0 140px 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: 120px 0 110px 0;
        .sub-title.sub-title2 {
            padding: 0;
            &:before {
                display: none;
            }
        }

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

@include xs {
    .hero-style2 {
        .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 2 end ------------------------ */
/* hero 3 start ------------------------ */
.hero-3 {
    position: relative;
    z-index: 3;

    .th-hero-bg {
        background-size: auto;
        background-position: right center;
        clip-path: path("M0 0H1920V850L1765.74 803.993C1709.8 787.308 1650.2 787.308 1594.26 803.993L1525.74 824.428C1469.8 841.113 1410.2 841.113 1354.26 824.428L1285.74 803.993C1229.8 787.308 1170.2 787.308 1114.26 803.993L1045.74 824.428C989.798 841.113 930.202 841.113 874.258 824.428L805.742 803.993C749.798 787.308 690.202 787.308 634.258 803.993L565.742 824.428C509.798 841.113 450.202 841.113 394.258 824.428L325.742 803.993C269.798 787.308 210.202 787.308 154.258 803.993L0 850V0Z");

        @media(min-width: 1930px) {
            clip-path: path("M0 0H3333V850L2967.17 787.148C2933.55 781.372 2899.2 781.372 2865.58 787.148L2550.55 841.273C2516.93 847.049 2482.57 847.049 2448.95 841.273L2133.92 787.148C2100.3 781.372 2065.95 781.372 2032.33 787.148L1717.3 841.273C1683.68 847.049 1649.32 847.049 1615.7 841.273L1300.67 787.148C1267.05 781.372 1232.7 781.372 1199.08 787.148L884.048 841.273C850.429 847.049 816.071 847.049 782.452 841.273L467.423 787.148C433.804 781.372 399.446 781.372 365.827 787.148L0 850V0Z");
        }

        @include md {
            background-position: left center;
        }
    }

    .slider-pagination {
        position: absolute;
        top: 35%;
        left: 9.5%;
        transform: translateY(-50%);
        width: 30px;
        display: block;

        @media(max-width: 1700px) {
            left: 5%;
        }

        @include xxl {
            display: none !important;
        }

        .swiper-pagination-bullet {
            background-color: #D8DDE1;
            border-radius: 50%;
            margin: 25px 0;
            display: block;

            &:before {
                content: '';
                position: absolute;
                inset: -8px;
                border: 8px solid #D8DDE1;
            }

            &.swiper-pagination-bullet-active {
                background-color: $theme-color;

                &:before {
                    border-color: rgba(254, 90, 134, 0.4);
                }
            }
        }

    }

}

.hero-style3 {
    position: relative;
    padding: 222px 0 251px 0;
    max-width: 702px;
    z-index: 4;

    @include lg {
        padding: 180px 0;
        max-width: 530px;
    }

    @include md {
        padding: 160px 0;
    }

    @include sm {
        padding: 140px 0;
        max-width: 100%;
        text-align: center;
    }

    @include xs {
        padding: 120px 0;
    }

    @include vxs {
        text-align: center;
    }

    .sub-title {
        background-color: $theme-color3;
        padding: 2px 20px;
        border-radius: 50px;
        font-size: 16px;
        line-height: 26px;
        font-weight: 500;
        color: $white-color;
        display: inline-block;
    }

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

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

    .hero-text {
        font-family: $title-font;
        font-weight: 600;
        font-size: 20px;
        line-height: 30px;
        max-width: 666px;
        margin-bottom: 33px;

        @include sm {
            max-width: 100%;
            font-size: 18px;
            line-height: 28px;
        }
    }
}

/* hero 3 end ------------------------ */