.course-image {
    width: 436px; /* Set your desired width */
    height: 200px; /* Set your desired height */
    overflow: hidden; /* Hides the overflow to crop the image */
    position: relative; /* Ensures child elements align correctly */
    border-radius: 2px;
}

.course-image img {
    width: 100%; /* Ensures the image fills the width */
    height: 100%; /* Ensures the image fills the height */
    object-fit: cover; /* Crops the image while maintaining aspect ratio */
    object-position: center; /* Centers the cropped image */
   
}

/* body {
    overflow-x: hidden;
} */

* {
    box-sizing: border-box;
}



.course-overview {
    display: -webkit-box; /* Enables Flexbox for Webkit browsers */
    -webkit-box-orient: vertical; /* Ensures text flows vertically */
    overflow: hidden; /* Hides overflowed text */
    text-overflow: ellipsis; /* Adds ellipsis at the end */
    -webkit-line-clamp: 2; /* Limits to 2 lines */
    line-height: 1.5; /* Adjust line height for better spacing */
    max-height: calc(1.5em * 2); /* Adjust height based on line height and number of lines */
    margin-top: 17px;
    font-size: 16px;
    font-family:Helvetica;
    color: #0D1E3A;
}

.course-meta {
    display: flex;
    gap: 4px;
    margin-top: 20px;
    color: #0D1E3A;
    padding-top: 16px;
    border-top: 1px solid #D5D5D5;
}

.course-meta-column {
    width: 210px;
}

.course-form-value {
    font-weight: 700;
    font-size: 14px;
    font-family:Helvetica;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 180px;
    display: block;
}

.course-form-label {
    font-weight: 400;
    font-size: 14px;
    font-family:Helvetica;
}

.course-status {
    color: #4778FF;
}

.course-details-container-search .course-card,
.course-details-container-search .course-content,
.layout-horizontal .course-details-container-search .course-image
 {
  width: 408px !important;
}

#course-search-results .product-item {
    margin-right: 24px;
}

#course-search-results.layout-vertical  .product-item  {
    margin-right: 0;
    margin-bottom: 80px;
}

#course-search-results.layout-vertical .course-content {
    padding-top: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    gap: 16px;
}

#course-search-results {
    width: 1308px !important;
    display: flex;
    justify-content: center; /* This centers the items horizontally */
    align-items: center; /* This centers the items vertically */
    width: 100%;
    margin: 0 auto; /* Ensures the div is centered if it has a fixed width */
    margin-left: -24px;
}

#course-search-results.layout-vertical {
    display: inline;
}

#course-search-results.layout-vertical .product-item,
#course-search-results.layout-vertical .course-card {
    width: 100% !important;
    display: flex;
}

#course-search-results.layout-vertical .course-card {
    gap: 24px;
}

#course-search-results.layout-vertical .course-details-container-search .course-image {
    width: 624px;
    height: 307px !important;
}

#course-search-results.layout-vertical .course-details-container-search .course-content {
    width: 625px !important;
    min-height: 293px; /* Set a minimum if you want a consistent base */
    height: auto !important; /* Allow it to grow */
}

.course-content {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 24px;
}

.page-content #course-search-results a {
    text-decoration: none;
}

/* .page-content #course-search-results a:hover {
    text-decoration: underline;
} */

.product-item:hover {
    background-color: #FFF;
    transition: background-color 0.3s ease;
    transition: box-shadow 0.3s ease;
    box-shadow: 0px 4px 20px 0px #0D1E3A1A;
    border-radius: 2px;
   

}

.course-details-container-search-link:hover .course-title {
    color: var(--e-global-color-primary);
    transition: color 0.3s ease;
}

.course-details-container-search-link:hover .course-title::after {
    width: 100%;
} 

.course-title::after {
    content: ''; /* Empty content for the pseudo-element */
    position: absolute;
    bottom: 0; /* Position at the bottom of the text */
    left: 0;
    width: 0; /* Initially no width */
    height: 2px; /* Line thickness */
    background-color: var(--e-global-color-primary);
    transition: width 0.1s ease; /* Transition for width change */
}

.course-details-container-search-link {
    border-radius: 2px;
}

.page-content a.course-details-container-link {
    text-decoration: none;
}

.course-details-container {
    padding: 40px;
    box-shadow: -30px 80px 84px 0px #4778FF1A;
    backdrop-filter: blur(44px);
    background-color: #FAFAFAcc;
    border-radius: 4px;
    transition: background-color 0.3s ease-out;

}

.course-details-container:hover {
    cursor: pointer;
    background-color: #FAFAFA;
    transition: background-color 0.3s ease;
}

.course-details-container:hover .course-title {
    color: #1C6EE8;
}

.comd-button .elementor-button-content-wrapper {
    line-height: 1.3;
}

.comd-button .elementor-button {

    top: 20px;
    left: 20px;
    border-radius: 4px;
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 16px;
    gap: 12px;


}
.comd-button .elementor-button:hover {
    background: #25344d !important;

}

.comd-button .elementor-button-icon svg {
    margin-right: 5px;
    width: 20px;
    height: 20px;
}

.comd-button .elementor-button:hover svg {
    transform: scale(1.2);
    animation-timing-function: cubic-bezier(0.7, -0.4, 0.4, 1.4);
    animation-duration: 150ms;
}

span.hfe-breadcrumbs-home-icon {
    margin: 0;
}

#comd-about-us-acc li a {
    margin-left: 0;
    margin-right: 32px;
    color: #8793A1;
}


/* #comd-about-us-acc li a {
    padding-right: 24px;
}

#comd-about-us-acc li a:hover {
    border-bottom: 1px solid var(--e-global-color-primary);
} */

#comd-about-us-acc li.current-menu-item a {
    border-bottom: 4px solid #0D1E3A;
    color: #0D1E3A;

}

.course-title {
    font-weight: 700;
    font-size: 24px;
    font-family: Helvetica;
    color: #0D1E3A;
    position: relative;
    padding-bottom: 17px; /* Padding for the line below */
}

.load-more-btn {
    background: #FFF;
    color: #1C6EE8;
    display: flex
    ;
    align-items: center;
    justify-content: center;
    border: 1px solid #1C6EE8;
    font-weight: bold;
    cursor: pointer;
    margin: 0 auto;
    height: 56px;
    top: 20px;
    left: 20px;
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 16px;
    border-radius: 4px;
    border-width: 1px;
    font-family: Helvetica;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    text-align: right;
}

.load-more-btn:hover, .load-more-btn:active, .load-more-btn:focus {
    background: #3D5EFF1A;
    border: 1px solid var(--Main-Blue, #1C6EE8);
    color: #1C6EE8;
}

.course-details-container:hover .course-title::after {
    width: 100%; /* On hover, the width will expand to 100% */
}

@media only screen and (max-width: 767px) { /* Adjust the breakpoint as needed */

    .course-details-container-search .course-card {
        width: 100% !important; /* Set the width to 100% for mobile */
        margin-right: 0; /* Remove right margin */
        margin-bottom: 24px; /* Add bottom margin for spacing */
    }

        /* Remove flex on product items */
        #course-search-results.layout-vertical .product-item {
            display: block !important; /* Ensure block layout */
        }
    

    #course-search-results.layout-vertical .course-details-container-search .course-image {
        width: auto !important;
        height: auto !important;
    }

    #course-search-results.layout-vertical .course-card {
        width: 100% !important;
        display: block !important;
    }

    #course-search-results.layout-vertical .course-card > * {
        width: 100% !important;
        display: block !important;
    }

    #course-search-results.layout-vertical .course-details-container-search .course-content {
        width: 100% !important;
    }
    .layout-vertical .course-details-container-search .course-content, .layout-vertical .course-details-container-search .course-image {
        max-width: 100%; /* Set the width to 312px for mobile */
    }

    .layout-vertical .course-details-container-search .course-content, .layout-vertical .course-details-container-search .course-meta {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .course-details-container-search .course-meta-column, 
    .course-details-container-search .course-form-value {
        width: 148px;
    }

    .course-details-container-search-link:hover .course-card {
        background-color:none;
        transition: none;
        transition: none;
        box-shadow: none;
        border-radius: none;
       
    
    }
    
    .course-details-container-search-link:hover .course-title {
        color: none;
        transition: none;
    }
    
    .course-details-container-search-link:hover .course-title::after {
        width: 0;
    } 
}


#course-search-results::-webkit-scrollbar {
    overflow: scroll;
    overflow: auto; /* Ensure scrolling still works */
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}


/* Carousel Navigation Arrows */
#course-search-results .slick-prev,
#course-search-results .slick-next {
    background-color: transparent;
    border: none;
    cursor: pointer;
    z-index: 1;
    padding: 0;
}

/* Arrows - SVG */
#course-search-results .slick-prev svg,
#course-search-results .slick-next svg {
    width: 30px;  /* Adjust size of the arrow */
    height: 30px; /* Adjust size of the arrow */
    fill: #007cba; /* Color of the arrow */
    transition: transform 0.3s ease; /* Smooth transition for scaling */
    transform-origin: center center; /* Ensure scaling is from the center */
}

/* Hover effect - change color */
#course-search-results .slick-prev:hover svg,
#course-search-results .slick-next:hover svg {
    fill: #005f87; /* Change color on hover */
    transform: scale(1.25); /* Scale the arrow */
}

/* Arrow Positioning */
#course-search-results .slick-prev {
    left: -100px; /* Adjust positioning on left */
    width: 65px;
    height: 65px;
}

#course-search-results .slick-next {
    right: -100px; /* Adjust positioning on right */
    width: 65px;
    height: 65px;
}

/* Hide the default arrow content */
#course-search-results .slick-prev::before,
#course-search-results .slick-next::before {
    display: none;
}

/* Hover effect for the button (shadow and padding) */
#course-search-results .slick-prev:hover,
#course-search-results .slick-next:hover {
    border-radius: 100px;
}

/* Hover effect for images inside the button (if any) */
#course-search-results .slick-prev:hover img,
#course-search-results .slick-next:hover img {
    transform: scale(1.25); /* Smooth scale on hover */
    animation-timing-function: cubic-bezier(0.7, -0.4, 0.4, 1.4);
    animation-duration: 150ms;
    background: #FFF;
    box-shadow: 0px 4px 20px 0px #0D1E3A1A;
    border-radius: 100px;
    padding: 12px;
}

.slick-list.draggable {
    padding-left: 18px;
    min-height: 594px;
    height: auto;
}

/* .slick-list.draggable .slick-cloned {
    display: none;
} */