.slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* Positioning for stacking */
    position: absolute;
    top: 0;
    left: 0;
    
    /* CRITICAL: All slides start fully transparent/hidden */
    opacity: 0; 
    
    /* CRITICAL: This is what applies the 1.5s fade effect */
    transition: opacity 1.0s ease-in-out; 
}

.active-slide {
    /* REMOVED: display: block; */
    
    /* When the JS adds this class, opacity changes from 0 to 1, 
       triggering the 1.5s fade-in. */
    opacity: 1;
}

@keyframes dissolveIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    /* NEW: Apply transparency to the entire arrow (background and SVG) */
    opacity: 0.0; /* Adjust this value (0.0 to 1.0) for desired transparency */

    /* NEW: Set explicit dimensions for the SVG icon */
    width: 40px; 
    height: 40px; 
    
    background-color: rgba(0, 0, 0, 0.0); 
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    z-index: 10; 
    
    /* Removed text properties: font-size and color */
}

/* 1. STYLING THE PREVIOUS ARROW (LEFT) */
.prev {
    left: 6vh;
    
    /* CRITICAL: SVG for the Left Arrow (White color) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M14 6L15.41 7.41 10.83 12l4.58 4.59L14 18l-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}
 
/* 2. STYLING THE NEXT ARROW (RIGHT) */
.next {
    right: 6vh;
    
    /* CRITICAL: SVG for the Right Arrow (White color) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%; 
}

.dot-container {
    /* CRITICAL FIX: Change from absolute to fixed */
    position: fixed; 
    bottom: 8vh; 
    width: 100%;
    text-align: center;
    /* Optional: Add z-index to ensure it sits above all other content */
    z-index: 1000; 
}

.dot {
    /* The large, invisible clickable area */
    /* Dimensions remain fixed in px for a reliable click target size */
    width: 46px; 
    height: 30px; 
    
    display: inline-flex;
    align-items: center; 
    justify-content: center; 
    cursor: pointer;
    
    position: relative; 
    
    /* CRITICAL CHANGE: Using em for responsive margin between dots */
    margin: 0 0.5em;
    
    background-color: transparent; 
}

/* NEW: Creates the small, visible line inside the larger clickable area */
.dot::after {
    content: "";
    
    /* Visual dimensions remain in px for visual stability */
    height: 2px; 
    width: 60px; 
    border-radius: 2px;
    
    background-color: rgba(255, 255, 255, 0.35);
}

.dot.active::after {
    background-color: white; /* Highlight active line */
}