/* index-only overrides — only loaded by index.html
   Use this for homepage-specific styles so other pages are unaffected */

/* Ensure hero accents use the primary brand color */
.hero-tag .dot {
    background: #1f6f4f !important;
    box-shadow: 0 0 0 4px rgba(31, 111, 79, .22) !important
}

.hero h1 em {
    color: #5DB2D7 !important
}

.hero .btn-watch:hover {
    background: #ffffff !important;
    color: #1f6f4f !important
}

/* Fix: ensure WhatsApp button in hero keeps solid background on hover */
.hero .btn-wa {
    background: #25b35e !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px -14px rgba(37, 179, 94, .7) !important
}

.hero .btn-wa:hover {
    background: #1faf54 !important;
    transform: translateY(-3px) scale(1.01) !important
}

/* Thin wave divider tuning for homepage only */
.hero .wave-bottom {
    height: 120px;
    bottom: -20px
}

.hero .wave-bottom svg {
    height: 120px
}

/* Force the wave SVG fill to white so the divider matches the site's white section */
.hero .wave-bottom svg path {
    fill: #ffffff !important
}

/* Ensure the section immediately after the hero is visually white */
.features-area {
    background-color: #ffffff !important
}

/* Add a 25% neutral black tint to the hero background on desktop only; no tint on mobile */
.hero::after {
    background: none !important;
}

@media only screen and (min-width: 992px) {
    .hero::after {
        background: rgba(0, 0, 0, 0.25) !important;
    }
}

/* Reduce hero height and inner padding on homepage only */
.hero {
    min-height: 65svh !important;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.hero-inner {
    padding-block: 60px 110px !important;
    padding-left: 18px;
    padding-right: 18px
}

.hero .wave-bottom {
    height: 120px !important
}

.hero .sub {
    margin-bottom: 1.5rem !important
}

/* Keep hero CTAs on a single line on desktop; allow wrap on small screens */
.hero-ctas {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    justify-content: center;
    align-items: center;
    overflow: visible
}

.hero-ctas .btn {
    white-space: nowrap
}

@media (max-width:767.98px) {
    .hero {
        min-height: 100svh !important;
        height: 100svh !important;
    }

    .hero-bg {
        height: 100% !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: -1 !important;
    }

    .hero-bg img {
        height: 100% !important;
        width: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .hero-inner {
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
    }

    .hero-ctas {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto !important;
    }

    .hero-ctas .btn {
        justify-content: center !important;
        text-align: center !important;
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
        white-space: nowrap !important;
    }

    .hero .sub {
        margin-bottom: 1.2rem !important;
    }

    .hero-inner {
        padding-block: 40px 90px !important;
    }
}

/* Homepage-only: transparent navbar at top, solid on scroll (sticky) */
.navbar-area .main-nav {
    background: transparent !important;
    box-shadow: none !important;
    transition: background .28s ease, box-shadow .28s ease
}

.navbar-area .main-nav .navbar-brand .brand-name {}

.navbar-area .main-nav .navbar-nav .nav-link {}

.navbar-area .main-nav .nav-btn .default-btn {
    box-shadow: none
}

/* When sticky (added by site JS), restore default sticky styles and dark text */
.navbar-area.sticky-nav .main-nav {
    background: #ffffff !important;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08) !important
}

.navbar-area.sticky-nav .main-nav .navbar-brand .brand-name {
    color: #000000 !important
}

.navbar-area.sticky-nav .main-nav .navbar-nav .nav-link {
    color: #333333 !important
}

.navbar-area.sticky-nav .main-nav .navbar-nav .nav-link.active {
    color: #ffffff !important
}

.navbar-area.sticky-nav .main-nav .nav-btn .default-btn {
    box-shadow: var(--shadow-coral)
}