/*
Theme Name: Blogier
Theme URI: https://themeansar.com/free-themes/blogier-free-wordpress-theme/
Author: Themeansar
Author URI: https://themeansar.com
Description: Blogier is a fast, clean, modern-looking Best Responsive News Magazine WordPress theme. The theme is fully widgetized, so users can manage the content by using easy to use widgets. Blogier is suitable for dynamic news, newspapers, magazine, publishers, blogs, editors, online and gaming magazines, newsportals,personal blogs, newspaper, publishing or review siteand any creative website. Blogier is SEO friendly, WPML,Gutenberg, translation and RTL ready. Live preview : https://demos.themeansar.com/blogus/blogier/ and documentation at https://docs.themeansar.com/docs/blogus/
Version: 1.7
Requires PHP: 7.0
Requires at least: 5.4
Tested up to: 6.5.5
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: blogus
Text Domain: blogier
Tags: blog, portfolio, news, grid-Layout, one-column, two-columns, three-columns, flexible-header, left-sidebar, right-sidebar, custom-background, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, post-formats, rtl-language-support, theme-options, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks
Blogier WordPress Theme is child theme of Blogus, Copyright 2023 Themeansar
Blogier is distributed under the terms of the GNU General Public License v3
Blogier is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/
:root {
    --box-color2: #fffaf4;
    --bxsh2: 0 3px 12px -1px rgba(7, 10, 25, .2), 0 22px 27px -20px rgba(7, 10, 25, .2);
}
a:focus {
    outline: 1px solid;
    text-decoration: underline;
}
.navbar-toggler.x:focus,
.navbar-toggler.x:hover {
    outline: 1px solid var(--head-color);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #89216b 0%, #da4453 100%);
}
/* height */
::-webkit-scrollbar {
    height: 8px;
}
.bs-menu-full .navbar {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}
.navbar-wp .navbar-nav {
    justify-content: center;
    row-gap: 10px;
}
.navbar-wp .navbar-nav>li>a {
    font-size: 18px;
    line-height: 1.3;
}
.desk-header {
    padding: 0;
}
.bs-content-list {
    display: grid;
    gap: 70px;
}
.bs-blog-post {
    padding: 0;
    box-shadow: none;
    margin-bottom: 0;
    overflow: visible;
    gap: 10px;
}
.bs-blog-post:hover {
    box-shadow: none;
}
.list-blog .bs-blog-thumb {
    margin: 0;
    width: 40%;
    max-width: 40%;
    min-width: 40%;
    height: 100%;
    box-shadow: var(--bxsh2);
    border-radius: 8px;
}
.list-blog.bs-blog-post .small {
    padding: 5px 20px 0;
    overflow: hidden;
}
.list-blog.bs-blog-post {
    padding: 0;
}
.bs-blog-post .title {
    font-size: 28px;
    font-weight: 700;
    display: block;
    display: -webkit-box;
    max-height: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grid-blog .bs-blog-thumb {
    height: 300px;
    box-shadow: var(--bxsh2);
    border-radius: 8px;
}
.grid-blog.bs-blog-post .small {
    padding: 30px 0 0;
}
.bs-content-grid {
    display: grid;
    grid-row-gap: 70px;
    grid-column-gap: 30px;
}
.column2 {
    grid-template-columns: repeat(2, 1fr);
}
.column3 {
    grid-template-columns: repeat(3, 1fr);
}
.bs-blog-post.single .bs-header .title {
    display: block;
    line-height: 1.3;
}
.bs-sidebar .bs-widget {
    border-radius: 8px;
    box-shadow: var(--bxsh2);
}
.bs-blog-category a {
    border-radius: 4px;
}
form.search-form .search-submit {
    border-radius: 8px;
}
input[type="search"] {
    border-radius: 8px;
}
.missed .wd-back {
    box-shadow: var(--bxsh2);
    border-radius: 8px;
    background: var(--box-color2);
}
.navigation.pagination .nav-links .page-numbers,
.navigation.pagination .nav-links a,
.post-nav-links a,
.bs-blog-post .single .single-nav-links .post-page-numbers {
    border-radius: 4px;
}
.bs-blog-post .single .single-nav-links .post-page-numbers {
    font-style: 18px;
}
.navigation.post-navigation {
    margin-bottom: 30px;
}
.bs-blog-post.single {
    box-shadow: none;
}
.bs-blog-post.single:hover {
    box-shadow: none;
    overflow: visible;
}
.bs-blog-post .bs-header {
    padding: 0 0 20px;
    overflow: hidden;
}
.bs-blog-post.single img {
    border-radius: 8px;
    box-shadow: var(--bxsh2);
}
.bs-blog-post.single .small {
    padding: 20px 0 0;
    overflow: hidden;
}
.bs-blog-post .single .nav-links {
    border-radius: 8px;
}
.bs-info-author-block {
    border-radius: 8px;
    box-shadow: var(--bxsh2);
}
.py-4.px-3.mb-4.bs-card-box {
    border-radius: 8px;
    box-shadow: var(--bxsh2);
}
.comments-area.bs-card-box.p-4 {
    border-radius: 8px;
    box-shadow: var(--bxsh2);
}
.single-class .bs-breadcrumb-section .overlay {
    margin-bottom: 30px;
    background: var(--box-color2);
    box-shadow: var(--bxsh2);
}
.bs-breadcrumb-section .overlay {
    border-radius: 8px;
}
.bs-card-box {
    border-radius: 8px;
    box-shadow: none;
    padding: 0;
}
.bs-breadcrumb-section {
    margin-bottom: 30px;
}
.page-entry-title {
    box-shadow: var(--bxsh2);
    padding: 15px;
    margin-bottom: 50px;
}
#content {
    padding-bottom: 0px !important;
}
.bs-sidebar .bs-widget .bs-widget-tags a,
.bs-sidebar .bs-widget .tagcloud a,
.wp-block-tag-cloud a,
.tagcloud a {
    border-radius: 8px;
}
.list-blog p {
    margin-bottom: 1rem;
}
.gallery .gallery-icon img {
    box-shadow: var(--bxsh2);
    border-radius: 8px;
}
.btn,
.more-link,
.woocommerce ul.products li.product .button {
    padding: 5px 20px;
    font-size: 14px;
    border-radius: 4px;
    font-weight: 500;
    box-shadow: var(--bxsh2);
}
.bs-blog-post.three.md {
    border-radius: 8px;
    margin-bottom: 1.5rem;
}
.bs-blog-post.three .inner:after {
    border-radius: 8px;
}
.featured-widget.wd-back,
.featured-widget {
    border-radius: 8px;
    box-shadow: var(--bxsh2);
    padding: 20px;
    margin-bottom: 30px;
}
.featured-widget .bs-blog-post {
    box-shadow: none;
}
.featured-widget .bs-blog-post:hover {
    box-shadow: none;
}
.featured-widget .bs-blog-thumb.lg {
    height: 300px;
    border-radius: 8px;
    box-shadow: var(--bxsh2);
}
.featured-widget .bs-blog-post .inner {
    padding: 0px !important;
    padding-top: 1rem !important;
}
.featured-widget .bs-blog-post .title {
    margin-bottom: 10px;
    font-size: 24px;
}
.small-post .img-small-post {
    border-radius: 8px;
    box-shadow: var(--bxsh2)
}
.bs-author img.rounded-circle {
    width: 150px;
    height: 150px;
    border-width: 3px;
    border-style: solid;
}
.widget_block .wp-block-search__button {
    border-radius: 8px;
}
.comment-form-comment textarea {
    border-radius: 8px;
}
input[type="submit"],
button {
    border-radius: 8px;
}
.comments-area .reply a {
    border-radius: 8px;
}
.navbar-wp .navbar-brand {
    margin-right: 0;
    display: block;
    padding-top: 0;
}
.navbar-wp .navbar-brand img {
    max-width: 100%;
    height: auto;
}
.wp-block-latest-posts__post-author:before,
.wp-block-latest-posts__post-date:before {
    content: '\';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 5px;
}
.wp-block-latest-posts__post-date:before {
    content: '\';
}
.wp-block-latest-posts__post-title {
    display: block;
}
.wp-block-latest-posts__list .wp-block-latest-posts__featured-image+.wp-block-latest-posts__post-title {
    display: -webkit-box;
    max-height: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wp-block-latest-posts__post-author,
.wp-block-latest-posts__post-date {
    display: inline-block;
    margin-right: 10px;
}
footer .wp-block-heading {
    padding: 5px 0;
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    border-style: solid;
    border-width: 0 0 1px 0;
}
footer .wp-block-heading::before {
    position: absolute;
    content: "";
    height: 3px;
    width: 25%;
    bottom: -1px;
    left: 0;
}
.site-branding-text .site-title {
    white-space: unset;
    word-break: break-word;
}
.blogeir-background-wrapper .squares,
.blogeir-background-wrapper .circles,
.blogeir-background-wrapper .triangles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
.squares .square,
.circles .circle,
.triangles .triangle {
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0.1;
    animation: animate 8s linear infinite;
    bottom: -100px;
}
.circles .circle {
    border-radius: 100px !important;
}
.triangles .triangle {
    width: 0;
    height: 0;
    border-bottom-width: 42px;
    border-bottom-style: solid;
    border-left-width: 25px;
    border-left-style: solid;
    border-right-width: 25px;
    border-right-style: solid;
    border-radius: 0 !important;
}
.squares .square:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles .circle:nth-child(1) {
    left: 10%;
    width: 22px;
    height: 20px;
    animation-delay: 0s;
}
.triangles .triangle:nth-child(1) {
    left: 45%;
    border-right-width: 10px;
    border-left-width: 10px;
    border-bottom-width: 22px;
    animation-delay: 0s;
}
.squares .square:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.circles .circle:nth-child(2) {
    left: 45%;
    width: 84px;
    height: 80px;
    animation-delay: 12s;
}
.triangles .triangle:nth-child(2) {
    left: 25%;
    border-right-width: 15px;
    border-left-width: 15px;
    border-bottom-width: 28px;
    animation-delay: 12s;
}
.squares .square:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.circles .circle:nth-child(3) {
    left: 90%;
    width: 53px;
    height: 50px;
    animation-delay: 4s;
}
.triangles .triangle:nth-child(3) {
    left: 80%;
    border-right-width: 15px;
    border-left-width: 15px;
    border-bottom-width: 28px;
    animation-delay: 4s;
}
.squares .square:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles .circle:nth-child(4) {
    left: 60%;
    width: 53px;
    height: 50px;
    animation-delay: 18s;
}
.triangles .triangle:nth-child(4) {
    left: 30%;
    border-right-width: 20px;
    border-left-width: 20px;
    border-bottom-width: 38px;
    animation-delay: 18s;
}
.squares .square:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.circles .circle:nth-child(5) {
    left: 90%;
    width: 43px;
    height: 40px;
    animation-delay: 1s;
}
.triangles .triangle:nth-child(5) {
    left: 70%;
    border-right-width: 25px;
    border-left-width: 25px;
    border-bottom-width: 42px;
    animation-delay: 1s;
}
.squares .square:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.squares .square:nth-child(7) {
    left: 35%;
    width: 100px;
    height: 100px;
    animation-delay: 7s;
}
.squares .square:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.squares .square:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.squares .square:nth-child(10) {
    left: 85%;
    width: 100px;
    height: 100px;
    animation-delay: 0s;
    animation-duration: 11s;
}
@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}
.bs-widget.promo {
    border-radius: 8px;
}
.bs-widget.promo .inner-content {
    border-radius: 8px;
}
/* Woocommerce */
.woocommerce ul.products li.product .button {
    border-width: 2px;
    border-style: solid;
    line-height: 30px;
}
.woocommerce ul.products li.product {
    border-radius: 8px;
}
.woocommerce ul.products li.product a img {
    border-radius: 8px;
    box-shadow: var(--bxsh2);
}
form.search-form .search-submit {
    padding: 6px 35px;
}
.bs-blog-post.single .bs-header .title {
    font-size: 40px;
}
.bs-info-author-block .bs-author-pic img {
    width: 100px;
    height: 100px;
}
.wp-block-latest-posts__featured-image img {
    box-shadow: var(--bxsh2);
    border-radius: 8px;
}
/* sidebar sticky node */
.bs-sidebar.bs-sticky.sticksy-dummy-node {
    opacity: 0;
}
.wp-block-code code {
    padding: 10px;
}
.wp-block-button .wp-block-button__link {
    border-radius: 8px;
}
/* ---- ==== New ==== ----*/
.course-dashboard {
    /*max-width: 1100px;*/
    /*margin: auto;*/
    padding: 24px;
    background: #fbf9f7;
}
/* Top Section */
.course-dashboard-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.course-dashboard-title {
    font-size: 36px;
}
.course-dashboard-intro {
    width: 50%;
}
.course-dashboard-subtitle {
    color: #6b7280;
    margin-top: 6px;
    font-size: 18px;
}
/* Stats */
.course-stats {
    display: flex;
    gap: 16px;
}
.course-stats-card {
    background: #fff;
    padding: 16px;
    border-radius: 14px;
    width: 230px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.course-stats-label {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}
.course-stats-value {
    margin: 8px 0;
}
.course-stats-progressbar {
    height: 6px;
    background: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}
.course-module-completion {
    font-weight: 400;
    font-size: 26px;
    color: #000;
    display: flex;
    flex-direction: column;
    text-align: right;
    gap: 0;
    font-family: 'Josefin Sans';
}
.course-module-completion span {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}
.course-stats-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3e7c59, #4f418b);
}
/* Module */
.course-module {
    margin-top: 32px;
}
.course-module-header {
    display: flex;
    justify-content: space-between;
}
.course-module-tag {
    font-size: 14px;
    color: #9ca3af;
}
.course-module-title {
    margin: 4px 0;
}
.course-module-desc {
    color: #6b7280;
}
.course-module-completion {
    font-weight: 600;
}
/* Progress Wrapper */
.course-flex {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
.progressbar-label {
    font-size: 13px;
    color: #6b7280;
}
/* Progress Bar */
.course-module-progressbar {
    flex: 1;
    height: 7px;
    background: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}
.course-module-progress-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #3e7c59, #4f418b);
}
/* Lessons */
.course-lessons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}
.course-lessons-card {
    position: relative;
    display: flex;
    gap: 14px;
    background: #ffffff;
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: solid 2px #cacaca;
}
.course-lessons-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #ccc;
}
.course-lessons-card.completed .course-lessons-icon {
    background: #28a745;
}
.course-lessons-card.pending .course-lessons-icon {
    background: #ffc107;
}
.course-lessons-card.invalid .course-lessons-icon {
    background: #dc3545;
}
.course-lessons-card.not-started .course-lessons-icon {
    background: #c9c9c9;
}
.course-lessons-title {
    font-size: 16px;
    color: #000 !important;
    text-decoration: none !important;
}
.course-lessons-desc {
    font-size: 13px;
    color: #6b7280;
}
.course-lessons-duration {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    gap: 6px;
    align-items: center;
}
.course-lessons-status.completed {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #e6f4ea;
    color: #15803d;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}
.course-lessons-status.pending {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #fdf6aade;
    color: #ffc107;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}
.course-lessons-status.not-started {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #b3b2a8de;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}
.course-stats-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    text-align: center;
    align-items: center;
}
.course-stats-top img {
    width: 44px;
    height: auto;
}
.course-stats-top p {
    margin: 0;
}
.course-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 20px;
    background: #fbf9f7;
}
.course-content {
    display: flex;
    gap: 25px;
}
.top-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.back-btn {
    font-size: 14px;
    color: #555;
    cursor: pointer;
}
.progress {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.course-left-content,
.single-sidebar {
    height: 100%;
}
.video-section {
    background: #fff;
    border-radius: 0 0 15px 15px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.course-left-content {
    flex: 2;
}
.video-box {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 57%;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}
.video-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-info h2 {
    margin-top: 0px;
}
.video-info p {
    color: #666;
    line-height: 1.5;
    margin-bottom: 10px;
}
.video-info {
    padding: 20px;
}
.single-sidebar {
    flex: 1;
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.single-sidebar h3 {
    margin-top: 0;
    margin-bottom: 5px;
}
.learning-progressbar {
    width: 90%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}
.learning-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3e7c59, #4f418b);
}
.learning-progressbar-main {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.learning-progressbar-main span {
    width: 10%;
    color: #666;
    font-size: 14px;
}
.module-container {
    padding-top: 20px;
}
.module-title {
    font-size: 14px;
    color: #888;
    letter-spacing: 1px;
}
.module-heading {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #000;
}
.timeline {
    position: relative;
    margin-left: 30px;
}
.timeline::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 5px;
    bottom: 30px;
    width: 2px;
    background: #2e7d5b;
}
.timeline-item {
    position: relative;
    margin-bottom: 15px;
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-item-dot {
    position: absolute;
    left: -28px;
    top: 4px;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 5px solid #2e7d5b;
    border-radius: 50%;
}
.item-title {
    font-weight: 500;
    font-size: 16px;
    color: #000;
}
.item-time {
    font-size: 14px;
    color: #777;
    margin-top: 0px;
}
.lesson-main {
    position: relative;
}
.lesson-main::before {
    content: "";
    position: absolute;
    left: 29px;
    top: 22px;
    bottom: 30px;
    width: 2px;
    background: #d3d3d3;
    z-index: 1;
}
.lesson {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 16px;
    margin-bottom: 12px;
    color: #555;
    z-index: 9;
    position: relative;
}
.lesson.active {
    background: #4b3f91;
    color: #fff;
}
/*.lesson-icon {*/
/*    width: 35px;*/
/*    height: 35px;*/
/*    border-radius: 50%;*/
/*    background: rgba(255,255,255,0.2);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    margin-right: 12px;*/
/*    font-size: 14px;*/
/*}*/
.lesson-icon img {
    width: 12px;
    height: 13px;
}
.qc-step-locked.locked .lesson-icon img {
    width: 16px;
    height: 15px;
    opacity: 0.7;
}
.lesson.locked .lesson-icon {
    background: #eeeeee !important;
}
.lesson-text {
    flex: 1;
}
.lesson-title {
    font-size: 14px;
    font-weight: bold;
}
.lesson-time {
    font-size: 12px;
    margin-top: 3px;
}
.video-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}
.video-info .btn {
    padding: 5px 25px;
    font-size: 14px;
    border-radius: 32px;
    cursor: pointer;
    border: 2px solid #4b3f91;
    transition: all 0.3s ease;
    text-decoration: none;
}
.video-info .btn-fill {
    background: #4b3f91;
    color: #fff;
}
.video-info .btn-fill:hover {
    background: #3e337f !important;
    border-color: #3e337f !important;
}
.video-info .btn-outline {
    background: transparent;
    color: #4b3f91;
}
.video-info .btn-outline:hover {
    background: #3e337f !important;
    color: #fff !important;
}
.attendance-card,
.practice-card,
.upcoming-card {
    background: #ffffff;
    padding: 20px 24px;
    border-radius: 15px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    width: 100%;
    margin-top: 30px;
}
.course-left-content .practice-card {
    border: 1px solid #d0cccc;
    background: #c5bbff14;
}
.attendance-header,
.practice-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}
.upcoming-header-title h2 {
    font-size: 20px;
    margin-top: 5px;
}
.upcoming-header-title {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}
.upcoming-header {
    align-items: baseline;
}
.attendance-header-icon img,
.upcoming-header-icon img {
    width: 16px;
    height: 16px;
    margin: 0px;
}
.attendance-header-icon,
.upcoming-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fdf3e6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 18px;
}
.practice-header-icon img {
    width: 26px;
    height: 26px;
}
.practice-card .practice-header-icon {
    background: #4b3f91;
}
.practice-card .practice-header-icon {
    width: 40px;
    height: 46px;
    border-radius: 15px;
    background: #4b3f91;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 18px;
}
.attendance-header-content h2,
.practice-header-content h2,
.upcoming-header-content h2 {
    margin: 0;
    font-size: 18px;
}
.attendance-header-content p,
.practice-header-content p {
    margin: 3px 0 0;
    font-size: 14px;
    color: #777;
    padding: 0px;
}
.validate-options {
    display: flex;
    gap: 16px;
}
.validate-options .option {
    flex: 1;
}
.validate-options .option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.option-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.option-icon.green {
    background: #569e753b;
}
.option-icon img {
    width: 28px;
    height: 28px;
}
.option-icon.blue {
    background: #74bdf63b;
}
.validate-options .option p {
    margin: 0;
    font-size: 14px;
    color: #000;
    margin-top: 10px;
    font-weight: 500;
}
.practice-header-content .practice-btn {
    padding: 5px 25px;
    font-size: 14px;
    border-radius: 32px;
    cursor: pointer;
    border: 2px solid #4b3f91 !important;
    transition: all 0.3s ease;
    background: #4b3f91 !important;
    color: #fff !important;
    font-weight: 400;
    letter-spacing: 0.4px;
    margin-top: 10px;
    box-shadow: none !important;
}
.practice-header-content .practice-btn svg {
    width: 18px;
    height: 18px;
    margin-left: 10px;
}
.practice-header-content .practice-btn:hover {
    background: #3e337f !important;
    border-color: #3e337f !important;
}
.upcoming-post {
    display: flex;
    align-items: center;
    background: #fffaf599;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.upcoming-date {
    text-align: center;
    margin-right: 18px;
}
.validate-day {
    font-size: 12px;
    color: #6b7280;
    letter-spacing: 1px;
}
.validate-number {
    font-size: 26px;
    line-height: 30px;
    font-weight: 500;
    color: #111827;
}
.upcoming-content {
    flex: 1;
}
.validate-title {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 6px;
}
.validate-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #6b7280;
}
.validate-meta svg {
    width: 14px;
    height: 14px;
    margin-right: 5px;
}
.validate-icon-list {
    display: flex;
    align-items: center;
}
.upcoming-live-badge {
    background: #4b3f911f;
    color: #4b3f91;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}
.qc-attendance-live-icon {
    background: #edf8f1;
    color: #4ca36d;
}
.qc-attendance-replay-icon {
    background: #eef4ff;
    color: #5d86d8;
}
.navbar-wp .navbar-nav>li>a:focus {
    outline: none;
    text-decoration: none;
}
.navbar-wp .navbar-nav li.active a {
    color: #89216b;
}
.navbar-wp .navbar-nav {
    align-items: center;
}
.option-icon img {
    margin: 0 !important;
}
.validate-options .option p {
    padding: 0;
    display: flex;
}
.practice-header-icon img {
    margin: 0px !important;
}
.practice-header-content .practice-btn:focus {
    background: #3e337f !important;
    border-color: #3e337f !important;
}
.qc-step-item .qc-step-link:hover {
    background: #8376d245;
    color: #fff;
}
.course-header {
    justify-content: space-between;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 0px !important;
    background: #fbf9f7;
    display: flex;
    gap: 25px;
}
.back-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #6f6f6f;
    font-size: 14px;
    font-weight: 500;
}
.back-link .arrow {
    display: flex;
    align-items: center;
}
.back-link .arrow svg {
    width: 12px;
    height: 12px;
}
.progress-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
.progress-box img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 50%;
}
.progress-box .text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.progress-box .label {
    font-size: 15px;
    color: #8a8a8a;
    margin-bottom: 5px;
}
.progress-box .value {
    font-size: 15px;
    font-weight: 600;
    color: #2c2c2c;
}
.qc-step-current .qc-step-link:hover {
    background: #4b3f91;
    color: #fff;
}
.qc-date-input{
    width: auto !important;
}
/* Responsive */
@media (max-width: 768px) {
    .course-dashboard-top {
        flex-direction: column;
    }
    .course-lessons {
        grid-template-columns: 1fr;
    }
}
/* ---- ==== Media ==== ----*/
@media (min-width: 1200px) {
    .container {
        max-width: 1320px;
    }
}
@media (min-width: 992px) {
    #sidebar-right {
        padding-right: unset;
        padding-left: 20px;
    }
    .sidebar-left #sidebar-right {
        padding-left: unset;
        padding-right: 20px;
    }
}
@media (max-width: 991.98px) {
    .navbar-wp .navbar-nav>li>a.nav-link,
    .navbar-wp .dropdown-menu>li>a {
        font-size: 16px;
    }
    .navbar-wp .dropdown-menu>li>a {
        font-size: 14px;
    }
    .bs-menu-full .navbar .col-lg-7 {
        padding: 0;
    }
    .column3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .navbar-wp .navbar-nav {
        gap: 0;
    }
    .navbar-nav.sm-collapsible .dropdown-menu .dropdown-menu {
        margin: 0;
    }
    .navbar-wp .dropdown-menu>li ul li a {
        padding-left: 20px;
    }
    .navbar-wp .dropdown-menu>li>ul>li {
        padding-left: 15px;
    }
    .navbar-wp .navbar-nav>li>a.nav-link::after,
    .navbar-wp .dropdown-menu>li>a::after {
        content: '';
        width: 150vh;
        height: 1px;
        background-color: #e1e1e166;
        position: absolute;
        left: -50%;
        bottom: 0;
    }
    .navbar-wp .navbar-nav>li>a.nav-link,
    .navbar-wp .dropdown-menu>li>a {
        border-bottom: none;
    }
    .navbar-wp .navbar-nav>li>a.nav-link:focus,
    .navbar-wp .dropdown-menu>li>a:focus {
        border: none;
        outline: none;
    }
    .qc-step-content-wrap {
        gap: 20px;
        display: grid;
    }
    .course-dashboard-top {
        flex-wrap: wrap;
    }
    .course-dashboard-intro {
        width: 100%;
    }
}
@media (max-width: 767.98px) {
    .list-blog.bs-blog-post {
        display: grid;
    }
    .list-blog.bs-blog-post .small {
        padding-top: 20px;
    }
    .column2,
    .column3 {
        grid-template-columns: repeat(1, 1fr);
    }
    .col-lg-8.content-right .grid-blog.bs-blog-post .bs-blog-category,
    .grid-blog.bs-blog-post .bs-blog-meta {
        justify-content: start;
    }
    .validate-options {
        display: grid !important;
    }
    .attendance-header-icon,
    .upcoming-header-icon {
        padding: 10px;
    }
}
@media(max-width: 575px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .course-stats {
        display: grid;
    }
    .course-stats-card {
        width: 100%;
    }
}