/* =========================================================
   GSPL HERO SLIDER
   Completely isolated hero styles
========================================================= */


/* ---------- Main Hero ---------- */

.gspl-hero {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    isolation: isolate;
    background: #111111;
}


/* ---------- Track ---------- */

.gspl-hero-track {
    position: relative;
    width: 100%;
    height: 100%;
}


/* ---------- Slide ---------- */

.gspl-hero-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    z-index: 0;

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;
}

.gspl-hero-slide-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}


/* ---------- Image ---------- */

.gspl-hero-image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;
    object-position: center center;
}


/* ---------- Overlay ---------- */

.gspl-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.55) 38%,
            rgba(0, 0, 0, 0.20) 75%,
            rgba(0, 0, 0, 0.10) 100%
        );
}


/* ---------- Content Container ---------- */

.gspl-hero-container {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1200px;

    height: 100%;

    margin: 0 auto;

    padding: 0 40px;

    display: flex;
    align-items: center;
}


/* ---------- Content ---------- */

.gspl-hero-content {
    width: 100%;
    max-width: 650px;

    margin: 0;

    padding: 0;

    color: #ffffff;
}


/* ---------- Label ---------- */

.gspl-hero-label {
    display: inline-flex;

    margin-bottom: 18px;

    padding: 7px 17px;

    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50px;

    background: rgba(255,255,255,0.08);

    color: #ffffff;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.4px;
    line-height: 1;

    white-space: nowrap;
}


/* ---------- Heading ---------- */

.gspl-hero-content h1 {
    margin: 0 0 18px;

    padding: 0;

    color: #ffffff;

    font-family: inherit;

    font-size: clamp(40px, 4.7vw, 64px);
    font-weight: 700;

    line-height: 1.03;

    letter-spacing: -1.2px;

    text-transform: none;
}


/* ---------- Description ---------- */

.gspl-hero-content p {
    width: 100%;
    max-width: 560px;

    margin: 0 0 25px;

    padding: 0;

    color: rgba(255,255,255,0.86);

    font-family: inherit;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.7;
}


/* ---------- Buttons ---------- */

.gspl-hero-actions {
    display: flex;

    align-items: center;

    gap: 13px;

    margin: 0;
    padding: 0;
}


/* ---------- Button Base ---------- */

.gspl-hero-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 150px;
    height: 44px;

    margin: 0;
    padding: 0 20px;

    border-radius: 5px;

    font-family: inherit;

    font-size: 13px;
    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}


/* ---------- Primary Button ---------- */

.gspl-hero-btn-primary {
    color: #ffffff;

    background: #c82027;

    border: 1px solid #c82027;
}

.gspl-hero-btn-primary:hover {
    color: #ffffff;

    background: #a9171d;

    border-color: #a9171d;
}


/* ---------- Secondary Button ---------- */

.gspl-hero-btn-secondary {
    color: #ffffff;

    background: rgba(0,0,0,0.15);

    border: 1px solid rgba(255,255,255,0.55);
}

.gspl-hero-btn-secondary:hover {
    color: #111111;

    background: #ffffff;

    border-color: #ffffff;
}


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

.gspl-hero-arrow {
    position: absolute;

    top: 50%;

    z-index: 5;

    width: 44px;
    height: 44px;

    margin: 0;
    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    border: 1px solid rgba(255,255,255,0.30);

    border-radius: 50%;

    background: rgba(0,0,0,0.35);

    color: #ffffff;

    font-family: Arial, sans-serif;

    font-size: 21px;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}

.gspl-hero-arrow:hover {
    background: #c82027;
    border-color: #c82027;
}

.gspl-hero-prev {
    left: 22px;
}

.gspl-hero-next {
    right: 22px;
}


/* =========================================================
   BOTTOM NAVIGATION
========================================================= */

.gspl-hero-navigation {
    position: absolute;

    left: 50%;
    bottom: 14px;

    z-index: 5;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    margin: 0;
    padding: 0;
}


/* ---------- Scroll ---------- */

.gspl-hero-scroll-text {
    margin: 0;
    padding: 0;

    color: rgba(255,255,255,0.85);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 3px;

    line-height: 1;
}


/* ---------- Dots ---------- */

.gspl-hero-dots {
    display: flex;

    align-items: center;

    gap: 6px;

    margin: 0;
    padding: 0;
}

.gspl-hero-dot {
    display: block;

    width: 8px;
    height: 8px;

    margin: 0;
    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(255,255,255,0.45);

    cursor: pointer;

    transition:
        width 0.25s ease,
        background 0.25s ease;
}

.gspl-hero-dot-active {
    width: 25px;

    border-radius: 10px;

    background: #c82027;
}


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

.gspl-hero-slide-active .gspl-hero-content {
    animation: gsplHeroContentIn 0.7s ease both;
}

@keyframes gsplHeroContentIn {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

@media (max-width: 991px) {

    .gspl-hero {
        height: 460px;
    }

    .gspl-hero-container {
        max-width: 100%;

        padding-left: 60px;
        padding-right: 60px;
    }

    .gspl-hero-content {
        max-width: 570px;
    }

    .gspl-hero-content h1 {
        font-size: clamp(36px, 6vw, 54px);
    }

    .gspl-hero-content p {
        max-width: 500px;

        font-size: 14px;
    }

    .gspl-hero-prev {
        left: 14px;
    }

    .gspl-hero-next {
        right: 14px;
    }

}


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

@media (max-width: 767px) {

    .gspl-hero {
        height: 430px;
    }

    .gspl-hero-image {
        object-position: center center;
    }

    .gspl-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,0.78) 0%,
                rgba(0,0,0,0.52) 100%
            );
    }

    .gspl-hero-container {
        padding-left: 24px;
        padding-right: 45px;
    }

    .gspl-hero-content {
        max-width: 100%;
    }

    .gspl-hero-label {
        margin-bottom: 12px;

        padding: 6px 11px;

        font-size: 7px;

        letter-spacing: 1px;
    }

    .gspl-hero-content h1 {
        margin-bottom: 12px;

        font-size: 31px;

        line-height: 1.08;

        letter-spacing: -0.5px;
    }

    .gspl-hero-content p {
        margin-bottom: 17px;

        font-size: 12px;

        line-height: 1.55;
    }

    .gspl-hero-actions {
        gap: 7px;
    }

    .gspl-hero-btn {
        min-width: 0;

        height: 39px;

        padding-left: 13px;
        padding-right: 13px;

        font-size: 10px;
    }

    .gspl-hero-arrow {
        width: 33px;
        height: 33px;

        font-size: 16px;
    }

    .gspl-hero-prev {
        left: 7px;
    }

    .gspl-hero-next {
        right: 7px;
    }

    .gspl-hero-navigation {
        bottom: 10px;
    }

}


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

@media (max-width: 480px) {

    .gspl-hero {
        height: 390px;
    }

    .gspl-hero-container {
        padding-left: 20px;
        padding-right: 38px;
    }

    .gspl-hero-content h1 {
        font-size: 27px;
    }

    .gspl-hero-content p {
        font-size: 11px;
    }

    .gspl-hero-btn {
        height: 36px;

        padding-left: 10px;
        padding-right: 10px;

        font-size: 9px;
    }

    .gspl-hero-arrow {
        width: 29px;
        height: 29px;

        font-size: 14px;
    }

    .gspl-hero-prev {
        left: 5px;
    }

    .gspl-hero-next {
        right: 5px;
    }

}