/* =========================================
   1. GENERAL RESET & TYPOGRAPHY
========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* --- Core Page Scrolling --- */
html {
    scroll-behavior: smooth;      /* Creates the smooth glide effect */
    scroll-padding-top: 80px;     /* Prevents the fixed navbar from covering titles */
}

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Global Buttons */
.btn { display: inline-block; padding: 12px 30px; background-color: #4CAF50; color: white; text-decoration: none; font-size: 1.1rem; border-radius: 5px; transition: background-color 0.3s; margin-top: 20px; }
.btn:hover { background-color: #45a049; }

/* =========================================
   2. NAVIGATION BAR
========================================= */
.navbar { background: #ffffff; padding: 10px 20px; position: fixed; top: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.nav-flex { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; }
.logo img { height: 45px; width: auto; display: block; }

/* Desktop Menu Links */
.nav-links { display: flex; list-style: none; gap: 25px; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; color: #333; font-weight: 600; font-size: 1rem; transition: color 0.3s; }
.nav-links a:hover { color: #4CAF50; }

/* Mobile Menu Button (Hidden on Desktop) */
#menuBtn { display: none; background: #4CAF50; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; }

/* =========================================
   3. HERO / LANDING SECTION
========================================= */
#hero { position: relative; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding-top: 80px; }
.slideshow-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color: #1a1a1a; }


.slide { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    object-fit: cover; object-position: center; /* This ensures the img tag acts like a background! */
    opacity: 0; transition: opacity 1.5s ease-in-out; 
    filter: contrast(1.15) saturate(1.2) brightness(1.05); 
}

.slide.active { opacity: 1; }


.overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: 
        /* 1. Darkens just the very top to protect the navbar */
        linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 20%),
        /* 2. Darkens the center/bottom to protect your main heading and button */
        linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 70%); 
}

/* --- Slideshow Navigation Arrows --- */
/* --- Modern Floating Arrows --- */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;           /* Fixed width for a perfect circle */
    height: 50px;          /* Fixed height for a perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 24px;
    transition: 0.3s ease;
    user-select: none;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.4); /* Slightly darker for better contrast */
    border-radius: 50%;    /* Makes them circular */
}

/* Push them slightly inward from the edges */
.prev { left: 20px; }
.next { right: 20px; }

.prev:hover, .next:hover {
    background-color: rgba(76, 175, 80, 0.9); /* Your brand green */
    transform: translateY(-50%) scale(1.1);   /* Slight pop effect on hover */
}


.hero-content { position: relative; z-index: 1; color: #ffffff; max-width: 900px; padding: 0 20px; }
.hero-content h1 { 
    font-size: 4.2rem; /* Made larger for impact */
    font-weight: 700; /* Bolder brand name */
    margin-bottom: 35px; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    /* Notice we removed white-space: nowrap; */
}


.hero-content h1 .tagline {
    display: block; 
    font-size: 1.5rem; 
    font-weight: 600; /* Increased from 400 so it holds the shadow better */
    margin-top: 5px; 
    letter-spacing: 4px; 
    color: #ffffff; /* Changed to pure white to match the main text */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); /* Matched the exact 3D shadow of the main heading */
}


.hero-content p { font-size: 1.3rem; margin-bottom: 30px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); }

/* =========================================
   4. ABOUT US SECTION
========================================= */
#about { padding: 80px 0; background-color: #f9f9f9; box-shadow: inset 0 10px 15px -10px rgba(0,0,0,0.05); }
.about-content { display: flex; flex-wrap: wrap; align-items: center; gap: 50px; }

.about-text { flex: 1; min-width: 300px; }
.about-text h2 { font-size: 2.5rem; color: #222; margin-bottom: 25px; position: relative; padding-bottom: 10px; }
.about-text h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 60px; height: 4px; background-color: #4CAF50; }
.about-text p { font-size: 1.1rem; margin-bottom: 20px; color: #555; line-height: 1.8; }

.about-image { flex: 1; min-width: 300px; }
.about-image img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); }

/* =========================================
   5. PRODUCTS SECTION
========================================= */
#products { padding: 80px 0; background-color: #ffffff; }
.section-header { text-align: center; margin-bottom: 50px; }
.section-header h2 { font-size: 2.5rem; color: #222; margin-bottom: 15px; position: relative; display: inline-block; }
.section-header h2::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 60px; height: 4px; background-color: #4CAF50; transform: translateX(-50%); }
.section-header p { font-size: 1.1rem; color: #666; max-width: 600px; margin: 0 auto; }

/* Grapes Showcase */
.product-showcase { background-color: #f4fcf5; border: 1px solid #c8e6c9; border-radius: 10px; padding: 40px; margin-bottom: 40px; }
.product-showcase h3 { color: #222; font-size: 1.8rem; text-align: center; margin-bottom: 30px; }

.grape-varieties { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-bottom: 30px; }
.variety-card { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); flex: 1; min-width: 250px; text-align: center; border-top: 4px solid #4CAF50; }
.variety-card h4 { font-size: 1.3rem; margin-bottom: 10px; color: #333; }
.variety-card p { color: #555; }

/* Packaging Box */
.packaging-box { background: #fff; padding: 20px 30px; border-radius: 8px; border-left: 5px solid #2e7d32; }
.packaging-box h4 { margin-bottom: 15px; font-size: 1.2rem; color: #333; }
.packaging-box ul { list-style-type: square; margin-left: 20px; color: #555; line-height: 1.8; }

/* Other Products Grid */

/* Other Products Grid */
.other-products {
    background-color: #f4fcf5;       /* Matches the light green grape box */
    border: 1px solid #c8e6c9;       /* Matches the subtle green border */
    border-radius: 10px;             /* Smooth rounded corners */
    padding: 40px;                   /* Breathing room inside the box */
    margin-top: 40px;                /* Space between the two big boxes */
}


.other-products h3 { text-align: center; font-size: 1.8rem; margin-bottom: 30px; color: #222; }
.grid-4 { display: flex; flex-wrap: wrap; gap: 20px; }
.item-card { flex: 1; min-width: 200px; background: #fff; border: 1px solid #eee; padding: 20px; text-align: center; border-radius: 8px; font-weight: bold; color: #444; font-size: 1.1rem; box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: transform 0.3s; }
.item-card:hover { transform: translateY(-5px); border-color: #4CAF50; }

/* =========================================
   6. CONTACT SECTION
========================================= */
#contact { padding: 80px 0; background-color: #f9f9f9; box-shadow: inset 0 10px 15px -10px rgba(0,0,0,0.05); border-top: 1px solid #eaeaea; }
.contact-wrapper { display: flex; flex-direction: column; gap: 40px; max-width: 1000px; margin: 0 auto; }

.common-contacts { background: #fff; padding: 30px; border-radius: 8px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-top: 4px solid #4CAF50; }
.common-contacts h3 { margin-bottom: 20px; color: #222; font-size: 1.5rem; }
.common-contacts p { font-size: 1.1rem; margin-bottom: 10px; color: #555; }
.common-contacts a { color: #2e7d32; text-decoration: none; font-weight: bold; }
.common-contacts a:hover { text-decoration: underline; }

.address-container { display: flex; flex-wrap: wrap; gap: 20px; }
.address-card { flex: 1; min-width: 280px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); text-align: left; border-left: 4px solid #2e7d32; }
.address-card h4 { font-size: 1.3rem; margin-bottom: 15px; color: #333; }
.address-card p { color: #666; line-height: 1.6; margin-bottom: 20px; }

/* Map Button */
.map-link { display: inline-block; padding: 10px 18px; background-color: #e8f5e9; color: #2e7d32; border-radius: 5px; text-decoration: none; font-size: 0.95rem; font-weight: bold; transition: background-color 0.3s; border: 1px solid #c8e6c9; }
.map-link:hover { background-color: #c8e6c9; }

/* =========================================
   7. MOBILE RESPONSIVENESS
========================================= */
@media (max-width: 768px) {
    /* Show Menu Button */
    #menuBtn { display: block; }
    
    /* Hide Navigation Links by Default */
    .nav-links { 
        display: none; 
        position: absolute; top: 65px; left: 0; width: 100%; 
        background: #fff; flex-direction: column; text-align: center; 
        padding: 20px 0; box-shadow: 0 5px 10px rgba(0,0,0,0.1); 
        gap: 15px;
    }
    
    /* Display Navigation Links when Active */
    .nav-links.show { display: flex; }
    
    /* Adjust Hero Text Size */
    .hero-content h1 { font-size: 2rem; white-space: normal; }

    /* Stack Elements Vertically */
    .about-content { flex-direction: column; text-align: center; }
    .about-text h2::after { left: 50%; transform: translateX(-50%); }
    .address-container { flex-direction: column; }
}