html {
    scroll-behavior: smooth; /* Global smooth scroll */
    overflow-x: hidden; /* Prevents horizontal scrollbar at root */
}

body {
    margin: 0;
    padding: 0;
    /* Removed width: 100% and overflow-x: hidden to prevent double scrollbar conflict */
}

/* === GLOBAL CUSTOM SCROLLBAR === */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 61, 62, 0.05); /* Very light track */
}

::-webkit-scrollbar-thumb {
  background: #026F2C; /* Brand green */
  border-radius: 10px;
  border: 2px solid #F7F7F7; /* Creates padding effect around the thumb */
}

::-webkit-scrollbar-thumb:hover {
  background: #014f1f; /* Darker green on hover */
}
body { font-family: "Bai Jamjuree", 'Montserrat', 'Plus Jakarta Sans', 'JetBrains mono', monospace ,sans-serif; background-color: #F7F7F7; }
.bg-main-color { background: linear-gradient(to bottom, #026F2C, #23bd60); }
.bg-brand-dark { background-color: #0F3D3E; }
.bg-brand-green { background-color: #026F2C; }
.text-brand-dark { color: #0F3D3E; }
.text-brand-green { color: #026F2C; }
.text-brand-light-green { color: #A4D0A4; }
.border-brand-green { border-color: #1A5D1A; }
.hover\:bg-brand-green-dark:hover { background-color: #014f1f; }
.navbar-gradient { background: linear-gradient(to bottom, #026F2C, #23bd60ff);}
.hero-gradient-overlay { background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);}

/* === STYLES FOR EVENT BANNERS (Softened) === */
.event-banner-border-left {
    background: linear-gradient(to right, #02772F, #04DD57);
    opacity: 0.1; /* Reduced opacity for a softer border */
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.event-banner-fill-left {
    background: linear-gradient(to right, #FFFFFF, #FEFBEB); /* New soft gradient */
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.event-banner-border-right {
    background: linear-gradient(to left, #02772F, #04DD57);
    opacity: 0.1; /* Reduced opacity */
    clip-path: polygon(0 90%, 100% 100%, 100% 0, 0 0);
}
.event-banner-fill-right {
    background: linear-gradient(to left, #FFFFFF, #FEFBEB); /* New soft gradient */
    clip-path: polygon(0 90%, 100% 100%, 100% 0, 0 0);
}
.event-card-banner-border {
    background: linear-gradient(to right, #02772F, #04DD57, #02772F);
    opacity: 0.1; /* Reduced opacity */
}
.event-card-banner-fill {
    background: linear-gradient(to right, #FFFFFF, #FEFBEB, #FFFFFF); /* New soft gradient */
}

/* === NEW STYLES FOR MEMBERS AND TESTIMONIES === */
.members-gradient-bg { background: linear-gradient(to right, #02772F, #04DD57); }
.testimonies-gradient-bg {
    background-color: #F3F4F6; /* This is Tailwind's bg-gray-100 */
}

/* === UPDATED GLASSMORPHISM EFFECT === */
.liquid-glass-card-dark {
    background: rgba(15, 61, 62, 0.25); /* Slightly more opaque background */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* For Safari */
    border: 3px solid rgba(0, 22, 9, 0.4);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Shadow for 3D effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover */
}

.liquid-glass-card-dark:hover {
    transform: translateY(-10px) scale(1.03); /* Lifts and scales the card on hover */
    box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.45); /* Enhanced shadow on hover */
}

.testimonial-card-light {
    background: #FFFFFF;
    border-radius: 0.75rem; /* 12px */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2rem; /* p-10 py-10 px-8 */
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card-light:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* === NEW STYLES FOR FOOTER AND NEWSLETTER === */
.newsletter-wrapper {
    position: relative;
    overflow: hidden;
    margin-top: -150px; /* Add this line */
}
.newsletter-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.newsletter-layer-1 {
    background: linear-gradient(to bottom, #00C94F, #006327);
    clip-path: polygon(0 0, 100% 15%, 100% 100%, 0% 100%);
    z-index: 1;
}
.newsletter-layer-2 {
    background: linear-gradient(to left, #017C31, #001609);
    opacity: 0.9;
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
    z-index: 2;
}
.newsletter-layer-3 {
    background: linear-gradient(to left, #017C31, #001609);
    opacity: 0.9;
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
    top: 5px; /* Slight offset */
    z-index: 3;
}

.member-banner {
    background: linear-gradient(to right, #02772F, #04DD57);
    position: relative;
    overflow: hidden;
    box-shadow: 0 -7px 4px 3px rgba(0, 0, 0, 0.1), 0 -5px 4px -1px rgba(0, 0, 0, 0.05);
    border-bottom: 2px solid #004d21;
}
.member-banner-bg-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: auto;
    opacity: 0.1;
    pointer-events: none;
}
#contact {
    background: linear-gradient(to right, #02772F, #04DD57);
}

/* === UTILITY FOR NESTED SCROLLBARS === */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

/* === STYLES FOR LANGUAGE TOGGLE === */
.lang-toggle {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}
.lang-toggle:hover {
    opacity: 1;
}
.lang-toggle.lang-active {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.hidden-lang {
    display: none !important;
}

/* === LANGUAGE VISIBILITY RULES === */
/* Hide the non-selected language by default */
html.lang-en [lang="id"],
html.lang-id [lang="en"] {
    display: none;
}

/* === MOBILE PERFORMANCE OPTIMIZATIONS === */
@media (max-width: 767px) {
    /* Disable AOS animations on mobile to reduce main-thread work and layout shifts */
    [data-aos] {
        transform: none !important;
        opacity: 1 !important;
        transition-duration: 0s !important;
        transition: none !important;
    }

    /* Adjust Hero height for mobile to improve LCP and TTI */
    .hero-mobile-adjust {
        height: 70vh !important;
        min-height: 500px;
    }
}