.bg-main-color {
    background-color: #4da1a0;
    color: #012245;
}

.text-main-color {
    color: #4da1a0;
}

.border-main-color {
    border-color: #4da1a0;
}


    /* General Slider Styling */
.carousel-item {
    height: 100vh; /* Full screen height on all devices */
    overflow: hidden;
}

.carousel-item img {
    object-fit: cover; /* Ensures the image covers the container without distortion */
    width: 100%;
    height: 100%;
}

/* Caption Styling */
.carousel-caption {
    position: absolute;
    bottom: 10%;
    left: 5%;
    right: 5%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5); /* Transparent background for readability */
    padding: 15px;
    border-radius: 10px;
}

/* Adjust Caption Font Sizes */
.carousel-caption h3 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.carousel-caption p {
    font-size: 1rem;
}

.carousel-caption a {
    font-size: 1rem;
}

/* Responsive Adjustments */
@media (max-width: 992px) { /* Tablets */
    .carousel-caption h3 {
        font-size: 1.5rem;
    }
    .carousel-caption p,
    .carousel-caption a {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) { /* Mobile Devices */
    .carousel-caption {
        bottom: 15%;
        padding: 10px;
    }
    .carousel-caption h3 {
        font-size: 1.2rem;
    }
    .carousel-caption p,
    .carousel-caption a {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) { /* Very Small Devices */
    .carousel-caption h3 {
        font-size: 1rem;
    }
    .carousel-caption p,
    .carousel-caption a {
        font-size: 0.7rem;
    }
}

/* General Slider Styling */
/*.carousel-item {*/
 /*    height: 650px; 
/*    overflow: hidden;*/
/*}*/

/*.carousel-item img {*/
/*   object-fit: cover;  
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/

/* Medium Devices: Tablets */
/*@media (max-width: 992px) {*/
/*    .carousel-item {*/
/*        height: 500px; /* Adjust height for tablets */
/*    }*/
/*}*/

/* Small Devices: Mobile */
/*@media (max-width: 768px) {*/
/*    .carousel-item {*/
/*        height: 350px; /* Compact height for mobile devices */
/*    }*/
/*}*/

/* Very Small Devices: Small smartphones */
/*@media (max-width: 480px) {*/
/*    .carousel-item {*/
 /*       height: 250px; /* Even more compact for very small screens */
/*    }*/
/*}*/

/* Additional Styling for Header Menu */
.header-wrap .main-menu-wrap.style1 #menu ul li a {
    font-size: 18px; /* Adjust font size for responsiveness */
    font-weight: 600;
    padding: 10px 8px; /* Compact spacing for mobile screens */
}

/* Course Card Container */
.course-card.style1 {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
    border-radius: 8px; /* Optional: rounded corners */
    overflow: hidden; /* Prevent content overflow */
}

/* Course Image */
.course-img {
    aspect-ratio: 16/9; /* Ensures image maintains a proper aspect ratio */
    overflow: hidden;
    position: relative;
}

.course-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover without stretching */
    transition: transform 0.3s ease-in-out;
}

/* Add a hover zoom effect */
.course-img img:hover {
    transform: scale(1.05);
}

/* Course Information */
.course-info {
    flex-grow: 1; /* Makes content fill remaining space */
    padding: 15px;
    background-color: #fff; /* Ensure content has a clean background */
    text-align: center;
}

/* Responsive Adjustments for Course Cards */
@media (max-width: 768px) {
    .course-card.style1 {
        flex-direction: column;
        margin-bottom: 15px; /* Add spacing between cards */
    }

    .course-info {
        padding: 10px;
    }
    
    

}