/*--------------------------------------------------------------
  10. Hero
----------------------------------------------------------------*/
.cs_hero_phone_number {
    display: flex;
    align-items: center;
    gap: 15px;
    > span {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        display: inline-flex;
    }
    &:hover {
        > span {
            i {
                animation: vibrate 0.8s ease;
            }
        }
    }
}
@keyframes vibrate {
    0% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(-3deg);
    }
    40% {
        transform: rotate(3deg);
    }
    60% {
        transform: rotate(-3deg);
    }
    80% {
        transform: rotate(3deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
.cs_hero_social_wrap {
    position: absolute;
    top: 100%;
    writing-mode: vertical-lr;
    transform: rotate(180deg) translateY(100%);
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 130px;
    width: 100px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 3;
    .cs_social_btns.cs_style_1 a {
        transform: rotate(-180deg);
        color: var(--ternary);
        border-color: var(--ternary);
        &:hover {
            border-color: var(--accent);
            color: var(--accent);
            transform: rotate(-180deg) scale(1.08);
        }
    }
    .cs_hero_phone_number > span {
        height: 30px;
        width: 30px;
        rotate: 180deg;
        font-size: 14px;
    }
}
.cs_hero.cs_style_1 {
    max-height: 900px;
    height: calc(100vh - 100px);
    min-height: 650px;
    position: relative;
    margin-top: 100px;
    flex-direction: column;
    padding: 110px 0 120px;
    @media (max-width: 1199px) {
        margin-top: 80px;
    }
    @media (max-width: 991px) {
        height: initial;
        padding: 80px 0;
        .cs_hero_phone_number {
            color: #fff;
        }
    }
    .cs_hero_title_box_wrap {
        width: 100vw;
        flex: none;
        position: relative;
        z-index: 2;
    }
    .cs_hero_title_box {
        width: 39vw;
        overflow: hidden;
        @media (max-width: 991px) {
            width: 100vw;
        }
        &.cs_title_cloned {
            position: absolute;
            top: 0;
            right: 0;
            width: 61vw;
            display: flex;
            justify-content: flex-end;
            @media (max-width: 991px) {
                width: 100vw;
            }
            .cs_hero_title {
                color: #fff;
            }
        }
    }
    .cs_hero_title_box_in {
        width: 100vw;
        flex: none;
    }
    .cs_hero_thumb {
        position: absolute;
        right: 0;
        bottom: 0;
        max-width: 61vw;
        width: 100%;
        height: 100%;
        @media (max-width: 991px) {
            max-width: 100%;
        }
    }
    .cs_hero_title {
        span {
            position: relative;
            display: inline-block;
            &::before {
                content: "";
                position: absolute;
                height: 11px;
                width: 360px;
                width: calc(100% + 27px);
                background-color: #ffad96;
                bottom: -10px;
                left: -12px;
                @media (max-width: 1400px) {
                    bottom: -2px;
                    height: 8px;
                }
                @media (max-width: 991px) {
                    width: calc(100% + 10px);
                    left: -5px;
                    bottom: 0;
                    height: 4px;
                }
            }
        }
    }
    .container {
        position: relative;
        z-index: 2;
    }

    .cs_hero_subtitle {
        max-width: 480px;
        text-align: right;
        @media (max-width: 991px) {
            text-align: left;
        }
    }
    .cs_hero_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 60px;
        @media (max-width: 991px) {
            flex-direction: column-reverse;
            align-items: flex-start;
            margin-top: 25px;
            gap: 30px;
        }
    }
}
.cs_hero.cs_style_2 {
    min-height: 100vh;
    padding: 190px 130px 120px;
    @media (max-width: 1199px) {
        min-height: 750px;
    }
    @media (max-width: 991px) {
        padding: 150px 0px 100px;
    }
    @media (max-width: 575px) {
        min-height: 100vh;
    }
    .cs_hero_text {
        max-width: 800px;
    }
    .cs_hero_title {
        margin-bottom: 70px;
        text-shadow: 0px 0 1px var(--primary);
    }
    .cs_hero_btn {
        display: inline-flex;
        transition: all 0.5s ease-in-out;
        &:hover {
            transform: rotate(18deg) scale(1.06);
        }
    }
    .cs_btn.cs_style_1 {
        &::before {
            display: none;
        }
        span {
            width: 61px;
        }
        i {
            &:last-child {
                transform: translate(-45px, 45px) rotate(-45deg);
            }
        }
        &:hover {
            i {
                &:first-child {
                    transform: translate(60px, -60px) rotate(-45deg);
                }
                &:last-child {
                    transform: translate(20px, -20px) rotate(-45deg);
                }
            }
        }
    }
    .cs_swiper_parallax_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
    }
    .cs_entity_img {
        display: none;
    }
    .container {
        position: relative;
        z-index: 2;
    }
}
.cs_hero.cs_style_3 {
    padding: 223px 0 130px;
    @media (max-width: 991px) {
        padding: 150px 0 100px;
    }
    .cs_hero_title {
        -webkit-text-stroke: 2px var(--accent);
        text-stroke: 2px var(--accent);
        @media (max-width: 575px) {
            -webkit-text-stroke-width: 1px;
            text-stroke-width: 1px;
        }
    }
    .cs_hero_text {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px 100px;
        @media (max-width: 1199px) {
            gap: 35px;
        }
        @media (max-width: 991px) {
            flex-direction: column-reverse;
            align-items: flex-start;
        }
    }
    .cs_hero_btn {
        height: 224px;
        width: 224px;
        border-radius: 50%;
        flex-direction: column;
        flex: none;
        gap: 10px;
        backdrop-filter: blur(100px);
        background: linear-gradient(136deg, rgb(254 91 44 / 80%) 14.28%, rgba(254, 91, 44, 0.25) 86.17%);
        &:hover {
            color: #fff;
        }
        svg {
            margin-top: 10px;
        }
    }
    .cs_hero_info {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 60px;
        margin-bottom: 37px;
        @media (max-width: 991px) {
            font-size: 36px;
            gap: 10px 40px;
            margin-bottom: 25px;
        }
        li {
            display: flex;
            align-items: center;
        }
        i {
            font-size: 18px;
            color: var(--accent);
            margin-right: 25px;
            font-size: 30px;
            @media (max-width: 991px) {
                margin-right: 12px;
                font-size: 26px;
            }
        }
    }
    .cs_hero_avatar_wrap {
        display: flex;
        justify-content: flex-end;
        margin-top: 45px;
        @media (max-width: 991px) {
            justify-content: flex-start;
        }
    }
    .cs_hero_avatar {
        display: flex;
        align-items: center;
        gap: 40px;
        @media (max-width: 991px) {
            h3 {
                font-size: 36px;
            }
        }
        @media (max-width: 991px) {
            gap: 20px;
        }
        img {
            height: 120px;
            width: 120px;
            object-fit: cover;
            flex: none;
            @media (max-width: 991px) {
                width: 90px;
                height: 90px;
            }
        }
    }
}
.cs_hero.cs_style_4 {
    height: 100vh;
    min-height: 700px;
    max-height: 1100px;
    padding: 235px 0 100px;
    @media (max-width: 1199px) {
        padding: 170px 0 100px;
    }
    @media (max-width: 991px) {
        min-height: 650px;
        max-height: initial;
        padding: 170px 0 100px;
        height: initial;
    }
    .cs_hero_subtitle {
        display: inline-block;
        position: relative;
        padding: 0 22px;
        margin-bottom: 26px;
        &::before,
        &::after {
            content: "";
            top: 11px;
            position: absolute;
            height: 6px;
            width: 6px;
            background-color: var(--accent);
        }
        &::before {
            left: 0;
        }
        &::after {
            right: 0;
        }
    }
    .cs_hero_title {
        margin-bottom: 62px;
        @media (max-width: 991px) {
            margin-bottom: 35px;
        }
    }
    .cs_hero_btns {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
        @media (max-width: 575px) {
            gap: 10px;
        }
    }
}
.cs_hero.cs_style_5 {
    min-height: 100vh;
    background-color: #f9f3eb;
    position: relative;
    padding: 185px 0 100px 0;
    @media (max-width: 1199px) {
        min-height: initial;
    }
    @media (max-width: 991px) {
        flex-direction: column;
        padding: 80px 0 140px 0;
    }
    .cs_section_heading.cs_style_1 {
        max-width: 750px;
        margin-bottom: 32px;
        @media (max-width: 1199px) {
            max-width: 550px;
        }
        .cs_section_subtitle {
            margin-bottom: 0;
        }
    }
    .cs_hero_img {
        position: absolute;
        right: 0;
        bottom: 0;
        height: calc(100% - 156px);
        width: 40%;
        border-radius: 250px 0 0 0;
        overflow: hidden;
        @media (max-width: 991px) {
            position: initial;
            border-radius: 0;
            width: 100%;
            height: 500px;
        }
        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }
    .cs_hero_btns {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        @media (max-width: 575px) {
            gap: 10px;
            .cs_btn.cs_style_1 {
                width: 100%;
            }
        }
    }
    .cs_hero_review_box {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-top: 90px;
        @media (max-width: 991px) {
            margin-top: 50px;
        }
        @media (max-width: 575px) {
            margin-top: 40px;
            width: 100%;
            justify-content: center;
        }
    }
    .cs_hero_review_avatars {
        padding-left: 35px;
        display: flex;
        > div {
            height: 58px;
            width: 58px;
            border-radius: 50%;
            flex: none;
            margin-left: -35px;
        }
        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }
    .cs_hero_review {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .cs_hero_text {
        position: relative;
        z-index: 2;
        @media (max-width: 991px) {
            padding-top: 40px;
        }
    }
}
.cs_hero.cs_style_6 {
    padding-top: 166px;
    .cs_hero_counter_wrap {
        min-height: 560px;
        display: flex;
        align-items: flex-end;
        padding-top: 60px;
    }
    .cs_hero_counter_in {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }
    .cs_hero_title {
        margin-bottom: 75px;
    }
    .cs_hero_counter_list {
        width: 250px;
        border-radius: 50px 0 0;
        padding: 32px 30px 36px;
        .cs_hero_counter {
            &:not(:last-child) {
                margin-bottom: 27px;
            }
        }
        p {
            color: #dadada;
        }
    }
}
.cs_hero.cs_style_7 {
    min-height: 100vh;
    max-height: 1000px;
    padding: 100px 0 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    @media (max-width: 991px) {
        max-height: initial;
    }
    .cs_hero_up {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 120px 0;
    }
    .cs_hero_title {
        span {
            background-color: var(--accent);
            color: #fff;
            display: inline-block;
            line-height: 0.9em;
        }
    }
    .cs_hero_info_list {
        display: flex;
        padding: 65px 75px 60px;
        gap: 40px 75px;
        border-radius: 100px 0 0;
        position: relative;
        @media (max-width: 1400px) {
            gap: 40px;
        }
        @media (max-width: 1199px) {
            padding: 65px 50px 60px;
        }
        @media (max-width: 991px) {
            flex-wrap: wrap;
            gap: 35px 24px;
            padding: 50px 20px 50px;
            border-radius: 60px 0 0;
        }
        &::before {
            content: "";
            position: absolute;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            background-color: var(--primary);
            opacity: 0.5;
            border-radius: inherit;
        }
        h3 {
            position: relative;
            margin-bottom: 20px;
            &::before {
                content: "";
                height: 34px;
                width: 34px;
                border-radius: 50%;
                position: absolute;
                left: 0;
                top: -1px;
                background-color: var(--accent);
            }
            span {
                position: relative;
                z-index: 2;
            }
        }
        li {
            flex: 1;
            position: relative;
            z-index: 2;
            @media (max-width: 991px) {
                flex: none;
                width: calc(50% - 12px);
            }
            @media (max-width: 575px) {
                width: 100%;
            }
        }
    }
}
.cs_hero.cs_style_8 {
    display: flex;
    min-height: 100vh;
    padding-top: 100px;
    position: relative;
    @media (max-width: 1199px) {
        padding-top: 80px;
    }
    @media (max-width: 991px) {
        min-height: initial;
        flex-direction: column;
        background-color: var(--gray);
    }
    > * {
        flex: none;
        width: 50%;
    }
    > .cs_hero_thumb {
        @media (max-width: 1199px) {
            width: 40%;
        }
        @media (max-width: 991px) {
            height: 450px;
            width: 100%;
            padding: 50px 50px 100px 50px;
        }
    }
    .cs_hero_right {
        display: flex;
        align-items: center;
        padding: 100px 40px 100px 112px;
        max-width: 960px;
        @media (max-width: 1600px) {
            padding: 100px 20px 100px 90px;
        }
        @media (max-width: 1400px) {
            padding: 100px 20px 100px 60px;
        }
        @media (max-width: 1199px) {
            flex: 1;
            padding: 100px 10px 100px 50px;
        }
        @media (max-width: 991px) {
            width: 100%;
            padding: 50px 50px 100px 50px;
        }
        &::after {
            content: "";
            width: 448px;
            height: 448px;
            border-radius: 50%;
            background: #e7e8db;
            filter: blur(100px);
            position: absolute;
            right: -85px;
            top: 180px;
            @media (max-width: 991px) {
                display: none;
            }
        }
    }
    .cs_section_heading.cs_style_1 {
        position: relative;
        z-index: 2;
        .cs_section_subtitle {
            margin-bottom: 2px;
        }
        .cs_btn.cs_style_1 {
            margin-top: 30px;
        }
    }
}
.cs_hero.cs_style_9,
.cs_hero.cs_style_10 {
    .cs_hero_thumb {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
    }
    .container {
        position: relative;
        z-index: 2;
    }
}
.cs_hero.cs_style_9 {
    height: 100vh;

    .cs_hero_text {
        max-width: 1150px;
    }
    .cs_hero_title {
        margin-bottom: 38px;
    }
    #wrapper_bgndVideo {
        &::before {
            content: "";
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 3;
            background-color: rgba(0, 0, 0, 0.5);
        }
    }
    .cs_hero_thumb.youtube-bg {
        pointer-events: none;
    }
}
.cs_style_9_wrap {
    .cs_video_bg,
    .cs_video_bg_placeholder {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
    }
    .cs_hero.cs_style_9 {
        position: relative;
        z-index: 2;
    }
    .cs_video_bg {
        z-index: 1;
        .Player__videoInnerContainer___3idnr {
            height: 100%;
        }
        iframe {
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }
    }
}
.cs_hero.cs_style_10 {
    height: 100vh;
    .cs_section_title {
        margin-bottom: 26px;
    }
}
.cs_hero.cs_style_11 {
    .cs_hero_bg {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        transition: all 0.4s ease;
    }
    .container {
        position: relative;
        z-index: 3;
    }
    .cs_hero_in {
        height: 100%;
        width: 100%;
        padding-top: 60px;
        position: relative;
        height: 100vh;
    }
    .cs_hero_text {
        max-width: 800px;
        position: relative;
        z-index: 2;
        @media (max-width: 1199px) {
            max-width: 600px;
        }
    }
    .cs_hero_subtitle {
        max-width: 510px;
    }
    .cs_hero_title {
        margin-bottom: 38px;
    }
    .cs_hero_subtitle {
        margin-bottom: 56px;
    }
    .cs_hero_btns {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }
    .cs_hero_info {
        position: absolute;
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        z-index: 2;
        @media (max-width: 991px) {
            display: none;
        }
        > * {
            height: 100%;
            width: 100%;
            position: relative;
        }
    }
    .cs_social_btns.cs_style_1 {
        flex-direction: column;
        position: absolute;
        right: 0;
        bottom: 18%;

        a {
            color: var(--white);
            border-color: var(--white);
        }
    }
    .cs_hero_contact_number {
        position: absolute;
        top: 42%;
        writing-mode: vertical-lr;
        transform: rotate(180deg) translateY(85%);
        right: 0;
    }
}

.cs_down_btn {
    position: absolute;
    height: 35px;
    width: 20px;
    border-radius: 10px;
    border: 2px solid currentColor;
    bottom: 30px;
    left: 50%;
    margin-left: -10px;
    z-index: 1002;
    color: var(--white);
    cursor: pointer;
    transition: color 0.3s ease;
    &:hover {
        color: var(--accent);
    }
    &::before {
        content: "";
        height: 5px;
        width: 5px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: currentColor;
        animation: UpAndDown 3s infinite;
    }
}
@keyframes UpAndDown {
    0%,
    100% {
        top: 30%;
    }
    50% {
        top: 70%;
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.8);
    }
}