/* Banner Slider Styles */
    .banner-slider {
        position: fixed; /* Ensures it stays in one place relative to the viewport */
        top: 0;          /* Sticks it to the top, removing any gap */
        left: 0;         /* Aligns it to the left */
        width: 100%;     /* Makes it span the full width */
        height: 400px;   /* Retains the original height for content */
        overflow: hidden;/* Hides parts of the image that don't fit the height */
        z-index: 1;      /* Places it behind other content like the header and scroll-content */
        margin: 0;       /* Explicitly removes any margin */
    }

    .slide {
        display: none;
        width: 100%;
        height: 100%; /* Ensure slide takes full height of banner */
    }

/* Container for slide content to enable positioning */
    .slide-content {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
/* Banner image styling */
    .banner-slider .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Crops image to fill container, centered */
        vertical-align: middle;
    }

    .slide-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6); /* 60% black transparent */
        z-index: 1;
    }

    .slide-text {
        position: absolute;
        top: 75%;
        left: 55%;
        transform: translate(-50%, -50%);
        color: rgba(255,255,255,0.7);
        text-align: left;
        z-index: 2;
        width: 80%;
    }

    .slide-text h2 {
        font-size: 1.5em;
        font-weight: bold;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    }

    .slide-text p {
        font-size: 0.8em;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
    }
    
    .fade {
        animation-name: slide;
        animation-duration: 3s;
    }

    @keyframes fade {
        from {opacity: 0}
        to {opacity: 1}
    }

    .prev, .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        color: white;
        font-weight: bold;
        font-size: 20px;
        transition: 0.8s ease;
        user-select: none;
        background-color: transparent;
    }

    .next {
        right: 0;
    }

    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.3);
        transition: 0.8s  ease;
    }

    .dots-container {
        position: absolute;
        bottom: 5px;
        width: 100%;
        text-align: center;
        background-color: transparent;
        padding: 0;
    }

    .dot {
        cursor: pointer;
        height: 8px;
        width: 8px;
        margin: 0 5px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
        border: 1px solid rgba(0, 0, 0, 0.2);
    }

    .active, .dot:hover {
        background-color: #ffffff;
    }

/* Random-image-container */
        .random-image-container {
            text-align: center;
            margin: 0px auto 40px;
            max-width: 1000px;
            height: auto;
            font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
            background-color: white;
            overflow: hidden;
        }
        .image-container img {
            width: 100%;
            height: 100%;
            display: block;
        }
        .random-image-caption {
            padding: 15px;
            background-color: rgba(0, 0, 0, 0.3);
            color: white;
            font-size: 16px;
        }


<!-- CSS for the IFW Slider -->
        * {
            box-sizing: border-box;
        }

.ifw-slider-container {
            position: relative;
            width: 100%;
            /* MODIFICATION: Changed from 100vh to 70vh to fit within the page content area */
            height: 70vh; /* Corrected from auto to a specific height for desktop */
            overflow: hidden;
            user-select: none; /* Prevent text selection during drag */
            margin-top: 2rem; /* Added margin for spacing */
            margin-bottom: 2rem; /* Added margin for spacing */
        }

.ifw-slider {
            width: 100%;
            height: 100%;
            display: flex;
            transition: transform 0.8s ease;
        }

.ifw-slide {
            flex: 0 0 100%;
            height: 100%; /* Changed from 70vh to 100% to fill container */
            position: relative;
        }

/* The text box is now positioned relative to a new wrapper */
        .ifw-text-box {
            font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
            position: absolute;
            top: 50%;
            left: 20px; /* Aligned to the new padded wrapper */
            transform: translateY(-50%);
            color: white;
            padding: 2rem;
            max-width: 500px;
            height: auto;
            pointer-events: auto; /* Make text box interactive */
        }

        .ifw-text-box h2{
            font-size: 30px;
        }

        .ifw-text-box p{
            font-size: 16px;
        }

        /* Different background colors for each slide's text box */
        .ifw-slide:nth-child(1) .ifw-text-box {
            background: rgba(0, 0, 0, 0.6); /* Black for slide 1 */
        }

        .ifw-slide:nth-child(2) .ifw-text-box {
            background: rgba(0, 130, 0, 0.6); /* Green for slide 2 */
        }

        .ifw-slide:nth-child(3) .ifw-text-box {
            background: rgba(225,135,65, 0.6); /* Orange */
        }
        
        .ifw-slide:nth-child(4) .ifw-text-box {
            background: rgba(225, 65, 105, 0.6); /* Black for slide 4 */
        }

        .ifw-slide:nth-child(5) .ifw-text-box {
            background: rgba(0, 150, 150, 0.6); /* Cyan */
        }

        .ifw-slide:nth-child(6) .ifw-text-box {
            background: rgba(5,55,110, 0.6); /* Blue */
        }

        .ifw-slide:nth-child(7) .ifw-text-box {
            background: rgba(135,60,35, 0.6); /* Brown */
        }

        .ifw-slide:nth-child(8) .ifw-text-box {
            background: rgba(0, 0, 130, 0.6); /* Blue for slide 3 */
        }

        /* Make the image layer a full-slide background */
        .ifw-slide .ifw-slide-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
        }

/* Constrained wrapper for the text box */
        .ifw-text-wrapper {
            position: relative;
            height: 100%;
            pointer-events: none; /* Allow mouse events (like dragging) to pass through */
        }

/* Constrained wrapper for the controls */
        .ifw-controls-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Allow mouse events to pass through */
            z-index: 10; /* Place controls above slides */
        }

/* Style and position the navigation buttons */
        .ifw-nav-buttons {
            position: absolute;
            bottom: 20px;
            pointer-events: auto; /* Make buttons clickable */
            gap: 10px;
        margin: 0 auto;
        }

        .ifw-nav-buttons button {
            font-family: 'Astoria Roman', 'Chocolate Classical Sans', sans-serif;
            background: rgba(0, 150, 150, 0.3);
            color: white;
            padding: 5px 10px;
            cursor: pointer;
            transition: background 0.8s  ease;
        }

        .ifw-nav-buttons button:hover {
            background: rgba(0, 150, 150, 0.8);
        }

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 768px) {

/* Adjust scroll content margin for smaller banner */
    #scroll-content {
        margin-top: 200px;
    }
    
    .banner-slider {
        height: 230px;
    }

            .ifw-slider-container {
                height: auto; /* Container height adjusts to content */
            }
            .ifw-slide {
                height: auto; /* Slide height adjusts to content */
            }
            .ifw-slide-image {
                max-height: 300px;
            }
            .ifw-text-box {
                position: static;
                transform: none;
                text-align: center;
                max-width: 100%; /* Ensure it takes full width */
                height: 250px; 
            }

/* Solid colors for text boxes on mobile */
        .ifw-slide:nth-child(1) .ifw-text-box {
            background: rgba(50, 50, 50); /* Black for slide 1 */
        }

        .ifw-slide:nth-child(2) .ifw-text-box {
            background: rgba(0, 130, 0); /* Green for slide 2 */
        }

        .ifw-slide:nth-child(3) .ifw-text-box {
            background: rgba(225,135,65); /* Orange */
        }
        
        .ifw-slide:nth-child(4) .ifw-text-box {
            background: rgba(225, 65, 105); /* Black for slide 4 */
        }

        .ifw-slide:nth-child(5) .ifw-text-box {
            background: rgba(0, 150, 150); /* Cyan */
        }

        .ifw-slide:nth-child(6) .ifw-text-box {
            background: rgba(5,55,110); /* Blue */
        }

        .ifw-slide:nth-child(7) .ifw-text-box {
            background: rgba(135,60,35); /* Brown */
        }

        .ifw-slide:nth-child(8) .ifw-text-box {
            background: rgba(0, 0, 130); /* Blue for slide 3 */
        }

/* When text-box becomes static, the image needs to be static too */
            .ifw-slide .ifw-slide-image {
                position: static; /* Change from absolute to static for mobile layout */
                height: 50vh; /* Give it a defined height in the document flow */
                width: 100%;
            }

/* The text wrapper will now naturally fall below the image */
            .ifw-text-wrapper {
                height: auto; /* Adjust height for static flow */
            }
            
/* Hide the new button container on mobile */
            .ifw-controls-wrapper {
                display: none;
            }
        }