/* --- Hero Section Styles --- */
 #hero {
            height: 100vh;
            position: relative;
            overflow: hidden;
            /* Add your background image here */
            background-image: url('assets/img/8379.jpg'); /* Replace with your image path */
            background-size: cover; /* Or 'contain', 'auto', etc. */
            background-position: center; /* Adjust as needed: top, bottom, left, right */
            background-repeat: no-repeat; /* Prevent image from tiling */
        }

        #background-slideshow {
            display: none; /* Hide the slideshow container */
        }

        #animated-background {
            display: none; /* Hide the animated background container if you added it */
        }

        #hero::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4); /* Optional: Adjust overlay opacity */
            z-index: 0;
        }

        .container.z-1 {
            z-index: 1; /* Ensure content is above the background and overlay */
        }
/* --- About Section Styles --- */
.about {
    padding: 80px 0;
    background-color: transparent; 
}

.about-img {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    min-height: 600px;
    background-color: transparent; 
}

.parallax-image-container {
    width: 100%;
    height: auto; /* Let height adjust based on content */
    background: transparent; /* Explicitly remove any background */
    border: none; /* Remove any borders */
    box-shadow: none; /* Remove any shading (box shadows) */
}

.parallax-image {
    max-width: 100%;
    height: auto; /* Let height adjust to maintain aspect ratio */
    object-fit: contain;
    transform: scale(1);
    background-color: transparent; 
    /* transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); */
}

.about-img:hover .parallax-image {
    transform: scale(1.05);
} 

.our-story {
    padding: 30px;
}

.our-story h3 {
    color: #1af23d;
    font-size: 2.2em;
    margin-bottom: 20px;
}

.our-story p {
    line-height: 1.8;
    margin-bottom: 25px;
}

.button {
    display: inline-flex;
    align-items: center;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    margin-right: 15px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.primary-button {
    background-color: #1af23d;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.primary-button:hover {
    background-color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.secondary-button {
    background-color: transparent;
    color: #1af23d;
    border: 2px solid #1af23d;
}

.secondary-button:hover {
    background-color: rgba(26, 242, 61, 0.1);
    transform: translateY(-3px);
}

.button-icon {
    margin-left: 10px;
    font-size: 1.2em;
}

/* --- Watch Video Section --- */
.watch-video {
    margin-top: 30px;
}

.play-button-container {
    position: relative;
    width: 80px;
    height: 80px;
}

.play-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #1af23d;
    color: #fff;
    border-radius: 50%;
    font-size: 2.5em;
    text-decoration: none;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.play-button:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    background-color: #16c232;
}

.video-text {
    font-size: 1.1em;
    color: #555;
}

/* --- Buttons Section --- */
.buttons {
    text-align: center;
    margin-top: 40px;
}

.buttons .button {
    margin: 10px;
}

/* --- Animations --- */
.animated-button {
    overflow: hidden;
    position: relative;
}

.animated-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(25, 0, 0, 0);