body {
    margin: 0;
    padding: 0;
    height: 100vh; /* Make sure the body fills the entire viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #ff6a00, #ff1493, #8e2de2, #4a00e0);
    background-size: 400% 400%; /* Makes the gradient larger so it can move */
    animation: gradientAnimation 30s ease infinite; /* Animation for the gradient */
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.slideshow-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto; /* Centers horizontally */
    height: 250px;
    width: 80%;  /* Set the width of the slideshow container */
    overflow: hidden; /* Prevent images from overflowing */
    border: 1px solid #c25dff; /* Optional: add a border around the slideshow */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Optional: add a slight shadow for effect */
}

/* Resize the images */
.slideshow-container img {
    width: 100% ;  /* Makes the image responsive to the container's width */
    height: auto ;  /* Maintains aspect ratio */
    max-width: 100% ;  /* Ensures images don't exceed container width */
    max-height: 200px ;  /* Limit height of images to 400px (adjust as needed) */
    object-fit: contain; /* Ensures images are contained within the box */
}

/* Hide all slides by default */
.slides {
  position: relative; /* Stack all slides on top of each other */
}

/* Improved Styling for the Previous and Next Buttons */
a.prev, a.next {
    position: absolute;
    top: 50%;  /* Vertically center the arrows */
    padding: 16px;  /* Adjust padding for bigger clickable area */
    font-size: 30px;  /* Increase font size for the arrows */
    color: white;  /* Set the text color to white */
    transform: translateY(-50%);  /* Vertically center the arrows */
    cursor: pointer;  /* Pointer cursor on hover */
    z-index: 1;  /* Ensure the arrows are on top of images */
    text-align: center;  /* Center the arrow text inside the button */
    width: 50px;  /* Set a fixed width */
    height: 50px;  /* Set a fixed height */
}

a.prev {
    left: 20px;  /* Position the previous arrow to the left */
}

a.next {
    right: 20px;  /* Position the next arrow to the right */
}



/* Active effect: When clicking the arrows */
a.prev:active, a.next:active {
    transform: translateY(-50%) scale(0.95);  /* Slightly shrink when clicked */
}

/* Add a subtle shadow around the arrows */
a.prev, a.next {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);  /* Add shadow for emphasis */
}

/* Ensure the body background allows the arrows to be visible */
.wrapper {
    position: relative;
    width: 100%; /* Adjust this width as necessary */
    height: 100vh; /* Full screen or adjust based on your content */
    overflow: hidden; /* Prevents any overflow outside the wrapper */
}

.center-graphic {
    position: relative;
    z-index: 10; /* Ensures the center graphic stays on top */
    width: 100%; /* Make sure your center graphic is appropriately sized */
    height: auto;
}

.side-images {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Ensures side images are beneath the center graphic */
    display: flex;
    justify-content: space-between; /* Adjust layout of side images */
    width: 100%;
    height: 100%;
}

.side-images img {
    max-width: 20%; /* You can control the size of side images here */
    height: auto;
    opacity: 0.8; /* Optional: for subtle background effect */
}

.container {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Two side columns and one center column */
    gap: 20px; /* Adjust the gap between center and side columns */
    justify-items: center; /* Ensures the center graphic is centered */
}

.center-graphic {
    grid-column: 2; /* Keeps the center graphic in the middle column */
    width: 80%; /* Adjust width of center graphic as needed */
    height: auto;
}

.left-side, .right-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.left-side img, .right-side img {
    max-width: 80%; /* Control the size of side images */
    height: auto;
}