.elementor-5027 .elementor-element.elementor-element-642083a > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(180deg, #1D252C69 0%, var( --e-global-color-kadence7 ) 100%);}.elementor-5027 .elementor-element.elementor-element-642083a .elementor-background-overlay{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-5027 .elementor-element.elementor-element-642083a{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-5027 .elementor-element.elementor-element-6838e961{padding:0px 100px 064px 100px;}.elementor-5027 .elementor-element.elementor-element-317ad0b > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-5027 .elementor-element.elementor-element-0fd5756 > .elementor-widget-container{margin:50px 0px 200px 0px;padding:0px 0px 0px 0px;}.elementor-5027 .elementor-element.elementor-element-1d06632 > .elementor-container{max-width:1200px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-5027 .elementor-element.elementor-element-b6c0eca .elementor-heading-title{color:var( --e-global-color-kadence3 );}.elementor-5027 .elementor-element.elementor-element-db1ae57{--display:flex;--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5027 .elementor-element.elementor-element-ad3940c .elementor-heading-title{color:var( --e-global-color-kadence3 );}.elementor-widget-image-gallery .gallery-item .gallery-caption{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5027 .elementor-element.elementor-element-481d29e .gallery-item .gallery-caption{display:none;}.elementor-5027 .elementor-element.elementor-element-481d29e .gallery-item img{border-radius:10px 10px 10px 10px;}body.elementor-page-5027:not(.elementor-motion-effects-element-type-background), body.elementor-page-5027 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-kadence7 );}@media(max-width:1024px){.elementor-5027 .elementor-element.elementor-element-642083a{margin-top:0px;margin-bottom:48px;padding:0px 0px 0px 0px;}.elementor-5027 .elementor-element.elementor-element-6838e961{padding:0px 20px 0px 20px;}.elementor-5027 .elementor-element.elementor-element-0fd5756 > .elementor-widget-container{margin:0px 0px 200px 0px;}}@media(max-width:767px){.elementor-5027 .elementor-element.elementor-element-642083a{padding:0px 0px 0px 0px;}.elementor-5027 .elementor-element.elementor-element-6838e961{padding:0px 15px 0px 15px;}.elementor-5027 .elementor-element.elementor-element-0fd5756 > .elementor-widget-container{margin:0px 0px 100px 0px;}}/* Start custom CSS for shortcode, class: .elementor-element-a06fb25 */.custom-course-bg {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    z-index: 0; /* Ensures content inside this element is above the overlay */
}

.custom-course-bg::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: linear-gradient(
    to bottom,
    var(--global-palette9) 0%,  
    #3A7DE338 40%,  
    var(--global-palette7) 100%
    );*/
    background: linear-gradient(
    to bottom,
    var(--global-palette9) 0%,
    #3A7DE338 40%,  
    rgba(18,18,18, 1) 100%
    );
    
    
    z-index: -1; /* Places the overlay beneath the content */

}




/* Tablet adjustments */
@media (max-width: 991px) {
    .custom-course-bg {
        background-position-x: -400px;
    }
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .custom-course-bg {
        background-position-x: -500px;
    }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-0fd5756 *//* Course Title */
.custom-continue-watching .custom-course-title {
    font-size: 22px;
    letter-spacing: 1px;
}

/* Lesson Title */
.custom-continue-watching .custom-lesson-title {
    font-size: 32px;
    /*text-shadow: 1px 1px 2px #f2f2f2;*/
    margin-bottom: 30px;
    margin-top: 15px;
}

/* Button */
.custom-continue-watching .custom-continue-btn {
    /*background: linear-gradient(90deg, #0000ff, #4b4bff);*/
    background: linear-gradient(90deg,
    var(--global-palette1),
    var(--global-palette2));
    box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.1); /* Light initial shadow */
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    transition: background 0.3s, transform 0.3s;
}

.custom-continue-watching .custom-continue-btn:hover {
    /*background: linear-gradient(90deg, #4b4bff, #0000ff);*/
    background: linear-gradient(90deg,
    var(--global-palette2),
    var(--global-palette1));
    transform: scale(1.05);
    box-shadow: 0px 8px 20px rgba(255, 255, 255, 0.2); /* More pronounced light shadow on hover */
}

.custom-continue-watching .custom-continue-btn .fa-play {
    margin-right: 10px;
}

.custom-continue-btn svg {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-2c27911 */.course-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-right: -30px;
}

.course-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;
    width: calc(25% - 30px); /* 5 columns for desktop */
    margin-bottom: 30px;
}

/*
.course-card:hover {
    box-shadow: 0px 8px 20px rgba(255, 255, 255, 0.2);
}*/
.course-card:hover {
    /*border: 2px solid rgba(0, 128, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 128, 255, 0.8);*/
     border: 2px solid rgba(58, 125, 227, 0.5);
     box-shadow: 0 0 10px rgba(58, 125, 227, 0.8);

    /*transform: translateY(-5px);  Slight upwards shift for added effect */
    transition: box-shadow 0.3s, transform 0.3s; /* Smooth transition for both properties */
}


/* Tablet view */
@media (max-width: 1024px) and (min-width: 768px) {
    .course-card {
        width: calc(33.33% - 30px); /* 4 columns for tablet */
    }
}

/* Mobile view */
@media (max-width: 767px) {
    .course-card {
        width: calc(50% - 30px); /* 2 columns for mobile */
    }
}

.course-card img {
    width: 100%;
    border-radius: 10px;
    aspect-ratio: 2 / 3;
    transition: transform 0.3s;
}

.course-card:hover img {
    transform: scale(1.1);
    border-radius: 10px;
}

.course-hover-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Position button at the bottom on hover */
    align-items: center;
    background: linear-gradient(rgba(0, 128, 255, 0.2), rgba(0, 0, 0, 0.9));
    opacity: 0;
    transition: opacity 0.3s;
    padding-bottom: 20px; /* Padding for the button */
}

.course-card:hover .course-hover-content {
    opacity: 1;
}

.course-hover-content p {
    color: white;
    margin-bottom: 5px;
    
}

.course-hover-content button {
    display: flex;
    padding: 10px 30px;
    border-radius: 10px;
    background-color: white;
    border: none;
    cursor: pointer;
    color: black;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.course-hover-content button:hover {
    background-color: #32E2F1;
}
/*
.course-card .course-hover-content p.lesson-count {
    font-weight: bold;
    margin-bottom: 10px;
}*/

.course-card .course-hover-content button svg {
    margin-right: 10px;
    width: 25px;
    height: 25px;
}

/*Make button smaller on tablet/mobile*/
@media (max-width: 1024px) {
    .course-hover-content button {
        padding: 5px 10px;
        font-size: 14px;
    }
    .course-card .course-hover-content button svg {
        margin-right: 5px;   
    }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-6838e961 */.elementor-5027 .elementor-element.elementor-element-6838e961{
    margin-top: calc(-100vh + 128px);
}
@media (max-width: 1024px){
    .elementor-5027 .elementor-element.elementor-element-6838e961{
        margin-top: calc(-100vh + 64px);
    }
}/* End custom CSS */