/* General styles */
/* Container styling */
.container {
    font-family: 'Maven Pro', sans-serif;
    background-color: #FFFFFF; /* White background for the hero section */
    background-size: cover;

   
}

.splide-banner {
    max-width: 105%;
    background: #F5F5F5;
    background-size: cover;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding-top: 100px !important;
    padding-bottom: 100px !important;
    padding-left: 541px !important;
    padding-right: 500px !important;
    margin-left: -24px;
    margin-right: -24px;
}

.splide-banner-content {
    background: linear-gradient(to bottom left, #AFEEEE, /* paleturquoise (upper-right) */ #E0FFFF, /* lightcyan */ #E0FFFF, /* lightcyan */ #AFEEEE /* paleturquoise (bottom-left) */);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    opacity: 0.9;
}

.splide-banner h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #00BFFF;
}

.splide-banner p {
    font-family: 'Maven Pro', sans-serif;
    font-size: 1rem;
    margin-bottom: 20px;
    line-height: 1.6;
    max-width: 500px;
}

/* Section styling */
#card-carousel {
    overflow: visible;
    margin: auto;
    padding: 10px;
    background-size: cover;
    margin-top: 100px;
    padding-left: 20px;
}

.splide__track {
    padding: 30px;
    margin: auto;
    background-position: left top !important;
    background-repeat: no-repeat !important;
    margin-top: 0px;
    border-radius: none;
}

.splide__list {
    display: flex;
    gap: 10px; /* Space between slides */
    padding: 0;
    margin: 0;
    list-style: none;
}

.splide__slide {
    flex: 0 0 100%; /* Set slide width */
    border-radius: 20px;
    overflow: hidden !important;
    max-width: 461px;
    background-color: #f8f9fa; /* Light background for slides */
    background: linear-gradient(to bottom left, #AFEEEE, /* paleturquoise (upper-right) */ #E0FFFF, /* lightcyan */ #E0FFFF, /* lightcyan */ #AFEEEE /* paleturquoise (bottom-left) */);
    background-size: cover;
    box-shadow: 0 35px 50px rgba(20, 21, 107, .12);
    transition: transform 0.5s ease;
    transform: translate3d(0px, 0px, 0px);
    padding: 20px;
    text-align: start;
    z-index: 1;
}

.splide__slide img {
    width: 100%;
    height: 420px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgb(0,191,255);
}
.title {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically align items */
    gap: 15px; /* Space between the image and the heading */
    justify-content: space-between;
}

/* Styling for the <img> element */
.title img {
    order: 2; /* Place the image after the heading */
    max-width: 50px; /* Limit the image width */
    height: 50px; /* Maintain aspect ratio */
    margin-left: 30px; /* Additional spacing if needed */
    border: none;
    box-shadow: none;
}

.title img:hover {
    transform: scale(1.03);
}

/* Styling for the <h2> element */
.title h2 {
    font-size: 1.5rem; /* Adjust the heading size */
    color: #00BFFF; /* Example text color */
}

/* Styling for the Learn More*/
.btn {
    background: #ffff;
    color: #00BFFF;
    text-decoration: none;
    /*text-transform: uppercase;*/
    font-size: 1.2rem;
    display: inline-block;
    padding: 15px;
    letter-spacing: .1em;
    line-height: 1;
    border-radius: 30px;
    border: 2px solid #00BFFF;
}

.btn:hover {
  background-color: #AFEEEE;
  transform: scale(1.03);
  opacity: 0.5;
}

.splide__slide div {
    padding: 10px;
}

.splide__slide h2 {
    font-size: 1.2rem;
    margin: 10px 0 5px;
    color: #495057; 
}

.splide__slide p {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.5;
}

/* Hover effect 
.splide__slide:hover {
    transform: scale(1.03);
}*/

/* Responsive design */
@media (max-width: 768px) {
    #card-carousel {
        padding: 15px;
    }

    .splide__slide {
        flex: 0 0 100%;
        margin: 0 auto;
    }

    .splide__list {
        gap: 10px;
    }

    .splide__slide h2 {
        font-size: 1rem;
    }

    .splide__slide p {
        font-size: 0.8rem;
    }
}

/* General styles for the carousel */
#card-carousel {
    position: relative; /* Ensure positioning context for absolute elements */
}

/* Style for the arrows */
#card-carousel .splide__arrow {
    background: linear-gradient(to bottom left, #AFEEEE, /* paleturquoise (upper-right) */ #00FFFF, /* cyan */ #40E0D0, /* turquoise */ #AFEEEE /* paleturquoise (bottom-left) */) !important; /* Background color for arrows */
    align-items: center;
    /*color: #00BFFF !important; /* Arrow color */
    border: 2px solid #00BFFF; /* Remove default border */
    padding: 10px; /* Add some padding */
    border-radius: 10px; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer */
    display: flex;
    position: absolute; /* Positioning */
    justify-content: center;
    top: 50%; /* Distance from the top */
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    z-index: 1;
}

/* Position the left arrow */
#card-carousel .splide__arrow--prev {
    left: auto !important;
    right: 150px !important;
    top: -3em !important;
}

/* Position the right arrow */
#card-carousel .splide__arrow--next {
    right: 90px !important;
    top: -3em !important;
}

/* Style for pagination */
#card-carousel .splide__pagination {
    /*background-color: #AFEEEE !important; /* Background color for pagination */
    position: absolute; /* Positioning */
    bottom: 10px; /* Distance from the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for centering */
    padding: 5px; /* Add some padding */
    border-radius: 5px; /* Rounded corners */
}

/* Style for pagination bullets */
#card-carousel .splide__pagination__page {
    background: linear-gradient(to bottom left, #AFEEEE, /* paleturquoise (upper-right) */ #00FFFF, /* cyan */ #40E0D0, /* turquoise */ #AFEEEE /* paleturquoise (bottom-left) */) !important; /* Bullet color */
    border-radius: 50%; /* Make bullets circular */
    width: 10px; /* Width of bullets */
    height: 10px; /* Height of bullets */
    margin: 0 5px; /* Space between bullets */
    cursor: pointer; /* Change cursor to pointer */
}

/* Style for active pagination bullet */
#card-carousel .splide__pagination__page.is-active {
    background-color: #007BFF !important; /* Different color for active bullet */
}