/* .light-font {
    font-weight: 500;
}

.top-font {
    font-size: 34px;
    position: relative;
    top: 4px;
    font-style: normal;
    line-height: 100%;
    left: -12px;
    vertical-align: top;
}

.bottom-font {
    line-height: 100%;
    vertical-align: bottom;
    font-weight: 600;
    bottom: 6px;
    position: relative;
    font-style: normal;
    font-size: 44px;
}

.hero-banner {
    background-color: var(--black-text);
    padding: 127px 0 123px 0;
    overflow: hidden;
    position: relative;
}

.bold {
    font-weight: 600;
}

.hero-banner .hero-content .hero-title hr {
    border: none;
    background-color: #ffffff20;
    height: 1px;
    width: 1px;
    transition: all 2s ease-in-out;
}

.mobile-line {
    display: none;
}

.hero-banner .hero-content .hero-title h1 {
    text-transform: uppercase;
    line-height: 80px;
    color: var(--secondary-bg);
    column-gap: 13px;
    position: relative;
    overflow: hidden;
}

.hero-title sup {
    font-size: clamp(14px, calc(0.875rem + ((1vw - 7.68px) * 2.9762)), 34px);
    position: relative;
    top: -8px;
    font-weight: 600;
    line-height: 34px !important;
    left: -10px;
}

.hero-title sub {
    position: relative;
    font-size: clamp(14px, calc(0.875rem + ((1vw - 7.68px) * 2.3438)), 41px);;
    top: 0;
    font-weight: 600;
    vertical-align: baseline;
    line-height: 34px;
}

.hero-banner .hero-content .hero--img {
    position: absolute;
    content: "";
    right: -28%;
    top: -4%;
    z-index: 9;
    filter: brightness(0.6);
    transition: 2s all ease;
    transform: rotateZ(80deg);
}

.hero-content-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
    color: var(--secondary-bg);
    margin-top: 74px;
    z-index: 10;
    position: relative;
}

.hero-content-wrapper .hero-left {
    max-width: 520px;
    width: 100%;
    text-transform: uppercase;
}

.hero-content-wrapper .hero-right p,
.hero-content-wrapper .hero-left p {
    font-size: 14px;
    line-height: 20px;
    white-space: pre-wrap;
}

.hero-content-wrapper .hero-left p {
    font-weight: bold;
} */

/* @media(max-width: 1024px) {
    .hero-banner .hero-content .hero-title h1 {
        line-height: 60px;
    }

    .top-font {
        font-size: 20px;
        top: 8px;
        left: -7px;
        vertical-align: top;
    }

    .bottom-font {
        bottom: 10px;
        font-size: 27px;
    }
}

@media(max-width: 920px) {
    .hero-content-wrapper .hero-left {
        max-width: max-content;
        width: 100%;
    }

    .top-font {
        font-size: 17px;
        top: 13px;
        left: -5px;
        vertical-align: top;
    }

    .bottom-font {
        bottom: 14px;
        font-size: 23px;
    }
}

@media(max-width: 820px) {
    .hero-banner .hero-content .hero-title h1 {
        line-height: 50px;
    }

    .top-font {
        font-size: 13px;
        top: 13px;
        left: -2px;
        vertical-align: top;
    }

    .bottom-font {
        bottom: 13px;
        font-size: 19px;
    }
}

@media(max-width: 575px) {
    .hero-banner {
        padding: 82px 0 74px 0;
    }

    .hero-content-wrapper {
        margin-top: 69px;
    }

    .hero-banner .hero-content .hero-title h1 {
        line-height: 30px;
    }

    .hero-banner .hero-content .hero-title sup,
    .hero-banner .hero-content .hero-title h1 .light-font.top-font {
        display: none;
    }

    .hero-banner .hero-content .hero--img {
        position: absolute;
        content: "";
        right: 13px !important;
        top: 31%;
        transform: translateY(-50%) rotate(45deg) scale(0.5) !important;
    }

    .hero-content-wrapper {
        align-items: start;
        flex-direction: column;
        gap: 30px;
    }

    .hero-content-wrapper .hero-right p {
        padding-right: 20px;
        white-space: normal;
    }

    .hero-content-wrapper .hero-right p br {
        display: none;
    }

    .bottom-font {
        bottom: 2px;
        font-size: 14px;
    }

    .hero-banner .hero-content .hero-title h1 {
        letter-spacing: -0.5px;
    }
} */


/* New css */
/* .hero-title sub,
.hero-title sup,
.hero-title b,
.hero-title span{
    transform: translateY(27px);
    opacity: 0;
    transition: 0.5s all ease;
    display: inline-block;
    position: relative;
    line-height: 95.238%;
    z-index: 99;
}

.hero-title sub,
.hero-title sup {
    transform: translateY(15px);
    transition: 0.5s all ease;
}

.hero-title sub.active,
.hero-title sup.active,
.hero-title b.active,
.hero-title span.active{
    transform: translateY(0px);
    opacity: 1;
}

.hero-title h1 span {
    font-weight: 500;
} */