body {
    background: #ffffff;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.carousel-item {
    height: 100vh;
    min-height: 300px;
    position: relative;
    overflow: hidden; /* Hide overflow to prevent image from escaping */
    width: 100%;
}

.carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center both vertically and horizontally */
    text-align: center;
    width: 100%;
    z-index: 2;
    padding: 0 20px; /* Add padding for mobile screens */
}

.carousel-caption h5 {
    font-size: 85px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0; /* Remove margin to prevent offset */
}

.carousel-caption p {
    width: 60%;
    margin: auto;
    font-size: 18px;
    line-height: 1.9;
}

.carousel-inner::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.carousel-image {
    width: 100%;
    height: 100vh; /* Ensure the image covers the full height */
    object-fit: cover; /* Cover the entire slider area */
    margin: 0;
    padding: 0;
    transition: transform 1s ease-in-out; /* Adjusted for smoother transitions */
    will-change: transform; /* Optimize performance */
}

.carousel-item-next,
.carousel-item-prev,
.carousel-item.active {
    display: block;
}

.carousel-item-next {
    transform: translateX(100%);
}

.carousel-item-prev {
    transform: translateX(-100%);
}

.carousel-item.active {
    transform: translateX(0);
    animation: zoom-in-out 10s ease-in-out infinite;
}

@keyframes zoom-in-out {
    0%, 100% {
        transform: scale(1); /* No change in scale */
    }
    50% {
        transform: scale(1.07); /* Slightly scale up */
    }
}

@media (max-width: 768px) {
    .carousel-caption {
        top: 50%; /* Ensure it remains centered */
        transform: translate(-50%, -50%);
    }

    .carousel-caption h5 {
        font-size: 32px; /* Decrease font size for smaller screens */
    }

    .carousel-caption p {
        width: 80%; /* Increase width for more space on smaller screens */
    }
}

@media (max-width: 576px) {
    
    .carousel-caption {

        top: 50%; /* Ensure it remains centered */
        transform: translate(-50%, -50%);
        padding: 0 15px; /* Add more padding for smaller screens */
    }

    .carousel-caption h5 {
        font-size: 24px; /* Decrease font size for mobile devices */
    }

    .carousel-caption p {
        width: 90%; /* Increase width on mobile screens */
        font-size: 14px; /* Adjust font size for readability on small screens */
    }

    .btn {
        font-size: 0.8rem;
        padding: 5px 15px; /* Adjust padding for smaller screens */
    }
}

@media (max-width: 430px) {
    .carousel-item {
        height: 60vh; /* Reduce the height of the slider */
    }
    .carousel-item {
        height: auto; /* Let the height adapt to the image dimensions */
    }

    .carousel-caption {
        top: 25%;
         
        /* Adjust this value to vertically align the caption within the image */
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0 10px;
    }

    .carousel-caption h5 {
        font-size: 10px; /* Smaller font size for smaller screens */
    }
    .s{
        width: 60%; /* Adjust width as needed */
        /* line-height: 1; */
        margin-top: 80px;
        font-size: 12px;
         
    }
    /* .carousel-caption  {
        width: 60%; /* Adjust width as needed */
        /* line-height: 1; */
        /* margin-top: 50px; */
        /* font-size: 12px; */
        
   

    .btn {
        font-size: 0.7rem; /* Adjust button text size */
        padding: 5px 5px; /* Adjust button padding */
    }

    .carousel-image {
        height: auto; /* Let the height be determined by the image's aspect ratio */
        width: 100%;
        object-fit: contain; /* Ensure the full image is visible within the slider */
    }
    
}