/* ===================================================== */
/* ===== OUR JOURNEY SECTION - UPDATED STYLES ========== */
/* ===================================================== */

/* Synchronized text block animations (removed years) */
.text.visible-text, 
.owl-item.active .text.animated.zoomIn {
    animation-fill-mode: both !important;
}

/* Ensure proper timing with owl.css duration of 1000ms */
.journey-carousel .owl-item.active .text.animated.zoomIn,
.animation-wrapper.animated.zoomIn,
.animation-wrapper.zoomIn {
    -webkit-animation-duration: 1000ms !important;
    animation-duration: 1000ms !important;
}

/* ===================================================== */
/* ===== NEW MILESTONE YEAR STYLES (ADDED) ============= */
/* ===================================================== */

/* Milestone Year Headers - Big Bold Text for Each Slide - ALL WHITE */
.milestone-year {
    font-size: 2rem;           /* Large text (adjust if needed) */
    color: #ffffff !important;   /* PURE WHITE - changed from #333 */
    margin-bottom: 1.5rem;     /* Space between year and content */
    padding: 0.8rem 0;         /* Vertical padding for emphasis */
    font-weight: bold;
    text-align: center;        /* Center align the milestone year */
}

/* Animation Wrapper - Stack Header on Top of Content */
.animation-wrapper.zoomIn {
    display: flex;             /* Flexbox for vertical stacking */
    flex-direction: column;    /* Stack header above content */
    align-items: center;       /* Center everything horizontally */
}

/* Ensure ALL Text Blocks Are White and Always Readable */
.text-content p, 
.owl-item .text-content p {
    color: #ffffff !important;  /* PURE WHITE - changed from inherit/gray */
    opacity: 1 !important;      /* Always visible, not dimmed */
    filter: none !important;   /* Remove any filters causing blending issues */
}

/* Milestone Year Strong Text - Pure White for Emphasis */
.milestone-year strong {
    color: #ffffff !important;  /* PURE WHITE - changed from #2c3e50 */
}

/* ===================================================== */
/* ===== CAROUSEL NAVIGATION STYLES ================ */
/* ===================================================== */

/* Carousel Navigation Buttons (Custom Arrows) */
.carousel-nav {
    margin-top: 20px;
    text-align: center;
}

.owl-prev, .owl-next {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100 !important;
}

.owl-prev { left: -40px; }
.owl-next { right: -40px; }

/* Hide navigation arrows if you prefer button-only control */
/* .owl-nav { display: none; } */

/* Animation Duration Must Match owl.css (1000ms) */
.journey-carousel .owl-item.active .animation-wrapper.zoomIn,
.animation-wrapper.animated.zoomIn {
    animation-duration: 1000ms !important; /* Matches owl.css duration */
    -webkit-animation-fill-mode: both !important;
    animation-fill-mode: both !important;
}

/* Prevent Carousel Items from Overlapping */
.owl-item {
    display: block;
}

/* ===================================================== */
/* ===== RESPONSIVE ADJUSTMENTS ================ */
/* ===================================================== */

/* Responsive Adjustments for Mobile */
@media (max-width: 768px) {
    .milestone-year {
        font-size: 1.5rem;     /* Smaller on mobile but still prominent */
        margin-bottom: 1rem;
    }
    
    .carousel-nav {
        display: none !important; /* Hide arrows on small screens, use swipe gestures */
    }
}

/* ===================================================== */
/* ===== END OF UPDATED STYLES ========================= */
/* ===================================================== */