/* ============================================================
   HERO SLIDER
   ============================================================ */

.hero-slider {
    width: 100%;
    position: relative;
    overflow: hidden;
}


/* ============================================================
   CAROUSEL
   ============================================================ */

.hero-slider .carousel {
    width: 100%;
}


.hero-slider .carousel-inner {
    width: 100%;
}


/* ============================================================
   SLIDE
   ============================================================ */

.hero-slider .carousel-item {

    height: 520px;

    min-height: 520px;

    position: relative;

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;
}


/* ============================================================
   DARK OVERLAY
   ============================================================ */

.hero-overlay {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.62),
            rgba(0, 0, 0, 0.62)
        );

    z-index: 1;
}


/* ============================================================
   HERO CONTAINER
   ============================================================ */

.hero-container {

    height: 100%;

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;
}


/* ============================================================
   HERO CONTENT
   ============================================================ */

.hero-content {

    width: 100%;

    max-width: 950px;

    margin: 0 auto;

    padding: 20px;
}


/* ============================================================
   HERO TITLE
   ============================================================ */

.hero-title {

    margin: 0;

    color: #ffffff;

    font-size: 52px;

    line-height: 1.18;

    font-weight: 800;

    letter-spacing: -1px;

    text-transform: uppercase;
}


.hero-title span {

    color: #f70746;
}


/* ============================================================
   HERO DESCRIPTION
   ============================================================ */

.hero-description {

    margin-top: 22px;

    margin-bottom: 38px;

    color: #ffffff;

    font-size: 23px;

    line-height: 1.5;

    font-weight: 400;
}


/* ============================================================
   HERO BUTTON
   ============================================================ */

.hero-button-wrapper {

    display: flex;

    align-items: center;

    justify-content: center;
}


.hero-button {

    min-width: 210px;

    height: 62px;

    padding: 0 35px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #f70746;

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

    text-transform: uppercase;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.hero-button:hover {

    background: #ffffff;

    color: #f70746;

    transform: translateY(-2px);
}


/* ============================================================
   CAROUSEL ARROWS
   ============================================================ */

.hero-slider-control {

    width: 55px;

    height: 55px;

    top: 50%;

    margin-top: -27px;

    opacity: 0;

    background: rgba(247, 7, 70, 0.85);

    transition:
        opacity 0.3s ease,
        background 0.3s ease;
}


.hero-slider:hover .hero-slider-control {

    opacity: 1;
}


.hero-slider-control:hover {

    background: #f70746;
}


.carousel-control-prev {

    left: 20px;
}


.carousel-control-next {

    right: 20px;
}


/* ============================================================
   INDICATORS
   ============================================================ */

.hero-slider .carousel-indicators {

    margin-bottom: 25px;

    z-index: 5;

    gap: 8px;
}


.hero-slider .carousel-indicators button {

    width: 30px;

    height: 4px;

    margin: 0;

    border: none;

    border-radius: 0;

    background-color: #ffffff;

    opacity: 0.5;

    transition:
        width 0.3s ease,
        opacity 0.3s ease,
        background 0.3s ease;
}


.hero-slider .carousel-indicators button.active {

    width: 50px;

    background-color: #f70746;

    opacity: 1;
}


/* ============================================================
   SLIDE ANIMATION
   ============================================================ */

.hero-slider .carousel-item {

    transition:
        transform 0.8s ease-in-out,
        opacity 0.8s ease-in-out;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .hero-slider .carousel-item {

        height: 470px;

        min-height: 470px;
    }


    .hero-title {

        font-size: 42px;

        line-height: 1.2;
    }


    .hero-description {

        font-size: 19px;

        margin-top: 18px;

        margin-bottom: 30px;
    }


    .hero-button {

        height: 55px;

        min-width: 190px;

        font-size: 14px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .hero-slider .carousel-item {

        height: 430px;

        min-height: 430px;
    }


    .hero-content {

        padding: 15px;
    }


    .hero-title {

        font-size: 32px;

        line-height: 1.22;

        letter-spacing: -0.5px;
    }


    .hero-description {

        font-size: 17px;

        line-height: 1.5;

        margin-top: 15px;

        margin-bottom: 25px;
    }


    .hero-button {

        height: 52px;

        min-width: 175px;

        padding: 0 25px;

        font-size: 13px;
    }


    /* Always show arrows on mobile */

    .hero-slider-control {

        width: 42px;

        height: 42px;

        margin-top: -21px;

        opacity: 0.8;
    }


    .carousel-control-prev {

        left: 8px;
    }


    .carousel-control-next {

        right: 8px;
    }


    .hero-slider .carousel-indicators {

        margin-bottom: 18px;
    }


    .hero-slider .carousel-indicators button {

        width: 20px;

        height: 3px;
    }


    .hero-slider .carousel-indicators button.active {

        width: 35px;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 575.98px) {

    .hero-slider .carousel-item {

        height: 400px;

        min-height: 400px;
    }


    .hero-title {

        font-size: 27px;

        line-height: 1.25;
    }


    .hero-description {

        font-size: 15px;

        margin-top: 14px;

        margin-bottom: 22px;
    }


    .hero-button {

        height: 48px;

        min-width: 160px;

        font-size: 12px;
    }

}