/* ==========================================================
   WESTERFUN - HERO.CSS
   Complete fixed professional version
========================================================== */


/* ==========================================================
   1. HERO
========================================================== */

.hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 680px;
    height: calc(100vh - 126px);
    max-height: 850px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #0b4f2d;
    color: #ffffff;
}


/* ==========================================================
   2. BACKGROUND IMAGE
========================================================== */

.hero-image {
    position: absolute;
    z-index: -3;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 55% center;

    transform: scale(1.015);

    animation: heroImageZoom 12s ease-out forwards;
}


@keyframes heroImageZoom {

    from {
        transform: scale(1.055);
    }

    to {
        transform: scale(1.015);
    }

}


/* ==========================================================
   3. DARK GREEN OVERLAY
========================================================== */

.hero-overlay {
    position: absolute;
    z-index: -2;

    inset: 0;

    background:

        linear-gradient(90deg,
            rgba(5, 45, 24, 0.96) 0%,
            rgba(5, 45, 24, 0.92) 18%,
            rgba(5, 45, 24, 0.80) 38%,
            rgba(5, 45, 24, 0.52) 58%,
            rgba(5, 45, 24, 0.22) 78%,
            rgba(5, 45, 24, 0.08) 100%),

        linear-gradient(180deg,
            rgba(0, 0, 0, 0.08) 0%,
            transparent 50%,
            rgba(3, 30, 15, 0.30) 100%);
}


/* ==========================================================
   4. SOFT GREEN GLOW
========================================================== */

.hero::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 50%;
    left: -250px;

    width: 650px;
    height: 650px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: rgba(123, 195, 54, 0.10);

    filter: blur(100px);

    pointer-events: none;
}


/* ==========================================================
   5. HERO CONTENT
   IMPORTANT: THIS FIXES THE LEFT SIDE
========================================================== */

.hero .hero-content {
    position: relative;
    z-index: 5;

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

    margin-left: auto !important;
    margin-right: auto !important;

    /*
       IMPORTANT:
       We do NOT rely on .container here.
    */
    padding-left: 80px !important;
    padding-right: 80px !important;
    padding-top: 35px;
    padding-bottom: 90px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr) minmax(330px, 0.9fr);

    align-items: center;

    gap: clamp(50px, 6vw, 100px);

    box-sizing: border-box;
}


/* ==========================================================
   6. LEFT SIDE
========================================================== */

.hero .hero-left {
    position: relative;

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

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    animation: heroTextIn 0.7s ease-out both;
}


@keyframes heroTextIn {

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

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

}


/* ==========================================================
   7. WELCOME BADGE
========================================================== */

.hero-tag {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin: 0 0 20px 0;

    padding: 9px 15px;

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

    border-radius: 999px;

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

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

    color: #ffffff;

    font-size: 12px;
    line-height: 1;

    font-weight: 700;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 8px 25px rgba(0, 0, 0, 0.10);
}


.hero-tag span {
    font-size: 14px;
}


/* ==========================================================
   8. TITLE
========================================================== */

.hero .hero-left h1 {
    width: 100%;
    max-width: 620px;

    margin: 0 0 20px 0 !important;
    padding: 0 !important;

    color: #ffffff;

    font-size: clamp(45px, 4.1vw, 64px);

    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -2.5px;

    text-align: left;

    text-shadow:
        0 5px 25px rgba(0, 0, 0, 0.18);
}


.hero .hero-left h1 span {
    display: block;

    color: #91cf3b;
}


/* ==========================================================
   9. DESCRIPTION
========================================================== */

.hero-description {
    width: 100%;
    max-width: 520px;

    margin: 0 0 23px 0;

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

    font-size: 15px;

    line-height: 1.65;

    font-weight: 400;
}


/* ==========================================================
   10. BENEFITS
========================================================== */

.hero-benefits {
    width: 100%;
    max-width: 520px;

    display: grid;

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

    column-gap: 28px;
    row-gap: 10px;

    margin: 0 0 28px 0;
}


.hero-benefit {
    display: flex;
    align-items: center;

    gap: 8px;

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

    font-size: 11.5px;

    line-height: 1.4;

    font-weight: 600;
}


.benefit-check {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            #8ed33d,
            #55aa22);

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    box-shadow:
        0 5px 14px rgba(76, 164, 32, 0.30);
}


/* ==========================================================
   11. BUTTON CONTAINER
========================================================== */

.hero-buttons {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 0;
    padding: 0;
}


/* ==========================================================
   12. HERO BUTTON
========================================================== */

.hero-btn {
    position: relative;

    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 18px;

    overflow: hidden;

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

    border-radius: 10px;

    color: #ffffff;

    text-decoration: none;

    font-size: 10px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.15px;

    text-transform: uppercase;

    box-shadow:
        0 9px 22px rgba(0, 0, 0, 0.17);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}


/* shine */

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

    position: absolute;

    top: -50px;
    left: -90px;

    width: 45px;
    height: 150px;

    transform: rotate(25deg);

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

    transition: left 0.5s ease;
}


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


.hero-btn:hover {
    transform: translateY(-3px);

    filter: brightness(1.05);

    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.23);
}


.hero-btn span {
    position: relative;
    z-index: 2;

    font-size: 14px;
}


/* ==========================================================
   13. GREEN BUTTON
========================================================== */

.hero-btn-green {
    background:
        linear-gradient(135deg,
            #6bbe2d 0%,
            #489c1e 100%);
}


/* ==========================================================
   14. ORANGE BUTTON
========================================================== */

.hero-btn-orange {
    background:
        linear-gradient(135deg,
            #ff971b 0%,
            #f47400 100%);
}


/* ==========================================================
   15. PINK BUTTON
========================================================== */

.hero-btn-pink {
    background:
        linear-gradient(135deg,
            #ec4d82 0%,
            #d8326c 100%);
}


/* ==========================================================
   16. RIGHT SIDE
========================================================== */

.hero-right {
    position: relative;

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

    min-height: 440px;

    justify-self: end;
}


/* ==========================================================
   17. FLOATING CARDS
========================================================== */

.hero-floating-card {
    position: absolute;

    width: 255px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 14px 16px;

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

    border-radius: 17px;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.20),
            rgba(255, 255, 255, 0.10));

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

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        0 17px 40px rgba(0, 0, 0, 0.18);

    animation:
        heroFloating 4.5s ease-in-out infinite;
}


.hero-floating-card strong {
    display: block;

    margin-bottom: 3px;

    color: #ffffff;

    font-size: 13px;

    line-height: 1.3;

    font-weight: 700;
}


.hero-floating-card .floating-text>span {
    display: block;

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

    font-size: 11px;

    line-height: 1.4;
}


/* ==========================================================
   18. FLOATING ICONS
========================================================== */

.floating-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border-radius: 13px;

    background:
        linear-gradient(135deg,
            #ff9c20,
            #f27000);

    font-size: 21px;

    box-shadow:
        0 8px 20px rgba(255, 122, 0, 0.28);
}


.floating-icon.blue {
    background:
        linear-gradient(135deg,
            #26b7e9,
            #0e8bc7);

    box-shadow:
        0 8px 20px rgba(15, 150, 210, 0.28);
}


/* ==========================================================
   19. CARD POSITIONS
========================================================== */

.card-play {
    top: 25px;
    right: 10px;
}


.card-water {
    right: 35px;
    bottom: 20px;

    animation-delay: -2s;
}


@keyframes heroFloating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

}


/* ==========================================================
   20. REVIEW CARD
========================================================== */

.hero-review {
    position: absolute;

    top: 50%;
    right: 10px;

    width: 270px;

    padding: 23px;

    transform: translateY(-50%);

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

    border-radius: 20px;

    background:
        linear-gradient(145deg,
            rgba(7, 59, 31, 0.68),
            rgba(4, 38, 20, 0.50));

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

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        0 20px 50px rgba(0, 0, 0, 0.20);
}


.review-stars {
    margin-bottom: 10px;

    color: #ffc544;

    font-size: 16px;

    line-height: 1;

    letter-spacing: 2px;
}


.review-score {
    margin-bottom: 7px;

    color: #ffffff;

    font-size: 43px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -2px;
}


.hero-review strong {
    display: block;

    margin-bottom: 6px;

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;
}


.hero-review p {
    max-width: 210px;

    margin: 0;

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

    font-size: 10.5px;

    line-height: 1.6;
}


/* ==========================================================
   21. BOTTOM WAVE
========================================================== */

.hero-wave {
    position: absolute;
    z-index: 10;

    left: -2px;
    right: -2px;
    bottom: -1px;

    width: calc(100% + 4px);
    height: 48px;

    overflow: hidden;

    pointer-events: none;
}


.hero-wave svg {
    display: block;

    width: 100%;
    height: 100%;
}


/* ==========================================================
   22. REMOVE OLD SCROLL ELEMENT
========================================================== */

.hero-scroll {
    display: none !important;
}


/* ==========================================================
   23. LARGE DESKTOP
========================================================== */

@media (min-width: 1500px) {

    .hero .hero-content {
        max-width: 1500px;

        padding-left: 100px !important;
        padding-right: 100px !important;

        gap: 110px;
    }

    .hero .hero-left {
        max-width: 650px;
    }

    .hero .hero-left h1 {
        max-width: 650px;

        font-size: 67px;
    }

}


/* ==========================================================
   24. NORMAL DESKTOP / LAPTOP
========================================================== */

@media (max-width: 1300px) {

    .hero .hero-content {
        padding-left: 60px !important;
        padding-right: 60px !important;

        gap: 50px;
    }

    .hero .hero-left {
        max-width: 580px;
    }

    .hero .hero-left h1 {
        max-width: 580px;

        font-size: clamp(44px, 4.5vw, 59px);
    }

    .hero-right {
        max-width: 330px;
    }

}


/* ==========================================================
   25. SMALL LAPTOP
========================================================== */

@media (max-width: 1100px) {

    .hero {
        min-height: 660px;
    }

    .hero .hero-content {
        padding-left: 45px !important;
        padding-right: 45px !important;

        grid-template-columns:
            minmax(0, 1fr) 280px;

        gap: 35px;
    }

    .hero .hero-left {
        max-width: 540px;
    }

    .hero .hero-left h1 {
        max-width: 540px;

        font-size: 52px;
    }

    .hero-right {
        max-width: 280px;

        min-height: 410px;
    }

    .hero-floating-card {
        width: 230px;
    }

    .hero-review {
        width: 240px;
    }

}


/* ==========================================================
   26. TABLET
========================================================== */

@media (max-width: 900px) {

    .hero {
        height: auto;
        min-height: 690px;
    }

    .hero-image {
        object-position: 62% center;
    }

    .hero-overlay {
        background:
            linear-gradient(90deg,
                rgba(5, 45, 24, 0.96) 0%,
                rgba(5, 45, 24, 0.88) 55%,
                rgba(5, 45, 24, 0.58) 100%);
    }

    .hero .hero-content {
        display: block;

        max-width: none;

        padding-left: 40px !important;
        padding-right: 40px !important;
        padding-top: 65px;
        padding-bottom: 100px;
    }

    .hero .hero-left {
        max-width: 610px;
    }

    .hero .hero-left h1 {
        max-width: 600px;

        font-size: clamp(45px, 8vw, 60px);
    }

    .hero-right {
        display: none;
    }

}


/* ==========================================================
   27. MOBILE
========================================================== */

@media (max-width: 650px) {

    .hero {
        min-height: 700px;
    }

    .hero-image {
        object-position: 65% center;
    }

    .hero-overlay {
        background:
            linear-gradient(90deg,
                rgba(5, 45, 24, 0.97) 0%,
                rgba(5, 45, 24, 0.89) 60%,
                rgba(5, 45, 24, 0.70) 100%);
    }

    .hero .hero-content {
        padding-left: 24px !important;
        padding-right: 24px !important;
        padding-top: 48px;
        padding-bottom: 78px;
    }

    .hero-tag {
        margin-bottom: 16px;

        padding: 8px 12px;

        font-size: 10px;
    }

    .hero .hero-left h1 {
        margin-bottom: 16px !important;

        font-size: clamp(39px, 11vw, 47px);

        line-height: 1.02;

        letter-spacing: -1.8px;
    }

    .hero-description {
        max-width: 95%;

        margin-bottom: 20px;

        font-size: 13.5px;

        line-height: 1.6;
    }

    .hero-benefits {
        grid-template-columns: 1fr;

        gap: 8px;

        margin-bottom: 23px;
    }

    .hero-benefit {
        font-size: 11px;
    }

    .hero-buttons {
        display: grid;

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

        gap: 8px;
    }

    .hero-btn {
        width: 100%;

        min-height: 48px;

        padding: 0 10px;

        font-size: 9px;
    }

    .hero-btn-pink {
        grid-column: 1 / -1;
    }

    .hero-wave {
        height: 35px;
    }

}


/* ==========================================================
   28. VERY SMALL MOBILE
========================================================== */

@media (max-width: 430px) {

    .hero .hero-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .hero .hero-left h1 {
        font-size: 38px;
    }

    .hero-buttons {
        grid-template-columns: 1fr;
    }

    .hero-btn-pink {
        grid-column: auto;
    }

}


/* ==========================================================
   29. ACCESSIBILITY
========================================================== */

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

    .hero-image,
    .hero-left,
    .hero-floating-card {
        animation: none !important;
    }

    .hero-btn {
        transition: none;
    }

}