img.w-100 {
    width: 100%;
    height: 100vh;      /* Takes up the full viewport height */
    object-fit: cover;  /* Ensures the image maintains aspect ratio */
}

@media (max-width: 768px) {
    img.w-100 {
        height: auto;  /* Allows the image to scale naturally on mobile */
    }
}

.image-cover {
    background-size: cover;         /* Cover the entire div */
    background-position: center;    /* Center the image */
    width: 100%;                   /* Full width */
    height: 100%;                  /* Full height */
    transition: transform 0.3s ease; /* Smooth transition for zoom */
    cursor: pointer;               /* Change cursor to pointer on hover */
    border-radius: 10px;
}

.image-cover.zoomed {
    transform: scale(1.5);         /* Scale up the image */
    z-index: 1000;                 /* Bring the zoomed image to the front */
}

p {
    text-align: justify; /* Justify the text */
}


/* Container styling */
.carousel-wrapper {
    overflow: hidden;
    width: 100%; /* Set to 100% for full responsiveness */
    max-width: 100%;
    margin: auto;
    position: relative;
}

.carousel-track {
    display: flex;
    animation: slide 5s linear infinite;
    width: auto; /* Set to auto for responsive adjustments */
}

.carousel-slide {
    min-width: 150px; /* Adjusted for better fit on smaller screens */
    padding: 10px;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hover effect for image */
.carousel-slide img {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.carousel-slide img:hover {
    transform: scale(1.1); /* Zoom effect on hover */
}

/* Keyframes for sliding effect */
@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% + 200px)); /* Adjust for smoother loop */
    }
}

/* Responsive styling */
@media (min-width: 768px) {
    .carousel-wrapper {
        width: 60%; /* Slightly narrower on tablets */
    }
    .carousel-slide {
        min-width: 180px;
    }
}

@media (min-width: 1024px) {
    .carousel-wrapper {
        width: 40%; /* Adjusts to original size on larger screens */
    }
    .carousel-slide {
        min-width: 200px;
    }
}

/* Carousel Styling */
.container-fluid.p-0 {
    margin: 0;
    padding: 0;
}

#header-carousel .carousel-item {
    height: 80vh; /* Set height to 80vh to match .page-header */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(4, 15, 40, 0.7), rgba(4, 15, 40, 0.7)); /* Overlay gradient */
}

#header-carousel .carousel-item img {
    height: 100%; /* Ensures image covers full item height */
    object-fit: cover; /* Ensures image scales appropriately */
    object-position: center; /* Center image within item */
}

.carousel-caption .p-3 {
    width: 100%;
    text-align: center; /* Center content in the caption */
}

.carousel-caption h1 {
    color: white;
    margin-bottom: 1.5rem; /* Space below the title */
}

.carousel-caption a.btn-primary {
    padding: 1rem 2.5rem; /* Button padding */
}

/* Control buttons styling */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    border-radius: 50%; /* Rounded control icons */
    width: 40px;
    height: 40px;
}