:root {
    /* Colors defined for Enlight. */
    --seashell: #ecf2f6;
    --lavender_mist: #ebecfe;
    --color_shark_approx: #2a2a2a;
    --pecan_pine: #f2eae3;
    --wild_sand: #f4f4f4;
    --mercury: #e5e5e5;
    --color_quill_gray_approx: #d4d4d4;
    --color_silver_approx: #bfbfbf;
    --color_silver_sand_approx: #c2c2c2;
    --color_celeste_approx: #cfcfcf;
    --color_mountain_mist_approx: #909090;
    --color_dove_gray_approx: #3b2e2e;
    --color_ironside_gray_approx: #676767;
    --color_chicago_approx: #5c5c5c;
    --color_mine_shaft_approx: #333;
    --color_tuna_approx: #373a3c;

    /* Black color variables */
    --black: #000;
    --black_01_approx: rgba(0, 0, 0, .01);
    --black_05_approx: rgba(0, 0, 0, .05);
    --black_10: rgba(0, 0, 0, .10);
    --black_23: rgba(0, 0, 0, .23);
    --black_40: rgba(0, 0, 0, .4);
    --black_65: rgba(0, 0, 0, .65);
    --black_80: rgba(0, 0, 0, .8);
    /* --black_gradient_bg: linear-gradient(0deg, var(--color_silver_approx), transparent); */
    --black_gradient_bg: linear-gradient(0deg, var(--black), var(--black_01_approx));

    /* White color variables */
    --white: #fff;
    --white_10: rgba(255, 255, 255, .1);
    --white_25: rgba(255, 255, 255, .25);
    --white_50: rgba(255, 255, 255, .5);
    --white_80: rgba(255, 255, 255, .8);

    /* Primary color variables */
    --primary: #25549b;
    --primary_01_approx: rgba(0, 120, 200, .01);
    --primary_25_approx: rgba(0, 120, 200, .25);
    --primary_50_approx: rgba(0, 120, 200, .5);
    --primary_80_approx: rgba(0, 120, 200, .8);
    --primary_gradient_bg: linear-gradient(0deg, var(--primary), var(--primary_01_approx));

    /* Secondary color variables */
    --secondary: #4ac49d;
    --secondary_25_approx: rgba(74, 196, 157, .25);

    /* Tertiary color variables */
    --color_tertiary: #213b55;
    --color_tertiary_50: rgba(33, 59, 85, .5);
    --color_tertiary_70: rgba(33, 59, 85, .7);
    --tertiary_gradient_border: linear-gradient(120deg, var(--color_tertiary), var(--secondary));
    --tertiary_gradient_bg: linear-gradient(120deg, var(--color_tertiary), var(--primary));

    --lavender_mist_01_approx: rgba(235, 236, 254, .01);
    --lavender_mist_70_approx: rgba(235, 236, 254, .7);
    --lavender_mist_95_approx: rgba(235, 236, 254, .95);

    /* Primary color gradient variables */
    --white_gradient_primary_border: linear-gradient(var(--white), var(--white)) padding-box,
                linear-gradient(120deg, var(--primary), var(--secondary)) border-box;
    --primary_gradient_border: linear-gradient(120deg, var(--primary), var(--secondary));
    --primary_50_gradient_bg: linear-gradient(90deg, var(--primary), var(--primary_50_approx));
    --lavender_mist_gradient_bg: linear-gradient(0deg, var(--lavender_mist), var(--lavender_mist_01_approx));

    /* Lato font variables */
    --font_0: 'latoregular';
    --font_1: 'latobold';
    --font_2: 'latoitalic';

    /* Inter font variables */
    --font_3: 'interregular';
    --font_4: 'interbold';
    --font_5: 'interextrabold';
    --font_6: 'inter18extrabold';
    --font_7: 'intermedium';

    /* Icons font variables */
    --font_7: 'Linearicons-Free';
    --fontawesome: var(--fa-style-family, "Font Awesome 6 Free", "Font Awesome 6 Brands", fontawesome);

    --url_0: url(../images/no-image.jpg);
    --url_1: url(../images/searchcoursesbg.png);
    --url_2: url(../images/testimonial-bg.png);
    --url_3: url(../images/banner-1.png);
    --url_4: url(../images/banner-bg1.jpg);
    --url_5: url(../images/banner-2.jpg);
    --url_6: url(../images/banner-bg3.jpg);
    --url_7: url(../images/banner-3-1.png);
    --url_8: url(../images/banner-3-2.png);
    --url_9: url(../images/banner-3-3.png);
    --url_10: url(../images/banner-3-4.png);
    --url_11: url(../images/banner-4.jpg);
    --url_12: url(../images/banner-bg-img.png);
    --url_13: url(../images/kickoff-bg.png);
}

/* Fonts */
@font-face {
    font-family: 'latoregular';
    src: url('../fonts/Lato-Regular.woff2') format('woff2'),
         url('../fonts/Lato-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latobold';
    src: url('../fonts/Lato-Bold.woff2') format('woff2'),
         url('../fonts/Lato-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latoitalic';
    src: url('../fonts/Lato-Italic.woff2') format('woff2'),
         url('../fonts/Lato-Italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'interregular';
    src: url('../fonts/Inter-Regular.woff2') format('woff2'),
         url('../fonts/Inter-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'interbold';
    src: url('../fonts/Inter-Bold.woff2') format('woff2'),
         url('../fonts/Inter-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'interextrabold';
    src: url('../fonts/Inter-ExtraBold.woff2') format('woff2'),
         url('../fonts/Inter-ExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'inter18extrabold';
    src: url('../fonts/Inter18pt-ExtraBold.woff2') format('woff2'),
         url('../fonts/Inter18pt-ExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'intermedium';
    src: url('../fonts/Intert-Medium.woff2') format('woff2'),
         url('../fonts/Intert-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'linearicons';
    src: url('../fonts/Linearicons.woff2') format('woff2'),
         url('../fonts/Linearicons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Standard style */
body {
    font-family: var(--font_0);
}
h1, h2, h3, h4, h5, h6 {
    color: var(--color_tertiary);
    font-family: var(--font_6);
}
h1 {
    font-size: 74px;
}
h2 {
    font-size: 40px;
}
h3 {
    font-size: 25px;
}
h4 {
    font-size: 22px;
}
h5 {
    font-size: 20px;
}
h6 {
    font-size: 17px;
}
/* .dropdown-toggle::after {
    border-width: 0.5em;
} */
p {
    color: var(--color_mountain_mist_approx);
}
li {
    list-style: none;
}
.dropdown-menu {
    border-radius: 10px;
}
.row .view-btn-block {
    margin-top: 30px;
    text-align: center;
    i,
    svg {
        margin-left: 10px;
    }
}
a {
    color: var(--primary);
    text-decoration: none;
    &.btn-primary {
        border-color: var(--primary);
        background-color: var(--primary);
        &:hover, &:focus, &:active {
            border-color: var(--secondary);
            background-color: var(--secondary);
        }
    }
    &.btn-secondary {
        border-color: var(--secondary);
        background-color: var(--secondary);
        &:hover, &:focus, &:active {
            border-color: var(--primary);
            background-color: var(--primary);
        }
    }
}
img {
    width: 100%;
}
.btn {
    height: 50px;
    border-radius: 30px;
    padding: 0 30px;
    display: inline-flex;
    align-items: center;
}
.btn-primary {
    &:not(:disabled):not(.disabled):active {
        border-color: var(--secondary);
    }
}
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    border-color: var(--secondary);
    background-color: var(--secondary);
}
.btn-tertiary,
.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-tertiary:active {
    color: var(--white);
    border-color: var(--color_tertiary);
    background-color: var(--color_tertiary);
}
input {
    height: 50px;
}
.titlebar {
    text-align: center;
    margin-bottom: 30px;
    h2 {
        font-family: var(--font_1);
        font-size: 40px;
        color: var(--color_tertiary);
        span {
            color: var(--primary);
        }
    }
}

/* Course Rating block */
.review-block,
.rating-icon {
    padding: 0;
    margin-top: 10px;
    display: flex;
    gap: 5px;
    li {
        color: var(--color_mountain_mist_approx);
        margin-bottom: 0;
        i,
        svg {
            color: var(--bs-yellow);
        }
    }
}
/* End of Course Rating block */

/* Course Pagination block */
.page-navigation-block {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    ul {
        gap: 20px;
        li {
            /* // Pagination - Page numbering */
            a {
                width: 45px;
                height: 45px;
                font-size: 18px;
                color: var(--color_tertiary);
                border: 0;
                border-radius: 50%;
                background-color: var(--lavender_mist);
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 20px;
                &:hover, &:focus, &:active {
                    color: var(--white);
                    background-color: var(--color_tertiary);
                    box-shadow: none;
                }
            }
            /* // Pagination - Previous arrow */
            &:first-child a {
                width: 0;
                text-indent: -999em;
                background-color: transparent;
                padding: 0;
                &:before {
                    content: '\f104';
                    font-family: var(--fontawesome);
                    text-indent: 0;
                    float: left;
                }
                &:hover, &:focus, &:active {
                    color: var(--color_tertiary);
                }
            }
            /* // Pagination - Next arrow */
            &:last-child a {
                width: 0;
                text-indent: -999em;
                background-color: transparent;
                padding: 0;
                &:before {
                    content: '\f105';
                    font-family: var(--fontawesome);
                    text-indent: 0;
                    margin-left: 35px;
                    float: left;
                }
                &:hover, &:focus, &:active {
                    color: var(--color_tertiary);
                }
            }
        }
    }
}
/* End of Pagination block */

/* Top Header */
.top-header-block .top-header {
    display: flex;
    justify-content: space-between;
    display: none;
    ul {
        list-style: none;
    }
    .left-block {
        .primary-navigation ul {
            padding-left: 0;
            display: flex;
            gap: 15px;
        }
    }
    .right-block {
        display: flex;
    }
}
/* End of Top Header */

/* Header main */
.header-main {
    margin-top: 0;
    min-height: 80px;
    background-color: var(--white);
    box-shadow: 2px 5px 5px var(--black_05_approx);
    &.sticky-header {
        background-color: var(--white);
        .right-block .primary-menu ul li {
            a {
                color: var(--primary);
            }
            .dropdown button {
                color: var(--primary);
            }
        }
    }
    &:not(.homepage) {
        border-bottom: 1px solid var(--black_05_approx);
        .right-block .primary-menu ul li {
            a {
                color: var(--primary);
            }
            .dropdown button {
                color: var(--primary);
            }
        }
    }
    .left-block {

    }
    .right-block {
        display: flex;
        gap: 15px;
        .primary-menu {
            display: flex;
            align-items: center;
            ul {
                list-style: none;
                padding-left: 0;
                margin-bottom: 0;
                display: flex;
                gap: 30px;
                li {
                    margin-right: 15px;
                    a {
                        /* color: var(--white); */
                        color: var(--primary);
                        padding: 0;
                        &:hover, &:focus, &:active {
                            color: var(--secondary);
                        }
                    }
                    .dropdown {
                        display: flex;
                        button {
                            color: var(--primary);
                            border: 0;
                            background-color: transparent;
                            box-shadow: none;
                            padding: 0;
                            &:hover, &:focus, &:active {
                                color: var(--secondary);
                            }
                            /* &:after {
                                border-width: 0.5em;
                            } */
                        }
                    }
                }
            }
        }
        .navbar-nav {
            align-items: center;
            .search-block a {
                color: var(--white);
            }
            .login-block {
                margin-left: 20px;
                a {
                    color: var(--white);
                    text-decoration: none;
                    background-color: var(--secondary);
                    padding: 3px 20px 3px 3px;
                    border-radius: 30px;
                    display: inline-flex;
                    align-items: center;
                    span {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        background-color: var(--white);
                        margin-right: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        i,
                        svg {
                            /* width: 25px;
                            height: 25px; */
                            font-size: 14px;
                            font-weight: bold;
                            color: var(--primary);
                            border-radius: 50%;
                            background-color: var(--white);
                        }
                    }
                }
            }
        }
    }
    .primary-menu ul {
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        li {
            /* a.nav-link {
                color: var(--color_tertiary);
                font-family: var(--font_02);
                transition: all 0.5s ease;
                &:hover, &:focus, &:active {
                    color: var(--primary);
                    transition: all 0.5s ease;
                }
            } */
            .dropdown {
                /* button.dropdown-toggle {
                    color: var(--color_tertiary);
                    font-family: var(--font_02);
                    border: 0;
                    background: none;
                    padding: 0;
                    &:hover, &:focus, &:active {
                        color: var(--primary);
                        background: none;
                    }
                } */
                .dropdown-menu {
                    width: 98%;
                    border-radius: 10px;
                    box-shadow: none;
                    padding: 0;
                    position: fixed;
                    top: 47px;
                    left: 20px;
                    &:hover {
                        display: block;
                    }
                    .mega-menu-block {
                        display: flex;
                        .nav-pills {
                            max-width: 500px;
                            width: 100%;
                            padding: 30px;
                            border-top-left-radius: 10px;
                            border-bottom-left-radius: 10px;
                            background: var(--wild_sand);
                            /* // box-shadow: -5px 0px 8px -5px var(--black_23) inset; */
                            h3 {
                                font-family: var(--font_04);
                                margin-bottom: 20px;
                            }
                            a.nav-link {
                                font-family: var(--font_02);
                                color: var(--color_tertiary);
                                padding: 10px 15px;
                                &.active {
                                    color: var(--white);
                                }

                            }
                        }
                        .tab-content {
                            padding: 30px;
                            border-top-right-radius: 10px;
                            border-bottom-right-radius: 10px;
                            .tab-pane .course-menu-element h4 {
                                font-family: var(--font_04);
                            }
                        }
                    }
                }
                button.dropdown-toggle:hover ~ .dropdown-menu {
                    display: block;
                }
            }
        }
    }
}
/* End of Header main */

/* Homepage Carousel */
.homepage-carousel {
    height: 800px;
    /* margin-top: -80px; */
    .carousel-inner,
    .carousel-item {
        height: 100%;
    }
    .carousel-caption {
        h1 {
            width: 50%;
            color: var(--white);
            text-align: left;
            font-family: var(--font_5);
            margin-bottom: 40px;
        }
        .content-block {
            p {
                width: 100%;
                font-size: 20px;
                color: var(--white);
                text-align: left;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                margin-bottom: 0;
            }
            .btn-block {
                min-width: 30%;
                width: auto;
                a {
                    height: auto;
                    border-color: var(--secondary);
                    background-color: var(--secondary);
                    padding: 10px 20px;
                    &:hover, &:focus, &:active {
                        background-color: var(--secondary);
                    }
                    i,
                    svg {
                        margin-left: 10px;
                    }
                }
            }
        }
    }
    .carousel-vision {
        background-image: var(--url_4);
        background-repeat: no-repeat;
        .carousel-caption {
            padding-bottom: 0;
            flex-direction: column;
            bottom: 0;
            .content-block {
                min-height: 180px;
                background-color: var(--black_40);
                padding: 15px;
                display: flex;
                align-items: center;
                span {
                    font-size: 60px;
                    font-family: var(--font_5);
                    color: var(--white_25);
                    margin: 0 30px 0 15px;
                }
            }
        }
    }
    .carousel-btn-block {
        width: 130px;
        display: flex;
        align-items: center;
        position: absolute;
        right: 20%;
        bottom: 30%;
        > span {
            color: var(--white);
            margin: 0 10px;
            opacity: .5;
        }
        &.slider-control-nyxora {
            button {
                width: auto;
                position: static;
                span {
                    width: auto;
                    background: none;
                    &:hover, &:focus, &:active {
                        background: none;
                    }
                }
            }
        }
        &.slider-control-nova {
            width: auto;
            padding: 15px;
            background: linear-gradient(to right, var(--primary), var(--secondary));
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            gap: 20px;
            bottom: 3rem;
            left: 15%;
            right: auto;
            .carousel-control {
                width: auto;
                border-bottom: 1px solid var(--white_25);
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                position: static;
                &.active {
                    border-bottom: 0;
                    border-bottom-right-radius: 10px;
                    background-color: var(--color_tertiary);
                }
                a {
                    color: var(--white);
                    display: flex;
                    gap: 10px;
                    img {
                        width: 50px;
                        border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                    }
                    .content-block {
                        padding-right: 15px;
                        display: flex;
                        flex-direction: column;
                        span {
                            text-align: left;
                            &:first-child {
                                font-weight: bold;
                                margin-top: 3px;
                            }
                            &:last-child {
                                font-size: 13px;
                                max-width: 150px;
                                display: -webkit-box;
                                -webkit-line-clamp: 1;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                            }
                        }
                    }
                }
                ~ span {
                    display: none;
                }
            }
        }
        &.slider-pivot-luxe {
            width: 50px;
            bottom: 3rem;
            z-index: 16;
            button {
                &:hover, &:focus, &:active {
                    background: none;
                }
                &.carousel-control-prev:before {
                    content: '\e879';
                    font-family: var(--font_7);
                }
                &.carousel-control-next:before {
                    content: '\e87a';
                    font-family: var(--font_7);
                }
            }
            span {
                display: none;
            }
        }
        &.slider-control-pivot {
            display: none;
        }
    }
    .carousel-indicators {
        button {
            height: 4px;
            border: 0;
            padding-top: 0;
            padding-bottom: 0;
            margin-bottom: 10px;
            margin-right: 5px;
        }
        &.slider-control-nyxora,
        &.slider-control-nova {
            display: none;
        }
        &.slider-pivot-luxe {
            bottom: 10px;
            button {
                span {
                    color: var(--white);
                    margin-top: -10px;
                    display: none;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                }
                &.active {
                    background-color: var(--white);
                    span {
                        display: flex;
                    }
                }
            }
        }
    }
    .img-block {
        height: 100%;
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            overflow-clip-margin: unset;
        }
    }
}

.homepage-carousel {
    .carousel-futuric {
        background-image: var(--url_5);
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 0;
        &:before {
            content: '';
            width: 100%;
            height: 100%;
            backdrop-filter: blur(10px);
            position: absolute;
        }
        &:after {
            content: '';
            width: 100%;
            height: 100%;
            background-color: var(--black_10);
            position: absolute;
            z-index: -1;
        }
        .carousel-caption {
            text-align: left;
            align-items: center;
            justify-content: center;
            top: 0;
            .content-block {
                width: 100%;
                h1 {
                    width: 100%;
                }
                p {
                    font-size: 20px;
                    margin-bottom: 30px;
                }
            }
            .img-block img {
                object-fit: cover;
                object-position: center;
                clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
            }
        }
    }
    .carousel-showcase {
        background-image: var(--url_6);
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 0;
        .carousel-caption {
            .content-block {
                margin-right: 20px;
            }
            .img-block {
                width: 100%;
                position: relative;
                .img-item {
                    max-width: 125px;
                    position: absolute;
                    top: 10%;
                    left: 10%;
                    img {
                        width: 100%;
                        clip-path: none;
                    }
                    &:nth-child(2) {
                        max-width: 30%;
                        top: auto;
                        bottom: 10%;
                        left: auto;
                        right: 10%;
                    }
                    &:nth-child(3) {
                        max-width: 40%;
                        top: 10%;
                        left: auto;
                        right: 0;
                    }
                    &:nth-child(4) {
                        max-width: 50%;
                        top: auto;
                        bottom: 20%;
                        left: 0;
                    }
                }
            }
        }
    }
    .carousel-dream {
         background-image: var(--url_11);
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 0;
        &:before {
            content: '';
            width: 100%;
            height: 100%;
            background-color: var(--black_65);
            position: absolute;
            z-index: -1;
        }
        .carousel-caption {
            height: 100%;
            position: static;
            justify-content: center;
            h2 {
                font-size: 50px;
                font-family: var(--font_4);
                line-height: 70px;
                color: var(--secondary);
                text-transform: uppercase;
            }
            h1 {
                width: 100%;
                font-size: 150px;
                line-height: 180px;
                color: transparent;
                text-align: center;
                text-transform: uppercase;
                -webkit-text-stroke: 4px var(--white);
            }
            p {
                font-size: 30px;
                line-height: 46px;
            }
            .content-block {
                height: 100%;
                margin-top: 3%;
                display: flex;
                flex-direction: column;
            }
            .arrow-block {
                height: 50%;
                align-content: center;
                a {
                    i,
                    svg {
                        font-size: 50px;
                        line-height: 65px;
                        color: var(--white);
                        &:before {
                            content: '\e874';
                            font-family: var(--font_7);
                        }
                    }
                }
            }
        }
    }
}
/* End of Homepage Carousel */

/* Course Categories */
.course-category-block {
    padding: 80px 0;
    .category-elements {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
        .category-item {
            width: 100%;
            text-align: center;
            padding: 40px;
            border: 3px solid var(--black_05_approx);
            border-radius: 10px;
            transition: all .5s ease;
            position: relative;
            z-index: 0;
            &:hover {
                border: 3px solid transparent;
                background: var(--primary_gradient_border);
                transition: all .5s ease;
            }
            &:before {
                content: '';
                width: 100%;
                height: 100%;
                border-radius: 10px;
                background: var(--white);
                transition: all .5s ease;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }
            .img-block {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background: var(--primary);
                margin: 0 auto 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                i,
                svg {
                    font-size: 40px;
                    color: var(--white);
                }
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 50%;
                }
                span {
                    font-size: 56px;
                    font-family: var(--font_7);
                }
            }
            .content-block {
                h4 {
                    font-family: var(--font_4);
                    margin-bottom: 15px;
                }
                p {
                    font-size: 13px;
                    margin-bottom: 0;
                    border-radius: 5px;
                    background-color: var(--seashell);
                    padding: 3px 10px;
                    display: inline-block;
                    &:hover {
                        color: var(--white);
                        background: var(--primary);
                    }
                }
            }
        }
    }
}

@media (min-width: 1200px) {
    .course-category-block .category-elements .category-item {
        flex-basis: 23%;
    }
}

@media (max-width: 1199px) {
    .course-category-block .category-elements .category-item {
        flex-basis: 48%;
    }
}

@media (max-width: 575px) {
    .course-category-block .category-elements .category-item {
        flex-basis: 100%;
    }
}
/* End of Course Categories */

/* Site Info */
.site-info-block {
    padding: 40px 0 200px;
    background: var(--wild_sand);
    overflow: hidden;
    position: relative;
    .titlebar h2 {
        font-size: 40px;
        text-align: left;
        margin-bottom: 30px;
        span {
            color: var(--primary);
            display: block;
            margin-left: 37%;
        }
    }
    .media-block {
        text-align: center;
        position: absolute;
        top: 30px;
        img {
            /* max-width: 60%; */
            width: 100%;
            height: 100%;
            object-position: top;
            object-fit: cover;
        }
    }
    .desc-block {
        p {
            font-size: 18px;
        }
        .btn-block {
            margin-top: 15px;
            a {
                padding: 12px 30px;
            }
        }
    }
}
/* End of Site Info */

/* Combo List */
.combo-list {
    padding: 50px 0;
    .combo-category-filter {
        ul {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
            padding: 0;
            margin: 30px auto 50px;
            li a {
                text-decoration: none;
                border-radius: 20px;
                background-color: var(--primary_25_approx);
                padding: 7px 20px;
                display: inline-block;
                transition: all .5s ease;
                &.active,
                &:hover {
                    color: var(--white);
                    background-color: var(--primary);
                    transition: all .5s ease;
                }
            }
        }
    }
    .combo-item {
        height: 100%;
        border-radius: 15px;
        border: 2px solid var(--wild_sand);
        position: relative;
        z-index: 0;
        transition: all .5s ease;
        &:hover {
            border-color: var(--secondary);
            transition: all .5s ease;
        }
        .media-block {
            width: 100%;
            height: 250px;
            border-radius: 15px;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: top;
                border-radius: 15px;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                background-color: var(--white);
                overflow-clip-margin: unset;
            }
        }
        .content-block {
            padding: 20px;
            h4 {
                font-size: 22px;
                font-family: var(--font_1);
                margin-bottom: 15px;
                margin-bottom: 15px;
            }
            p {
                font-size: 15px;
            }
            .bottom-block {
                display: flex;
                .price-block {
                    font-size: 24px;
                    color: var(--secondary);
                    font-family: var(--font_04);
                }
                ul {
                    list-style: none;
                    padding: 0;
                    margin: 0 0 0 auto;
                    display: flex;
                    align-items: center;
                    gap: 5px;
                    li {
                        margin-left: -15px;
                        border: 2px solid var(--white);
                        border-radius: 50%;
                        &:first-child,
                        &:last-child {
                            margin-left: 0;
                        }
                        img {
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            object-fit: cover;
                            overflow-clip-margin: unset;
                        }
                        a {
                            color: var(--color_tertiary);
                            text-decoration: none;
                            &:hover, &:focus, &:active {
                                color: var(--secondary);
                            }
                        }
                    }
                }
            }
        }
    }
}
/* End of Combo List */

/* Marketing Spot */
/* Marketing Spot */
.marketing-spot-block {
    min-height: 680px;
    padding: 50px 0 30px;
    background-color: var(--primary);
    overflow: hidden;
    position: relative;
    .titlebar {
        margin-top: 100px;
        h2 {
            color: var(--white);
            text-align: left;
        }
    }
    .desc-block {
        p {
            color: var(--white);
        }
        .btn-block a {
            padding: 15px 30px;
            margin-top: 30px;
            &:hover, &:focus, &:active {
                background-color: var(--color_tertiary);
            }
            i {
                margin-left: 10px;
            }
        }
    }
    .media-block {
        text-align: center;
        position: absolute;
        top: 30px;
        &:before {
            content: '';
            background: url('./theme/enlight/pix/arrow-icon.png');
            width: 100%;
            height: 100%;
            position: absolute;
            background-repeat: no-repeat;
            top: 40%;
            left: 0;
        }
        img {
            max-width: 80%;
            width: 100%;
            height: 100%;
            object-position: top;
            object-fit: cover;
        }
        ul {
            margin: 0;
            padding-left: 0;
            li {
                border-radius: 25px;
                background-color: var(--white);
                padding: 5px 5px 5px 25px;
                display: flex;
                align-items: center;
                gap: 10px;
                position: absolute;
                top: 10%;
                left: 15%;
                &:nth-child(2) {
                    top: auto;
                    bottom: 50%;
                    left: 25%;
                    span,
                    svg {
                        color: #357a32;
                    }
                }
                &:nth-child(3) {
                    padding-left: 5px;
                    padding-right: 25px;
                    top: 25%;
                    left: auto;
                    right: 20%;
                    span,
                    svg {
                        color: #e83e8c;
                    }
                }
                &:last-child {
                    padding-left: 5px;
                    padding-right: 25px;
                    top: auto;
                    bottom: 35%;
                    right: 15%;
                    left: auto;
                    span,
                    svg {
                        color: #6610f2;
                    }
                }
                span {
                    width: 40px;
                    height: 40px;
                    color: #ff7518;
                    border-radius: 50%;
                    background-color: var(--mercury);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
}
/* End of Marketing Spot */

/* Available Courses */
.available-courses-block,
.enrolled-courses-block {
    background-color: var(--wild_sand);
    padding: 50px 0;
    position: relative;
    z-index: 0;
    &.background-image {
        background-image: url('[[availablecoursesbg]]');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .course-block {
        height: 100%;
        border-radius: 15px;
        border: 1px solid var(--wild_sand);
        background-color: var(--white);
        position: relative;
        z-index: 0;
        transition: all .5s ease;
        &:hover {
            border-color: var(--secondary);
            transition: all .5s ease;
        }
        .media-block {
            width: 100%;
            height: 250px;
            border-radius: 15px;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: top;
                border-radius: 15px;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                background-color: var(--white);
                overflow-clip-margin: unset;
            }
        }
        .content-block {
            padding: 20px;
            h4 {
                font-size: 22px;
                font-family: var(--font_1);
                margin-bottom: 15px;
                margin-bottom: 15px;
            }
            > ul {
                padding: 0;
                margin: 0;
                display: inline-flex;
                align-items: center;
                gap: 10px;
                li {
                    font-size: 13px;
                    border-radius: 15px;
                    background-color: var(--primary_25_approx);
                    padding: 3px 15px;
                    margin-bottom: 15px;
                    display: inline-block;
                    transition: all .5s ease;
                    &:hover {
                        color: var(--white);
                        background-color: var(--primary);
                        transition: all .5s ease;
                        a {
                            color: var(--white);
                        }
                    }
                    a {
                        color: var(--color_tertiary);
                        text-decoration: none;
                        transition: all .5s ease;
                        &:hover {
                            color: var(--white);
                            transition: all .5s ease;
                        }
                    }
                }
            }
            p {
                font-size: 15px;
            }
            .bottom-block {
                display: flex;
                .price-block {
                    font-size: 24px;
                    color: var(--secondary);
                    font-family: var(--font_04);
                    display: flex;
                    align-items: center;
                    b {
                        font-size: 14px;
                        font-weight: normal;
                        font-family: var(--font_03);
                        color: var(--color_celeste_approx);
                        text-decoration: line-through;
                        margin-left: 5px;
                    }
                }
                ul {
                    padding: 0;
                    margin: 0 0 0 auto;
                    display: flex;
                    align-items: center;
                    gap: 5px;
                    li {
                        margin-left: -15px;
                        border: 2px solid var(--white);
                        border-radius: 50%;
                        &:first-child,
                        &:last-child {
                            margin-left: 0;
                        }
                        img {
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            object-fit: cover;
                            overflow-clip-margin: unset;
                        }
                    }
                }
            }
        }
    }
}
.enrolled-courses-block {
    background-color: var(--white);
}
/* End of Available Courses */

/* Site Announcements */
.site-announcement-block {
    padding: 50px 0;
    .titlebar {
        text-align: center;
    }
    .blog-block {
        .media-block {
            height: 350px;
            position: relative;
            z-index: 0;
            .img-block {
                height: 100%;
                border-radius: 20px;
                position: absolute;
                z-index: -1;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    overflow-clip-margin: unset;
                    border-radius: 20px;
                    transform: translate3d(0, 0, 0.1px);
                }
            }
            .forum-block {
                height: 350px;
                padding: 15px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                position: relative;
                &:before {
                    content: '';
                    width: 100%;
                    height: 100%;
                    border-radius: 20px;
                    background-image: radial-gradient(circle, rgba(255, 255, 255, .2), rgba(0, 0, 0, .2));
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: -1;
                }
                .forum-info-block {
                    display: flex;
                    .info-block {
                        height: 30px;
                        color: var(--white);
                        text-align: center;
                        border-radius: 13px;
                        background: var(--black_65);
                        overflow: hidden;
                        padding: 5px 15px;
                        position: relative;
                        span {
                            font-size: 14px;
                            display: block;
                            position: relative;
                            top: 0%;
                            transition: 0.7s;
                            cursor: default;
                        }
                        &:hover {
                            background-color: var(--primary);
                            cursor: pointer;
                            span {
                                cursor: pointer;
                                top: -110%;
                                &:first-child {
                                    top: -130%;
                                }
                            }
                        }
                    }
                    .post-link {
                        margin-left: auto;
                        a {
                            width: 40px;
                            height: 40px;
                            font-size: 18px;
                            color: var(--black);
                            border-radius: 50%;
                            background: var(--white_80);
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            transform: rotate(45deg);
                        }
                    }
                }
                .forum-option-link {
                    padding-left: 0;
                    text-align: right;
                    li {
                        margin-bottom: 10px;
                        a {
                            text-decoration: none;
                            display: flex;
                            align-items: center;
                            justify-content: end;
                            span {
                                color: var(--black);
                                text-indent: -999em;
                                border-radius: 25px;
                                background: var(--white_80);
                                margin-right: -40px;
                                overflow: hidden;
                                transition: all .5s ease;
                            }
                            &:hover {
                                transition: all .5s ease;
                                span {
                                    text-indent: 0;
                                    padding: 8px 50px 8px 20px;
                                }
                            }
                            i,
                            svg {
                                width: 14px;
                                font-size: 14px;
                                color: var(--white);
                                border-radius: 50%;
                                background: var(--black_40);
                                padding: 10px;
                                display: inline-flex;
                                align-items: center;
                                justify-content: center;
                            }
                        }
                    }
                }
            }
        }
        .content-block {
            margin-top: 30px;
            h3 {
                font-weight: bold;
                margin-bottom: 20px;
            }
            p {
                color: var(--color_mountain_mist_approx);
                line-height: 30px;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
        }
    }
}
/* End of Site Announcements */

/* Popular Courses */
.popular-courses-block {
    background-color: var(--pecan_pine);
    padding: 40px 0;
    position: relative;
    z-index: 0;
    &.background-image {
        /* background-image: url('[[popularcoursesbg]]'); */
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .row {
        gap: 30px 0;
    }
    .titlebar {
        margin-bottom: 30px;
        h2 {
            color: var(--color_tertiary);
        }
    }
    .popular_courses {
        .slick-track,
        .slick-slide {
            min-width: 100%;
        }
        .course-block .course-item {
            border-radius: 20px;
            background-color: var(--white);
            padding: 25px;
            display: flex;
            gap: 0 30px;
            .img-block {
                width: 100%;
                img {
                    height: 100%;
                    border-radius: 20px;
                    object-fit: cover;
                }
            }
            .content-block {
                width: 100%;
                h3 {
                    font-weight: bold;
                    color: var(--color_tertiary);
                }
                h6 {
                    font-size: 14px;
                    color: var(--white);
                    border-radius: 20px;
                    background-color: var(--primary);
                    padding: 5px 15px;
                    display: inline-block;
                }
                p {
                    color: var(--color_mountain_mist_approx);
                }
                .price-block {
                    font-size: 25px;
                    color: var(--secondary);
                    font-weight: bold;
                }
            }
        }
    }
    .view-btn-block {
        text-align: center;
        margin-top: 30px;
        a {
            &:hover, &:focus, &:active {
                background-color: var(--color_tertiary);
            }
        }
    }
}
/* End of Popular Courses */

/* Course Search block */
.course-search-block {
    background-color: var(--lavender_mist);
    padding: 50px 0 0;
    + div {
        padding-top: 120px;
    }
    .media-block {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        &:after {
            content: '';
            width: 80%;
            height: 240px;
            border-bottom-left-radius: 250px;
            border-bottom-right-radius: 250px;
            background: var(--lavender_mist);
            position: absolute;
            bottom: -80px;
            z-index: 1;
        }
        img {
            width: auto;
            z-index: 2;
        }
    }
    .content-block {
        max-width: 1000px;
        text-align: center;
        margin: 0 auto 30px;
        .search-element {
            margin-bottom: 40px;
            .input-group {
                &:not(.has-validation)
                >:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
                    border-radius: 40px;
                }
                input {
                    max-width: none;
                    height: 80px;
                    border: 0;
                    border-radius: 40px;
                    background-color: var(--white);
                    padding-left: 30px;
                    padding-right: 150px;
                    box-shadow: 2px -5px 30px var(--black_23);
                    z-index: 0;
                }
                .input-group-append {
                    position: absolute;
                    top: 15px;
                    right: 15px;
                    z-index: 0;
                    button {
                        height: 50px;
                        border-color: var(--secondary);
                        background-color: var(--secondary);
                        display: flex;
                        align-items: center;
                        i {
                            margin: 0 10px 0 0;
                        }
                    }
                }
            }
        }
        .course-element {
            h5 {
                font-size: 16px;
                font-family: var(--font_1);
                text-transform: uppercase;
                margin: 20px 0 50px;
                display: inline-flex;
                position: relative;
                &:before, &:after {
                    content: '';
                    width: 75px;
                    height: 1px;
                    background-color: var(--black_10);
                    margin-right: 20px;
                    position: absolute;
                    top: 45%;
                    right: 100%;
                }
                &:after {
                    margin-left: 20px;
                    margin-right: 0;
                    left: 100%;
                    right: 0;
                }
            }
            ul {
                padding-left: 0;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;
                li {
                    a {
                        font-size: 14px;
                        color: var(--primary);
                        border-radius: 25px;
                        background: var(--white);
                        padding: 6px 12px 6px 10px;
                        display: inline-flex;
                        align-items: center;
                        overflow: hidden;
                        position: relative;
                        transition: all .5s ease;
                        z-index: 0;
                        &:before {
                            content: '';
                            width: 150%;
                            color: var(--white);
                            background-color: var(--primary);
                            padding-top: 150%;
                            border-radius: 100px;
                            position: absolute;
                            top: 500%;
                            left: 50%;
                            z-index: -1;
                            transform: translate(-50%, -50%);
                            transition: 1.2s ease;
                        }
                        &:hover {
                            color: var(--white);
                            transition: all .5s ease;
                            &:before {
                                top: 100%;
                            }
                        }
                        img {
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            background: var(--wild_sand);
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }
}
/* End of Course Search block */

/* Featured block */
.advanced-featured-element {
    background-color: var(--primary);
    padding-top: 50px;
    padding-bottom: 50px;
    .container {
        display: flex;
        gap: 30px;
        .titlebar {
            width: 70%;
            text-align: left;
            h2 {
                color: var(--white);
                margin: 20px 0;
            }
            p {
                color: var(--white);
                font-size: 18px;
                margin-top: 10px;
            }
            .view-btn-block a {
                background-color: var(--secondary);
                padding: 12px 30px;
                margin-top: 10px;
                &:hover, &:focus, &:active {
                    border-color: var(--color_tertiary);
                    background-color: var(--color_tertiary);
                }
                i {
                    margin-left: 5px;
                }
            }
        }
        .featured-element {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            gap: 30px;
            .feature-item {
                padding: 40px;
                border-radius: 50px;
                background-color: var(--primary_50_approx);
                flex-basis: 47%;
                &:hover {
                    background-color: var(--primary_25_approx);
                }
                .media-block {
                    width: 60px;
                    height: 60px;
                    margin-bottom: 20px;
                    display: flex;
                    align-items: center;
                    gap: 20px;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        overflow-clip-margin: unset;
                    }
                    h4 {
                        font-size: 30px;
                        color: var(--white);
                    }
                }
                .content-block {
                    p {
                        color: var(--white);
                    }
                    .btn-block a {
                        font-size: 18px;
                        color: var(--white);
                        border: 0;
                        background: none;
                        padding: 0;
                        i {
                            font-size: 10px;
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 1200px) and (max-width: 1366px) {
    .advanced-featured-element .container .titlebar {
        width: 50%;
    }
}

@media (max-width: 1199px) {
    .advanced-featured-element .container {
        flex-direction: column;
        .titlebar {
            width: 100%;
            text-align: center;
        }
    }
}
/* End of Featured block */

/* Our Team block */
.our-team-block {
    padding: 40px 0;
    background-color: var(--secondary);
    .container {
        display: flex;
        gap: 20px;
        .row {
            width: 100%;
        }
    }
    .titlebar {
        text-align: left;
        p {
            color: var(--white);
        }
        .view-btn-block a {
            padding: 12px 30px;
            margin-top: 10px;
            &:hover, &:focus, &:active {
                border-color: var(--color_tertiary);
                background-color: var(--color_tertiary);
            }
            i {
                font-size: 12px;
            }
        }
    }
    .team-block {
        padding: 20px 0;
        transition: all .5s ease;
        &:hover {
            transition: all .5s ease;
            .media-block .social-block{
                opacity: 1;
            }
            .content-block .social-block li a {
                background-color: var(--white);
                &:hover {
                    background-color: var(--black);
                    i {
                        color: var(--white);
                    }
                }
                i {
                    color: var(--primary);
                }
            }
        }
        .media-block {
            height: 400px;
            border-radius: 10px;
            background-color: var(--white);
            overflow: hidden;
            position: relative;
            z-index: 0;
            transition: all .5s ease;
            &:hover:after {
                content: '';
                width: 100%;
                height: 20%;
                background: linear-gradient(to top, var(--black_65), rgba(0, 0, 0, 0.05));
                position: absolute;
                bottom: 0;
                left: 0;
                transition: all .5s ease;
            }
            img {
                height: 100%;
                object-fit: cover;
                border-radius: 10px;
                overflow-clip-margin: unset;
            }
            .social-block {
                width: 100%;
                padding: 0;
                margin: 0 0 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 15px;
                opacity: 0;
                transition: all .5s ease;
                position: absolute;
                bottom: 0;
                z-index: 1;
                li a {
                    width: 45px;
                    height: 45px;
                    color: var(--color_tertiary);
                    border-radius: 50%;
                    background-color: var(--white);
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    transition: all .5s ease;
                    &:hover {
                        color: var(--white);
                        background-color: var(--primary);
                        transition: all .5s ease;
                    }
                }
            }
        }
        .content-block {
            text-align: center;
            margin-top: 20px;
            h4 {
                color: var(--white);
                font-family: var(--font_04);
            }
            h5 {
                font-size: 16px;
                color: var(--white);
            }
        }
    }
}
/* End of Our Team block */

/* Testimonial block */
.testimonial-element {
    padding: 50px 0;
    background-image: var(--url_2);
    background-repeat: no-repeat;
    background-position: center;
    .titlebar {
        text-align: center;
    }
    .student-review-block {
        display: flex;
        gap: 30px;
        .testimonial-block {
            min-height: 300px;
            background: var(--white);
            border: 2px solid var(--black_10);
            border-radius: 10px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 15px 0;
            transition: all .5s ease;
            position: relative;
            z-index: 0;
            .title-block {
                display: flex;
                align-items: center;
                gap: 15px;
                .media-block {
                    width: 80px;
                    height: 80px;
                    border: 3px solid var(--color_silver_sand_approx);
                    border-radius: 50%;
                    background-color: var(--wild_sand);
                    overflow: hidden;
                    img {
                        height: 100%;
                        object-fit: cover;
                        object-position: top;
                        overflow-clip-margin: unset;
                    }
                }
                .info-block {
                    h4 {
                        font-size: 21px;
                        font-family: var(--font_04);
                        margin-bottom: 5px;
                    }
                    h5 {
                        font-size: 15px;
                        color: var(--color_mountain_mist_approx);
                        font-family: var(--font_0);
                    }
                }
            }
            .content-block {
                height: 100%;
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                p {
                    font-size: 18px;
                    color: var(--color_dove_gray_approx);
                    font-family: var(--font_0);
                }
                .review-block {
                    padding: 0;
                    margin: 0;
                    display: flex;
                    li {
                        i {
                            color: var(--orange);
                        }
                        span {
                            font-family: var(--font_0);
                            font-size: 14px;
                            color: var(--color_mountain_mist_approx);
                            margin-left: 5px;
                        }
                    }
                }
            }
            &:after {
                content: '';
                width: 0;
                height: 0;
                border-radius: 10px;
                background: var(--secondary);
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                display: none;
            }
            &:hover {
                border-color: var(--white);
                background: var(--primary_gradient_border);
                box-shadow: 0 1px 15px var(--black_10);
                transition: all .5s ease;
                &:after {
                    width: 100%;
                    height: 100%;
                    transition: all .5s ease;
                }
                .title-block .info-block {
                    h4,
                    h5 {
                        color: var(--white);
                    }
                }
                .content-block {
                    p {
                        color: var(--white);
                    }
                    .review-block li {
                        i,
                        span {
                            color: var(--white);
                        }
                    }
                }
            }
        }
    }
}
/* End of Testimonial block */

/* Counter block */
.counter-element {
    padding: 50px 0;
    ul {
        padding: 0;
        margin: 0;
        display: flex;
        li {
            width: 100%;
            /* // font-size: 50px; */
            font-family: var(--font_1);
            color: var(--primary);
            text-align: center;
            margin-bottom: 10px;
            border-right: 2px solid var(--black_10);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
            &:last-child {
                border-right: none;
            }
            img {
                width: 70px;
                height: 70px;
                object-fit: contain;
            }
            span {
                font-family: var(--font_0);
                text-align: left;
                b {
                    font-size: 50px;
                    font-family: var(--font_02);
                    text-align: left;
                    color: var(--black);
                    display: flex;
                    flex-direction: column;
                }
            }
        }
    }
}
/* End of Counter block */

/* Partner Block */
.partner-block {
    padding: 50px 0;
    border-top: 1px solid var(--black_05_approx);
    ul {
        padding: 0;
        margin: 0;
        display: flex;
        gap: 30px;
        li {
            width: 100%;
            img {
                width: auto;
                filter: brightness(0.8);
                transition: all .5s ease;
            }
            &:hover img {
                filter: brightness(0);
                transition: all .5s ease;
            }
        }
    }
}
/* End of Partner Block */

/* Footer */
.footer-block {
    padding: 50px 0 0;
    background-color: var(--primary);
    .footer-element {
        display: flex;
        gap: 30px;
        .footer-col {
            width: 100%;
            h4 {
                color: var(--white);
                font-size: 20px;
                font-family: var(--font_5);
                margin-bottom: 30px;
            }
            ul {
                padding: 0;
                margin: 0;
                li {
                    margin-bottom: 15px;
                    a {
                        color: var(--white);
                        font-family: var(--font_0);
                        &:hover, &:focus, &:active {
                            color: var(--secondary);
                        }
                    }
                }
            }
            &.contact-info p {
                color: var(--white);
                i {
                    margin-right: 10px;
                }
            }
            &.gallery-block {
                ul {
                    padding: 0;
                    margin: 0;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 10px;
                    li {
                        max-width: 80px;
                        margin-bottom: 0;
                        flex-basis: 30%;
                        cursor: pointer;
                        position: relative;
                        &:before {
                            content: '';
                            width: 100%;
                            height: 100%;
                            background: rgba(0, 0, 0, 0.5);
                            position: absolute;
                            border-radius: 10px;
                            transition: all .9s ease;
                            opacity: 0;
                        }
                        &:hover:before {
                            transition: all .9s ease;
                            opacity: 1;
                        }
                        img {
                            width: 100%;
                            border-radius: 10px;
                        }
                        a {
                            width: 100%;
                            height: 100%;
                            color: var(--white);
                            font-size: 12px;
                            text-transform: uppercase;
                            border-radius: 10px;
                            background-color: var(--color_tertiary);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            &:focus {
                                color: var(--white);
                                background-color: var(--color_tertiary);
                            }
                        }
                    }
                }
            }
        }
    }
    .footer-bottom {
        margin: 40px 0;
        display: flex;
        align-items: center;
        gap: 30px;
        .social-block {
            width: 50%;
            display: flex;
            flex-wrap: wrap;
            h4 {
                width: 100%;
                color: var(--white);
                font-size: 20px;
                font-family: var(--font_5);
            }
            ul {
                padding: 0;
                margin: 20px 0;
                display: flex;
                li {
                    margin-right: 20px;
                    a {
                        color: var(--white);
                    }
                }
            }
        }
        .newsletter-block {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            gap: 30px;
            h4 {
                width: 50%;
                color: var(--white);
                font-size: 20px;
                font-family: var(--font_5);
                margin-bottom: 0;
            }
            form {
                width: 100%;
                position: relative;
                input {
                    max-width: none;
                    width: 100%;
                    height: 60px;
                    border: 1px solid var(--white);
                    border-radius: 40px;
                    padding-left: 30px;
                }
                button {
                    height: 50px;
                    font-size: 14px;
                    border: 0;
                    border-radius: 40px;
                    background-color: var(--secondary);
                    position: absolute;
                    top: 5px;
                    right: 5px;
                    transition: all .5s ease;
                    &:hover, &:focus, &:active {
                        color: var(--white);
                        background-color: var(--color_tertiary);
                        transition: all .5s ease;
                    }
                    i {
                        margin-left: 5px;
                    }
                }
            }
        }
    }
    .footer-copy {
        background-color: var(--color_tertiary);
        padding: 20px 0;
        .container {
            display: flex;
            justify-content: space-between;
            p {
                color: var(--white);
                margin-bottom: 0;
            }
        }
    }
    ~ div[data-region="footer-container-popover"] button {
        width: 35px;
        height: 35px;
        color: var(--white);
        border-radius: 50%;
        background-color: var(--primary) !important;
    }
}
/* End of Footer */


/* Course listing */
/* Course card style */
.course-listing-element {
    .course-card {
        .content-block {
            position: relative;
            .course-info-popover {
                max-width: 450px;
                width: 100%;
                background: var(--white);
                border: 1px solid var(--wild_sand);
                border-radius: 10px;
                box-shadow: 2px 5px 10px 5px var(--black_10);
                padding: 20px;
                position: absolute;
                left: 40%;
                z-index: 1;
                .course-info-title {
                    h6 {
                        margin-bottom: 10px;
                        a {
                            font-size: 14px;
                            font-family: var(--font_0);
                            color: var(--white);
                            border-radius: 20px;
                            background-color: var(--primary);
                            padding: 7px 10px;
                            display: inline-block;
                        }
                    }
                    h5 a {
                        font-size: 20px;
                        color: var(--color_tertiary);
                        display: inline-block;
                    }
                    .course-content-list,
                    .course-desc {
                        margin-top: 15px;
                        p {
                            -webkit-line-clamp: none;
                        }
                    }
                    .button-block {
                        margin-top: 15px;
                        a {
                            width: 100%;
                            margin-left: 0;
                        }
                    }
                }
            }
            .instructor-block {
                .course-content-list {
                    display: none;
                }
            }
        }
    }

    /* // Course header block */
    .course-header-element {
        padding: 80px 0;
        background-image: var(--url_5);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow-clip-margin: unset;
        position: relative;
        z-index: 0;
        /* // Course header overlay */
        &:before {
            content: '';
            width: 100%;
            height: 100%;
            background-color: var(--black_40);
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        /* // Course header title, description */
        h1,
        p {
            color: var(--white);
        }
        /* // Course header button */
        ul.button-block {
            color: var(--white);
            padding: 0;
            display: flex;
            gap: 30px;
            li {
                border-radius: 30px;
                background-image: linear-gradient(180deg, var(--primary_80_approx), var(--primary));
                padding: 0 20px 0 0;
                display: flex;
                align-items: center;
                span {
                    width: 50px;
                    height: 50px;
                    font-size: 24px;
                    border-radius: 50%;
                    background-image: linear-gradient(180deg, var(--primary_50_approx), var(--primary));
                    margin-right: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }

    /* Course card lists */
    .course-card-list {
        padding: 80px 0;
        /* // Filter element */
        .filter-element {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            /* // Filter block */
            .filter-block {
                ul {
                    padding: 0;
                    margin-bottom: 0;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 10px;
                    li {
                        margin-bottom: 10px;
                        /* // List view and Card view - style */
                        &:not(:has(p)) a {
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            padding: 0;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        &:first-child,
                        &:nth-child(2) {
                            a {
                                i,
                                svg {
                                    margin-left: 0;
                                }
                            }
                        }
                        /* // End of List view and Card view - style */
                        a {
                            border-radius: 30px;
                            background-color: var(--lavender_mist);
                            padding: 10px 20px;
                            transition: all .5s ease;
                            &:hover, &:focus, &:active {
                                color: var(--white);
                                background-color: var(--color_tertiary);
                                transition: all .5s ease;
                            }
                            i,
                            svg {
                                margin-left: 20px;
                            }
                        }
                        p {
                            color: var(--color_tertiary);
                            margin-bottom: 0;
                            i {
                                font-size: 14px;
                                margin-left: 10px;
                            }
                        }
                    }
                }
            }
            /* // Filter - Search block */
            .search-block {
                max-width: 350px;
                width: 100%;
                /* // Search block - input */
                .input-group {
                    max-width: 350px;
                    width: 100%;
                    position: relative;
                    &:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
                        max-width: 350px;
                        width: 100%;
                        height: 55px;
                        border-radius: 30px;
                        padding-left: 20px;
                        padding-right: 40px;
                        box-shadow: 0px 5px 10px 0px var(--black_10);
                        z-index: 0;
                    }
                    /* // Search block - button */
                    button {
                        width: 50px;
                        height: 100%;
                        text-align: center;
                        text-indent: -999em;
                        border: 0;
                        background: none;
                        padding: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: absolute;
                        right: 0;
                        &:after {
                            content: '\e86f';
                            font-family: var(--font_7);
                            font-weight: bold;
                            text-indent: 0;
                            float: left;
                        }
                    }
                }
            }
        }
        /* // Course listing block */
        .course-listing-block {
            .course-card .img-block {
                /* // Course payment method */
                .course-enrollment-block {
                    padding: 0;
                    margin-bottom: 0;
                    position: absolute;
                    bottom: 15px;
                    right: 15px;
                    /* // Course payment list - style */
                    ul {
                        margin-bottom: 0;
                        li a {
                            width: 40px;
                            height: 40px;
                            border: 1px solid var(--white);
                            border-radius: 50%;
                            margin-top: 5px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            &:hover, &:focus, &:active {
                                color: var(--white);
                                border-color: var(--primary);
                                background-color: var(--primary);
                            }
                            i {
                                color: var(--white);
                            }
                        }
                    }
                }
            }
        }
    }

    /* Course List view style */
    &.course-lists-view .course-card {
        .instructor-block {
            flex-wrap: wrap;
            gap: 15px;
            .course-content-list {
                display: flex;
            }
        }
    }

    /* Course Activities and Resources lists */
    .course-content-list {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 15px;
        > div {
            font-size: 15px;
            font-family: var(--font_0);
            color: var(--color_tertiary_70);
            border-right: 1px solid var(--wild_sand);
            padding-right: 15px;
            &:last-child {
                border-right: 0;
            }
            i {
                font-size: 18px;
                margin-right: 10px;
            }
        }
        > span {
            margin-left: auto;
        }
    }
}

/* Similar Courses */
.similar-course-block {
    padding: 50px 0;
    &.related-courses {
        background-color: var(--lavender_mist);
        margin-top: 50px;
    }
    .similar-course-item {
        display: flex;
        gap: 30px;
        /* // Activity course card */
        .course-card {
            border: 2px solid var(--color_quill_gray_approx);
            border-radius: 10px;
            background-color: var(--white);
            &:hover, &:focus, &:active {
                border-color: var(--secondary);
            }
            /* // Course card image and content block */
            .img-block {
                position: relative;
                img {
                    border-top-left-radius: 8px;
                    border-top-right-radius: 8px;
                }
                .course-category {
                    position: absolute;
                    left: 15px;
                    bottom: 15px;
                    p {
                        font-size: 13px;
                        color: var(--white);
                        border-radius: 20px;
                        background-color: var(--primary);
                        padding: 7px 15px;
                        margin-bottom: 0;
                    }
                }
            }
            /* // Course card content block */
            .content-block {
                padding: 15px;
                h5 {
                    i,
                    svg {
                        font-size: 12px;
                    }
                }

                /* .rating-block {
                    padding: 0;
                    display: flex;
                    gap: 5px;
                    li {
                        i {
                            color: var(--orange);
                        }
                        span {
                            color: var(--color_ironside_gray_approx);
                        }
                    }
                } */

                /* // Course Price block */
                .price-block {
                    span {
                        font-size: 20px;
                        font-family: var(--font_4);
                        color: var(--secondary);
                    }
                }

                /* //Course instructor block */
                .instructor-block {
                    margin-top: 30px;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    .img-block {
                        padding-bottom: 0;
                        margin-top: 0;
                        margin-left: auto;
                        margin-bottom: 0;
                        display: flex;
                        align-items: center;
                        li {
                            width: 30px;
                            height: 30px;
                            object-fit: contain;
                            border: 2px solid var(--white_80);
                            border-radius: 50%;
                            background-color: var(--color_quill_gray_approx);
                            margin-left: -5px;
                            margin-bottom: 0;
                            overflow: hidden;
                            img {
                                border-radius: 50%;
                            }
                        }
                    }

                    > span {
                        font-family: var(--font_3);
                        color: var(--color_ironside_gray_approx);
                    }
                }
                p {
                    font-family: var(--font_3);
                    color: var(--color_mountain_mist_approx);
                    margin-bottom: 0;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
            }
        }
    }
}
/* End of Similar Courses */

@media (min-width: 768px) {
    /* Course List view - style*/
    .course-listing-element.course-lists-view .course-card-list .course-listing-block {
        .similar-course-item {
            flex-wrap: wrap;
            .course-card {
                display: flex;
                > .img-block {
                    width: 100%;
                }
                .img-block {
                    max-width: 430px;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        overflow-clip-margin: unset;
                        border-top-right-radius: 0;
                        border-bottom-left-radius: 8px;
                    }
                }
            }
        }
    }
}

@media (max-width: 767px) {
    .similar-course-block .similar-course-item {
        flex-wrap: wrap;
    }
}
/* End of Course listing view */


/* Course info - default style */
.course-info-section {
    min-height: 1000px;
    position: relative;

    /* // Course header */
    .course-header-block {
        background-color: var(--lavender_mist);
        background-image: var(--url_12);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: 50px 0;
        .container {
            position: relative;
        }
        /* // Course info header content */
        .course-info-inner {
            width: 70%;
            .course-title {
                margin-bottom: 30px;
            }
            ul {
                padding: 0;
                margin: 0;
                display: flex;
                align-items: center;
                li {
                    font-size: 14px;
                    &.enrolled-students {
                        color: var(--white);
                        border-radius: 15px;
                        background-color: var(--orange);
                        padding: 0.25rem 1rem;
                    }
                    &.cert-course {
                        color: var(--white);
                        border-radius: 15px;
                        background-color: var(--green);
                        padding: 0.25rem 1rem;
                        i {
                            color: var(--white);
                            margin-right: 0.25rem;
                        }
                    }
                    i {
                        color: var(--orange);
                    }
                    span {
                        color: var(--color_ironside_gray_approx);
                    }
                }
            }
            .desc-block {
                margin: 1.5rem 0;
            }
            .header-info-block {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 1.5rem;
                .course-status {
                    border-radius: 2rem;
                    background-color: var(--primary);
                    box-shadow: 0 0.5rem 1rem var(--black_10);
                    padding: .5rem 1.5rem .5rem .5rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    i {
                        width: 30px;
                        height: 30px;
                        color: var(--primary);
                        border-radius: 1rem;
                        background-color: var(--white);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    p {
                        color: var(--white);
                        margin-bottom: 0;
                    }
                }
                .coruse-instructor {
                    padding-left: 1.5rem;
                    border-left: 1px solid var(--color_silver_approx);
                    .img-block {
                        display: flex;
                        align-items: center;
                        gap: 1rem;
                        img {
                            width: 45px;
                            height: 45px;
                            object-fit: contain;
                            border: 1px solid var(--color_silver_approx);
                            border-radius: 50%;
                            background-color: var(--color_quill_gray_approx);
                        }
                        p {
                            margin-bottom: 0;
                            span {
                                color: var(--color_mountain_mist_approx);
                            }
                        }
                    }
                }
                ul {
                    width: 100%;
                    padding: 0;
                    margin: 0;
                    display: flex;
                    align-items: center;
                    gap: 1.5rem;
                    li {
                        font-size: 14px;
                        border: 1px solid var(--color_silver_approx);
                        border-radius: 2rem;
                        padding: 0.5rem 1.5rem;
                        i {
                            color: var(--primary);
                            margin-right: 0.5rem;
                        }
                        p {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
    }

    /* // Course sidebar */
    .course-sidebar {
        width: 25%;
        position: absolute;
        top: 0;
        right: 0;
        border: 2px solid var(--secondary);
        background-color: var(--white);
        border-radius: 15px;
        box-shadow: 0 0.5rem 1rem var(--black_10);
        .course-video {
            padding: 20px 20px 0;
            video {
                width: 100%;
                border-radius: 10px;
            }
        }
        .course-preview-content {
            padding: 20px;
            .course-price {
                margin-bottom: 15px;
                display: flex;
                justify-content: space-between;
                p {
                    font-size: 24px;
                    font-family: var(--font_4);
                    color: var(--secondary);
                    margin-bottom: 0;
                    display: flex;
                    align-items: center;
                    span {
                        font-size: 14px;
                        font-family: var(--font_0);
                        color: var(--color_silver_sand_approx);
                        text-decoration: line-through;
                        margin-left: 10px;
                    }
                }
                .course-offer {
                    font-size: 12px;
                    color: var(--color_tertiary);
                    border-radius: 5px;
                    background-color: var(--primary_25_approx);
                    padding: 5px 10px;
                    display: flex;
                    align-items: center;
                    i {
                        margin-right: 5px;
                    }
                }
            }
            .course-enroll-btn {
                text-align: center;
                a {
                    width: 100%;
                    margin-bottom: 10px;
                }
                span {
                    font-size: 14px;
                    font-family: var(--font_0);
                    color: var(--color_ironside_gray_approx);
                    i {
                        margin-right: 5px;
                    }
                }
            }
            .course-status-block {
                margin-top: 20px;
                > div {
                    margin-bottom: 15px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                    i {
                        font-size: 20px;
                        color: var(--secondary);
                        margin-left: 10px;
                    }
                    .status-content {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 15px;
                        span {
                            font-size: 13px;
                            color: var(--color_mountain_mist_approx);
                        }
                        p {
                            font-size: 13px;
                            font-family: var(--font_0);
                            color: var(--color_tertiary);
                            border-radius: 5px;
                            background-color: var(--pecan_pine);
                            padding: 2px 10px;
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
        .sidebar-footer-block {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            background-color: var(--lavender_mist);
            .social-block {
                border-bottom: 1px solid var(--black_10);
                padding: 20px;
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 30px;
            }
            .contact-block {
                text-align: center;
                padding: 20px;
                a {
                    width: 100%;
                    color: var(--primary);
                    border-color: var(--white);
                    background-color: var(--white);
                }
            }
        }
    }

    /* // Course content block */
    .course-content-block .course-detail-block {
        width: 70%;
        margin-top: 50px;
        /* //Course image */
        .img-block img {
            width: 100%;
            max-height: 400px;
            border-radius: 15px;
            object-fit: cover;
            overflow-clip-margin: unset;
        }

        /* // Course content nav tab */
        ul.nav-tabs {
            margin: 30px 0;
            border-radius: 10px;
            background-color: var(--white);
            box-shadow: 2px 5px 10px var(--black_23);
            .nav-item {
                .nav-link {
                    height: auto;
                    font-size: 16px;
                    font-family: var(--font_02);
                    color: var(--color_ironside_gray_approx);
                    border: none;
                    border-radius: 10px;
                    padding: 15px 30px;
                    &.active {
                        color: var(--white);
                        background-color: var(--secondary);
                    }
                    &:not(.active):hover, &:not(.active):focus, &:not(.active):active {
                        color: var(--secondary);
                        background-color: transparent;
                    }
                }
            }
        }

        /* // Course content nav tab content */
        .tab-content .tab-pane {
            border: 1px solid var(--wild_sand);
            border-radius: 10px;
            padding: 30px;
            h3 {
                font-size: 22px;
                margin-bottom: 20px;
            }
            p {
                font-size: 18px;
                color: var(--color_ironside_gray_approx);
            }
            ul:not(.rating-icon) {
                padding: 0 0 20px 0;
                margin-top: 30px;
                margin-bottom: 0;
                li {
                    font-size: 17px;
                    color: var(--color_ironside_gray_approx);
                    margin-bottom: 15px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                    i {
                        color: var(--secondary);
                        margin-right: 5px;
                    }
                }
            }
            /* //Course Overview */
            .overview-content {
            }

            /* //Course content */
            .course-content-list .content-item {
                .accordion .accordion-item {
                    border: 0;
                    border-bottom: 1px solid var(--wild_sand);
                    border-radius: 0;
                    .accordion-header {
                        margin-bottom: 0;
                        button {
                            height: auto;
                            font-size: 20px;
                            font-family: var(--font_1);
                            background: none;
                            padding: 20px 0;
                            box-shadow: none;
                            &:not(.collapsed) {
                                color: var(--secondary);
                                border-bottom: 1px solid var(--wild_sand);
                            }
                            &:after {
                                content: '\f068';
                                font-family: var(--fontawesome);
                                font-weight: 900;
                                background-image: none;
                            }
                            &.collapsed:after {
                                content: '\f067';
                            }
                            &:hover span {
                                color: var(--white);
                                background-color: var(--primary);
                            }
                            &:hover, &:focus, &:active, &:focus:active, &.active {
                                color: var(--secondary);
                                box-shadow: none;
                                span {
                                    color: var(--white);
                                    background-color: var(--primary);
                                }
                            }
                            span {
                                font-size: 12px;
                                font-family: var(--font_0);
                                color: var(--color_mine_shaft_approx);
                                border-radius: 20px;
                                background-color: var(--lavender_mist);
                                padding: 4px 12px;
                                margin-left: 20px;
                            }
                        }
                    }
                    .accordion-body {
                        padding: 0;
                        ul li {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .activity-info {
                                span {
                                    margin-right: 10px;
                                }
                                a {
                                    padding: 5px 15px;
                                }
                            }
                        }
                    }
                }
            }

            /* // Course details */
            .course-details {
                display: flex;
                gap: 50px;
            }

            /* // Course instructor */
            &#course-instructor {
                background-color: var(--primary);
                .course-instructor {
                    h3,
                    p {
                        color: var(--white);
                    }
                    .instructor-profile {
                        display: flex;
                        gap: 40px;
                        .img-block {
                            width: 100%;
                            height: 230px;
                            display: flex;
                            justify-content: center;
                            position: relative;
                            img {
                                width: 230px;
                                height: 230px;
                                max-height: none;
                                border-radius: 50%;
                                background-color: var(--lavender_mist_95_approx);
                            }
                            .course-video-block {
                                border: 4px solid var(--white_50);
                                border-radius: 30px;
                                padding: 4px 0;
                                position: absolute;
                                bottom: -10px;
                                a {
                                    color: var(--primary);
                                    border-radius: 30px;
                                    background-color: var(--white);
                                    padding: 5px 15px;
                                    i {
                                        margin-right: 10px;
                                    }
                                }
                            }
                        }
                        .content-block {
                            h5 {
                                color: var(--white);
                            }
                            h6 {
                                color: var(--white);
                                font-family: var(--font_02);
                            }
                            .social-block {
                                display: flex;
                                gap: 15px;
                                li {
                                    padding-bottom: 0;
                                    margin-bottom: 0;
                                    a {
                                        i {
                                            color: var(--white);
                                        }
                                        &:hover i {
                                            color: var(--secondary);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            /* // Course reviews */
            &#course-review {
                border: 0;
                padding: 0;
            }
            .course-review-element {
                border: 1px solid var(--wild_sand);
                border-radius: 10px;
                padding: 30px;
                .rating-block {
                    display: flex;
                    .review-list {
                        width: 100%;
                    }
                    .rating-item,
                    .rating-block {
                        margin: 0 0 15px 0;
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        &:last-child {
                            margin-bottom: 0;
                        }
                        ul {
                            padding: 0;
                            margin: 0;
                            display: flex;
                            li {
                                margin-bottom: 0;
                                i {
                                    color: var(--orange);
                                }
                            }
                        }
                    }
                    .rating-item .progress-block {
                        span {
                            margin-left: 10px;
                        }
                    }
                    .rating-summary{
                        width: 100%;
                        border-radius: 15px;
                        background-color: var(--lavender_mist_70_approx);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        ul {
                            flex-wrap: wrap;
                            justify-content: center;
                            li {
                                &:last-child {
                                    width: 100%;
                                    color: var(--black_65);
                                    text-align: center;
                                }
                            }
                        }
                    }
                }
            }

            /* // Advanced review comment */
            .featured-review {
                border: 1px solid var(--wild_sand);
                border-radius: 10px;
                padding: 30px;
                margin-top: 30px;
                .review-block {
                    .review-item {
                        border-bottom: 1px solid var(--wild_sand);
                        padding-bottom: 20px;
                        margin-bottom: 20px;
                        display: flex;
                        gap: 20px;
                        &:last-child {
                            border-bottom: 0;
                            padding-bottom: 0;
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
    }
}
/* End of Course info - default style */

/* Course info - style 1 */
.course-info-element {
    .course-info-title {
        width: 80%;
        text-align: center;
        margin: 0 auto 80px;
        h2 {
            margin-bottom: 30px;
        }
        p {
            color: var(--color_mountain_mist_approx);
        }
    }
    /* // Course Banner */
    .course-info-banner {
        background-image: var(--url_12);
        background-repeat: no-repeat;
        background-size: contain;
        padding: 50px 0;
        display: flex;
        gap: 30px;
        .banner-left-block {
            width: 100%;
            h1 {
                font-size: 70px;
                line-height: 90px;
                width: 90%;
                span {
                    color: var(--secondary);
                }
            }
            .course-instructor {
                margin-top: 30px;
                display: flex;
                align-items: center;
                gap: 15px;
                .img-block {
                    img {
                        width: 40px;
                        height: 40px;
                        object-fit: contain;
                        border: 1px solid var(--color_silver_approx);
                        border-radius: 10px;
                        background-color: var(--color_quill_gray_approx);
                    }
                }
            }
            .content-block {
                margin-top: 30px;
                .button-block {
                    margin-top: 15px;
                    a {
                        border: 2px solid transparent;
                        border-radius: 30px;
                        background: var(--white_gradient_primary_border);
                        background-color: var(--white);
                        padding: 8px 25px;
                        margin-right: 20px;
                        display: inline-block;
                        i {
                            margin-left: 10px;
                        }
                        &:hover, &:focus, &:active {
                            color: var(--primary);
                        }
                    }
                }
            }
        }
        .banner-right-block {
            width: 100%;
            position: relative;
            .course-video-block {
                position: absolute;
                top: 0;
                right: 0;
                video {
                    width: 160px;
                    height: 160px;
                    border-radius: 50%;
                }
            }
            .course-pricing-block {
                position: absolute;
                top: 0;
            }
        }
    }

    /* // Course Status */
    .course-status-block {
        border: 1px solid var(--color_quill_gray_approx);
        border-radius: 15px;
        background-color: var(--white);
        padding: 30px;
        display: flex;
        gap: 15px;
        > div {
            width: 100%;
            border-right: 1px solid var(--black_10);
            display: flex;
            align-items: center;
            gap: 15px;
            &:last-child {
                border-right: 0;
            }
            i {
                font-size: 24px;
                color: var(--secondary);
                margin-left: 20px;
            }
            svg {
                color: var(--secondary);
            }
            .status-content {
                span {
                    font-size: 15px;
                    color: var(--color_mountain_mist_approx);
                }
                p {
                    font-size: 20px;
                    font-family: var(--font_4);
                    color: var(--color_tertiary);
                    margin-bottom: 0;
                }
            }
        }
    }

    /* // Course learning block */
    .course-learning-block {
        padding: 80px 0;
        .content-block {
            margin-top: 30px;
            display: flex;
            gap: 30px;
            .learning-card {
                width: 100%;
                text-align: center;
                border-radius: 30px;
                background-color: var(--white);
                padding: 30px;
                img {
                    max-width: 80px;
                }
                h6 {
                    line-height: 26px;
                    margin-top: 20px;
                    margin-bottom: 0;
                }
            }
        }
    }

    /* // Course insights */
    .pinnacle-learning {
        .course-elements-display {
            display: flex;
            .learning-item {
                width: 100%;
                border-right: 1px solid var(--black_10);
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 30px;
                &:last-child {
                    border-right: 0;
                }
            }
        }
        .course-section-block {
            min-height: 500px;
            margin-top: 50px;
            border-radius: 25px;
            background: var(--tertiary_gradient_bg);
            display: flex;
            .nav-pills {
                max-width: 100px;
                width: 100%;
                border-top-left-radius: 25px;
                border-bottom-left-radius: 25px;
                background-color: var(--color_tertiary);
                .nav-link {
                    font-size: 26px;
                    font-family: var(--font_5);
                    color: var(--white);
                    text-align: center;
                    border-right: 3px solid transparent;
                    border-radius: 0;
                    padding: 20px;
                    &:first-child {
                        border-top-left-radius: 25px;
                    }
                    &:hover, &:focus, &:active, .active {
                        border-color: var(--secondary);
                        background: var(--tertiary_gradient_border);
                    }
                }
            }
            .tab-content {
                width: 100%;
                .tab-pane {
                    padding: 50px;
                    gap: 30px;
                    &.active {
                        display: flex;
                    }
                    .img-block {
                        max-width: 500px;
                        margin: 0 auto;
                    }
                }
                .content-block {
                    .header-element {
                        h4,
                        p {
                            color: var(--white);
                            margin-bottom: 30px;
                        }
                        ul {
                            color: var(--white);
                            padding: 0;
                            display: flex;
                            gap: 30px;
                            li {
                                border-radius: 30px;
                                background-image: linear-gradient(180deg, var(--white_80), var(--primary_80_approx));
                                padding: 0 20px 0 0;
                                display: flex;
                                align-items: center;
                                span {
                                    width: 50px;
                                    height: 50px;
                                    border-radius: 50%;
                                    background-image: linear-gradient(180deg, var(--white_80), var(--primary_80_approx));
                                    margin-right: 10px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                }
                            }
                        }
                    }
                    .activities-list {
                        margin-top: 40px;
                        display: flex;
                        flex-direction: column;
                        .list-item {
                            padding: 15px 0;
                            border-bottom: 1px dashed var(--white_80);
                            &:last-child {
                                border-bottom: 0;
                            }
                            &.not-access {
                                opacity: .5;
                            }
                            span {
                                width: 100%;
                                display: flex;
                                li {
                                    color: var(--white);
                                    margin-bottom: 0;
                                }
                                p {
                                    color: var(--white);
                                    margin-bottom: 0;
                                }
                                .icon-block {
                                    color: var(--white);
                                    margin-left: auto;
                                    i {
                                        margin-left: 10px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /* // Course Instructor */
    .course-instructor-block {
        padding: 80px 0;
        .course-instructor-item {
            margin-top: 50px;
            display: flex;
            gap: 30px;
            > .img-block {
                position: relative;
                &:before{
                    content: '';
                    width: 100%;
                    height: 100px;
                    position: absolute;
                    bottom: 0;
                    background: var(--lavender_mist_gradient_bg);
                }
            }
            .content-block {
                p {
                    font-size: 24px;
                    font-family: var(--font_1);
                    color: var(--color_tertiary);
                    line-height: 36px;
                }
                .instructor-info {
                    margin-top: 50px;
                    display: flex;
                    ul {
                        padding: 0;
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        &:not(.social-block) li {
                            i {
                                color: var(--orange);
                            }
                            &:first-child {
                                width: 100%;
                            }
                            &:last-child {
                                margin-left: 10px;
                            }
                        }
                        &.social-block {
                            margin-left: auto;
                            gap: 15px;
                            li a {
                                width: 50px;
                                height: 50px;
                                background: var(--white);
                                border-radius: 10px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                transition: all 0.5s ease;
                                &:hover, &:focus, &:active {
                                    color: var(--white);
                                    background-color: var(--color_tertiary);
                                    transition: all 0.5s ease;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /* // Similar Courses */
    .similar-course-block {
        padding: 50px 0;
        .similar-course-item {
            display: flex;
            gap: 30px;
            /* // Activity course card */
            .course-card {
                border: 2px solid var(--color_quill_gray_approx);
                border-radius: 10px;
                background-color: var(--white);
                &:hover, &:focus, &:active {
                    border-color: var(--secondary);
                }
                /* // Course card image and content block */
                .img-block {
                    position: relative;
                    img {
                        border-top-left-radius: 8px;
                        border-top-right-radius: 8px;
                    }
                    .course-category {
                        position: absolute;
                        left: 15px;
                        bottom: 15px;
                        p {
                            font-size: 13px;
                            color: var(--white);
                            border-radius: 20px;
                            background-color: var(--primary);
                            padding: 7px 15px;
                            margin-bottom: 0;
                        }
                    }
                }
                /* // Course card content block */
                .content-block {
                    padding: 15px;
                    .rating-block {
                        padding: 0;
                        display: flex;
                        gap: 5px;
                        li {
                            i {
                                color: var(--orange);
                            }
                            span {
                                color: var(--color_ironside_gray_approx);
                            }
                        }
                    }
                    /* // Course Price block */
                    .price-block {
                        span {
                            font-size: 20px;
                            font-family: var(--font_4);
                            color: var(--secondary);
                        }
                    }

                    /* //Course instructor block */
                    .instructor-block {
                        margin-top: 30px;
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        .img-block {
                            margin-left: auto;
                            margin-bottom: 0;
                            display: flex;
                            align-items: center;
                            li {
                                width: 30px;
                                height: 30px;
                                object-fit: contain;
                                border: 2px solid var(--white_80);
                                border-radius: 50%;
                                background-color: var(--color_quill_gray_approx);
                                margin-left: -5px;
                                overflow: hidden;
                                img {
                                    border-radius: 50%;
                                }
                            }
                        }
                        > span {
                            font-family: var(--font_3);
                            color: var(--color_ironside_gray_approx);
                        }
                    }
                    p {
                        font-family: var(--font_3);
                        color: var(--color_mountain_mist_approx);
                        margin-bottom: 0;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }
                }
            }
        }
    }
    /* // End of Similar Courses */

    /* // Course Kickoff */
    .course-kickoff {
        height: 500px;
        background-image: var(--url_13);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: 80px;
        margin: 80px 0 0;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 0;
        &:before {
            content: '';
            width: 100%;
            height: 100%;
            background-image: radial-gradient(circle, transparent 50%, var(--lavender_mist_95_approx) 100%);
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        .container {
            height: 100%;
            .content-block {
                min-height: 400px;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: relative;
                z-index: 0;
                &:before {
                    content: '';
                    width: 50%;
                    height: 100%;
                    background-image: radial-gradient(circle, var(--lavender_mist) 0%, var(--lavender_mist_70_approx) 100%);
                    filter: blur(15px);
                    position: absolute;
                    border-radius: 50%;
                    z-index: -1;
                }
                h1 {
                    font-size: 60px;
                    line-height: 75px;
                }
                h2 {
                    font-size: 40px;
                    line-height: 60px;
                }
                p {
                    color: var(--color_mountain_mist_approx);
                }
                .button-block {
                    margin-top: 15px;
                    a i {
                        margin-left: 10px;
                    }
                }
            }
        }
    }
}
/* End of Course info - style 1 */

/* Course info - style 2 */
#page.drawers {
    &:has(.info-primary-bg),
    &:has(.info-dark-bg) {
        .main-inner {
            background-color: var(--primary);
        }
        .course-info-element {
            &.info-primary-bg,
            &.info-dark-bg {
                .course-info-title {
                    h2,
                    p {
                        color: var(--white);
                    }
                }
                /* // Course Banner style 2 */
                .course-info-banner {
                    .banner-left-block {
                        h1,
                        .content-block,
                        p {
                            color: var(--white);
                        }
                        .content-block .button-block a {
                            border-color: var(--white);
                        }
                        .course-instructor {
                            .instructor-block,
                            .content-block {
                                color: var(--white);
                            }
                        }
                    }
                }

                /* // Course Status style 2 */
                .course-status-block {
                    border-color: var(--white_25);
                    background-color: var(--white_10);
                    > div {
                        border-color: var(--white_10);
                        .status-content {
                            span,
                            p {
                                color: var(--white);
                            }
                        }
                    }
                }

                /* // Course learning block style 2 */
                .course-learning-block {
                    .content-block {
                        .learning-card {
                            background-color: var(--white_10);
                            h6 {
                                color: var(--white);
                            }
                        }
                    }
                }

                /* // Course insights style 2 */
                .pinnacle-learning {
                    .learning-item {
                        border-color: var(--white_10);
                        h5,
                        h6 {
                            color: var(--white);
                        }

                    }
                }

                /* // Course Instructor style 2 */
                .course-instructor-block {
                    .course-instructor-item {
                        .img-block {
                            &:before{
                                background: var(--primary_gradient_bg);
                            }
                        }
                        .content-block {
                            p {
                                color: var(--white);
                            }
                            .instructor-info ul {
                                li,
                                h6 {
                                    color: var(--white);
                                }
                                &.social-block li a {
                                    color: var(--white);
                                    background-color: var(--white_10);
                                    &:hover, &:focus, &:active {
                                        color: var(--color_tertiary);
                                        background-color: var(--white);
                                        box-shadow: 0px 0px 2px 2px var(--white_50);
                                    }
                                }
                            }
                        }
                    }
                }

                /* // Similar Courses style 2 */
                .similar-course-block {
                    .similar-course-item .course-card {
                        border-color: var(--white_25);
                        background-color: var(--white_10);
                        .content-block {
                            h5,
                            .rating-block li span,
                            p {
                                color: var(--white);
                            }
                            .price-block span {
                                color: var(--secondary);
                            }
                            .instructor-block > span {
                                color: var(--white);
                            }
                        }
                    }
                }

                /* // Course Kickoff style 2 */
                .course-kickoff {
                    &:before {
                        background-image: radial-gradient(circle, transparent 50%, var(--primary_50_approx) 100%);
                    }
                    .container .content-block {
                        &:before {
                            background-image: radial-gradient(circle, var(--primary) 0%, var(--primary_50_approx) 100%);
                        }
                        h1,
                        h2,
                        p {
                            color: var(--white);
                        }
                        .button-block a {
                            &:hover, &:focus, &:active {
                                color: var(--white);
                                background-color: var(--primary);
                            }
                        }
                    }
                }
            }
        }
    }
    &:has(.info-dark-bg) {
        .main-inner {
            background-color: var(--black);
            .course-info-element.info-dark-bg {
                .course-instructor-block .course-instructor-item .img-block:before {
                    background-color: var(--black_gradient_bg);
                }
                .course-kickoff {
                    &:before {
                        background-image: radial-gradient(circle, transparent 50%, var(--black_65) 100%);
                    }
                    .container .content-block:before {
                        background-image: radial-gradient(circle, var(--black_80) 50%, var(--black_10) 100%);
                    }
                }
            }
        }
    }
    &:has(.info-light-bg) {
        .main-inner {
            background-color: var(--lavender_mist);
            .course-info-element .course-status-block {
                border-color: var(--white);
                box-shadow: 2px 5px 5px var(--black_40);
            }
        }
    }
}

@media (min-width: 1199px) {
    .course-info-element .course-instructor-block .course-instructor-item {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        .img-block {
            width: 60%;
        }
        .content-block {
            width: 100%;
        }
    }
}

@media (min-width: 768px) {
    .course-info-element {
        .title-block {
            width: 60%;
            margin: 0 auto;
        }
        .course-learning-block .content-block .learning-card {
            max-width: 290px;
            margin: 0 auto;
        }
    }
}
/* // End of Course info - style 1 */

/* Course view page */
.course-content-banner {
    padding: 50px 20px;
    background-image: var(--url_11);
    position: relative;
    &:before {
        content: '';
        width: 100%;
        height: 100%;
        background-color: var(--black_10);
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .user-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        .img-block {
            img {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                background-color: var(--seashell);
            }
        }
        .button-group {
            display: flex;
            flex-direction: column;
            a {
                font-family: var(--font_02);
                color: var(--color_tertiary);
                margin-bottom: 10px;
                border-color: var(--color_tertiary);
                background-color: transparent;
                &:hover {
                    color: var(--white);
                    border-color: var(--secondary);
                    background-color: var(--secondary);
                }
                i,
                svg {

                    font-weight: bold;
                    margin-left: 5px;
                }
                &:last-child {
                    color: var(--white);
                    border-color: var(--secondary);
                    background-color: var(--secondary);
                    &:hover {
                        color: var(--color_tertiary);
                        border-color: var(--color_tertiary);
                        background-color: transparent;
                    }
                }
            }
        }
        h2 {
            margin-right: auto;
        }
    }
}

.secondary-navigation {
    max-width: 1350px;
    padding: 0 15px;
    margin: 30px auto;
    .navigation {
        height: auto;
        border: 2px solid var(--black_10);
        border-radius: 40px;
        padding: 3px;
        .nav-tabs {
            max-width: none;
            border: 0;
            border-radius: 40px;
            flex-wrap: nowrap;
            .nav-item {
                width: 100%;
                .nav-link {
                    font-family: var(--font_7);
                    color: var(--color_tertiary);
                    border-bottom-color: transparent;
                    border-radius: 30px;
                    padding: 15px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    &:hover, &:focus, &:active, &.active {
                        color: var(--white);
                        box-shadow: none;
                        background-color: var(--secondary);
                    }
                    &:before {
                        content: '';
                        font-size: 20px;
                        font-family: var(--font_7);
                        margin-right: 10px;
                    }
                }
                &[data-key="coursehome"] .nav-link:before {
                    content: '\e828';
                }
                &[data-key="editsettings"] .nav-link:before {
                    content: '\e810';
                }
                &[data-key="participants"] .nav-link:before {
                    content: '\e82b';
                }
                &[data-key="grades"] .nav-link:before {
                    content: '\e842';
                }
                &[data-key="courseoverview"] .nav-link:before {
                    content: '\e843';
                }
                &[data-region="morebutton"] .nav-link:before {
                    content: '\e871';
                }
            }
            .dropdown-menu {
                .dropdown-item {
                    &:hover, &:focus, &:active, .active {
                        border-color: var(--secondary);
                        background-color: var(--secondary);
                    }
                }
            }
        }
    }
}
.course-section {
    .action-menu .dropdown .btn-icon {
        width: 30px;
        height: 30px;
        color: var(--primary);
        border: 0;
        background-color: var(--primary_25_approx);
        &:hover, &:focus, &:active {
            color: var(--white);
            background-color: var(--primary);
        }
        .caret {
            display: none;
        }
    }
    .summarytext img {
        max-width: 300px;
    }
    .section-item {
        border-color: var(--seashell);
        background-color: var(--white);
        &:has(.content.show) {
            background-color: var(--seashell);
        }
        .course-section-header {
            .sectionname a {
                color: var(--color_tertiary);
            }
            a.btn {
                &.section-collapsemenu {
                    font-size: 14px;
                    border: 1px solid;
                    border-radius: 5px;
                    padding: 5px 10px;
                }
                &:hover, &:focus, &:active {
                    color: var(--white);
                    border-color: var(--primary);
                    background-color: var(--seashell);
                    outline: none;
                    box-shadow: none;
                    i {
                        color: var(--white);
                    }
                }
                &.icons-collapse-expand.collapsed {
                    &:hover, &:focus, &:active {
                        color: var(--white);
                        background-color: var(--primary);
                    }
                }
                &.icons-collapse-expand {
                    width: 45px;
                    height: 45px;
                    color: var(--primary);
                    border-color: var(--white);
                    background-color: var(--white);
                     &:hover, &:focus, &:active {
                        color: var(--white);
                        background-color: var(--primary);
                    }
                    &:not(:hover, :focus, :active) i {
                        color: var(--primary);
                    }
                    &.collapsed {
                        border-color: var(--seashell);
                        background-color: var(--seashell);
                    }
                }
            }
        }
        .course-content-item-content {
            .divider {
                .divider-content .add-content {
                    height: auto;
                }
                &:hover, &:focus, &:active {
                    hr {
                        border-color: var(--secondary);
                    }
                    .divider-content .add-content {
                        color: var(--white);
                        border-color: var(--secondary);
                        background-color: var(--secondary);
                    }
                }
            }
            .section .activity {
                padding: 10px 0;
                border-bottom: 0;
                .activityname a {
                    color: var(--color_tertiary);
                    font-family: var(--font_7);
                }
                .activity-groupmode-info .dropdown .dropdown-menu {
                    .option-select-indicator .icon[title="Selected"] {
                        color: var(--secondary);
                    }
                }
                .activity-completion button {
                    font-weight: normal;
                    color: var(--white);
                    border-color: var(--secondary);
                    border-radius: 30px;
                    background-color: var(--secondary);
                    padding-top: 0;
                    padding-bottom: 0;
                    &:hover {
                        border-color: var(--primary);
                        background-color: var(--primary);
                    }
                    &:focus {
                        box-shadow: 0 0 0 .2rem (74, 196, 157, .25);
                    }
                }
            }
        }
    }
    .availabilityinfo .editavailability a {
        font-weight: normal;
    }
}
.course-content {
    margin: 50px 0;
    .changenumsections {
        .add-section {
            color: var(--white);
            font-weight: normal;
        }
        .divider:hover {
            hr {
                border-color: var(--secondary);
            }
            .add-content {
                color: var(--white);
                border-color: var(--secondary);
                background-color: var(--secondary);
            }
        }
    }
}
/* End of Course view page */

/* Enrolled courses - List overview */
.course-info-popup-block {
    > button {
        height: auto;
        color: var(--primary);
        border-color: transparent;
        background-color: transparent;
        padding: 0;
        margin-right: 0;
    }
    .modal,
    .multi-collapse {
        .modal-content {
            border-radius: 20px;
        }
        .modal-header {
            padding-top: 40px;
            padding-bottom: 20px;
            border-bottom: 0;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 50px;
            .header-image {
                text-align: center;
                display: flex;
                flex-direction: column;
                gap: 20px;
                .img-block {
                    max-width: 150px;
                    width: 100%;
                    margin: 0 auto;
                    border-radius: 20px;
                }
                .button-block {
                    display: flex;
                    flex-direction: column;
                    a {
                        color: var(--color_tertiary);
                        border-color: var(--seashell);
                        background-color: var(--seashell);
                        margin-bottom: 15px;
                        &:hover {
                            color: var(--white);
                            border-color: var(--primary);
                            background-color: var(--primary);
                        }
                        &:last-child {
                            background-color: transparent;
                            &:hover {
                                color: var(--white);
                                border-color: var(--primary);
                                background-color: var(--primary);
                            }
                        }
                    }
                }
            }
            .content-block {
                max-width: none;
                width: auto;
                h5 {
                    font-size: 22px;
                    margin-bottom: 15px;
                }
                h6 {
                    font-size: 14px;
                    font-weight: normal;
                    color: var(--white);
                    padding: 3px 10px;
                    border-radius: 20px;
                    background-color: var(--primary);
                    margin-right: auto;
                    margin-bottom: 0;
                    display: inline-flex;
                }
                ul {
                    padding-left: 0;
                    margin-top: 20px;
                    margin-bottom: 20px;
                    li span {
                        font-weight: bold;
                    }
                }
                .progress {
                    max-width: 300px;
                }
            }
        }
        .modal-body {
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            background-color: var(--seashell);
            table {
                tr {
                    th {
                        color: var(--color_tertiary_50);
                        border: 0;
                    }
                    td {
                        border: 0;
                        .progress {
                            min-width: 120px;
                            margin-top: 15px;
                            margin-right: 20px;
                        }
                        button {
                            height: 40px;
                            padding: 0 15px;
                        }
                        img {
                            max-width: 50px;
                            width: auto;
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
        .modal-footer {
            display: none;
        }
    }
}
.course-overview {
    /* Course header */
    .course-overview-header {
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        h3 {
            margin-bottom: 0;
            ~ div {
                > div {
                    gap: 10px;
                    > .dropdown .dropdown-menu {
                        .dropdown-divider {
                            display: none;
                        }
                        li:nth-child(2) {
                            border-top: 0;
                        }
                    }
                    .searchbar input {
                        height: 50px;
                        border: 0;
                        border-radius: 30px !important;
                        box-shadow: 0px 0px 10px 1px var(--black_05_approx);
                        padding: 0 20px;
                    }
                }
                .dropdown button.dropdown-toggle {
                    height: 50px;
                    color: var(--color_tertiary);
                    padding: 0 20px;
                    border: 0;
                    box-shadow: 0px 0px 10px 1px var(--black_05_approx);
                    gap: 20px;
                }
            }
        }
    }
    .coursename {
        font-size: 22px;
        font-family: var(--font_4);
        color: var(--color_tertiary);
        &:hover {
            color: var(--secondary);
        }
    }

    /* Course List view */
    .list-group-item {
        &:has(.multi-collapse.show) {
            padding-bottom: 0;
        }
        .course-title > button {
            height: auto;
            border: 0;
            background-color: transparent;
            padding: 0;
            i,
            svg {
                color: var(--primary);
            }
        }
        &:not(.course-summaryitem) {
            .col-md-9 {
                align-items: center;
                flex-direction: row !important;
            }
        }
        .course-info-popup-block {
            padding: 0 4px;
            .modal-dialog {
                max-width: none;
                margin-bottom: 0;
                .modal-header {
                    display: none;
                }
                .modal-content {
                    border: 0;
                }
                .modal-body {
                    border-radius: 10px;
                    border-top-left-radius: 0;
                    border-top-right-radius: 0;
                    margin-top: 10px;
                }
            }
        }
    }
    .course-title {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .col-md-9 {
        gap: 5px;
        .content-block {
            max-width: 300px;
            width: 100%;
            display: inline-flex;
            flex-direction: column;
            gap: 5px;
        }
        .info-block {
            width: 100%;
            ul {
                width: 100%;
                text-align: center;
                padding-left: 0;
                display: flex;
                align-items: center;
                gap: 15px;
                li {
                    width: 100%;
                    font-weight: bold;
                }
            }
        }
    }
    &.list-overview,
    &.summary-overview {
        .course-listitem {
            border: 1px solid var(--color_celeste_approx) !important;
            border-radius: 10px !important;
            margin-bottom: 15px;
            .summary-image,
            .list-image {
                width:  100%;
                height: 120px;
            }
            .categoryname {
                font-size: 14px;
                color: var(--white);
                background-color: var(--primary);
                padding: 2px 10px;
                border-radius: 20px;
                margin-right: auto;
                display: inline-flex;
            }
            .menu .dropdown {
                width: 100%;
                margin: 0 !important;
                display: flex;
                align-items: center;
                justify-content: center;
                button {
                    background-color: var(--seashell);
                    display: block;
                    &:hover {
                        color: var(--white);
                        background-color: var(--primary);
                    }
                }
            }
        }
    }
    /* End of Course List view */

    /* Course card view */
    &.card-overview .block-cards .course-card {
        border-radius: 10px;
        &:hover {
            border-color: var(--secondary);
        }
        .img-block {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            position: relative;
            > a {
                width: 100%;
                height: 200px;
                display: block;
                .card-img-top {
                    height: 100%;
                    border-top-left-radius: 10px;
                    border-top-right-radius: 10px;
                    img {
                        border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                    }
                }
            }
            .dropdown {
                position: absolute;
                top: 20px;
                right: 10px;
                .coursemenubtn {
                    background-color: var(--white);
                    display: block;
                    &:hover {
                        border-color: var(--white);
                    }
                }
            }
            > div:has(.categoryname) {
                position: absolute;
                bottom: 20px;
                left: 20px;
                .categoryname {
                    font-size: 14px;
                    color: var(--white);
                    border-radius: 20px;
                    background-color: var(--primary);
                    padding: 2px 10px;
                    margin-top: 15px;
                }
            }
        }
        .course-info-container {
            > div {
                margin-bottom: 0;
                flex-wrap: wrap;
                > ul {
                    margin-bottom: 0;
                }
                ul {
                    padding-left: 0;
                    li span {
                        font-weight: bold;
                    }
                }
            }
            ~ div {
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                .card-footer {
                    border-bottom-left-radius: 10px;
                    border-bottom-right-radius: 10px;
                }
            }
        }
    }
}
/* End of Enrolled courses - List overview */

/* Dashboard */
body.dashboard-page {
    background-color: var(--seashell);
}
/* Stats block */
.stats-element .stats-items {
    margin-bottom: 50px;
    display: flex;
    gap: 15px;
    > div {
        width: 100%;
        border-radius: 10px;
        background-color: var(--white);
        padding: 15px;
        display: flex;
        align-items: center;
        gap: 10px;
        .content-block {
            p {
                font-size: 18px;
                margin-bottom: 0;
            }
            b {
                font-size: 22px;
            }
        }
        .img-block {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            background-color: var(--orange);
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                border-radius: 50%;
            }
            i,
            svg {
                font-size: 24px;
                color: var(--white);
            }
        }
        &:nth-child(2) .img-block {
            background-color: var(--primary);
        }
        &:nth-child(3) .img-block {
            background-color: var(--green);
        }
        &:nth-child(4) .img-block {
            background-color: var(--secondary);
        }
        &:nth-child(5) .img-block {
            background-color: var(--color_tertiary);
        }
    }
}
/* End of Stats*/

.dashboard-page {
    .block-content,
    .table-block {
        height: 100%;
        background-color: var(--white);
        padding: 20px;
        border-radius: 15px;
    }
    .title-block {
        border-bottom: 1px solid var(--black_05_approx);
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
        a {
            height: 100%;
            font-family: var(--font_02);
            border-bottom: 2px solid var(--secondary);
        }
        ~ .table-responsive {
            table {
                margin-bottom: 0;
                tr {
                    th {
                        font-weight: normal;
                        color: var(--white);
                        border: 0;
                        background-color: var(--primary);
                        &:first-child {
                            border-top-left-radius: 5px;
                            border-bottom-left-radius: 5px;
                        }
                        &:last-child {
                            border-top-right-radius: 5px;
                            border-bottom-right-radius: 5px;
                        }
                    }
                    td {
                        font-size: 16px;
                        font-family: var(--font_02);
                        color: var(--color_tertiary);
                        vertical-align: middle;
                        border-color: var(--black_05_approx);
                        padding: 15px 0;
                        a {
                            color: var(--color_tertiary);
                            &:hover, &:focus, &:active {
                                color: var(--secondary);
                                transition: all .5s ease;
                            }
                        }
                        b {
                            font-weight: normal;
                            color: var(--color_chicago_approx);
                        }
                        span {
                            color: var(--black_40);
                        }
                        .result-block {
                            color: var(--secondary);
                            background-color: var(--secondary_25_approx);
                            border-radius: 15px;
                            padding: 0 10px;
                            display: inline-block;
                        }
                        .dropdown {
                            display: inline-block;
                            button {
                                display: inline-block;
                            }
                        }
                        i {
                            font-size: 20px;
                            color: var(--secondary);
                        }
                    }
                    &:last-child td {
                        border-bottom: 0;
                        padding-bottom: 0;
                    }
                }
            }
        }
    }
}

/* Course lists */
.course-overview-list {
    .course-item {
        margin-bottom: 20px;
        display: flex;
        gap: 30px;
        .card {
            width: 100%;
            min-height: 350px;
            border: 0;
            border-radius: 10px;
            background-color: var(--secondary);
            .card-header {
                border: 0;
                border-radius: 10px;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                background-color: transparent;
                display: flex;
                align-items: center;
                span {
                    font-size: 14px;
                    color: var(--white);
                }
                .dropdown button {
                    color: var(--white);
                    display: block;
                    &:hover, &:focus, &:active {
                        border: 0 !important;
                    }
                }
            }
            .card-body {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                h4 {
                    color: var(--white);
                }
                .progress-block {
                    margin: 20px 0;
                    .progress-text {
                        color: var(--white);
                        text-align: right;
                        margin-bottom: 5px;
                    }
                }
            }
            .card-footer {
                border: 0;
                background-color: transparent;
                padding-bottom: 20px;
                display: flex;
                justify-content: space-between;
                .user-item {
                    padding-left: 0;
                    margin-bottom: 0;
                    display: flex;
                    gap: 0;
                    li {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        background-color: var(--color_quill_gray_approx);
                        padding: 0;
                        margin-left: -10px;
                        display: flex;
                        &:first-child {
                            margin-left: 0;
                        }
                        img {
                            width: 30px;
                            height: 30px;
                            border: 1px solid var(--white);
                            border-radius: 50%;
                        }
                    }
                }
                p {
                    font-size: 14px;
                    color: var(--color_tertiary);
                    border-radius: 15px;
                    background-color: var(--white);
                    padding: 0 15px;
                    margin-bottom: 0;
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
}

/* Resource block */
.resource-block {
    display: flex;
    gap: 30px;
    ul {
        padding-left: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        li {
            width: 100%;
            height: 150px;
            font-size: 20px;
            border: 1px solid var(--black_05_approx);
            border-radius: 15px;
            background-color: var(--white);
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1 1 calc(33.333% - 20px);
            gap: 10px;
            i {
                width: 50px;
                height: 50px;
                font-size: 20px;
                color: var(--white);
                border-radius: 50%;
                background-color: var(--primary);
                display: flex;
                align-items: center;
                justify-content: center;
            }
            &:nth-child(2) i {
                background-color: var(--secondary);
            }
            &:nth-child(3) i {
                background-color: var(--bs-yellow);
            }
            &:nth-child(4) i {
                background-color: var(--color_tertiary);
            }
            &:nth-child(5) i {
                background-color: var(--orange);
            }
            &:nth-child(6) i {
                background-color: var(--purple);
            }
        }
    }
}

/* Calendar block */
.calendar-block .card-text .maincalendar {
    .calendarmonth {
        margin-bottom: 30px;
        th,
        td {
            border: 0;
            &.hasevent .day-number-circle {
                background-color: var(--secondary);
            }
        }
        td {
            padding: 20px 0;
        }
    }
    .calendar-controls {
        margin: 30px 0;
        display: flex;
        .current {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .arrow_link {
            &:before {
                width: 40px;
                height: 40px;
                font-family: var(--font_7);
                border-radius: 50%;
                background-color: var(--seashell);
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            &.previous:before {
                content: '\e875';
            }
            &.next:before {
                content: '\e876';
            }
            span {
                display: none;
            }
        }
    }
}

/* Quiz attempts */
.quiz-attempts-block {
}

/* Comments block */
.comment-block,
.block_online_users {
    ul {
        padding-left: 0;
        margin-bottom: 0;
        li {
            border-bottom: 1px solid var(--black_05_approx);
            padding-bottom: 15px;
            margin-bottom: 20px;
            &:last-child {
                border-bottom: 0;
                margin-bottom: 0;
            }
            .comment-item,
            .user-block {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 15px;
                .comment-content a {
                    color: var(--color_tertiary);
                    &:hover, &:focus, &:active {
                        color: var(--secondary);
                        transition: all .5s ease;
                    }
                }
                .img-block {
                    position: relative;
                    span {
                        width: 10px;
                        height: 10px;
                        border: 2px solid var(--white);
                        border-radius: 50%;
                        background-color: var(--secondary);
                        position: absolute;
                        top: 0;
                        right: 0;
                    }
                    img {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        background-color: var(--black_10);
                        object-fit: contain;
                        overflow-clip-margin: unset;
                    }
                }
                i {
                    font-size: 20px;
                    margin-left: auto;
                }
                span {
                    width: 100%;
                    color: var(--color_mountain_mist_approx);
                }
                p {
                    width: 100%;
                    font-family: var(--font_02);
                    color: var(--color_shark_approx);
                    margin-bottom: 0;
                }
            }
        }
    }
    .comment-area {
        text-align: right;
        margin-top: 15px;
        button {
            border-color: var(--secondary);
            background-color: var(--secondary);
            margin-top: 15px;
            &:hover, &:focus, &:active {
                border-color: var(--primary);
                background-color: var(--primary);
            }
        }
    }
}

/* Recently accessed courses */
.course-access-block {
    .course-element ul {
        padding-left: 0;
        margin-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        li {
            width: 100%;
            margin-bottom: 10px;
            border: 1px solid var(--black_05_approx);
            border-radius: 10px;
            padding: 15px;
            flex: 1 1 calc(44% - 20px);
            .course-block {
                display: flex;
                align-items: center;
                gap: 15px;
                .course-item {
                    h6 {
                        margin-bottom: 0;
                    }
                    span {
                        color: var(--color_mountain_mist_approx);
                    }
                }
                .img-block i {
                    width: 40px;
                    height: 40px;
                    color: var(--white);
                    border-radius: 50%;
                    background-color: var(--bs-yellow);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
            &:nth-child(2n) .course-block .img-block i {
                background-color: var(--primary);
            }
            &:nth-child(3n) .course-block .img-block i {
                background-color: var(--secondary);
            }
        }
    }
}

/* Upcoming events */
.upcoming-event,
.announcement-block {
    ul {
        padding-left: 0;
        margin-bottom: 0;
        li {
            padding: 20px 0;
            border-bottom: 1px solid var(--black_10);
            display: flex;
            gap: 20px;
            &:first-child {
                padding-top: 0;
            }
            &:last-child {
                padding-bottom: 0;
                border-bottom: 0;
            }
            .event-icon {
                width: 50px;
                height: 50px;
                font-size: 20px;
                color: var(--white);
                border-radius: 10px;
                background-color: var(--secondary);
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .event-content {
                display: flex;
                flex-direction: column;
                a {
                    font-size: 20px;
                    font-family: var(--font_7);
                    color: var(--primary);
                }
                span {
                    font-family: var(--font_7);
                    color: var(--black_40);
                }
            }
        }
    }
}

/* Assignment block */
.assignment-block {
}

/* Online users */
.block_online_users {

}

/* Blocks */
.block-element {
    margin-top: 30px;
    .block-item {
        margin-bottom: 50px;
        display: flex;
        gap: 30px;
        .chart-item {
            width: 67%;
        }
        .upcoming-event {
            width: 33%;
        }
        .calendar-block {
            width: 40%;
        }
        .quiz-attempts-block {
            width: 60%;
        }
        .comment-block {
            width: 50%;
        }
        .course-access-block {
            width: 60%;
        }
        .user-report {
            width: 20%;
            display: flex;
            flex-direction: column;
            gap: 20px;
            > div {
                text-align: center;
                border-radius: 10px;
                background-color: var(--white);
                padding: 20px;
                img {
                    width: auto;
                }
                h6 {
                    margin-top: 15px;
                    margin-bottom: 0;
                }
            }
        }
        .assignment-block {
            width: 60%;
        }
        .block_online_users {
            width: 40%;
        }
        .announcement-block {
            width: 40%;
        }
        .files-block {
            width: 60%;
        }
        .block-content {
            width: 100%;
        }
        .course-search-block .content-block {
            button {
                border-top-left-radius: 30px;
                border-bottom-left-radius: 30px;
            }
            &.search-item form {
                max-width: 300px;
                margin: 0 auto;
                .input-group {
                    justify-content: center;
                    position: relative;
                    input {
                        height: 50px;
                        border: 1px solid var(--black_10);
                        border-radius: 30px;
                        box-shadow: 2px 5px 5px var(--black_10);
                        padding-right: 50px;
                        z-index: 0;
                    }
                    > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
                        border-top-left-radius: 30px;
                        border-bottom-left-radius: 30px;
                    }
                    button {
                        position: absolute;
                        right: 10px;
                        z-index: 1;
                    }
                }
            }
        }
        .left-block,
        .right-block {
            width: 50%;
            display: flex;
            flex-direction: column;
            gap: 30px;
            .block-content {
                ul {
                    padding-left: 0;
                }
                .content-block {
                    margin-bottom: 30px;
                    + .content-block {
                        p {
                            color: var(--color_tertiary);
                            font-family: var(--font_2);
                        }
                    }
                    span {
                        color: var(--color_mountain_mist_approx);
                    }
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
                &.typo-dropshadow {
                    min-height: 100px;
                    box-shadow: 10px 0 35px var(--black_10);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    h2 {
                        margin-bottom: 0;
                    }
                }
            }
        }
        .left-block .block-content .content-block {
            ul {
                width: 100%;
                min-height: 100px;
                border-radius: 10px;
                background-color: var(--primary);
                padding: 30px;
                display: flex;
                align-items: center;
                gap: 10px;
                li {
                    color: var(--white);
                    &:nth-child(2) {
                        margin-left: auto;
                    }
                    a {
                        color: var(--white);
                    }
                }
            }
            &.social-icon {
                display: flex;
                gap: 20px;
                ul {
                    background-color: var(--seashell);
                    flex-wrap: wrap;
                    justify-content: center;
                    li {
                        margin-left: 0;
                        &:first-child {
                            width: 100%;
                            color: var(--color_tertiary);
                            text-align: center;
                        }
                        &:not(:first-child) {
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            background-color: var(--white);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            a {
                                color: var(--color_tertiary);
                            }
                        }
                    }
                }
            }
        }
        .right-block {
            .font-block .content-block {
                text-align: center;
                display: flex;
                flex-direction: column;
                gap: 20px;
                button {
                    height: 80px;
                    font-size: 20px;
                    font-family: var(--font_4);
                    border-radius: 15px;
                    display: flex;
                    justify-content: center;
                    &:last-child {
                        font-family: var(--font_1);
                    }
                }
            }
            .design-block {
                max-width: 90%;
                margin: 0 auto;
                .content-block {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    gap: 15px;
                    .btn {
                        border: 1px solid var(--black_10);
                        border-radius: 5px;
                        margin: 0;
                    }
                    .btn-tertiary {
                        background-color: var(--color_tertiary);
                    }
                    .btn-seashell {
                        background-color: var(--seashell);
                    }
                    .btn-white {
                        background-color: var(--white);
                    }
                    .btn-pecan_pine {
                        background-color: var(--pecan_pine);
                    }
                    .btn-primary-gradient {
                        width: 100%;
                        border: 0;
                        background-image: var(--primary_gradient_border);
                    }
                }
            }
            .block-button {
                display: flex;
                justify-content: space-around;
                .content-block {
                    .btn-block {
                        display: flex;
                        flex-direction: column;
                        button {
                            margin-left: 0;
                            margin-bottom: 20px;
                            i {
                                margin-left: 10px;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Files block */
.files-block .table-responsive tr td i {
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}

/* End of Course lists */