.elementor-27709 .elementor-element.elementor-element-3e44684{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:auto;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-27709 .elementor-element.elementor-element-3e44684.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-27709 .elementor-element.elementor-element-3b1ec33{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-27709 .elementor-element.elementor-element-3b1ec33:not(.elementor-motion-effects-element-type-background), .elementor-27709 .elementor-element.elementor-element-3b1ec33 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EBEBEB;}.elementor-27709 .elementor-element.elementor-element-e37edb2{--spacer-size:100px;}.elementor-27709 .elementor-element.elementor-element-a8ed550{--display:flex;--min-height:0px;--justify-content:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-27709 .elementor-element.elementor-element-a8ed550.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-27709 .elementor-element.elementor-element-65fbb85.elementor-element{--align-self:center;}.elementor-27709 .elementor-element.elementor-element-9f0ea7e{--display:flex;--min-height:0px;--justify-content:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-27709 .elementor-element.elementor-element-9f0ea7e.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-27709 .elementor-element.elementor-element-b633dc9.elementor-element{--align-self:center;}.elementor-27709 .elementor-element.elementor-element-5a01ee1{--display:flex;}@media(min-width:768px){.elementor-27709 .elementor-element.elementor-element-3e44684{--width:100%;}.elementor-27709 .elementor-element.elementor-element-a8ed550{--width:100%;}.elementor-27709 .elementor-element.elementor-element-9f0ea7e{--width:100%;}.elementor-27709 .elementor-element.elementor-element-5a01ee1{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-bad5105 *//* 🌟 Global Reset for Consistency */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 🌟 Main Container: Fixing Layout and Reducing Gaps */
.crash-course-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px !important; /* Reduced vertical gap */
    flex-direction: row; /* Ensure proper row layout */
}

/* 🌟 Image Carousel: Ensure Correct Height & No Extra Space */
.course-banner {
    margin: 0 !important;
    padding: 0 !important;
    flex: 1; /* Maintain flexibility in layout */
}

/* Ensure images fit properly */
.carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto !important; /* Prevent fixed height issues */
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure image isn't cropped */
}

/* Carousel Navigation Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 10px;
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

/* 🌟 Course Info Section: Ensure Proper Spacing */
.course-info {
    flex: 1; /* Keep side-by-side alignment */
    margin: 0 !important; 
    padding: 0 !important;
}

/* Reduce margin between items */
.course-info h2,
.course-info ul,
.course-info .price {
    margin: 0 !important;
    padding: 0 !important;
}

/* List Styling (Features Section) */
.features {
    list-style: none;
}

.features li {
    margin: 5px 0; /* Add minimal space between list items */
}

/* 🌟 Dropdown Styling */
#course-select-business {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #008080;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    background: #fff;
    appearance: none; /* Remove default arrow */
    cursor: pointer;
}

/* Hover and Focus for Dropdown */
#course-select-business:hover,
#course-select-business:focus {
    border-color: #006666;
    outline: none;
}

/* 🌟 Button Styling */
.buttons {
    display: flex;
    flex-wrap: wrap; /* Ensure buttons wrap properly on small screens */
    gap: 10px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}

.enroll {
    background-color: #008080;
    color: white;
}

.schedule {
    background-color: transparent;
    color: #008080;
}

/* 🌟 Popup Styling */
.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

.popup-content {
    position: relative;
    margin: 5% auto;
    max-width: 600px;
    max-height: 90%;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

/* 🌟 Responsive Adjustments */
@media (max-width: 1024px) {
    /* Stack sections vertically on smaller screens */
    .crash-course-section {
        flex-direction: column !important;
        text-align: center; /* Center content */
        gap: 0 !important; /* Eliminate extra gap */
    }

    /* Ensure images adjust properly */
    .carousel img {
        object-fit: contain;
    }

    /* Button Layout Adjustments */
    .buttons {
        flex-direction: column; /* Stack buttons */
        gap: 5px;
    }

    /* Popup Width on Mobile */
    .popup-content {
        max-width: 90%;
    }
}/* End custom CSS */
/* 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 */
}

/* ✅ 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 */
/* Start custom CSS for html, class: .elementor-element-b633dc9 *//* ✅ 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: #2acc83; /* Custom color */
}
.course-info h3 {
    font-size: 18px;
    font-weight: bold;
    color: ##2acc83; /* 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: #2acc83; /* 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: #2acc83;
    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: #2acc83; /* Main action button */
    color: #fff;
}

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

/* ✅ 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 */