/* ========================= */
/* ADVANCED PREMIUM EFFECTS */
/* ========================= */

/* FLOATING LEAVES */

.leaf {
    position: absolute;
    width: 40px;
    animation: floatLeaf 10s linear infinite;
    opacity: 0.7;
}

.leaf1 {
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.leaf2 {
    top: 40%;
    right: 8%;
    animation-delay: 2s;
}

.leaf3 {
    bottom: 15%;
    left: 15%;
    animation-delay: 4s;
}

@keyframes floatLeaf {

    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-40px) rotate(20deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }

}

/* HERO ANIMATION */

.hero-content {
    animation: fadeUp 1.5s ease;
}

@keyframes fadeUp {

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

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

}

/* GLOW EFFECT */

.hero h1 {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

/* SCROLL BAR */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #1b5e20;
    border-radius: 20px;
}

/* SECTION REVEAL */

.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: 1s;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* GALLERY HOVER */

.gallery-grid img {
    position: relative;
    overflow: hidden;
}

.gallery-grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* BENEFIT CARD ICON STYLE */

.benefit-card::before {
    content: "🌿";
    display: block;
    font-size: 35px;
    margin-bottom: 15px;
}

/* TRUST CARD */

.trust-card {
    position: relative;
    overflow: hidden;
}

.trust-card::after {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background: rgba(27, 94, 32, 0.04);
    top: -100%;
    left: -100%;
    transform: rotate(25deg);
    transition: 0.6s;
}

.trust-card:hover::after {
    top: 0;
    left: 0;
}

/* PRODUCT IMAGE GLOW */

.product-img {
    position: relative;
}

.product-img::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(#2e7d32aa, transparent);
    filter: blur(40px);
    z-index: -1;
}

/* BUTTON EFFECT */

.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    left: 0;
    top: 0;
    transition: 0.5s;
}

.btn:hover::before {
    width: 100%;
}

/* PARALLAX EFFECT */

.hero {
    background-attachment: scroll;
}

/* GLASS EFFECT */

nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* TITLE UNDERLINE */

.section-title h2::after {
    content: "";
    display: block;
    width: 120px;
    height: 5px;
    background: linear-gradient(to right, #1b5e20, #d4af37);
    margin: 15px auto;
    border-radius: 20px;
}

/* CONTACT GLOW */

.contact-box {
    box-shadow: 0 15px 40px rgba(27, 94, 32, 0.3);
}

/* FOOTER */

footer {
    position: relative;
}

footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(to right, #1b5e20, #d4af37);
}

/* MOBILE MENU */

.menu-toggle {
    display: none;
    font-size: 30px;
    cursor: pointer;
}

@media(max-width:900px) {

    .menu-toggle {
        display: block;
    }

    nav ul {
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        width: 100%;
        flex-direction: column;
        padding: 30px;
        display: none;
    }

    nav ul.active {
        display: flex;
    }

}

/* LOADING SCREEN */

.loader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: white;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loader h1 {
    color: #1b5e20;
    margin-top: 20px;
    font-size: 30px;
}

.spinner {
    width: 70px;
    height: 70px;
    border: 7px solid #ddd;
    border-top: 7px solid #1b5e20;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {

    100% {
        transform: rotate(360deg);
    }

}

/* DARK MODE */

.dark-mode {
    background: #121212;
    color: white;
}

body.dark-mode,
.dark-mode .awards-section,
.dark-mode .posters-section,
.dark-mode .world-map-section {
    background: #151515;
}

.dark-mode .trust,
.dark-mode .product,
.dark-mode .contact {
    background: #1a1a1a;
}

.dark-mode .benefits,
.dark-mode .gallery {
    background: #202020;
}

.dark-mode .trust-card,
.dark-mode .benefit-card,
.dark-mode .feature-card,
.dark-mode .award-card,
.dark-mode .world-map-card,
.dark-mode .region-detail,
.dark-mode .product-info-card,
.dark-mode .review-proof {
    background: #262626;
    color: white;
}

.dark-mode nav {
    background: rgba(0, 0, 0, 0.7);
}

.dark-mode .section-title p,
.dark-mode .product-content p,
.dark-mode .founder-content p,
.dark-mode .section-header p,
.dark-mode .world-map-info p,
.dark-mode .world-map-info ul,
.dark-mode .product-info-card p,
.dark-mode .review-proof p {
     color: #ccc;
 }

.dark-mode nav ul {
    background: #181818;
}

.dark-mode nav ul li a,
.dark-mode .world-map-info h3,
.dark-mode .product-info-card h4,
.dark-mode .review-proof h3 {
    color: #f5f5f5;
}

.dark-mode .poster-btn {
    background: #222;
    color: #fff;
}

.dark-mode .map-pin-label {
    fill: #f4d76b;
}

/* ========================= */
/* AWARDS SECTION */
/* ========================= */

.section-header{
    text-align:center;
    max-width:760px;
    margin:0 auto;
}

.section-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:8px 18px;
    border-radius:999px;
    background:#e8f5e9;
    color:#1b5e20;
    font-size:14px;
    font-weight:700;
    letter-spacing:0.02em;
}

.section-header h2{
    margin-top:18px;
    font-size:clamp(34px,5vw,52px);
    color:#1b5e20;
    line-height:1.12;
}

.section-header h2::after{
    content:"";
    display:block;
    width:120px;
    height:5px;
    background:linear-gradient(to right,#1b5e20,#d4af37);
    margin:18px auto;
    border-radius:30px;
}

.section-header p{
    color:#666;
    font-size:18px;
    line-height:1.8;
}

.awards-section{
    padding:100px 8%;
    background:transparent;
}

.awards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    margin-top:50px;
}

.award-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    background:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,0.08);
    transition:0.5s ease;
    cursor:pointer;
}

.award-card:hover{
    transform:translateY(-12px);
}

.award-card img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:0.5s;
}

.award-card:hover img{
    transform:scale(1.05);
}

/* ========================= */
/* POSTERS SECTION */
/* ========================= */

.posters-section{
    padding:100px 8%;
    background:transparent;
}

.poster-wrapper{
    position:relative;
    width:fit-content;
    max-width:100%;
    margin:50px auto 0;
}

.poster-slider{
    position:relative;
    width:fit-content;
    max-width:100%;
    margin:0 auto;
    overflow:visible;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.poster-slide{
    display:none;
    width:fit-content;
    max-width:100%;
    height:auto;
    margin:0 auto;
    animation:posterFade 0.7s ease;
}

.poster-slide.active{
    display:block;
}

.poster-slide.gallery-item{
    height:auto;
    background:transparent;
    box-shadow:none;
    border-radius:0;
}

.poster-slide img{
    width:auto;
    max-width:100%;
    height:auto;
    max-height:none;
    display:block;
    border-radius:0;
    object-fit:contain;
    background:transparent;
    box-shadow:none;
}

.poster-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:60px;
    height:60px;
    border:none;
    border-radius:50%;
    background:#ffffffdd;
    backdrop-filter:blur(10px);
    font-size:28px;
    cursor:pointer;
    z-index:20;
    transition:0.3s;
}

.poster-btn:hover{
    transform:translateY(-50%) scale(1.08);
}

.poster-prev{
    left:20px;
}

.poster-next{
    right:20px;
}

@keyframes posterFade{
    from{
        opacity:0;
        transform:scale(1.03);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

/* ========================= */
/* LIGHTBOX */
/* ========================= */

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.92);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    opacity:0;
    visibility:hidden;
    transition:0.4s;
    z-index:99999;
}

.lightbox.open{
    opacity:1;
    visibility:visible;
}

#lightboxImg{
    max-width:90%;
    max-height:80vh;
    border-radius:20px;
}

#lightboxClose{
    position:absolute;
    top:25px;
    right:35px;
    color:#fff;
    font-size:50px;
    cursor:pointer;
}

#lightboxPrev,
#lightboxNext{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:60px;
    height:60px;
    border:none;
    border-radius:50%;
    background:#ffffff25;
    color:#fff;
    font-size:28px;
    cursor:pointer;
}

#lightboxPrev{
    left:25px;
}

#lightboxNext{
    right:25px;
}

#lightboxCaption{
    color:#fff;
    margin-top:20px;
    font-size:18px;
}

.region-detail{
    padding:18px 20px;
    border-radius:18px;
    background:#f4f7f1;
    border-left:5px solid #d4af37;
}

.region-detail h4{
    color:#1b5e20;
    font-size:20px;
    margin-bottom:8px;
}

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

@media(max-width:768px){
    .poster-btn{
        width:45px;
        height:45px;
        font-size:20px;
    }

    #lightboxPrev,
    #lightboxNext{
        width:45px;
        height:45px;
    }
}