.elementor-27933 .elementor-element.elementor-element-a8ed550{--display:flex;--min-height:0px;--justify-content:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-27933 .elementor-element.elementor-element-a8ed550.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-27933 .elementor-element.elementor-element-65fbb85.elementor-element{--align-self:center;}@media(min-width:768px){.elementor-27933 .elementor-element.elementor-element-a8ed550{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-65fbb85 *//* ✅ Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures consistent sizing */
}

/* ✅ Prevent Horizontal Scrollbars */
body, html {
    overflow-x: hidden; /* Stops unwanted overflow */
}

/* ✅ Main Section Layout */
.crash-course-section {
    display: flex; /* Aligns sections horizontally */
    justify-content: space-between; /* Space between left and right sections */
    align-items: center; /* Align vertically */
    gap: 50px; /* Space between left and right sections */
    padding: 40px; /* Space around the section */
    max-width: 1300px; /* Maximum width for layout */
    margin: 0 auto; /* Center the layout */
}

/* ✅ Left Section (Course Info) */
.course-info {
    flex: 1; /* Flexible size to balance with image */
    max-width: 55%; /* Limit width */
}

.course-info h2 {
    font-size: 28px;
    font-weight: bold;
    color: #00a99d; /* Custom color */
}
.course-info h3 {
    font-size: 18px;
    font-weight: bold;
    color: #00a99d; /* Custom color */
}

/* ✅ Features List */
.features {
    list-style: none;
    margin: 15px 0; /* Space above and below list */
}

.features li {
    font-size: 16px;
    margin: 10px 0;
    display: flex; /* Align tick with text */
    align-items: center;
}

/* ✅ Tick Mark (Round Bullet) */
.tick {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #00a99d; /* Tick color */
    display: inline-block;
    margin-right: 10px; /* Space from text */
    position: relative; /* For tick positioning */
}

.tick::after {
    content: '✔';
    color: white;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ✅ Dropdown (Course Selector) */
#course-select {
    width: 100%;
    padding: 10px;
    border: 2px solid #00a99d;
    border-radius: 5px; /* Rounded edges */
    font-size: 16px;
    margin: 10px 0; /* Space around dropdown */
    cursor: pointer; /* Pointer for selection */
}

/* ✅ Price and Button Styles */
.price {
    font-size: 24px;
    font-weight: bold;
    color: #00a99d;
    margin: 10px 0;
}

.buttons {
    display: flex;
    gap: 15px; /* Space between buttons */
    margin-top: 10px;
}

.btn {
    padding: 10px 20px;
    font-size: 16px;
    text-decoration: none;
    border-radius: 5px; /* Rounded corners */
    display: inline-block;
    text-align: center;
}

.enroll {
    background-color: #00a99d; /* Main action button */
    color: #fff;
}

.schedule {
    border: 2px solid #00a99d;
    color: #00a99d;
}

/* ✅ Right Section (Image Carousel) */
.course-banner {
    flex: 1; /* Take remaining space */
    max-width: 45%;
    display: flex; /* Center the carousel */
    justify-content: center;
    position: relative; /* Needed for navigation buttons */
    overflow: hidden; /* Hide overflow */
}

/* ✅ Carousel (Image Slider) */
.carousel {
    width: 500px; /* Fixed carousel width */
    height: 625px; /* Corrected height for 4:5 aspect ratio */
    overflow: hidden; /* No overflow */
    border-radius: 20px; /* Rounded corners */
    position: relative; /* For navigation buttons */
}

/* ✅ Carousel Track (Image Container) */
.carousel-track {
    display: flex; /* Align images horizontally */
    transition: transform 0.5s ease; /* Smooth sliding */
}

/* ✅ Image in Carousel (Fixed to Maintain Aspect Ratio) */
.carousel img {
    flex: 0 0 500px; /* Fixed image size */
    height: 625px; /* Maintain aspect ratio (1080x1350 scaled) */
    object-fit: cover; /* Ensure image fills space */
    border-radius: 20px; /* Rounded image corners */
}

/* ✅ Navigation Buttons (Prev/Next) */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 10; /* Keep buttons above images */
    font-size: 20px;
}

#prevBtn {
    left: 10px; /* Position left button */
}

#nextBtn {
    right: 10px; /* Position right button */
}

/* ✅ Responsive Adjustments */
@media (max-width: 1024px) {
    .crash-course-section {
        flex-direction: column; /* Stack on smaller screens */
        gap: 30px; /* Reduce gap */
    }

    .course-info, .course-banner {
        max-width: 100%; /* Full width */
    }

    .carousel {
        width: 100%; /* Responsive carousel */
        max-width: 500px; /* Maintain maximum size */
    }
}/* End custom CSS */