/* =========================================================
   ELH DEVELOPMENTS LTD.
   Hero / Carousel Brand System
   Brand Colors extracted from official ELH logo
========================================================= */

:root {

    /* =====================================================
       ELH BRAND COLORS
    ===================================================== */

    /* Green family - House / Leaf */
    --brand-green-light: #87C142;
    --brand-green: #55AB47;
    --brand-green-dark: #2CA149;

    /* Blue family - ELH typography */
    --brand-blue-dark: #3970B7;
    --brand-blue: #2481C4;
    --brand-blue-light: #0C99D7;

    /* Main aliases */
    --brand: #55AB47;
    --brand2: #0C99D7;

    /* Dark supporting colors */
    --brand-dark: #07130F;
    --brand-dark-green: #081A13;
    --brand-dark-blue: #071521;

    /* =====================================================
       TEXT
    ===================================================== */

    --hero-white: #ffffff;

    --hero-text:
        rgba(255, 255, 255, 0.90);

    --hero-text-soft:
        rgba(255, 255, 255, 0.72);

    /* =====================================================
       UI
    ===================================================== */

    --hero-indicator-bg:
        rgba(255, 255, 255, 0.34);

    --hero-glass-bg:
        rgba(255, 255, 255, 0.075);

    --hero-glass-bg-hover:
        rgba(255, 255, 255, 0.12);

    --hero-glass-border:
        rgba(255, 255, 255, 0.14);

    --hero-glass-border-hover:
        rgba(12, 153, 215, 0.40);

    /* =====================================================
       SHADOWS
    ===================================================== */

    --hero-shadow:
        0 20px 50px rgba(0, 0, 0, 0.28);

    --brand-green-shadow:
        0 14px 34px rgba(44, 161, 73, 0.28);

    --brand-blue-shadow:
        0 14px 34px rgba(12, 153, 215, 0.22);

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

    --hero-ease:
        cubic-bezier(0.22, 0.61, 0.36, 1);

    --hero-time-fast: 0.35s;
    --hero-time: 0.8s;
    --hero-fade-time: 1.1s;
    --hero-zoom-time: 7.5s;

    --hero-radius: 18px;
}


/* =========================================================
   GLOBAL
========================================================= */

html {
    scroll-behavior: smooth;
}


/* =========================================================
   HERO SECTION
========================================================= */

.hero-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--brand-dark) 0%,
            var(--brand-dark-green) 45%,
            var(--brand-dark-blue) 100%
        );

    margin-top: -60px !important;
    padding-bottom: 0 !important;
}


.hero-section .carousel,
.hero-section .carousel-inner,
.hero-section .carousel-item {
    min-height: 100vh;
    min-height: 100svh;
}


.hero-section .carousel-item {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   HERO BACKGROUND
========================================================= */

.hero-bg {
    position: absolute;
    inset: 0;

    z-index: 1;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform: scale(1.05);

    will-change: transform;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* =========================================================
   BRAND OVERLAY
========================================================= */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        /* Soft dark readability layer */
        linear-gradient(
            90deg,
            rgba(5, 12, 10, 0.52) 0%,
            rgba(6, 16, 16, 0.38) 48%,
            rgba(8, 20, 24, 0.14) 100%
        ),

            /* Very subtle ELH brand tint */
        linear-gradient(
            135deg,
            rgba(135, 193, 66, 0.055) 0%,
            rgba(85, 171, 71, 0.040) 38%,
            rgba(36, 129, 196, 0.035) 68%,
            rgba(12, 153, 215, 0.050) 100%
        ),

            /* Soft bottom depth */
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.015) 0%,
            rgba(0, 0, 0, 0.16) 100%
        );
}


/* Soft ELH brand glow */

.hero-overlay::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -220px;
    bottom: -280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(85, 171, 71, 0.18) 0%,
            rgba(44, 161, 73, 0.08) 38%,
            transparent 72%
        );

    filter: blur(6px);

    pointer-events: none;
}


.hero-overlay::after {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -240px;
    top: -240px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(12, 153, 215, 0.17) 0%,
            rgba(36, 129, 196, 0.07) 40%,
            transparent 72%
        );

    pointer-events: none;
}


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

.hero-slide-inner {
    position: relative;

    z-index: 3;

    min-height: 100vh;
    min-height: 100svh;
}


.hero-slide-inner .container,
.hero-slide-inner .row {
    min-height: 100vh;
    min-height: 100svh;
}


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

.hero-content {
    position: relative;

    padding: 100px 0 60px;

    color: var(--hero-white);
}


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

.hero-title {
    margin: 0 0 18px;

    color: var(--hero-white);

    font-family: "TOP LUXURY", serif;

    font-size:
        clamp(2.4rem, 4.5vw, 4.5rem);

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -0.01em;

    text-wrap: balance;

    text-shadow:
        0 4px 14px rgba(0, 0, 0, 0.50),
        0 8px 30px rgba(0, 0, 0, 0.30);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


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

.hero-text {
    max-width: 620px;

    margin: 0 0 28px;

    color: var(--hero-text);

    font-size: 1.05rem;

    line-height: 1.8;

    text-wrap: pretty;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.32);
}


/* =========================================================
   ACTIONS
========================================================= */

.hero-actions {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px;
}


/* =========================================================
   BUTTON BASE
========================================================= */

.hero-btn-primary,
.hero-btn-secondary {

    position: relative;

    display: inline-flex;

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

    gap: 8px;

    min-height: 50px;

    padding: 13px 28px;

    overflow: hidden;

    border-radius: 999px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.2;

    white-space: nowrap;

    cursor: pointer;

    transition:
        transform var(--hero-time-fast) var(--hero-ease),
        background var(--hero-time-fast) var(--hero-ease),
        color var(--hero-time-fast) var(--hero-ease),
        border-color var(--hero-time-fast) var(--hero-ease),
        box-shadow var(--hero-time-fast) var(--hero-ease),
        opacity var(--hero-time-fast) var(--hero-ease);

    will-change: transform;
}


/* =========================================================
   PRIMARY BUTTON
   ELH GREEN BRAND
========================================================= */

.hero-btn-primary {

    background:
        linear-gradient(
            135deg,
            var(--brand-green-light) 0%,
            var(--brand-green) 48%,
            var(--brand-green-dark) 100%
        );

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

    color: var(--hero-white);

    box-shadow:
        0 10px 30px rgba(44, 161, 73, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}


/* Button light sweep */

.hero-btn-primary::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: -80%;

    width: 55%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.24),
            transparent
        );

    transform: skewX(-20deg);

    transition:
        left 0.65s var(--hero-ease);

    pointer-events: none;
}


.hero-btn-primary:hover {
    background:
        linear-gradient(
            135deg,
            #94CD46 0%,
            var(--brand-green) 42%,
            #219847 100%
        );

    border-color:
        rgba(255, 255, 255, 0.16);

    color:
        var(--hero-white);

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 38px rgba(44, 161, 73, 0.36),
        0 4px 14px rgba(0, 0, 0, 0.18);
}


.hero-btn-primary:hover::before {
    left: 135%;
}


.hero-btn-primary:active {
    transform:
        translateY(0);
}


/* =========================================================
   SECONDARY BUTTON
   ELH BLUE ACCENT
========================================================= */

.hero-btn-secondary {

    background:
        linear-gradient(
            135deg,
            rgba(57, 112, 183, 0.15),
            rgba(12, 153, 215, 0.10)
        );

    border:
        1px solid rgba(12, 153, 215, 0.45);

    color:
        var(--hero-white);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


.hero-btn-secondary:hover {

    background:
        linear-gradient(
            135deg,
            rgba(57, 112, 183, 0.42),
            rgba(12, 153, 215, 0.32)
        );

    border-color:
        rgba(12, 153, 215, 0.80);

    color:
        var(--hero-white);

    transform:
        translateY(-2px);

    box-shadow:
        var(--brand-blue-shadow);
}


.hero-btn-secondary:active {
    transform:
        translateY(0);
}


/* =========================================================
   BUTTON ACCESSIBILITY
========================================================= */

.hero-btn-primary:focus-visible,
.hero-btn-secondary:focus-visible {

    outline:
        3px solid rgba(255, 255, 255, 0.90);

    outline-offset:
        4px;
}


/* =========================================================
   RIGHT META BOX
========================================================= */

.hero-glass-meta {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(110px, 1fr));

    gap: 14px;

    width: 100%;

    margin-bottom: 48px;

    padding: 12px;
}


/* =========================================================
   META ITEMS
========================================================= */

.hero-glass-meta > a {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding: 14px 16px;

    color: #ffffff;

    text-decoration: none;

    border-radius:
        var(--hero-radius);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.095),
            rgba(255, 255, 255, 0.045)
        );

    border:
        1px solid var(--hero-glass-border);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        var(--hero-shadow);

    transition:
        transform var(--hero-time-fast) var(--hero-ease),
        background var(--hero-time-fast) var(--hero-ease),
        border-color var(--hero-time-fast) var(--hero-ease),
        box-shadow var(--hero-time-fast) var(--hero-ease),
        opacity var(--hero-time-fast) var(--hero-ease);

    will-change:
        transform;
}


.hero-glass-meta > a:hover {

    transform:
        translateY(-3px);

    background:
        linear-gradient(
            145deg,
            rgba(85, 171, 71, 0.14),
            rgba(12, 153, 215, 0.10)
        );

    border-color:
        var(--hero-glass-border-hover);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(12, 153, 215, 0.05);
}


/* =========================================================
   META SHINE
========================================================= */

.hero-glass-meta > a::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    border-radius: inherit;

    background:
        linear-gradient(
            135deg,
            rgba(135, 193, 66, 0.08),
            transparent 42%,
            rgba(12, 153, 215, 0.08)
        );

    opacity: 0;

    transition:
        opacity var(--hero-time-fast) var(--hero-ease);
}


.hero-glass-meta > a::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, 0.14),
            transparent 58%
        );

    opacity: 0;

    transition:
        opacity var(--hero-time-fast) var(--hero-ease);
}


.hero-glass-meta > a:hover::before,
.hero-glass-meta > a:hover::after {
    opacity: 1;
}


/* =========================================================
   META LABEL
========================================================= */

.hero-glass-meta span {

    display: block;

    margin-bottom: 4px;

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

    font-size:
        0.72rem;

    font-weight:
        700;

    line-height:
        1.5;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* =========================================================
   META VALUE
========================================================= */

.hero-glass-meta strong {

    display: block;

    color:
        #ffffff;

    font-size:
        1rem;

    font-weight:
        700;

    line-height:
        1.45;

    word-break:
        break-word;
}


/* =========================================================
   META ACCESSIBILITY
========================================================= */

.hero-glass-meta > a:focus-visible {

    outline:
        2px solid var(--brand-blue-light);

    outline-offset:
        3px;
}


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

.hero-indicators {

    bottom: 24px;

    margin-bottom: 0;

    z-index: 6;
}


.hero-indicators [data-bs-target] {

    width: 12px;

    height: 12px;

    margin: 0 6px;

    border: 0;

    border-radius: 999px;

    background:
        var(--hero-indicator-bg);

    opacity: 1;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.18);

    transition:
        width var(--hero-time-fast) var(--hero-ease),
        background var(--hero-time-fast) var(--hero-ease),
        transform var(--hero-time-fast) var(--hero-ease),
        box-shadow var(--hero-time-fast) var(--hero-ease),
        opacity var(--hero-time-fast) var(--hero-ease);
}


.hero-indicators [data-bs-target]:hover {
    transform:
        scale(1.08);
}


/* Active indicator follows complete ELH brand */

.hero-indicators .active {

    width: 34px;

    background:
        linear-gradient(
            90deg,
            var(--brand-green-light) 0%,
            var(--brand-green) 32%,
            var(--brand-green-dark) 52%,
            var(--brand-blue) 76%,
            var(--brand-blue-light) 100%
        );

    box-shadow:
        0 5px 14px rgba(12, 153, 215, 0.22);
}


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

.hero-animate {

    opacity: 0;

    transform:
        translate3d(0, 28px, 0);

    will-change:
        transform,
        opacity;
}


.carousel-item.active .hero-animate {

    animation:
        heroFadeSlide
        0.9s
        var(--hero-ease)
        forwards;
}


.carousel-item.active .hero-animate-1 {
    animation-delay: 0.20s;
}


.carousel-item.active .hero-animate-2 {
    animation-delay: 0.40s;
}


.carousel-item.active .hero-animate-3 {
    animation-delay: 0.60s;
}


/* =========================================================
   BACKGROUND ZOOM
========================================================= */

.carousel-item.active .hero-bg {

    animation:
        heroZoom
        var(--hero-zoom-time)
        var(--hero-ease)
        forwards;
}


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

.carousel-fade .carousel-item {

    opacity: 0;

    transition:
        opacity
        var(--hero-fade-time)
        var(--hero-ease);
}


.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {

    opacity: 1;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes heroFadeSlide {

    from {
        opacity: 0;

        transform:
            translate3d(0, 28px, 0);
    }

    to {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);
    }
}


@keyframes heroZoom {

    from {
        transform:
            scale(1.08);
    }

    to {
        transform:
            scale(1);
    }
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .hero-content {
        padding:
            110px 0 60px;
    }


    .hero-title {
        font-size:
            clamp(3.5rem, 4.8vw, 4.4rem);
    }


    .hero-text {
        font-size:
            1.1rem;
    }

}


/* =========================================================
   DESKTOP / SMALL LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .hero-content {
        padding:
            95px 0 80px;
    }


    .hero-title {
        font-size:
            clamp(2.4rem, 5vw, 4rem);
    }

}


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

@media (max-width: 991.98px) {

    .hero-section .carousel,
    .hero-section .carousel-inner,
    .hero-section .carousel-item,
    .hero-slide-inner,
    .hero-slide-inner .container,
    .hero-slide-inner .row {

        min-height:
            88vh;

        min-height:
            88svh;
    }


    .hero-overlay {

        background:

            linear-gradient(
                180deg,
                rgba(3, 13, 11, 0.84) 0%,
                rgba(4, 22, 23, 0.66) 54%,
                rgba(4, 27, 32, 0.50) 100%
            ),

            linear-gradient(
                145deg,
                rgba(85, 171, 71, 0.13) 0%,
                rgba(44, 161, 73, 0.06) 48%,
                rgba(12, 153, 215, 0.11) 100%
            );
    }


    .hero-content {

        max-width: 100%;

        padding:
            110px 0 60px;
    }


    .hero-title {

        font-size:
            clamp(2.1rem, 6vw, 3.3rem);
    }


    .hero-text {

        max-width:
            100%;

        font-size:
            1rem;
    }


    .hero-btn-primary,
    .hero-btn-secondary {

        padding:
            12px 24px;

        font-size:
            14px;
    }


    .hero-indicators {
        bottom: 20px;
    }

}


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

@media (max-width: 767.98px) {

    .hero-section .carousel,
    .hero-section .carousel-inner,
    .hero-section .carousel-item,
    .hero-slide-inner,
    .hero-slide-inner .container,
    .hero-slide-inner .row {

        min-height:
            100vh;

        min-height:
            100svh;
    }


    .hero-content {

        margin:
            0 auto;

        padding:
            110px 0 60px;

        text-align:
            center;
    }


    .hero-title {

        margin-bottom:
            16px;

        font-size:
            clamp(1.9rem, 8vw, 2.8rem);

        line-height:
            1.14;
    }


    .hero-text {

        margin:
            0 auto 24px;

        font-size:
            0.96rem;

        line-height:
            1.75;
    }


    .hero-actions {

        justify-content:
            center;

        gap:
            10px;
    }


    .hero-btn-primary,
    .hero-btn-secondary {

        width:
            100%;

        max-width:
            280px;

        min-height:
            48px;
    }


    .hero-indicators {
        bottom: 16px;
    }


    .hero-indicators [data-bs-target] {

        width:
            10px;

        height:
            10px;

        margin:
            0 5px;
    }


    .hero-indicators .active {
        width: 28px;
    }

}


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

@media (max-width: 575.98px) {

    .hero-content {

        padding:
            100px 0 60px;
    }


    .hero-title {

        font-size:
            clamp(1.7rem, 9vw, 2.35rem);
    }


    .hero-text {

        margin-bottom:
            20px;

        font-size:
            0.92rem;

        line-height:
            1.7;
    }


    .hero-btn-primary,
    .hero-btn-secondary {

        max-width:
            100%;

        padding:
            12px 18px;

        font-size:
            14px;
    }


    .hero-glass-meta {

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            10px;

        margin-bottom:
            28px;

        padding:
            6px;
    }


    .hero-glass-meta > a {

        padding:
            12px;
    }


    .hero-glass-meta strong {

        font-size:
            0.9rem;
    }

}


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

@media (max-width: 399.98px) {

    .hero-content {

        padding:
            92px 0 60px;
    }


    .hero-title {

        font-size:
            1.55rem;

        line-height:
            1.2;
    }


    .hero-text {

        font-size:
            0.88rem;
    }


    .hero-btn-primary,
    .hero-btn-secondary {

        min-height:
            46px;

        padding:
            11px 16px;

        font-size:
            13px;
    }


    .hero-glass-meta {

        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   SHORT SCREEN
========================================================= */

@media (max-height: 700px) and (min-width: 768px) {

    .hero-section .carousel,
    .hero-section .carousel-inner,
    .hero-section .carousel-item,
    .hero-slide-inner,
    .hero-slide-inner .container,
    .hero-slide-inner .row {

        min-height:
            760px;
    }


    .hero-content {

        padding:
            80px 0 60px;
    }

}


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

@media (max-width: 991.98px) and (orientation: landscape) {

    .hero-section .carousel,
    .hero-section .carousel-inner,
    .hero-section .carousel-item,
    .hero-slide-inner,
    .hero-slide-inner .container,
    .hero-slide-inner .row {

        min-height:
            640px;
    }


    .hero-content {

        padding:
            90px 0 60px;
    }


    .hero-title {

        font-size:
            clamp(1.9rem, 4vw, 2.8rem);
    }


    .hero-text {

        font-size:
            0.95rem;
    }

}


/* =========================================================
   REDUCED MOTION / ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    .hero-bg,
    .hero-animate,
    .hero-btn-primary,
    .hero-btn-secondary,
    .hero-glass-meta > a,
    .hero-glass-meta > a::before,
    .hero-glass-meta > a::after,
    .hero-indicators [data-bs-target] {

        animation:
            none !important;

        transition:
            none !important;

        transform:
            none !important;
    }

}