/* homePage.css - ENHANCED */
@import url("shared.css"); /* Import shared styles at the TOP */

/* Slider Module Container - ENHANCED */
.hero-slider-section { /* New section for semantic meaning */
    position: relative;
    padding-top: 80px; /* Space for sticky header */
    background-color: var(--color-dark); /* Background for area around slider */
    min-height: 80vh; /* Ensure it takes up vertical space even with small slides */
    display: flex; /* Use flex to center the slider module if max-width is applied */
    align-items: center; /* Center vertically */
    justify-content: center; /* Horizontally center caption */
}

.slider-module {
    position: relative;
    width: 100%;
    max-width: 1600px; /* A reasonable max-width for the slider */
    height: 700px; /* Responsive height for desktop */
    overflow: hidden;
    background-color: var(--color-dark);
    margin: 0 auto;
    box-shadow: var(--shadow-md); /* Subtle shadow for slider */
    border-radius: var(--border-radius-lg);
}

@media (max-width: 1024px) {
    .slider-module {
        height: 600px;
    }
}
@media (max-width: 768px) {
    .slider-module {
        height: 500px;
        border-radius: var(--border-radius-md);
    }
    .hero-slider-section {
        padding-top: 60px; /* Adjust for smaller sticky header */
    }

    .counter-section .section-title {
        font-size: 2.2rem;
        margin-bottom: var(--spacing-lg);
    }
    .counter-number { font-size: 3.5rem; }
    .counter-label { font-size: 1.1rem; }
    .counter-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .counter-item { min-height: 150px; }
}
@media (max-width: 480px) {
    .slider-module {
        height: 400px;
        border-radius: var(--border-radius-sm);
    }
    .counter-section {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }
    .counter-section .section-title {
        font-size: 1.8rem;
        margin-bottom: var(--spacing-md);
    }
    .counter-number { font-size: 2.8rem; }
    .counter-label { font-size: 1rem; }
    .counter-grid { grid-template-columns: 1fr; } /* Stack items vertically on smallest screens */
    .counter-item { min-height: 120px; }
}


/* Individual Slides */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden; /* Important for initial state */
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out; /* Slower fade for dramatic effect */
    z-index: 1;
    display: flex; /* Use flexbox to center content */
    align-items: center; /* Vertically center caption */
    justify-content: center; /* Horizontally center caption */
    text-align: center; /* Center text within caption */
}

.banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden; /* Important for initial state */
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out; /* Slower fade for dramatic effect */
    z-index: 1;
    display: flex; /* Use flexbox to center content */
    align-items: center; /* Vertically center caption */
    justify-content: center; /* Horizontally center caption */
    text-align: center; /* Center text within caption */
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 5;
}

.banner-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 5;
}

/* Background Overlay */
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Darker overlay for text readability */
    z-index: 2;
}

.banner-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Darker overlay for text readability */
    z-index: 2;
}


/* Static Gradient Overlay (optional, adjust as needed) */
.static-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover full height now */
    background: linear-gradient(to top, rgba(43, 29, 20, 0.6) 0%, rgba(43, 29, 20, 0) 50%, rgba(43, 29, 20, 0.6) 100%); /* Gradient top and bottom */
    z-index: 6;
    pointer-events: none;
}

/* Slide Caption Content - NEW */
.slide-caption {
    position: relative; /* Positioned within the flex container of .slide */
    z-index: 7;
    color: var(--color-text-light);
    max-width: 800px; /* Limit width of text content */
    padding: var(--spacing-md);
    background-color: rgba(0, 0, 0, 0.3); /* Subtle background for readability */
    border-radius: var(--border-radius-md);
}

.slide-title {
    font-size: 4rem; /* Larger, more impactful title */
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-light);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Stronger shadow */
}

.slide-subtitle {
    font-size: 1.8rem;
    font-weight: 300;
    margin-bottom: var(--spacing-lg);
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.button-slider {
    background-color: var(--color-secondary); /* Use secondary color for slider button */
    color: var(--color-primary);
    border-color: var(--color-secondary);
    font-size: 1.15rem;
    padding: var(--spacing-sm) var(--spacing-lg);
}
.button-slider:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-color: var(--color-primary);
}

/* Responsive adjustments for slide content */
@media (max-width: 1024px) {
    .slide-title { font-size: 3rem; }
    .slide-subtitle { font-size: 1.5rem; }
}
@media (max-width: 768px) {
    .slide-title { font-size: 2.5rem; }
    .slide-subtitle { font-size: 1.2rem; }
    .button-slider { font-size: 1rem; padding: var(--spacing-sm) var(--spacing-md); }
}
@media (max-width: 480px) {
    .slide-title { font-size: 1.8rem; }
    .slide-subtitle { font-size: 1rem; margin-bottom: var(--spacing-md); }
    .slide-caption { padding: var(--spacing-sm); }
}

/* Navigation Arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15; /* High z-index to be clickable */
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    padding: var(--spacing-sm);
    font-size: 2rem; /* Larger arrows */
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.3s ease, opacity 0.3s ease;
    opacity: 0.8;
}

.banner-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15; /* High z-index to be clickable */
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    padding: var(--spacing-sm);
    font-size: 2rem; /* Larger arrows */
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: background-color 0.3s ease, opacity 0.3s ease;
    opacity: 0.8;
}

.slider-arrow:hover {
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 1;
}

.banner-slider-arrow:hover {
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 1;
}

.left-arrow { left: var(--spacing-md); }
.right-arrow { right: var(--spacing-md); }

.banner-left-arrow { left: var(--spacing-md); }
.banner-right-arrow { right: var(--spacing-md); }

/* Slider Dots - NEW */
.slider-dots {
    position: absolute;
    bottom: var(--spacing-md);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; /* Above captions, below arrows */
    display: flex;
    gap: 8px; /* Space between dots */
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.dot.active {
    background-color: var(--color-accent-gold);
    transform: scale(1.2);
    border-color: var(--color-accent-gold);
}

.dot:hover {
    background-color: var(--color-accent-gold);
}

.banner-slider-dots {
    position: absolute;
    bottom: var(--spacing-md);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; /* Above captions, below arrows */
    display: flex;
    gap: 8px; /* Space between dots */
}

.banner-dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.banner-dot.active {
    background-color: var(--color-accent-gold);
    transform: scale(1.2);
    border-color: var(--color-accent-gold);
}

.banner-dot:hover {
    background-color: var(--color-accent-gold);
}

/* Section Spacing Utility - NEW */
.section-spacing {
    padding: var(--spacing-xl) 0; /* Consistent vertical padding for sections */
}
@media (max-width: 768px) {
    .section-spacing {
        padding: var(--spacing-lg) 0;
    }
}
@media (max-width: 480px) {
    .section-spacing {
        padding: var(--spacing-md) 0;
    }
}

/* Slogan Section - ENHANCED */
.slogan-section {
    text-align: center;
    background-color: var(--color-light);
    border-top: 1px solid rgba(0,0,0,0.05); /* Subtle separator */
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Subtle separator */
}

.slogan-heading {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.slogan-paragraph {
    font-size: 1.15rem;
    color: var(--color-text-dark);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
    margin-bottom: var(--spacing-sm);
}
.slogan-paragraph:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .slogan-heading { font-size: 2.2rem; }
    .slogan-paragraph { font-size: 1rem; }
}
@media (max-width: 480px) {
    .slogan-heading { font-size: 1.8rem; }
    .slogan-paragraph { font-size: 0.9rem; }
}


/* Photo Gallery Container - ENHANCED */
.photo-gallery { /* New class name */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Larger min-width for items */
    gap: var(--spacing-md); /* Use spacing variable */
    justify-content: center; /* Center items if they don't fill a row */
}

.gallery-item { /* New class name */
    background-color: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-light);
    overflow: hidden; /* Ensure rounded corners clip content */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: var(--shadow-md);
}

.gallery-item figure {
    position: relative;
    width: 100%;
    height: 300px; /* Fixed height for image area */
    overflow: hidden;
    margin: 0; /* Remove default figure margin */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease; /* Slower zoom transition */
}

.gallery-item img:hover {
    transform: scale(1.1); /* Stronger zoom on hover */
}

.gallery-item figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--spacing-sm);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); /* Gradient reveal */
    color: var(--color-text-light);
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transform: translateY(100%); /* Start hidden below */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.gallery-item:hover figcaption {
    opacity: 1;
    transform: translateY(0); /* Slide up on hover */
}

.gallery-item figcaption a {
    color: var(--color-text-light);
    text-decoration: none;
    font-size: 1.2rem;
    display: block; /* Make the whole caption clickable if needed */
}
.gallery-item figcaption a:hover {
    color: var(--color-accent-gold);
    text-decoration: underline;
}

@media (max-width: 480px) {
    .photo-gallery {
        grid-template-columns: 1fr; /* Single column on very small screens */
    }
    .gallery-item figure {
        height: 250px; /* Adjust height for mobile */
    }
    .gallery-item figcaption {
        font-size: 1rem;
    }
}


/* Call to Action Hero Section - ENHANCED */
.cta-hero { /* New class name */
    background-image: linear-gradient(rgba(43, 29, 20, 0.7), rgba(43, 29, 20, 0.7)), url("../images/HomePage-pic-12.jpeg"); /* CTA Background Image */
    background-size: cover;
    background-position: center;
    color: var(--color-text-light);
    text-align: center;
    padding: var(--spacing-xl) 0; /* Use section spacing */
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3); /* Inner shadow for depth */
}

.cta-content { /* New class name */
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

.cta-heading {
    font-size: 3.5rem;
    color: var(--color-accent-gold); /* Highlight heading */
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

.cta-subheading {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-lg);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.cta-buttons {
    margin-top: var(--spacing-md);
}

.cta-buttons .button {
    font-size: 1.2rem;
    padding: var(--spacing-sm) var(--spacing-lg);
    /* Secondary button styling from shared.css already applies here */
}

@media (max-width: 768px) {
    .cta-heading { font-size: 2.8rem; }
    .cta-subheading { font-size: 1.2rem; }
    .cta-buttons .button { font-size: 1.1rem; padding: var(--spacing-sm) var(--spacing-md); }
}
@media (max-width: 480px) {
    .cta-heading { font-size: 2rem; }
    .cta-subheading { font-size: 1rem; }
    .cta-buttons .button { font-size: 1rem; padding: var(--spacing-xs) var(--spacing-sm); }
}

/* Remove old conflicting rules */
/* .hero, .slogan, .slogan2, .slogan3, .photo-container, .photo, .photo figure, .photo img, .photo figcaption */
/* These are replaced by the new classes above. */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0); /* Start lower */
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animated {
    animation-duration: 1s; /* Default duration for slide captions */
    animation-fill-mode: both; /* Keep element styles after animation */
}

/* Specific animation for elements inside .slide-caption */
.slide-caption [data-animate] {
    opacity: 0; /* Hidden by default */
    transform: translate3d(0, 40px, 0); /* Initial state for fadeInUp */
    transition: none; /* Prevent immediate transition if not animating */
}

.slide-caption [data-animate].animated {
    animation-name: fadeInUp;
    animation-duration: 0.8s; /* Faster for quick entry */
    animation-delay: var(--delay, 0s); /* Use the data-delay attribute */
    opacity: 1; /* NEW: Explicitly ensure opacity is 1 after animation/if class is present */
}

/* ... (rest of homePage.css as provided in the previous response) ... */

/* Example: Small adjustment to the gallery item for the AOS animation */
.gallery-item {
    background-color: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-light);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* AOS will handle initial opacity/transform, so no need for explicit opacity: 0 */
}

/* Counter Section */
.counter-section {
    background-color: var(--color-tertiary); /* Medium brown from palette */
    color: var(--color-text-light); /* Light text on this background */
    text-align: center;
    /* Uses section-spacing already for padding */
    padding-top: var(--spacing-xl); /* Ensure enough space at top */
    padding-bottom: var(--spacing-xl); /* Ensure enough space at bottom */
}

.counter-section .section-title {
    color: var(--color-text-light); /* Match text color for this section */
    margin-bottom: var(--spacing-xl); /* More space below title */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Subtle shadow for text */
}

.counter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
    gap: var(--spacing-lg); /* Space between counter items */
    justify-content: center; /* Center items if they don't fill the row */
    max-width: 1100px; /* Max width for the grid */
    margin: 0 auto; /* Center the grid */
}

.counter-item {
    background-color: var(--color-primary); /* Darker brown for individual items */
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    display: flex; /* Use flexbox for vertical centering of number and label */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 180px; /* Ensure consistent height for all items */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.counter-item:hover {
    transform: translateY(-8px); /* Lift effect on hover */
    background-color: var(--color-dark); /* Slightly darker on hover */
    box-shadow: var(--shadow-md);
}

.counter-number {
    font-family: var(--font-heading); /* Use the elegant heading font */
    font-size: 4.5rem; /* Large and impactful number */
    font-weight: 700;
    color: var(--color-accent-gold); /* Use accent gold for the numbers */
    margin-bottom: var(--spacing-xs); /* Small space between number and label */
    line-height: 1; /* Remove extra line height for numbers */
}

.counter-label {
    font-size: 1.25rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em; /* A bit of letter spacing */
    color: var(--color-text-light);
    opacity: 0.9;
}