/* Hero Global ---------------------------------- */
.themeholy-hero-wrapper {
    position: relative;
    z-index: 2;
    overflow: hidden;
    .slick-arrow {
        border: none;
    }
    .slick-dots {
        position: absolute;
        top: 50%;
        left: 80px;
        transform: translateY(-50%);
    }
}

.themeholy-hero-bg {
    position: absolute;
    inset: 0;
    img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Hero 1 ---------------------------------- */
.hero-subtitle {
    font-family: $title-font;
    color: $theme-color;
    display: block;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 17px;
    text-transform: uppercase;
    margin-top: -0.24em;
}
.hero-title {
    font-size: 74px;
    font-weight: bold;
    line-height: 1.135;
    margin-bottom: 0;
    &:last-of-type {
        margin-bottom: 30px;
    }
}
.hero-text {
    margin-bottom: 43px;
}
@media (min-width: 1200px) {
    .hero-text {
        padding-right: 70px;
    }
}
.hero-1 {
    overflow: hidden;
    .icon-box {
        position: absolute;
        top: 50%;
        left: 8%;
        transform: translateY(-50%);
        width: 46px;
        flex-direction: column;
        &:after,
        &:before {
            content: '';
            height: 80px;
            width: 3px;
            background-image: linear-gradient(180deg, $theme-color 0%, rgba(232, 58, 21, 0) 100%);
            position: absolute;
            left: calc(50% - 1.5px);
        }
        &:before {
            bottom: calc(100% + 20px);
            transform: rotateX(180deg);
        }
        &:after {
            top: calc(100% + 20px);
        }
        .slick-arrow {
            --pos-x: 0;
        }
    }
}
.hero-style1 {
    position: relative;
    z-index: 6;
    padding: 203px 0 203px 0;
    max-width: 730px;
    .hero-title {
        color: $white-color;
        font-weight: 600;
    }
    .hero-text {
        color: $white-color;
    }
    .sub-title {
        margin-bottom: 15px;
    }
}

@include xxl {
    .hero-1 .icon-box {
        left: unset;
        right: 4%;
    }
}

@media (max-width: 1400px) {
    .hero-style1 {
        padding: 180px 0;
    }
    .hero-title {
        font-size: 68px;
    }
}

@include xl {
    .hero-style1 {
        padding: 150px 0;
    }
}

@include lg {
    .hero-title {
        font-size: 60px;
    }
    .hero-style1 {
        max-width: 600px;
    }
}

@include md {
    .hero-title {
        font-size: 54px;
        line-height: 1.2;
    }
    .hero-style1 {
        padding: 110px 0;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        .btn-group {
            justify-content: center;
        }
        .hero-text {
            margin-left: auto;
            margin-right: auto;
        }
    }
    .hero-1 {
        .icon-box {
            display: none;
        }
    }
}

@include sm {
    .hero-subtitle {
        font-size: 18px;
    }
    .hero-title {
        font-size: 48px;
    }
}

@include xs {
    .hero-subtitle {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .hero-title {
        font-size: 38px;
        line-height: 1.24;
        &:last-of-type {
            margin-bottom: 16px;
        }
    }
    .hero-text {
        margin-bottom: 28px;
    }
}

@media (max-width: 390px) {
    .hero-title {
        font-size: 34px;
        line-height: 1.3;
    }
}

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

/* Hero 2 ---------------------------------- */
.hero-2 {
    overflow-x: hidden;
    .icon-box {
        &-wrap {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
        }
        padding: 26px;
        position: absolute;
        bottom: 0;
        left: 0;
        .slick-arrow {
            background-color: $white-color;
            &:hover {
                background-color: $theme-color;
            }
        }
    }
    .themeholy-hero-slide {
        padding-bottom: 98px;
    }
}

.hero-style2 {
    .hero-text {
        color: $title-color;
    }
    .hero-title {
        color: $title-color;
        font-weight: 700;
        span {
            color: $theme-color;
            font-weight: 400;
        }
    }
    .sub-title {
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-weight: 600;
    }
}

@media (min-width: 1300px) {
    .hero-style2 {
        padding: 190px 0 170px 0;
    }
}

@include lg {
    .hero-2 {
        .icon-box {
            padding-left: 0;
        }
        .themeholy-hero-slide {
            padding-bottom: 50px;
        }
        .themeholy-hero-bg img {
            object-position: left;
        }
    }
}

@include md {
    .hero-2 {
        .icon-box {
            display: none;
        }
        .themeholy-hero-slide {
            padding-bottom: 0;
        }
    }
}

/* Hero 3 ---------------------------------- */
.hero-social {
    writing-mode: vertical-lr;
    background-color: $theme-color;
    a {
        display: inline-block;
        color: $white-color;
        font-family: $title-font;
        text-transform: uppercase;
        font-weight: 600;
        position: relative;
        &:not(:last-child) {
            margin-bottom: 45px;
        }
        &:hover {
            color: $theme-color2;
        }
    }
}
.hero-title2 {
    font-size: 64px;
    line-height: 1.156;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 0;
    &:last-of-type {
        margin-bottom: 20px;
    }
    b {
        color: $theme-color;
        font-weight: bold;
    }
    @include sm {
        font-size: 54px;
    }
    @include xs {
        font-size: 44px;
    }
    @include vxs {
        font-size: 38px;
    }
}
.hero-3 {
    background-color: $smoke-color2;
    overflow-x: hidden;
    .hero-img {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        max-width: 50%;
        height: 100%;
        clip-path: polygon(100% 0, 100% 100%, 150px 100%, 0 calc(100% - 150px), 0 0);
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .hero-shape1 {
        position: absolute;
        bottom: 0;
        left: 0;
        pointer-events: none;
    }
    .hero-social {
        position: absolute;
        top: 239px;
        left: 0;
        z-index: 3;
        transform: rotate(180deg);
        padding: 80px 27px 0 27px;
        clip-path: polygon(0 80px, 100% 0, 100% 100%, 0% 100%);

    }
    .icon-box {
        position: absolute;
        bottom: 25px;
        left: 25px;
    }
}
.hero-style3 {
    padding: 325px 0 225px 0;
    max-width: 500px;
    position: relative;
    z-index: 5;
    .hero-text {
        margin-bottom: 33px;
        padding-right: 0 !important;
    }
    .sub-title {
        text-transform: uppercase;
        letter-spacing: 0.2em;
        margin-bottom: 22px;
        font-weight: 600;
    }
}

@media (max-width: 1400px) {
    .hero-3 {
        .hero-social {
            padding: 80px 10px 0 10px;
        }
    }
}

@include xl {
    .hero-3 {
        .hero-social {
            display: none;
        }
        .hero-shape1 {
            max-width: 300px;
        }
        .icon-box {
            left: 40px;
        }
    }
    .hero-style3 {
        padding: 240px 0 140px 0;
    }
}

@include lg {
    .hero-3 {
        .hero-img {
            max-width: 45%;
        }
    }
}

@include md {
    .hero-3 {
        .hero-img {
            display: none;
        }
        .icon-box {
            display: none;
        }
    }
    .hero-style3 {
        padding: 200px 0 100px 0;
        margin: 0 auto;
        text-align: center;
        .btn-group {
            justify-content: center;
            text-align: left;
        }
    }
}

@include xs {
    .hero-style3 {
        .sub-title {
            font-size: 18px;
            letter-spacing: 0.1em;
        }
    }
}