.hero-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-slider .slide.active {
    opacity: 1;
}

.image-slider {
    position: relative;
}

.image-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.image-slide.active {
    position: relative;
    opacity: 1;
}

.slider-dot.active {
    background-color: #e3a4b8 !important;
    transform: scale(1.2);
}

/* Hero text transition styles */
.hero-content {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

.hero-content.fade-out {
    opacity: 0;
}

/* =========================================================================
   Utility Backgrounds & Layout Adjustments
   Extracted from inline HTML styles to keep the codebase clean.
   ========================================================================= */

/* Background for the Hero Section */
.bg-hero-pattern {
    background-color: #e3a4b8;
    /* Light green base */
    background-image: url('../images/pattern2.png');
    /* Fallback in case pattern2 isn't strictly needed for hero, but index.php had an empty url before */
    background-repeat: repeat;
    background-size: auto;
}

/* Repeated Pattern Background (used in FAQ & Contact sections) */
.bg-pattern-repeat {
    background-image: url('../images/pattern2.png');
    background-repeat: repeat;
    background-size: auto;
}

/* Spacing and line-height adjustment for gradient heading text spans */
.gradient-text-padding {
    line-height: 1.4;
    padding-bottom: 8px;
}