/*-------------------------------------------------------
------------------Banner Course Search Form--------------
--------------------------------------------------------*/

/*#courseSearchForm {
    display: flex;
    gap: 15px;
    justify-content: center;
}*/

#courseSearchForm .hero-search-form-select,
#courseSearchForm .hero-search-btn {
    height: 45px !important;
}

#courseSearchForm {
    padding: 8px;
    background-color: rgb(225 225 225);
}


.three h1:before,
.three h1:after {
    background-color: #ffc600;
}

.corp-training-call-to-action {
    border: 0.5px solid #f7f7f77a;
    border-radius: 15px;
    padding: 40px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.corp-training-call-to-action h3 {
    font-size: clamp(1.25rem, 1.1986rem + 0.2572vw, 1.5rem);
}

.corp-training-call-to-action img {
    border-radius: 10px;
    width: 100%;
    border: 0.5px solid #f3f3f3;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .4);

}

.pagination-area .row .content-container.row {
    gap: 30px;
    justify-content: center;
    align-items: center;
}


.benifits ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 2rem;
    padding: 0;
    margin: 0;
    list-style: outside none none;
}

.benifits li::before {
    content: "\f058";
    position: absolute;
    font-family: FontAwesome;
    left: 0;
    top: 0;
    font-size: 20px;
    border-radius: 50%;
    z-index: 1;
    line-height: 1.3;
    color: #fdc800;
}

.benifits li {
    box-sizing: border-box;
    float: left;
    padding-left: 30px;
    position: relative;
    margin-bottom: 10px;
    margin-right: 5px;
    color: #444444;
}

.theme-form .row {
    gap: 0 !important;
}



/*******************Course Detail Page*********************/

.inner-page-banner-area {
    display: flex !important;
    align-items: center;
    min-height: 500px;

}

.page-links {
    background: #f5f5f5;
    padding: 0px 40px;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-links.fixed {
    position: fixed;
    top: 82px;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-links a {
    color: #002147;
    text-decoration: none;
    padding: 25px 20px;
    text-align: center;
}

.page-links a.active {
    color: #002147;
    font-weight: 600;
    border-bottom: 3px solid #f9cf30;
    text-align: center;
}

.spacer {
    height: 0;
    transition: height 0.3s;
}




.modules-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1000px;
    margin: auto;
    align-items: flex-start;
    /* ✅ prevents all boxes from equalizing height */
}

.module-box {
    flex: 1 1 calc(33.333% - 20px);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}

.module-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkmark {
    color: #5a67d8;
    font-weight: bold;
    font-size: 18px;
}

.plus-btn {
    background: #fde68a;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.plus-btn:hover {
    background: #fbbf24;
}

.module-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 20px;
    background: #fafafa;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}

.module-content.active {
    max-height: 1000px;
    /* big enough for the content */
    padding: 20px;
}

.module-content ul {
    margin-left: 25px;
}

.module-content ul li {
    width: 100% !important;
    list-style-type: disc;
    padding-left: 0 !important;
}

.module-content ul li::after,
.module-content ul li::before {
    content: none !important;
}




.module-box.active .module-content {
    max-height: 200px;
    /* adjust as needed */
    padding: 15px 20px;
}

.module-box.active .plus-btn::after {
    content: "-";
}

.plus-btn::after {
    content: "+";
}

/* Responsive */
@media (max-width: 900px) {
    .module-box {
        flex: 1 1 calc(50% - 20px);
        margin: 10px;
    }
}

@media (max-width: 600px) {
    .module-box {
        flex: 1 1 100%;
    }
}


<style> :root {
    --cs-bg: #0f172a;
    /* slate-900 */
    --cs-fg: #e2e8f0;
    /* slate-200 */
    --cs-dim: #94a3b8;
    /* slate-400 */
    --cs-accent: #22d3ee;
    /* cyan-400 */
    --cs-card: #111827;
    /* gray-900 */
    --cs-skel1: #1f2937;
    /* gray-800 */
    --cs-skel2: #374151;
    /* gray-700 */
    --cs-radius: 16px;
    --cs-pad: clamp(1rem, 2vw + .5rem, 2rem);
    --cs-maxw: 1100px;
}

.coming-soon {
    background: radial-gradient(1200px 600px at 10% -10%, #0ea5e9 0%, transparent 50%),
        radial-gradient(1000px 600px at 110% 10%, #22d3ee 0%, transparent 45%),
        var(--cs-bg);
    color: var(--cs-fg);
    padding: clamp(3rem, 6vw, 6rem) var(--cs-pad);
    display: grid;
    place-items: center;
}

.cs-wrap {
    width: 100%;
    max-width: var(--cs-maxw);
    text-align: center;
}

.cs-badge {
    width: 100px;
    height: 100px;
    margin-inline: auto;
    display: grid;
    place-items: center;
    font-size: 2.75rem;
    background: linear-gradient(135deg, var(--cs-accent), #60a5fa);
    color: #0b1220;
    border-radius: 999px;
    box-shadow: 0 8px 30px rgba(34, 211, 238, .35);
    transform: translateY(0);
    animation: float 3.8s ease-in-out infinite;
    margin-top: 20px;
}

.cs-title {
    margin: 1rem 0 .25rem;
    font-size: clamp(1.5rem, 2.5vw + .5rem, 2.25rem);
    font-weight: 800;
    letter-spacing: .2px;
}

.cs-subtitle {
    margin: 0 auto 1.75rem;
    max-width: 60ch;
    color: var(--cs-dim);
    font-size: clamp(.95rem, 1.2vw + .4rem, 1.05rem);
    line-height: 1.6;
}

.cs-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(.8rem, 2vw, 1.2rem);
    margin-top: 1.25rem;
}

.cs-skeleton-card {
    height: 160px;
    border-radius: var(--cs-radius);
    background:
        linear-gradient(100deg, var(--cs-skel1) 20%, var(--cs-skel2) 40%, var(--cs-skel1) 60%) no-repeat;
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

@media (max-width: 900px) {
    .cs-skeleton-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .cs-skeleton-grid {
        grid-template-columns: 1fr;
    }

    .cs-skeleton-card {
        height: 140px;
    }
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}






section,
section.course-details-inner {
    padding: 100px 20px;
    scroll-margin-top: 200px;
}


#section1 {
    background-color: #f8f9fa;
}

#section2,
#section4,
#section6 {
    background-color: #F4F6F8;
}

#section3 {
    /* background-color: #f8f9fa;*/
    background-color: #c4e5ff;

}


#section3>.events-schedules-area p,
#section3>.events-schedules-area h2,
#section3>.events-schedules-area span {
    color: #061674 !important;
}


#section2 ul li,
#section3 ul li,
#section4 ul li,
#section5 ul li,
#section6 ul li,
#section7 ul li,
#section8 ul li {
    width: 49%;
    box-sizing: border-box;
    float: left;
    padding-left: 30px;
    position: relative;
    margin-bottom: 10px;
    margin-right: 5px;
    color: #444444;
    text-align: left;
}

#section2 ul li::before,
#section3 ul li::before,
#section4 ul li::before,
#section5 ul li::before,
#section6 ul li::before,
#section7 ul li::before,
#section8 ul li::before {
    content: "\f058";
    position: absolute;
    font-family: FontAwesome;
    left: 0;
    top: 0;
    font-size: 20px;
    border-radius: 50%;
    z-index: 1;
    line-height: 1.3;
    color: #fdc800;
}

.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 40px;
    margin: 0;
}

.breadcrumb li {
    margin-right: 0.5rem;
}

.breadcrumb li+li:before {
    content: ">";
    margin-right: 0.5rem;
    color: #555;
}

.breadcrumb a {
    text-decoration: none;
    color: #007bff;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.pagination-area .row {
    gap: 40px;
    justify-content: space-between;
}


.form-control {
    width: 100%;
    border-radius: 0px;
    line-height: 1.5;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.input-1 {
    border-radius: 50px 0 0 50px;
}

.form-select {
    width: 100%;
    border-radius: 0px;
    line-height: 1.5;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.btn {
    width: 100%;
    border-radius: 0px;
    line-height: 1.5;
    font-size: 14px;
    font-weight: 500;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.home-btn {
    font-family: 'Pathway Gothic One', sans-serif;
    border-radius: 0 50px 50px 0;
    background: #fed746 !important;
}

.hero--five .hero__content {
    position: relative;
    overflow: hidden;
    background: url(https://heroxtra.themes-studio.com/assets/img/hero/banner4-img.jpg) repeat scroll center center / cover;
    padding: 60px 60px;
    border-radius: 15px;
}

.hero--five .ts-banner-shape1 {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hero--five .ts-banner-shape2 {
    width: 78px;
    height: 5px;
    background: #1b71fc;
    margin-bottom: 10px;
}

.hero--five .hero__content .ts-banner-title {
    font-size: clamp(1.25rem, 1.0957rem + 0.7717vw, 2rem);
    line-height: 1.2;
    color: #212121;
}

.hero--five .hero__content .ts-banner-title span {
    display: inline-block;
    color: #1b71fc;
}

.hero--five .hero__content .ts-banner-paragraph {
    margin-top: 20px;
    margin-bottom: 25px;
    font-size: clamp(0.9rem, 0.9486rem + 0.2572vw, 1.25rem);
}


.hero--five .hero__content .ts-banner-btn {
    display: flex;
}


.ts-btn {
    user-select: none;
    background: #1b71fc none repeat scroll 0 0;
    border: medium none;
    border-radius: 12px;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-size: clamp(0.75rem, 0.7114rem + 0.1929vw, 0.9375rem);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 0px;
    padding: 12px 20px;
    text-align: center;
    touch-action: manipulation;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.ts-btn:hover {
    color: #fff !important;
}


.ts-btn4 {
    user-select: none;
    background: #ffffff none repeat scroll 0 0;
    border-radius: 12px;
    border: 2px solid #f9cf30;
    color: #212121;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 0px;
    padding: 12px 20px;
    text-align: center;
    touch-action: manipulation;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.ts-btn4:hover {
    color: #212121 !important;
    background: #f9cf30;
}

.hero--five .hero__content .ts-banner-btn .ts-btn {
    margin-right: 20px;
}


.inner-page-banner-area:after {
    background-color: rgb(7 34 65 / 80%) !important;
}

.inner-page-banner-area {
    padding: 160px 30px 100px !important;
}

.lesson-studente {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 18px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.lesson-studente .lesson {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lesson-studente .lesson i {
    font-size: 14px;
}

.lesson-studente .lesson span {
    color: #737477;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}

.section-title-1 {
    text-align: center;
    margin-bottom: 38px;
}

.section-title-1 h2 {
    font-weight: 600;
}

.section-title-1 span {
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 0;
    color: #ce9100;
}

.events-schedules-area p {
    font-size: 15px;
    color: #5c6a75;
}

.events-schedules-table {
    padding-left: 0;
    margin-bottom: 0;
    border: 1px solid #ebebeb;
    padding: 35px 25px;
    border-radius: 5px;
    margin-bottom: 25px;
    transition: 0.6s;
    position: relative;
}

.events-schedules-table .ribbon {
    top: 0;
}

.events-schedules-table:hover {
    background-color: #f2f8ff;
    border: 1px solid #f2f8ff;
}

.events-schedules-table .number {
    display: inline-block;
    height: 55px;
    width: 55px;
    line-height: 55px;
    background-color: #ffffff;
    box-shadow: 0 0 1.25rem rgba(108, 118, 134, 0.1);
    color: #ce9100;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    border-radius: 50px;
    transition: 0.6s;
}

.events-schedules-table .number:hover {
    background-color: #f9cf30;
    color: #212121;
}

.events-schedules-table .time-content p {
    font-size: 16px;
    color: #fc5a1b;
    font-weight: 500;
    margin-bottom: 5px;
    position: relative;
    padding-left: 22px;
}

.events-schedules-table .time-content span {
    font-size: 16px;
    font-weight: 500;
    color: #212121;
}

.events-schedules-table .content-title h3 {
    font-size: 22px;
    margin-bottom: 0;
    line-height: 1.4;
}

.events-schedules-table:hover .content-title h3 a {
    color: #f9cf30;
}

.events-schedules-table .content-info {
    position: relative;
}

.events-schedules-table .content-info img {
    display: inline-block;
    height: 55px;
    width: 55px;
    border-radius: 10px;
    position: absolute;
    left: 0;
    top: 0;
}

.events-schedules-table .content-info h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0px;
}

.events-schedules-table .content-info p {
    font-size: 15px;
    color: #5c6a75;
}

.events-schedules-table .content-btn {
    text-align: right;
}

.default-btn-1 {
    border: none;
    position: relative;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    color: #212121;
    background-color: #f9cf30;
    transition: 0.6s;
    border-radius: 5px;
    padding: 10px 20px 10px 50px;
    font-weight: 500;
    font-size: clamp(0.8125rem, 0.7739rem + 0.1929vw, 1rem);
    margin-bottom: -5px;
}

.default-btn-1 span {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: #172b3b;
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
    transform: translate(-50%, -50%);
    z-index: -1;
    border-radius: 5px;
}

.default-btn-1 i {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
}

.default-btn-1:hover {
    color: #002147;
}

.line {
    width: 35px;
    height: 1px;
    background-color: #a3a3a3;
    margin: 4px 0;
}

.rotated {
    display: inline-block;
    transform: rotate(90deg);
    transform-origin: center;
    margin-top: 10px;
}

.month-content p {
    font-size: 16px;
    color: #212121;
    font-weight: 500;
    margin-bottom: 0px !important;
    position: relative;
    padding: 0px !important;
}

.month-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
}


.events-schedules-table label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.events-schedules-table input[type=checkbox] {
    line-height: normal;
    width: 20px;
    height: 20px;
}



.course-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.course-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}


.course-image-container .new-banner-image-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: linear-gradient(180deg, rgba(11, 11, 46, 0) 20.31%, rgba(11, 11, 46, .6) 61.46%, #0b0b2e);
}

.rounded-20 {
    border-radius: 20px;
}


.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(11, 11, 46, 0) 20.31%, rgba(11, 11, 46, .6) 61.46%, #0b0b2e);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}


.wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mainMenu {
    width: 250px;
    display: block;
    border-radius: 10px;
    overflow: hidden;
}

.item {
    border-top: 1px solid #ef584a;
    overflow: hidden;
}

.course-highlight-item {
    display: block;
    padding: 15px 20px;
    background-color: #ff6f61;
    color: #fff;
    position: relative;

}

.course-highlight-item:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #ff6f61;
    right: 15px;
    bottom: -10px;
    z-index: 9;

}

.course-highlight-item i {
    margin-right: 10px;
}

.subMenu {
    background: #273057;
    overflow: hidden;
    transition: max-height 0.7s;
    max-height: 0;
}

.subMenu a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    font-size: 14px;
    border-bottom: 1px solid #394c7f;
    position: relative;

}

.subMenu a:before {
    content: '';
    opacity: 0;
    transition: opacity 0.3s;

}

.subMenu a:before {
    content: '';
    position: absolute;
    height: 0;
    width: 6px;
    left: 0;
    top: 0;
    opacity: 1;
    /* background-color: #d8d824; */
    border-top: 24px solid transparent;
    border-left: 11px solid #fcdc29;
    border-bottom: 24px solid transparent;
}

.subMenu a:after {
    content: '';
    opacity: 0;
    transition: opacity 0.3s;

}

.subMenu a:after {
    content: '';
    position: absolute;
    height: 0;
    width: 6px;
    right: 0px;
    top: 0;
    opacity: 1;
    /* background-color: #d8d824; */
    border-top: 24px solid transparent;
    border-right: 11px solid #fcdc29;
    border-bottom: 24px solid transparent;
}

.subMenu a:hover {
    background: #273057;
    background: -moz-linear-gradient(top, #273057 0%, #273057 50%, #394c7f 51%, #394c7f 100%);
    background: -webkit-linear-gradient(top, #273057 0%, #273057 50%, #394c7f 51%, #394c7f 100%);
    background: linear-gradient(to bottom, #273057 0%, #273057 50%, #394c7f 51%, #394c7f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#273057', endColorstr='#394c7f', GradientType=0);
    transition: all 0.3s;
    border-bottom: 1px solid #394c7f;
}

.subMenu a:last-child {
    border: none;
}

.item:target .subMenu {
    max-height: 10em;
}

.accordion {
    font-size: 1rem;
    width: 30vw;
    margin: 0 auto;
    border-radius: 5px;
}

.accordion-header,
.accordion-body {
    background: white;
}

.accordion-header {
    padding: 1.5em 1.5em;
    background: #3F51B5;
    color: white;
    cursor: pointer;
    font-size: .7em;
    letter-spacing: .1em;
    transition: all .3s;
    text-transform: uppercase;
}

.accordion__item {
    border-bottom: 1px solid #3a4ba4;
}

.accordion__item .accordion__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.accordion-header:hover {
    background: #2D3D99;
    position: relative;
    z-index: 5;
}

.accordion-body {
    background: #fcfcfc;
    color: #353535;
    display: none;
}

.accordion-body__contents {
    padding: 1.5em 1.5em;
    font-size: .85em;
}

.accordion__item.active:last-child .accordion-header {
    border-radius: none;
}

.accordion:first-child>.accordion__item>.accordion-header {
    border-bottom: 1px solid transparent;
}

.accordion__item>.accordion-header:after {
    content: "\f3d0";
    font-family: IonIcons;
    font-size: 1.2em;
    float: right;
    position: relative;
    top: -2px;
    transition: .3s all;
    transform: rotate(0deg);
    display: none;
}

.accordion__item.active>.accordion-header:after {
    transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
    background: #2D3D99;
}

.accordion__item .accordion__item .accordion-header {
    background: #f1f1f1;
    color: #353535;
}

@media screen and (max-width: 1000px) {
    body {
        padding: 1em;
    }

    .accordion {
        width: 100%;
    }
}

.accordion__wrapper {
    position: sticky;
    top: 20px;
    /* distance from top when sticking */
}

.target-audience {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    justify-content: center;

}

.target-audience .card {
    width: 45%;
    border-radius: 20px;
    border-left: 3px solid #fdd333;
}

/* List */
.target-audience ul {
    counter-reset: index;
    padding: 0;
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
    column-gap: 2rem;
}

/* List element */
.target-audience ul li {
    counter-increment: index;
    display: flex;
    align-items: center;
    padding: 12px 0;
    box-sizing: border-box;
    text-align: left;
    break-inside: avoid;
    margin-bottom: 0.5rem;
}


/* Element counter */
.target-audience ul li::before {
    content: counters(index, ".", decimal-leading-zero);
    font-size: 1.5rem;
    text-align: right;
    font-weight: bold;
    min-width: 50px;
    padding-right: 12px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    align-self: flex-start;
    background-image: linear-gradient(to bottom, rgb(44, 132, 233), #fdc800);
    background-attachment: fixed;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Element separation */
.target-audience ul li+li {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

#section8 {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}

#section8::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(310deg, rgba(7, 41, 77, 0.6392156863) 0%, #07294D 100%);
    z-index: -1;
}

.event-title .title {
    color: #ffffff;
    font-size: 36px;
    padding-bottom: 5px;
}

.basic-card {
    width: 300px;
    position: relative;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 1rem;
    justify-content: center;
}



/* Active state */
input[type="radio"]:checked+.filter-btn,
input[type="checkbox"]:checked+.filter-btn {
    background-color: #1976d2;
    color: white;
    /*box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.3);*/
}

/* Hide inputs */
input[type="radio"],
input[type="checkbox"] {
    display: none;
}

/* Style the checkbox differently */
.checkbox-btn {
    border-style: dashed;
    color: #555;
    border-color: #999;
}

/* Hide checkbox initially */
.checkbox-wrapper {
    display: none;
}

/* Show checkbox only when any radio is checked */
#sat:checked~.checkbox-wrapper,
#sun:checked~.checkbox-wrapper,
#both:checked~.checkbox-wrapper {
    display: block;
}



/*------------------------------
------Course Heightlights-------
--------------------------------*/

#section2 table tr td {
    border-bottom: 1px solid #CDE2E7;
    padding: 20px;
    font-size: 16px;
    line-height: 24px;
    color: #4E6770;
}

#section2 table tbody tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, 0.05);
}

/*-----------------------------------
-------------Fee Details-------------
------------------------------------*/

.events-schedules-table .fee-details {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.counter-section-04 {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding-top: 35px;
    padding-bottom: 65px;

}

.counter-section-04 .counter-title-wrap .title {
    font-size: 36px;
    color: #ffffff;
}

.single-counter-03 .icon {
    margin-bottom: 25px;
}

.single-counter-03 span {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
}

.single-counter-03 p {
    font-size: 14px;
    color: #ffffff;
}


.sidebar-details-wrap {
    margin-top: -420px;
    position: relative;
    z-index: 1;
    position: sticky;
    top: 100px;
}

@media only screen and (max-width: 991px),
only screen and (max-width: 767px) {
    .sidebar-details-wrap {
        margin-top: 50px;
    }
}

.sidebar-details-wrap-2 {
    margin-top: 0;
}

@media only screen and (max-width: 991px) {
    .sidebar-details-wrap-2 {
        margin-top: 50px;
    }
}

.sidebar-details-video-description {
    border-radius: 5px;
    background: #fff;
    border: 1px solid #ededed;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
}

.sidebar-details-video-description .sidebar-description {
    padding: 40px 40px 40px;
}

@media only screen and (max-width: 1199px),
only screen and (max-width: 575px) {
    .sidebar-details-video-description .sidebar-description {
        padding: 30px 20px 30px;
    }
}

.sidebar-details-video-description .sidebar-description .title {
    font-size: 20px;
    color: #021E40;
}

.sidebar-details-video-description .sidebar-description .btn {
    height: 45px;
    line-height: 45px;
    border-radius: 50px;
    background: #0071DC;
    color: #ffffff;
}

.sidebar-details-video-description .sidebar-description .btn:hover {
    background: #021E40;
}

.sidebar-details-video-description .sidebar-description .description-list {
    padding-top: 26px;
    padding-bottom: 15px;
}

.sidebar-details-video-description .sidebar-description .description-list li {
    font-weight: 500;
    font-size: 16px;
    color: #8a8a8a;
    border-bottom: 1px solid #ebebeb;
    color: #696868;
    padding: 12px 0;
}

.sidebar-details-video-description .sidebar-description .description-list li.price span {
    font-weight: 700;
    font-size: 24px;
    color: #ff4830;
}

@media only screen and (max-width: 1199px),
only screen and (max-width: 575px) {
    .sidebar-details-video-description .sidebar-description .description-list li {
        font-size: 15px;
    }
}

.sidebar-details-video-description .sidebar-description .description-list li:last-child {
    border-bottom: 0;
}

.sidebar-details-video-description .sidebar-description .description-list li i {
    color: #0071DC;
    margin: 0 4px 0 0;
}

.sidebar-details-video-description .sidebar-description .description-list li span {
    font-weight: 500;
    color: #021E40;
    float: right;
    display: block;
}

.sidebar-details-video-description .sidebar-description .share-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(204, 204, 204, 0.3);
    margin-top: 30px;
    padding-top: 20px;
}

.sidebar-details-video-description .sidebar-description .share-link .link-icon {
    font-size: 16px;
    text-align: center;
    color: #696868;
    margin-left: 5px;
}

.sidebar-details-video-description .sidebar-description .share-link:hover .social-share-wrapper {
    opacity: 1;
    visibility: visible;
}

.sidebar-details-video-description .sidebar-description .share-link .social-share-wrapper {
    display: block;
    position: absolute;
    left: 50%;
    bottom: calc(100% - 6px);
    transform: translateX(-70%);
    background-color: #28314b;
    z-index: 2;
    box-shadow: none;
    border-radius: 5px;
    margin: 0;
    padding: 2px;
    line-height: 0;
    white-space: nowrap;
    transition: all 0.3s linear;
    opacity: 0;
    visibility: hidden;
}

.sidebar-details-video-description .sidebar-description .share-link .social-share-wrapper::after {
    content: "";
    position: absolute;
    pointer-events: none;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5.5px 0 5.5px;
    border-color: #28314b transparent transparent transparent;
    left: 50%;
    bottom: -5px;
    margin-left: -5px;
}

.sidebar-details-video-description .sidebar-description .share-link .social-share-wrapper ul li {
    display: inline-block;
}

.sidebar-details-video-description .sidebar-description .share-link .social-share-wrapper ul li a {
    width: 30px;
    height: 35px;
    line-height: 35px;
    font-size: 12px;
    color: #ffffff;
    border-radius: inherit;
    text-align: center;
    transition: all 0.3s linear;
}

.sidebar-details-video-description .sidebar-description .share-link .social-share-wrapper ul li:hover a {
    background: rgba(255, 255, 255, 0.13);
}

.sidebar-details-video-description .sidebar-description .share-link .share-btn {
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 500;
    color: #696868;
}

.sidebar-details-video-description .sidebar-description .share-link .share-btn:hover {
    color: #07294d;
}

.sidebar-video {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}

.sidebar-video img {
    width: 100%;
}

.sidebar-video .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65px;
    height: 65px;
    line-height: 65px;
    background-color: #ffffff;
    border-radius: 50%;
    font-size: 14px;
    color: #002e5b;
    text-align: center;
    z-index: 2;
}

.sidebar-video .play:hover {
    color: #ffffff;
    background-color: #0071DC;
}

input[type="radio"],
input[type="checkbox"] {
    display: inline-block;
}

.color-fee {
    color: #ff4830 !important;
    font-weight: 600 !important;
}


.category-item-02 {
    display: flex;
    align-items: center;
    background: #EFF6F9;
    padding: 20px 30px 20px 30px;
    border-radius: 5px 5px 5px 5px;
    border: 1px dashed #2babe4;
}

.category-item-02.active {
    border: 1px dashed var(--global-yellow);
    background: #f9f8ef;

}

.category-item-02 .category-icon {
    width: 60px;
}

.category-item-02 .category-content {
    flex: 1;
    margin-left: 25px;
}

.category-item-02 .category-content h3 {
    font-size: clamp(0.750rem, 0.8236rem + 0.2572vw, 1.125rem);
    margin-bottom: 0;
}

.filter-wrapper {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 30px 20px;
    background: #f9f8ef;
    border-bottom: 1px solid var(--global-yellow);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    flex-wrap: wrap;
}


.filter-btn {
    padding: 10px 16px;
    border: 1.5px solid var(--global-yellow);
    border-radius: 15px;
    cursor: pointer;
    color: #333;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    background-color: white;
    font-size: 16px;
    margin-bottom: 15px;
}

.filter-btn:hover {
    background-color: var(--global-yellow);
    color: #333;
}

.filter-btn.active {
    background-color: var(--global-yellow);
    color: #333;
}

.schedule-container {
    overflow-y: auto;
    max-height: 600px;
}

.schedule-container::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.schedule-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.schedule-container::-webkit-scrollbar-thumb {
    background: #4bc4f8;
    border-radius: 5px;
}

.schedule-container::-webkit-scrollbar-thumb:hover {
    background: #2babe4;
}

.dates-container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 10px;
}

.event-schedule {
    display: grid;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.month-date-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.search-container.row {
    gap: 20px;
    margin-top: 20px;
}

/*------------------DatePicker-----------------*/
.ui-widget-content {
    border: none !important;
    background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
    border-radius: 13px !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 14px;
}

.ui-datepicker-inline {
    display: block;
    top: 76px;
    position: absolute;
    left: 0px;
}

.ui-widget-header {
    border: none;
    background: none;
    color: #222222;
    font-weight: bold;
    font-weight: 500;
    font-family: 'GTWalsheimPro-Medium';
}

.ui-datepicker td:hover {
    color: #fff !important;
    background: #0694d1 !important;
    border-radius: 50%;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    border: none !important;
    background: none !important;
    color: #22262A;
    font-size: 15px;
    font-family: 'GTWalsheimPro';
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 4px 0px;
}

.ui-datepicker .ui-datepicker-header {
    padding: .4em 0;
    border: none;
    background: none;
    color: #222222;
    font-weight: bold;
    font-weight: 500;
    font-family: "Raleway", sans-serif !important;
}

.ui-datepicker td,
.ui-datepicker th {
    font-family: "Raleway", sans-serif !important;
}


.schedule-filter-radio {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    border: 4px solid #ccc;
    border-top-color: #bbb;
    border-left-color: #bbb;
    background: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.radio_animated:after {
    border: 2px solid #6362e7;
}

.month-mobile {
    display: none;
}