/*#region Master*/

/*
* Multi-Site Theming System
* ========================
* This CSS file supports multiple site configurations (studiemeester, summariesonline)
* combined with light/dark themes. The theming works using CSS custom properties:
* 
* Site Configuration: data-site="studiemeester" | "summariesonline"
* Theme Mode: data-theme="light" | "dark"
* 
* Color schemes are automatically applied based on the combination of these attributes.
* Example: data-site="studiemeester" data-theme="dark" will use green-based dark colors.
*/


:root {
    /* Legacy fallback colors - will be overridden by site-specific themes */
    --smp-primary: #2196F3; /* Main blue */
    --smp-secondary: #4CAF50; /* Success green */
    --smp-accent: #FF9800; /* Orange accent */
    --smp-dark: #2C3E50; /* Dark blue-gray */
    --smp-light: #ECF0F1; /* Light gray */
    --smp-white: #FFFFFF;
    --smp-error: #E74C3C; /* Error red */
    --smp-green: #40a829;
    --smp-dark-gray: #393939;
    --smp-dark-green: #008000;
    --smp-card-border-radius: 18px;
}

    /* studiemeester Theme Colors */
    :root[data-site="studiemeester"] {
        --smp-primary: #00aeef; /* Sky blue */
        --smp-secondary: #164d90; /* Light blue */
        --smp-accent: #F59E0B; /* Amber accent */
        --smp-dark: #1E293B; /* Dark slate */
        --smp-light: #F8FAFC; /* Cool gray */
        --smp-white: #FFFFFF;
        --smp-error: #EF4444; /* Modern red */
        --smp-green: #10B981; /* Emerald for success */
        --smp-primary-rgb: 0, 174, 239;
        --smp-secondary-rgb: 22, 77, 144;
        --smp-login-bg: url('../media/studiemeester/banner/Maths Background.jpg');
        --smp-contact-bg: url('../media/studiemeester/contact/Woman using smart phone.jpg');
        --smp-cost-bg: url('../media/studiemeester/banner/blank chalkboard texture background.jpg');
        --vpanel-gradient: linear-gradient(45deg, var(--smp-primary), var(--smp-secondary) ) !important;
    }

    /* Summaries Online Theme Colors */
    :root[data-site="summariesonline"] {
        --smp-primary: #FABF3F; /* Golden yellow */
        --smp-secondary: #3D4668; /* Twilight navy */
        --smp-accent: #FF7043; /* Orange accent */
        --smp-dark: #0D47A1; /* Navy blue */
        --smp-light: #FEF8EB; /* Light yellow */
        --smp-white: #FFFFFF;
        --smp-error: #E74C3C; /* Error red */
        --smp-green: #26A69A; /* Teal */
        --smp-primary-rgb: 250, 191, 63;
        --smp-secondary-rgb: 61, 70, 104;
        --smp-login-bg: url('../media/login/Pile of Old Books.jpg');
        --smp-features-bg: url('../media/summaries online/banner/science formula blue background.jpg');
        --smp-contact-bg: url('../media/summaries online/contact/kids looking at a globe.jpg');
        --smp-cost-bg: url('../media/summaries online/cost/thoughtful boy with pencil.jpg');
        --vpanel-gradient: linear-gradient(45deg, var(--smp-primary), var(--smp-secondary) ) !important;
    }

    /* Light Theme (default) */
    :root[data-theme="light"] {
        --smp-bg: #ffffff;
        --smp-text: #2C3E50;
        --smp-border: rgba(0,0,0,0.1);
        --smp-card-bg: #ffffff;
        --smp-card-shadow: rgba(0,0,0,0.1);
        --navbar-bg: #ffffff;
    }

    /* Dark Theme */
    :root[data-theme="dark"] {
        --smp-bg: #121212;
        --smp-text: #FFFFFF;
        --smp-text-secondary: #A0AEC0;
        --smp-border: rgba(255,255,255,0.1);
        --smp-card-bg: #1E1E1E;
        --smp-card-shadow: rgba(0,0,0,0.5);
        --navbar-bg: #1E1E1E;
        --smp-input-bg: #2D2D2D;
        --smp-hover-bg: #2D2D2D;
    }

    /* Site-specific theme combinations */

    /* studiemeester Light Theme */
    :root[data-site="studiemeester"][data-theme="light"] {
        --smp-bg: #ffffff;
        --smp-text: #1E293B;
        --smp-border: rgba(30, 41, 59, 0.1);
        --smp-card-bg: #ffffff;
        --smp-card-shadow: rgba(30, 41, 59, 0.08);
        --navbar-bg: #ffffff;
    }

    /* studiemeester Dark Theme */
    :root[data-site="studiemester"][data-theme="dark"] {
        --smp-bg: #0F172A;
        --smp-text: #F1F5F9;
        --smp-text-secondary: #94A3B8;
        --smp-border: rgba(241, 245, 249, 0.1);
        --smp-card-bg: #1E293B;
        --smp-card-shadow: rgba(0,0,0,0.25);
        --navbar-bg: #1E293B;
        --smp-input-bg: #334155;
        --smp-hover-bg: #334155;
    }

    /* Summaries Online Light Theme */
    :root[data-site="summariesonline"][data-theme="light"] {
        --smp-bg: #ffffff;
        --smp-text: #3D4668;
        --smp-border: rgba(13, 71, 161, 0.1);
        --smp-card-bg: #ffffff;
        --smp-card-shadow: rgba(13, 71, 161, 0.1);
        --navbar-bg: #ffffff;
    }

    /* Summaries Online Dark Theme */
    :root[data-site="summariesonline"][data-theme="dark"] {
        --smp-bg: #0F1419;
        --smp-text: #E3F2FD;
        --smp-text-secondary: #90CAF9;
        --smp-border: rgba(227, 242, 253, 0.1);
        --smp-card-bg: #1A2027;
        --smp-card-shadow: rgba(0,0,0,0.5);
        --navbar-bg: #1A2027;
        --smp-input-bg: #2A3138;
        --smp-hover-bg: #2A3138;
    }

/* Theme Transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: var(--smp-bg);
    color: var(--smp-text) !important;
    font-size: 14px;
    overflow-x: hidden;
    z-index: 999;
}

.primary-color {
    color: var(--smp-primary);
}

.secondary-color {
    color: var(--smp-secondary);
}

.text-color
{
    color:var(--smp-text) !important;
}

p, li, label {
    font-size: 14px;
}


.input-validation-error {
    border-color: var(--bs-form-invalid-border-color) !important;
    border-width: 1px !important;
    border-style: solid !important;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

    .input-validation-error:focus {
        border-color: var(--bs-form-invalid-border-color) !important;
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .15) !important;
    }

/* Override any border utility classes when validation error occurs */
.form-control.border-0.input-validation-error,
.form-select.border-0.input-validation-error {
    border: 1px solid var(--bs-form-invalid-border-color) !important;
}

.form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label {
    opacity: 1 !important;
}


/*#region Re-usable*/

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

    .section-title h2 {
        font-size: 30px;
        font-weight: 700;
        margin: unset;
        color: var(--smp-primary);
    }

    .section-title p {
        font-size: 20px;
        font-weight: 500;
        margin: unset;
    }

.smp-btn {
    display: inline-block;
    border: 1px solid var(--smp-primary);
    color: var(--smp-white);
    background-color: var(--smp-primary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 20px;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    border-radius: 50rem;
    text-decoration: none;
}

    .smp-btn:hover, .smp-btn:active, .smp-btn:focus {
        border: 1px solid var(--smp-secondary) !important;
        color: #fff !important;
        background-color: var(--smp-secondary) !important;
        box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
        transform: translateY(-2px);
    }

        .smp-btn i, .smp-btn:hover i, .smp-btn:active i, .smp-btn:focus i {
            color: #fff !important;
        }

    .smp-btn:disabled i {
        color: rgb(33, 37, 41) !important;
    }

.smp-btn-signout {
    background-color: var(--smp-white);
    border: 1px solid var(--smp-error);
    color: var(--smp-error);
}

    .smp-btn-signout i {
        color: var(--smp-error) !important;
    }

    .smp-btn-signout:hover, .smp-btn-signout:active, .smp-btn-signout:focus {
        border: 1px solid var(--smp-error) !important;
        background-color: var(--smp-error) !important;
    }

.block-icon {
    height: 48px;
    width: 48px;
    font-size: 20px;
    color: #fff;
    background: var(--smp-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    box-shadow: 0 2px 8px rgba(33,150,243,0.13);
    transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}

    .block-icon i {
        color: #fff;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.toast-bg-success {
    background-color: var(--smp-green) !important;
}

.toast-bg-error {
    background-color: var(--smp-error) !important;
}

.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
    box-shadow: unset !important;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    opacity: 0.45;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #d3d3d3;
    color: #6c757d;
}

#passwordField {
    padding-right: 40px;
}

#togglePassword {
    z-index: 10;
    padding: 6px 12px;
}

/*#endregion Re-usable*/

/*#region Bootstrap Overrides*/
.form-check-label {
    cursor: pointer;
}

.form-control, .form-select {
    font-size: 14px;
}

.form-floating > label {
    padding: 1.25rem 0.75rem;
    font-size: 14px;
}

.form-control:focus, .form-select:focus {
    box-shadow: unset;
}

.form-select {
    overflow: auto;
}

.form-floating > .form-select {
    padding-top: 1.5rem;
    padding-bottom: 0.25rem;
}

.form-select[size]:not([size="1"]) {
    padding: 1rem 15px;
    scrollbar-width: thin;
}

    .form-select[size]:not([size="1"]) option {
        padding: 12px;
    }

.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
    height: calc(3.7rem + calc(var(--bs-border-width) * 2));
    min-height: calc(3.7rem + calc(var(--bs-border-width) * 2));
    padding: 1.7rem 0.75rem 0.5rem 0.75rem;
}

    .form-floating > .form-control:focus ~ label,
    .form-floating > .form-control:not(:placeholder-shown) ~ label,
    .form-floating > .form-select ~ label {
        color: var(--smp-primary);
        transform: scale(.85) translateY(-0.75rem) translateX(0.15rem);
    }

.form-check-input {
    border: 1px solid var(--smp-primary);
}

    .form-check-input:checked {
        background-color: var(--smp-primary) !important;
        border-color: var(--smp-primary) !important;
    }

.form-switch .form-check-input {
    width: 2.2em;
    height: 1.2em;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba(103, 153, 200,1)'/></svg>");
    cursor: pointer;
    margin-top: 4px;
}

    .form-switch .form-check-input:checked {
        background-image: var(--bs-form-switch-bg);
    }

/* Form Control Enhancements */
.form-control:hover,
.form-select:hover {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !important;
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15) !important;
}

/* Validation Message Spacing */
.text-danger[data-valmsg-for] {
    display: block;
    margin-top: 0.5rem !important;
    margin-bottom: 0.25rem;
}

.form-select:disabled {
    background-color: var(--bs-secondary-bg) !important;
}

.form-control::file-selector-button {
    background-color: var(--smp-primary) !important;
    color: white !important;
    border-right: 1px solid var(--brainwaveGray);
}

.form-check-input[type=radio].input-validation-error {
    border: unset !important;
}

/*#endregion*/

/*#region Syncfusion Treeview */

.treeview-panel {
    display: block;
    max-height: 350px;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

/*#endregion */

/*#region Syncfusion Datagrid */

.e-rowcell:hover {
    cursor: pointer;
}

/*#endregion */

/*#region Syncfusion DropdownTree */

.e-treeview .e-text-content, .e-treeview .e-fullrow {
    cursor: pointer !important;
}

/*#endregion */

/*#endregion*/

/*#region Navbar */

.navbar {
    background-color: var(--navbar-bg);
    box-shadow: 0 2px 4px var(--smp-card-shadow);
    padding: 15px 0;
    transition: all 0.5s;
}

    .navbar .navbar-nav .nav-item {
        border-bottom: 1px solid #f3f3f3;
    }

    .navbar .brand-logo {
        max-height: 84px;
    }

    .navbar .nav-link {
        color: var(--smp-secondary);
        font-weight: 600;
        padding: 1rem;
        transition: color 0.3s ease;
        text-decoration: none;
        position: relative;
    }

    .navbar .user-info {
        color: var(--smp-text);
        font-weight: 600;
        transition: all 0.3s ease;
        text-decoration: none;
    }

        .navbar .user-info:hover {
            color: var(--smp-primary) !important;
            transition: all 0.3s ease;
            font-size: 15px;
        }

            .navbar .user-info:hover i {
                font-size: 15px;
            }

    .navbar .whatsApp-link {
        color: #25D366;
    }

        .navbar .whatsApp-link i {
            font-size: 40px !important;
        }

        .navbar .whatsApp-link:hover {
            color: var(--smp-primary);
        }

    .navbar .smp-btn {
        font-size: 12px;
        padding: 8px 16px;
    }

/*#endregion*/

/*#region Banner */

.smp-carousel.carousel {
    height: 545px;
    position: relative;
    overflow: hidden;
    z-index: 999;
}

    .smp-carousel.carousel .carousel-inner {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .smp-carousel.carousel .carousel-item {
        position: absolute;
        top: 0;
        bottom: 0;
    }

        .smp-carousel.carousel .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 82%;
        }

    .smp-carousel.carousel .summaries-online-banner img {
        object-position: 93%;
    }

    .smp-carousel.carousel .carousel-item .services-banner-img {
        object-position: 22%;
    }

    .smp-carousel.carousel .carousel-caption {
        top: 3.25rem;
        z-index: 3;
    }

        .smp-carousel.carousel .carousel-caption.carousel-caption-middle, .carousel-caption.carousel-caption-top-right {
            align-content: center
        }

    .smp-carousel.carousel h1 {
        font-size: 24px;
        font-weight: 700;
    }

    .smp-carousel.carousel h4 {
        font-size: 22px;
        font-weight: 600;
    }

    .smp-carousel.carousel p {
        font-size: 14px;
    }


    .smp-carousel.carousel h3 {
        font-size: 18px;
        font-weight: 600;
    }

    .smp-carousel.carousel .smp-btn {
        margin: 0.5rem 0;
    }

/*#endregion*/

/*#region About*/

.smp-about {
    padding: 45px 0;
    background-color: var(--smp-light);
}

/*#endregion*/

/*#region Review*/

.smp-review {
    padding: 45px 0;
    background-color: var(--smp-light);
}

    .smp-review .section-title {
        margin: unset !important;
    }

    .smp-review .review-track {
        transition: transform 0.3s;
        animation: scrollReviews 200s linear infinite;
        width: calc(250px * 30);
    }

    .smp-review .review-wrapper:hover .review-track {
        animation-play-state: paused;
    }

@keyframes scrollReviews {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-70%);
    }
}

.smp-review .review-item.card {
    min-width: 320px;
    max-width: 370px;
    background: var(--smp-card-bg);
    border-radius: var(--smp-card-border-radius);
    box-shadow: 0 4px 24px var(--smp-card-shadow);
    border: 1px solid var(--smp-border);
    padding: 35px !important;
    transition: box-shadow 0.3s, transform 0.3s;
    margin: 0 10px;
}

    .smp-review .review-item.card:hover {
        box-shadow: 0 8px 32px 0 rgba(33, 150, 243, 0.13);
        transform: translateY(-4px) scale(1.03);
        border-color: var(--smp-primary);
    }

    .smp-review .review-item.card p {
        color: var(--smp-text);
        font-style: italic;
    }

    .smp-review .review-item.card small {
        color: var(--smp-primary);
        font-size: 12px;
        margin-top: auto;
        font-weight: 600;
    }

.smp-review .review-item .card-info .text {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* show first 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .smp-review .review-item .card-info .text.expanded {
        -webkit-line-clamp: unset;
    }

.smp-review .review-item .card-info .more {
    cursor: pointer;
    text-decoration: underline;
    display: inline-block;
    margin: 10px 0;
    color: var(--smp-secondary);
}

/*#endregion*/

/*#region Features Section */

.smp-features {
    padding: 45px 0;
    z-index: 999;
    position: relative;
    background-image: var(--smp-features-bg);
}

    .smp-features .section-title h2 {
        color: var(--smp-primary);
    }

    .smp-features .section-title p {
        color: var(--smp-white) !important;
    }

    .smp-features .card {
        background: var(--smp-card-bg);
        border-radius: var(--smp-card-border-radius);
        box-shadow: 0 6px 32px 0 rgba(33, 150, 243, 0.08);
        padding: 25px;
        transition: box-shadow 0.3s, transform 0.3s;
        border: 1px solid var(--smp-border);
        align-items: flex-start;
        height: 100%;
        transition: background 0.3s, transform 0.3s;
    }

        .smp-features .card:hover {
            transform: translateY(-6px) scale(1.025);
            border-color: var(--smp-secondary);
        }

    .smp-features .block-icon {
        height: 60px;
        width: 60px;
        margin: 0 0 20px 0;
        font-size: 25px;
        background-color: var(--smp-secondary);
    }

    .smp-features .card:hover .block-icon {
        background: var(--smp-primary);
    }

        .smp-features .card:hover .block-icon i {
            transform: scale(1.08) rotate(-6deg);
        }

    .smp-features .card h3 {
        font-size: 18px;
        font-weight: 700;
        color: var(--smp-secondary);
    }

    .smp-features p {
        color: var(--smp-text);
    }

    .smp-features .smp-btn {
        border-color: var(--smp-secondary);
        background-color: var(--smp-secondary);
    }

        .smp-features .smp-btn:hover {
            border-color: var(--smp-primary) !important;
            background-color: var(--smp-primary) !important;
        }

/*#endregion*/

/*#region Extra Features*/

.smp-extra-features .section-title {
    z-index: 999;
}

.smp-extra-features .bottom-banner-content {
    background: unset;
    max-width: unset;
    margin: unset;
    padding: unset;
    height: 100%;
    display: flex;
    min-width: unset;
}

.smp-extra-features .bottom-banner-item {
    padding: 75px 0;
    min-height: unset;
}

/*#endregion*/

/*#region FAQs Banner*/

.smp-faqs-banner {
    background-color: var(--smp-dark-gray);
}

    .smp-faqs-banner .section-title h2 {
        color: var(--smp-primary) !important;
    }

    .smp-faqs-banner p {
        color: var(--smp-white);
    }

    .smp-faqs-banner .padding-box {
        padding: 45px 0;
        text-align: center;
    }

/*#endregion*/

/*#region Bottom Banner*/

.bottom-banner {
    height: auto !important;
    position: relative;
}

.bottom-banner-item {
    display: flex;
    min-height: 700px;
}

.bottom-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .bottom-banner-bg img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.bottom-banner-content {
    padding: 1.5em;
    align-self: center;
    background: #ffffff;
    min-width: 380px;
    z-index: 4;
    border-radius: var(--smp-card-border-radius);
}

/*#endregion*/

/*#region Services*/

.smp-services {
    padding: 45px 0;
}

    .smp-services h4 {
        font-size: 18px;
        font-weight: 700;
        color: var(--smp-secondary);
        margin-bottom: 20px;
    }

    .smp-services.smp-bg-light {
        background-color: var(--smp-light) !important;
    }

        .smp-services.smp-bg-light .section-title h2 {
            color: var(--smp-primary);
        }

        .smp-services.smp-bg-light h4 {
            color: var(--smp-primary);
        }

        .smp-services.smp-bg-light strong {
            color: var(--smp-primary);
        }

    .smp-services.smp-bg-dark {
        background-color: var(--smp-secondary);
    }

        .smp-services.smp-bg-dark .section-title h2 {
            color: var(--smp-primary);
        }

        .smp-services.smp-bg-dark h4 {
            color: var(--smp-primary);
        }

        .smp-services.smp-bg-dark p, .smp-services.smp-bg-dark li {
            color: var(--smp-white);
        }

    .smp-services .bottom-banner-item {
        min-height: 770px;
    }

    .smp-services .banner-text {
        display: unset;
    }

    .smp-services .bottom-banner-content {
        max-width: unset;
    }

#questionpapers .section-title h2, #taskresearch .section-title h2 {
    color: var(--smp-secondary);
}

/*#region Testkit Section*/

.smp-services.smp-test-kit {
    background: var(--smp-light);
    padding-top: 60px;
    padding-bottom: 60px;
}

.smp-test-kit .card {
    border-radius: var(--smp-card-border-radius);
    box-shadow: 0 4px 24px var(--smp-card-shadow);
    border: 1px solid var(--smp-border);
    background: var(--smp-card-bg);
    transition: box-shadow 0.3s, transform 0.3s;
}

    .smp-test-kit .card:hover {
        box-shadow: 0 8px 32px 0 rgba(33, 150, 243, 0.13);
        transform: translateY(-4px) scale(1.03);
        border-color: var(--smp-primary);
    }

.smp-test-kit .card-header {
    background: unset;
    border: unset;
    padding: unset;
}

    .smp-test-kit .card-header .block-icon {
        height: 54px;
        width: 54px;
        font-size: 28px;
        border-radius: 12px;
    }

.smp-test-kit .block-icon {
    height: 25px;
    width: 25px;
    font-size: 13px;
}

.smp-test-kit h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--smp-secondary);
}

.smp-test-kit ul {
    padding-left: 1.2rem;
    margin-bottom: 1.2rem;
}

.smp-test-kit li {
    font-size: 15px;
    margin-bottom: 0.5rem;
    color: var(--smp-text);
    font-weight: 500;
}

.smp-test-kit .alert {
    border-radius: 14px;
    font-size: 16px;
    background: linear-gradient(90deg, #fffbe6 0%, #fff3cd 100%);
    color: #856404;
    border: 1px solid #ffeeba;
    box-shadow: 0 2px 8px rgba(255, 243, 205, 0.15);
    margin-top: 35px;
}

/*#endregion*/

/*#region Quick Guides*/

/*#endregion*/

/*#endregion*/

/*#region FAQs*/

.smp-faqs {
    padding: 80px 0;
    background-color: var(--smp-light);
}

    .smp-faqs .faq-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .smp-faqs .faq-image {
        margin-top: 30px;
    }

    .smp-faqs .accordion-item {
        border: none;
        background: transparent;
        margin-bottom: 15px;
    }

    .smp-faqs .accordion-button {
        background-color: var(--smp-white);
        border-radius: 10px !important;
        padding: 20px 25px;
        font-size: 16px;
        font-weight: 600;
        color: var(--smp-text);
        box-shadow: none;
        transition: all 0.3s ease;
    }

        .smp-faqs .accordion-button:not(.collapsed) {
            color: var(--smp-primary);
            background-color: var(--smp-white);
            border-radius: 10px 10px 0px 0px !important;
        }

        .smp-faqs .accordion-button:focus {
            border-color: transparent;
        }

        .smp-faqs .accordion-button::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            transition: all 0.3s ease;
        }

        .smp-faqs .accordion-button:not(.collapsed)::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }

    .smp-faqs .accordion-body {
        padding: 20px 25px;
        background-color: var(--smp-white);
        border-radius: 0 0 10px 10px;
        color: var(--smp-text);
        font-size: 14px;
    }

/*#endregion*/

/*#region Stats*/

.smp-stats {
    position: relative;
    z-index: 2;
    padding: 45px 0;
}

    .smp-stats .stat-inner {
        border-radius: 7px;
        background-image: url(/media/stats/counter-bg.png);
        background-size: cover;
        background-position: center;
        background-color: var(--smp-secondary);
        z-index: 3;
        position: relative;
        overflow: hidden;
        color: white;
        padding-bottom: 75px;
    }

    .smp-stats .stat-item {
        display: block;
        margin-bottom: 0;
        padding: 75px 75px 70px;
        border-right: 1px solid var(--smp-primary);
        position: relative;
        height: 100%;
        padding-left: 55px;
        padding-right: 55px;
        padding-bottom: 0;
    }

        .smp-stats .stat-item::after {
            content: '';
            height: 60px;
            width: 60px;
            z-index: -1;
            top: 45px;
            left: 45px;
            background: var(--smp-primary);
            border-radius: 50%;
            position: absolute;
        }

        .smp-stats .stat-item i {
            margin-bottom: 30px;
            display: block;
            font-size: 40px;
        }

    .smp-stats .stat-inner .last-stat {
        border-right: unset;
    }

    .smp-stats .stat-item img {
        margin-bottom: 30px;
        max-width: 55px;
        display: block;
    }

    .smp-stats .stat-item .count-text {
        font-size: 22px;
        font-weight: 600;
        color: var(--smp-white);
    }

        .smp-stats .stat-item .count-text::after {
            content: '+';
        }

    .smp-stats .stat-inner .stat-item p {
        font-size: 16px;
        margin-bottom: 0;
    }

/*#endregion*/

/*#region News*/

.smp-news {
    padding: 45px 0;
}

    .smp-news .news-preview {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: var(--smp-text);
    }

    .smp-news.single-news .news-preview {
        -webkit-line-clamp: 2;
    }


    .smp-news .card {
        border-radius: 1.25rem;
        box-shadow: 0 6px 32px 0 rgba(33, 150, 243, 0.10);
        transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
        overflow: hidden;
        background: var(--smp-card-bg);
        display: flex;
        flex-direction: column;
        width: 100%;
    }

        .smp-news .card:hover {
            box-shadow: 0 12px 40px 0 rgba(33, 150, 243, 0.18);
            transform: translateY(-6px) scale(1.03);
            border-color: var(--smp-primary);
        }

    .smp-news .news-img-wrapper {
        overflow: hidden;
        position: relative;
    }

        .smp-news .news-img-wrapper img {
            transition: transform 0.4s cubic-bezier(.23, 1, 0.32, 1);
            width: 100%;
            height: 220px;
            object-fit: cover;
        }

    .smp-news .card:hover img {
        transform: scale(1.06);
    }

    .smp-news img {
        width: 450px;
    }

    .smp-news h4 {
        font-size: 40px;
        margin-bottom: 40px;
        font-weight: 600;
        color: var(--smp-primary);
        text-align: center;
    }

/*#endregion*/

/*#region Examples*/

.examples-page {
    padding: 45px 0;
}

    .examples-page .type-toggle-group {
        display: grid;
        grid-template-columns: repeat(4, minmax(160px, 1fr));
        gap: 10px;
    }

    .examples-page .type-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 160px;
        text-align: center;
        border-radius: 50rem;
        border: 1px solid var(--smp-secondary);
        background: transparent;
        color: var(--smp-secondary);
        font-weight: 600;
        padding: 10px 14px;
        transition: all 0.2s ease-in-out;
    }

        .examples-page .type-toggle-btn:hover {
            background: rgba(var(--smp-secondary-rgb), 0.08);
        }

        .examples-page .type-toggle-btn.active {
            background: var(--smp-secondary);
            color: #fff;
            border-color: var(--smp-secondary);
        }

/*#endregion*/

/*#region Pricelist*/

.smp-pricelist {
    padding: 45px 0;
    background-color: var(--smp-dark-gray);
}

    .smp-pricelist .section-title h2, .smp-pricelist .section-title p {
        color: var(--smp-primary);
    }

    .smp-pricelist h3 {
        font-size: 20px;
        color: var(--smp-primary);
        text-align: center;
        margin-bottom: 40px;
        font-weight: 600;
    }

    .smp-pricelist .card {
        border-color: var(--smp-border);
        border-radius: 10px;
        padding: 30px 30px 40px 30px;
        background-color: rgba(255, 255, 255, 0.9) !important;
    }

        .smp-pricelist .card .card-header {
            background: unset;
        }

            .smp-pricelist .card .card-header i {
                font-size: 20px;
                color: var(--smp-secondary);
                margin-right: 20px !important;
            }

            .smp-pricelist .card .card-header h4 {
                margin: 0;
                font-size: 18px;
                font-weight: 600;
            }


            .smp-pricelist .card .card-header label {
                font-size: 14px;
            }

        .smp-pricelist .card .card-body h6 {
            text-decoration: line-through;
            font-size: 20px;
            color: var(--smp-error);
            margin-bottom: 10px;
            font-weight: 600;
        }

        .smp-pricelist .card .card-body .feature-detail h5 {
            display: flex;
            align-items: center;
            font-size: 25px;
            color: var(--smp-secondary);
            font-weight: 700;
        }

            .smp-pricelist .card .card-body .feature-detail h5 span {
                font-size: 18px;
                font-weight: 400;
            }

        .smp-pricelist .card .card-body .feature-detail h4 {
            font-size: 25px;
            color: var(--smp-secondary);
            font-weight: 700;
        }

            .smp-pricelist .card .card-body .feature-detail h4 span {
                font-size: 18px;
                color: var(--smp-secondary);
                font-weight: 400;
            }

        .smp-pricelist .card .card-body .feature-detail p {
            font-weight: 300;
        }

        .smp-pricelist .card .card-body .feature-detail .promo-date {
            font-weight: 600;
            color: var(--smp-secondary);
        }

        .smp-pricelist .card .feature-detail label {
            font-size: 14px;
            color: var(--smp-dark-gray);
            margin-bottom: 8px;
        }

        .smp-pricelist .card .card-body .feature-list i {
            color: var(--smp-dark-green);
            font-size: 20px;
        }

        .smp-pricelist .card .card-body .feature-list label {
            color: var(--smp-dark-gray);
            margin-bottom: unset;
        }

    .smp-pricelist .button-container {
        margin-top: auto;
        margin-bottom: 0;
    }

    .smp-pricelist .feature-list {
        flex-grow: 1;
        margin-bottom: 15px;
    }

    .smp-pricelist .no-prices {
        text-align: center;
        padding: 50px 20px;
        background: #f8f9fa;
        border-radius: 12px;
        margin: 40px auto;
        max-width: 600px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        animation: fadeIn 0.8s ease-in-out;
    }

        .smp-pricelist .no-prices h3 {
            font-size: 1.8rem;
            color: var(--smp-text);
            margin-bottom: 10px;
        }

        .smp-pricelist .no-prices p {
            font-size: 1rem;
            color: var(--smp-dark-gray);
        }

    .smp-pricelist .promo-badge {
        position: absolute;
        right: 7.5%;
        top: -2.5%;
        background: var(--smp-primary);
        border-radius: 8px;
        color: white;
        padding: 8px 15px;
        font-size: 14px;
    }

    .smp-pricelist .btn-sign-up {
        background: var(--smp-secondary);
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        transition: 0.3s;
        margin: 15px 0 0 0;
        padding: 10px;
        border: 1px solid var(--smp-secondary);
    }

        .smp-pricelist .btn-sign-up:hover {
            background: var(--smp-white);
            color: var(--smp-secondary);
        }

/*#endregion*/

/*#region WhatsApp Banner*/

.smp-whatsapp-banner .bottom-banner-content {
    align-self: end;
    margin-bottom: 40px;
    opacity: 0.85;
}

.smp-whatsapp-banner .whatsapp-contact-link:hover .contact-text label {
    color: #25D366;
    transition: all 0.3s ease;
}

.smp-whatsapp-banner .whatsapp-contact-link .block-icon {
    background-color: #25D366 !important;
    border-radius: 13px;
    height: 70px;
    width: 70px;
}

    .smp-whatsapp-banner .whatsapp-contact-link .block-icon i {
        font-size: 50px
    }

.smp-whatsapp-banner .whatsapp-contact-link .contact-text label {
    font-size: 16px;
    color: var(--smp-text);
    margin-top: 20px;
    cursor: pointer;
}

.smp-whatsapp-banner .banner-text {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 180px;
}

.smp-whatsapp-banner .whatsapp-card {
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    border-radius: var(--smp-card-border-radius);
    padding: 32px 36px 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

    .smp-whatsapp-banner .whatsapp-card .block-icon {
        background-color: #25D366 !important;
        border-radius: 13px;
        height: 70px;
        width: 70px;
        margin: 0 0 18px 0;
    }

        .smp-whatsapp-banner .whatsapp-card .block-icon i {
            font-size: 44px;
        }

    .smp-whatsapp-banner .whatsapp-card .contact-text label {
        font-size: 18px;
        margin-top: 0;
        margin-bottom: 18px;
        text-align: center;
        font-weight: 700;
    }

    .smp-whatsapp-banner .whatsapp-card .contact-text .whatsapp-highlight {
        display: block;
        font-size: 16px;
        color: #25D366;
        font-weight: 600;
        margin-top: 8px;
        margin-bottom: 20px;
    }

.smp-whatsapp-banner .whatsapp-cta-btn {
    background: #25D366;
    color: #fff;
    text-decoration: none;
    border-color: #25D366
}

    .smp-whatsapp-banner .whatsapp-cta-btn:hover {
        background: #1ebe5d;
        box-shadow: 0 4px 16px 0 rgba(37,211,102,0.18);
        color: #fff;
    }

/*#endregion*/

/*#region Contact*/

.smp-contact {
    padding: 45px 0;
}

    .smp-contact .contact-image-col {
        background-image: var(--smp-contact-bg);
        background-repeat: no-repeat;
        background-size: cover;
        object-fit: cover;
        background-position: 60%;
        border-radius: var(--smp-card-border-radius);
    }

    .smp-contact .contact-form-thank-you label {
        font-size: 45px;
        font-weight: 600;
    }

    .smp-contact .contact-form-thank-you h4 {
        font-size: 35px;
        font-weight: bold;
        color: var(--smp-text);
        transition: opacity 0.3s ease-in-out;
    }

    .smp-contact .contact-form {
        background: var(--smp-card-bg);
        border-radius: var(--smp-card-border-radius);
        box-shadow: 0 4px 24px var(--smp-card-shadow);
        padding: 2.5rem 2rem 2rem 2rem;
        border: 1px solid var(--smp-border);
    }

    .smp-contact .form-check-input:checked {
        background-color: var(--smp-primary);
        border-color: var(--smp-primary);
    }

    .smp-contact .form-check-label {
        color: var(--smp-text);
        font-size: 14px;
        font-weight: 400;
    }

        .smp-contact .form-check-label a {
            color: var(--smp-primary);
            text-decoration: underline;
        }

    .smp-contact .contact-details-block {
        background: var(--smp-card-bg);
        border: 1px solid var(--smp-border);
        border-radius: var(--smp-card-border-radius);
        box-shadow: 0 6px 32px var(--smp-card-shadow);
        padding: 2.5rem 2rem;
        display: flex;
        flex-direction: column;
        transition: box-shadow 0.3s;
    }

    .smp-contact .contact-details-title {
        color: var(--smp-primary);
        font-weight: 700;
        font-size: 20px;
        margin-bottom: 1.5rem;
    }

    .smp-contact .contact-details-block label {
        display: block;
        font-size: 14px;
        font-weight: 600;
    }

    .smp-contact .contact-details-block a {
        color: var(--smp-secondary);
        font-weight: 600;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.2s;
    }

        .smp-contact .contact-details-block a:hover {
            color: var(--smp-primary);
        }

    .smp-contact .contact-details-block .my-auto span {
        font-size: 14px;
        color: var(--smp-text);
        font-weight: 500;
    }

    .smp-contact .contact-details-block .block-icon {
        min-width: 48px;
    }

    .smp-contact .green-bg {
        background-color: #25D366;
    }

    .smp-contact .blue-bg {
        background-color: #1877F2;
    }

.message {
    height: 200px;
}

/*#endregion*/

/*#region Login/Register/Forget Password*/

.user-access {
    padding: 45px 0;
    background-image: var(--smp-login-bg);
}

    .user-access .card {
        border-radius: 2rem;
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
        background: var(--smp-card-bg);
        transition: box-shadow 0.3s;
    }

        .user-access .card:hover {
            box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.18);
        }

        .user-access .card i {
            color: var(--smp-primary);
        }

        .user-access .card .card-title {
            font-size: 24px;
            color: var(--smp-text);
        }

        .user-access .card p {
            font-size: 16px;
        }

    .user-access .smp-btn {
        border-radius: 10px;
        margin: 5px 0;
    }

    .user-access .smp-link {
        color: var(--smp-primary);
    }

        .user-access .smp-link:hover {
            color: var(--smp-primary);
            opacity: 0.8;
        }

/* Divider with text */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--smp-text-secondary, #a0aec0);
    font-size: 0.95rem;
    margin: 2rem 0 1.5rem 0;
}

    .divider::before, .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid var(--smp-border);
        margin: 0 0.75em;
    }

    .divider span {
        color: var(--smp-text-secondary, #a0aec0);
        font-weight: 500;
    }

/*#endregion*/

/*#region Client Portal*/

/*#region Master*/

.client-portal-card {
    background-color: var(--smp-card-bg);
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-card-border-radius);
    box-shadow: 0 2px 4px var(--smp-card-shadow);
}

    .client-portal-card .card-header {
        background-color: var(--smp-card-bg);
        border-bottom: 1px solid var(--smp-border);
        padding: 1.5rem;
        border-radius: 18px 18px 0 0;
    }

        .client-portal-card .card-header h3 {
            color: var(--smp-text);
            font-size: 20px;
            font-weight: 600;
            margin: 0;
        }

    .client-portal-card .card-body h4 {
        color: var(--smp-text);
        font-size: 18px;
        margin-bottom: 20px;
    }

    .client-portal-card .card-body {
        padding: 1.5rem;
    }

/*#endregion*/

/*#region Navigation Styles */

.client-portal {
    padding: 45px 0;
}

    .client-portal .nav-tabs {
        background-color: var(--smp-card-bg);
        border: 1px solid var(--smp-border);
        border-radius: var(--smp-card-border-radius);
        box-shadow: 0 2px 4px var(--smp-card-shadow);
        gap: 0.5rem;
        padding: 15px;
    }

    .client-portal .nav-item {
        margin: 0;
        width: 100%;
    }

    .client-portal .nav-link {
        display: flex;
        align-items: center;
        padding: 1rem 1.5rem;
        color: var(--smp-text);
        border: none;
        border-radius: 8px;
        transition: all 0.3s ease;
        font-weight: 500;
        position: relative;
        overflow: hidden;
        font-size: 16px;
    }

        .client-portal .nav-link:hover {
            background-color: var(--smp-hover-bg);
            color: var(--smp-primary);
            transform: translateY(-1px);
        }

        .client-portal .nav-link.active {
            background-color: var(--smp-primary);
            color: var(--smp-white);
        }

            .client-portal .nav-link.active svg {
                color: var(--smp-white);
            }

        .client-portal .nav-link i {
            font-size: 1.1rem;
            margin-right: 0.75rem;
            transition: color 0.3s ease;
        }

        .client-portal .nav-link:hover svg {
            color: var(--smp-primary);
        }

/* Dark theme adjustments */
[data-theme="dark"] .client-portal .nav-tabs {
    background-color: var(--smp-card-bg);
    border: 1px solid var(--smp-border);
}

[data-theme="dark"] .client-portal .nav-link {
    color: var(--smp-text);
}

    [data-theme="dark"] .client-portal .nav-link:hover {
        background-color: var(--smp-hover-bg);
    }

    [data-theme="dark"] .client-portal .nav-link.active {
        background-color: var(--smp-primary);
        color: var(--smp-white);
    }

/*#endregion*/

/*#region Learner*/

.learner-form .form-group {
    margin-bottom: 1.5rem;
}

.learner-form .form-label {
    color: var(--smp-text);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.learner-form .form-control,
.learner-form .form-select {
    background-color: var(--smp-input-bg);
    border: 1px solid var(--smp-border);
    color: var(--smp-text);
    padding: 0.75rem 1rem;
    border-radius: 6px;
}

    .learner-form .form-control:focus,
    .learner-form .form-select:focus {
        border-color: var(--smp-primary);
        box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
    }

.learner-form .btn-submit {
    background-color: var(--smp-primary);
    color: var(--smp-white);
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .learner-form .btn-submit:hover {
        background-color: #1976D2;
        transform: translateY(-1px);
    }

/* Dark theme adjustments */
[data-theme="dark"] .learner-form .form-control,
[data-theme="dark"] .learner-form .form-select {
    background-color: var(--smp-input-bg);
    border-color: var(--smp-border);
    color: var(--smp-text);
}

    [data-theme="dark"] .learner-form .form-control:focus,
    [data-theme="dark"] .learner-form .form-select:focus {
        background-color: var(--smp-input-bg);
        border-color: var(--smp-primary);
        color: var(--smp-text);
    }

#selectedSchoolDisplay {
    pointer-events: none;
    cursor: not-allowed;
}

.btn-view, .btn-view:focus-within {
    color: var(--smp-white) !important;
    border: 1px solid var(--smp-green) !important;
    background-color: var(--smp-green) !important;
}

    .btn-view:hover {
        background-color: var(--smp-white) !important;
        border: 1px solid var(--smp-green) !important;
    }

    .btn-view i, .btn-editLearner {
        color: var(--smp-white);
    }

    .btn-view:hover i, .btn-view:hover span {
        color: var(--smp-green);
    }

.btn-editLearner, .btn-editLearner:focus-within {
    color: var(--smp-white) !important;
    border: 1px solid var(--smp-primary) !important;
    background-color: var(--smp-primary) !important;
}

    .btn-editLearner:hover {
        background-color: var(--smp-white) !important;
        border: 1px solid var(--smp-primary) !important;
    }

        .btn-editLearner:hover i, .btn-editLearner:hover span {
            color: var(--smp-primary) !important;
        }

/*#endregion*/

/*#region Packages*/

/*#region Learner Detail Panel */

.learner-detail-box {
    background: var(--smp-card-bg);
    border: 1px solid var(--smp-border);
    border-radius: 8px;
    box-shadow: 0 4px 24px var(--smp-card-shadow);
    padding: 15px 20px;
    transition: box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .learner-detail-box .detail-row {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .learner-detail-box .detail-icon {
        color: var(--smp-primary);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .learner-detail-box .detail-label {
        font-weight: 600;
    }

    .learner-detail-box .detail-value {
        font-weight: 500;
        color: var(--smp-text);
    }

.btn-paymentFrequency {
    color: var(--smp-text);
    border-color: var(--smp-text);
}

    .btn-paymentFrequency:hover, .btn-paymentFrequency.active {
        background-color: var(--smp-text);
        color: var(--smp-white);
        border-color: var(--smp-text);
    }

.manage-package-section .smp-btn {
    width: 100%
}

#paymentFrequencyTabs {
    max-width: fit-content;
}

/*#endregion*/

/*#endregion*/

/*#endregion*/

/*#region Checkout */

.checkout {
    padding: 45px 0;
    background: var(--smp-light);
}

    .checkout h2 {
        color: var(--smp-secondary);
    }

    .checkout hr {
        border: none;
        height: 3px;
        background: var(--smp-secondary);
        border-radius: 2px;
        margin: 0 auto 2rem;
    }

    /* Transaction Summary Card */
    .checkout .card {
        background: var(--smp-card-bg);
        border: 1px solid var(--smp-border);
        border-radius: 16px;
        box-shadow: 0 8px 32px var(--smp-card-shadow);
        transition: all 0.3s ease;
        overflow: hidden;
        border: unset;
    }

        .checkout .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px var(--smp-card-shadow);
        }

    .checkout .card-header {
        background-color: var(--smp-secondary) !important;
        border: none;
        padding: 12px 20px;
    }

        .checkout .card-header h5 {
            color: var(--smp-white);
            font-size: 16px;
            font-weight: 600;
        }

    .checkout .card-body {
        padding: 2rem;
    }

        /* Account & Learner Information Block */
        .checkout .card-body .padding-box {
            padding: 1rem;
            background: rgba(var(--smp-secondary-rgb), 0.05);
            border-left: 4px solid var(--smp-primary);
            height: 100%;
            border-radius: 12px;
        }

        .checkout .card-body h6 {
            color: var(--smp-text);
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .checkout .card-body p {
            color: var(--smp-text);
        }

            .checkout .card-body p strong {
                color: var(--smp-text);
                font-weight: 600;
            }

    /* Package Information Table */
    .checkout .table-responsive {
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

        .checkout .table-responsive .table tr {
            border: 0;
        }

    .checkout .table thead th {
        background: rgba(var(--smp-secondary-rgb), 0.05);
        color: var(--smp-secondary);
        font-weight: 600;
        padding: 10px 15px;
        border: none;
    }

    .checkout .table tbody td {
        padding: 10px 15px;
        border: none;
        color: var(--smp-text);
        font-weight: 500;
        vertical-align: middle;
    }

    .checkout .table tbody tr {
        border-bottom: 1px solid var(--smp-border);
        transition: background-color 0.2s ease;
    }

        .checkout .table tbody tr:hover {
            background: rgba(var(--smp-secondary-rgb), 0.02);
        }

    .checkout .table .amount {
        font-weight: 700;
        color: var(--smp-primary);
        font-size: 16px;
        white-space: nowrap;
    }

    /* Voucher Section */
    .checkout .card-header i {
        color: var(--smp-white);
        font-size: 20px;
    }

    /* Voucher Input Section */
    .checkout .smp-btn {
        border: 1px solid var(--smp-secondary);
        color: var(--smp-secondary);
        background-color: transparent;
    }

        .checkout .smp-btn:hover {
            background: var(--smp-secondary) !important;
            color: var(--smp-white) !important;
        }

    /* Summary Content */
    .checkout .summary-card .text-success {
        font-size: 16px;
        font-weight: 700;
        color: var(--smp-green) !important;
    }

    /* Total Amount */
    .checkout .summary-card .amount-display strong {
        font-size: 18px;
        font-weight: 800;
    }

    /* Payment Method Section */
    .checkout .summary-card h6 {
        font-weight: 600;
        font-size: 14px !important;
    }

    .checkout .summary-card .smp-btn {
        border-radius: 6px;
    }


    /* Terms and Conditions */
    .checkout .summary-card .form-check-label a {
        color: var(--smp-secondary);
        text-decoration: none;
        font-weight: 600;
    }

    /* Complete Purchase Button */
    .checkout .summary-card .btn-success {
        border-radius: 12px;
        font-weight: 600;
        padding: 12px 20px;
        transition: all 0.3s ease;
    }

        .checkout .summary-card .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(64, 168, 41, 0.4);
        }

    /* Secure Checkout Badge */
    .checkout .summary-card .secure-checkout {
        margin-top: 1rem;
        padding: 0.75rem;
        background: rgba(var(--smp-green-rgb, 64, 168, 41), 0.1);
        border-radius: 8px;
        border: 1px solid rgba(var(--smp-green-rgb, 64, 168, 41), 0.2);
    }

        .checkout .summary-card .secure-checkout i {
            color: var(--smp-green);
            margin-right: 0.5rem;
            font-size: 1rem;
        }

        .checkout .summary-card .secure-checkout small {
            color: var(--smp-text);
            font-weight: 600;
            font-size: 0.9rem;
        }

    /* Payment Methods Offcanvas */
    .checkout .offcanvas .btn-close {
        transition: all 0.3s ease;
        opacity: 1 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
    }

        .checkout .offcanvas .btn-close:hover {
            transform: scale(1.1);
        }

    .checkout .offcanvas-header {
        background: var(--smp-secondary);
        color: var(--smp-white);
    }

    .checkout .offcanvas-title {
        color: var(--smp-white);
        font-weight: 600;
    }

    .checkout .offcanvas .smp-btn {
        background: var(--smp-secondary);
        color: var(--smp-white);
    }

/*#endregion */

/*#region Thank You Page*/

.smp-transaction-status {
    padding: 45px 0;
}

    .smp-transaction-status .card {
        background: var(--smp-card-bg);
        border: none;
        border-radius: 20px;
        box-shadow: 0 12px 40px var(--smp-card-shadow);
        transition: all 0.3s ease;
        overflow: hidden;
    }

    .smp-transaction-status .card-header {
        border: none;
        padding: 15px;
        text-align: center;
    }

        .smp-transaction-status .card-header h3 {
            color: var(--smp-white);
            font-size: 20px;
            font-weight: 700;
        }

        .smp-transaction-status .card-header i {
            color: var(--smp-white);
            margin-right: 0.75rem;
            font-size: 18px;
        }

    .smp-transaction-status .transaction-hero {
        text-align: center;
        margin-bottom: 25px;
    }

    .smp-transaction-status .transaction-icon {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 2rem;
    }

        .smp-transaction-status .transaction-icon i {
            color: var(--smp-white);
            font-size: 3.5rem;
        }

    .smp-transaction-status .transaction-hero h4 {
        color: var(--smp-text);
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .smp-transaction-status .transaction-hero ul li {
        margin-bottom: 5px;
        font-size: 16px;
    }

        .smp-transaction-status .transaction-hero ul li:last-child {
            margin-bottom: unset;
        }

    .smp-transaction-status .details-section h5 {
        color: var(--smp-text);
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 1.5rem;
    }

    .smp-transaction-status .badge {
        color: var(--smp-white);
        font-size: 0.875rem;
        font-weight: 600;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        border: none;
    }

    .smp-transaction-status .card-footer {
        border-top: 1px solid var(--smp-border);
    }

    .smp-transaction-status .smp-btn {
        background-color: var(--smp-secondary);
        border: 1px solid var(--smp-secondary);
        align-items: center;
        display: flex;
        justify-content: center;
    }

        .smp-transaction-status .smp-btn:hover {
            background: var(--smp-primary);
            border-color: var(--smp-primary);
        }

/*#endregion*/

/*#region Site Content (Learner Portal)*/

.site-content h5 {
    margin-bottom: 25px;
}

/* Dropdown Tree Styles */
.dropdowntree-icons .control-wrapper {
    max-width: 380px;
}

.e-ddt .e-list-img {
    width: 25px;
    height: 25px;
}

/* Content Library Styles */
.content-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    border: 1px solid var(--smp-border);
    min-height: 180px;
    background: var(--smp-card-bg);
    border-radius: 8px;
}

    /* Left border accent for non-textbook content based on badge intent */
    .content-card[data-badge="success"] {
        border-left: 3px solid var(--bs-success);
    }

    .content-card[data-badge="primary"] {
        border-left: 3px solid var(--bs-primary);
    }

    .content-card[data-badge="info"] {
        border-left: 3px solid var(--bs-info);
    }

    .content-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px var(--smp-card-shadow) !important;
        border-color: var(--smp-primary);
    }

.content-card-inner {
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.content-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--smp-error);
}

.content-card .card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--smp-text);
    margin-bottom: 8px;
    line-height: 1.3;
}

.content-card .card-subtitle {
    font-size: 12px;
    color: var(--smp-text-secondary);
    margin-bottom: 12px;
    line-height: 1.3;
}

.content-card span {
    align-self: flex-start;
    margin: auto auto 0 auto;
}

.content-grid {
    padding: 20px 0;
}

.content-grid-message {
    text-align: center;
    padding: 60px 20px;
}

.pdf-viewer-container {
    height: 900px;
    border: 1px solid var(--smp-border);
    border-radius: 8px;
}

.pdf-viewer-modal {
    /*    height: calc(100vh - 100px);
    width: 100%;*/
}

/* Ensure Syncfusion PDF viewer fills the modal */
.pdf-viewer-modal,
#pdfViewerContainer,
#pdfViewer {
    height: 100% !important;
    width: 100% !important;
    min-height: 600px;
    min-width: 100%;
    display: flex;
}

.content-loading {
    text-align: center;
    padding: 3rem 1.25rem;
    display: none;
}

.content-card[data-contenttype="0"] {
    border-left: 3px solid var(--bs-success); /* Red border for audio visual content */
}

.content-card[data-contenttype="1"] {
    border-left: 3px solid var(--bs-info); /* Red border for audio visual content */
}

.content-card[data-contenttype="2"] {
    border-left: 3px solid var(--bs-warning); /* Red border for audio visual content */
}

.content-card[data-contenttype="3"] {
    border-left: 3px solid var(--bs-primary); /* Red border for audio visual content */
}

/* Audio Visual Content Styles */
.content-card[data-contenttype="4"] {
    border-left: 3px solid #dc3545; /* Red border for audio visual content */
}

    .content-card[data-contenttype="4"] .content-icon {
        color: #dc3545; /* Red icon color for audio visual content */
    }

    /* Make audio visual cards slightly different to indicate they open in a new tab */
    .content-card[data-contenttype="4"] .content-card-inner {
        position: relative;
    }

        .content-card[data-contenttype="4"] .content-card-inner::after {
            content: "";
            position: absolute;
            top: 10px;
            right: 10px;
            width: 10px;
            height: 10px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!-- Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: contain;
            opacity: 0.5;
        }

/* Content Type Badge for Audio Visual */
.badge.bg-danger {
    background-color: #dc3545 !important;
}

.tag-filter-container {
    min-height: 40px;
    padding: 8px 0;
}

.tag-filter {
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

    .tag-filter:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .tag-filter.bg-primary {
        background-color: #0d6efd !important;
        color: white !important;
    }

    .tag-filter.bg-secondary {
        background-color: #6c757d !important;
        color: white !important;
    }

        .tag-filter.bg-secondary:hover {
            background-color: #5a6268 !important;
        }

.content-tags .badge {
    font-size: 0.7rem;
    margin-right: 4px;
    margin-bottom: 2px;
}

/* Exercise content card styling */
.content-card[data-tags] {
    position: relative;
}

/*#endregion*/

/*#region Learner Portal*/

/*#region Master*/

.master-col-lg-10 {
    background-color: #f8f9fa;
}

.learner-portal h5 {
    font-size: 16px;
}

/*#endregion*/

/*#region Navbar*/

.learner-portal-navbar .breadcrumb .breadcrumb-item {
    font-size: 16px;
}

    .learner-portal-navbar .breadcrumb .breadcrumb-item a {
        font-weight: 600;
        text-decoration: none;
        color: var(--smp-primary);
        transition: color 0.3s ease;
    }

        .learner-portal-navbar .breadcrumb .breadcrumb-item a:hover {
            color: var(--smp-secondary);
        }

.learner-portal-navbar .breadcrumb-item.active {
    color: var(--smp-dark-gray) !important;
    font-weight: 600;
}

/*#endregion*/

/*#region Sidebar*/

.side-bar {
    height: auto;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1000;
    border-right: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
}

    .side-bar i {
        color: var(--smp-primary) !important;
    }

    .side-bar .sidebar-header i {
        font-size: 45px;
    }

    .side-bar .admin-profile i {
        font-size: 24px;
    }

    .side-bar .admin-profile .fa-arrow-right-arrow-left {
        color: var(--smp-primary);
        font-size: 16px;
    }

    .side-bar h4 {
        color: var(--smp-text);
        font-size: 30px;
    }

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

.portal-header h5 {
    color: var(--smp-text);
}

.side-bar .admin-profile {
    background-color: rgba(74, 144, 226, 0.05);
    border-bottom: 1px solid rgba(0,0,0,.1);
}

    .side-bar .admin-profile h5 {
        color: var(--smp-text);
        font-size: 16px;
    }

    .side-bar .admin-profile h6 {
        font-size: 14px;
    }

    .side-bar .admin-profile p {
        color: #626262 !important;
        font-size: 13px;
    }

.side-bar .sidebar-menu small {
    font-size: 16px;
}

.side-bar .sidebar-menu {
    overflow-y: auto;
    scrollbar-width: thin;
}

.side-bar .nav-pills .nav-link {
    display: inline-flex;
    width: 100%;
    align-items: center;
    color: #6c757d;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    transition: all 0.2s ease;
    margin-bottom: 0.2rem;
}

    .side-bar .nav-pills .nav-link:hover, .nav-pills .nav-link[aria-expanded="true"] {
        color: var(--smp-white) !important;
        background-color: var(--smp-primary);
    }

    .side-bar .nav-pills .nav-link.active {
        background-color: var(--smp-primary);
        color: var(--smp-white) !important;
        box-shadow: 0 2px 4px rgba(74, 144, 226, 0.2);
    }

    .side-bar .nav-pills .nav-link span {
        font-size: 14px;
    }

    .side-bar .nav-pills .nav-link i {
        width: 20px;
        text-align: center;
        transition: all 0.2s ease;
    }

    .side-bar .nav-pills .nav-link:hover i, .nav-pills .nav-link.active i {
        color: var(--smp-white) !important;
    }

.side-bar .menu-heading {
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 10px;
}

.dropdown-toggle {
    outline: 0;
}

.btn-toggle {
    width: 100%;
    display: inline-flex;
    align-items: center;
}

    .btn-toggle::after {
        width: 15px;
        line-height: 0;
        content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2833,37,41,1%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
        transition: transform .35s ease;
        transform-origin: .5em 50%;
        margin-left: auto;
    }

    .btn-toggle[aria-expanded="true"]::after {
        transform: rotate(90deg);
        content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    }

    .btn-toggle[aria-expanded="true"] {
        background-color: var(--smp-primary);
        color: #fff;
    }

.btn-toggle-nav a {
    padding: .1875rem .5rem;
    margin-left: 0.5rem;
}

.scrollarea {
    overflow-y: auto;
}

.dropdown-divider {
    border-top: 1px solid var(--smp-dark) !important;
}

.collapse-icon {
    transition: transform 0.2s ease;
}

.nav-link[aria-expanded="true"] .collapse-icon {
    transform: rotate(90deg);
}

/*#endregion*/

/*#region Home*/

.dashboard .welcome-banner {
    background: var(--vpanel-gradient);
}

    .dashboard .welcome-banner h1 {
        color: var(--smp-white);
        font-size: 28px;
    }

    .dashboard .welcome-banner p {
        color: var(--smp-white);
        font-size: 18px;
    }

    .dashboard .welcome-banner i {
        font-size: 100px;
        color: var(--smp-white);
    }

    .dashboard .welcome-banner img {
        max-width: 100px;
    }

.dashboard h4 {
    font-weight: 600;
    font-size: 16px;
}

.dashboard a {
    text-decoration: none;
}

.shadow-hover {
    transition: all 0.2s ease-in-out;
}

    .shadow-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

/* Card link hover effect */

.dashboard .card {
    border-left: 3px solid var(--smp-secondary) !important;
}

    .dashboard .card .feature-icon-small {
        width: 40px;
        height: 40px;
        margin-right: 20px;
        background-color: rgba(var(--smp-primary-rgb), 0.1);
        color: var(--smp-primary) !important;
    }

        .dashboard .card .feature-icon-small i {
            font-size: 15px;
        }

    .dashboard .card h3 {
        color: var(--smp-text);
        margin: unset;
        font-size: 16px;
        font-weight: 600;
    }

.admin-profile .btn-link {
    color: var(--smp-primary);
}

.admin-profile:hover .fa-arrow-right-arrow-left {
    color: var(--smp-secondary) !important;
    transition: all 0.3s ease;
    transform: scale(1.3);
}

.dashboard .card .smp-btn {
    padding: 5px 12px;
    font-size: 12px;
}

/*#endregion*/

/*#region Thank You*/

.thank-you-page {
    padding: 45px 0;
}

.thank-you-card {
    background: var(--smp-card-bg);
    border: 1px solid var(--smp-border);
    border-radius: var(--smp-card-border-radius);
    box-shadow: 0 8px 32px var(--smp-card-shadow);
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

    .thank-you-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(33, 150, 243, 0.18);
    }

.thank-you-icon {
    width: 80px;
    height: 80px;
    background: var(--smp-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
}

    .thank-you-icon i {
        color: var(--smp-white);
        font-size: 2.5rem;
    }

.thank-you-title {
    color: var(--smp-primary);
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.thank-you-highlight {
    background: rgba(var(--smp-primary-rgb), 0.1);
    border-left: 4px solid var(--smp-primary);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
}

    .thank-you-highlight strong {
        color: var(--smp-secondary);
        font-weight: 600;
    }

    .thank-you-highlight p {
        margin: unset;
    }

/*#endregion*/

/*#endregion*/

/*#region Footer */

.smp-footer {
    background-color: var(--smp-secondary);
    color: var(--smp-light);
    padding: 2rem 0 2rem;
}

    .smp-footer .brand-logo {
        max-height: 84px;
    }

    .smp-footer ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        .smp-footer ul li {
            margin-bottom: 10px;
        }

            .smp-footer ul li:last-child {
                margin: unset;
            }

            .smp-footer ul li a {
                text-decoration: none;
                position: relative;
                color: var(--smp-light);
                font-size: 14px;
                transition: 0.5s;
            }

                .smp-footer ul li a::before {
                    content: "\f061";
                    font-weight: 600;
                    left: 0;
                    opacity: 0;
                    transition: 0.5s;
                    position: absolute;
                    font-family: "Font Awesome 6 Free";
                }

                .smp-footer ul li a:hover {
                    padding-left: 20px;
                    text-decoration: underline;
                    color: var(--smp-primary);
                }

                    .smp-footer ul li a:hover::before {
                        opacity: 1;
                        color: var(--smp-primary);
                    }

.smp-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 1rem;
    padding-top: 2rem;
    text-align: center;
}

    .smp-footer-bottom .link {
        color: var(--smp-primary);
        transition: 0.5s;
        text-decoration: none;
    }

        .smp-footer-bottom .link:hover {
            color: var(--smp-white);
        }


.smp-footer-title {
    font-size: 16px;
    font-weight: 600;
}

/*#endregion*/

/*#region Terms & Conditions*/

.smp-termsConditions {
    padding: 45px 0;
}

    .smp-termsConditions h1 {
        font-weight: 700;
        color: var(--smp-primary);
    }

    .smp-termsConditions h2 {
        font-weight: 600;
        color: var(--smp-primary);
    }

    .smp-termsConditions ul {
        list-style: none;
    }

    .smp-termsConditions li {
        color: var(--smp-text);
        margin-bottom: 10px;
    }

    .smp-termsConditions a {
        color: var(--smp-primary);
        text-decoration: unset;
    }

        .smp-termsConditions a:hover {
            color: var(--smp-secondary);
        }

/*#endregion*/

/*#region Privacy Policy*/

.smp-privacy {
    padding: 45px 0;
}

/*#endregion*/

/*#region Error Page*/

.error-page-1 {
    padding: 50px 0;
}

    .error-page-1 img {
        margin-bottom: 25px;
    }

    .error-page-1 h1 {
        font-size: 45px;
        font-weight: 800;
    }

    .error-page-1 h2 {
        font-size: 35px;
        font-weight: 800;
        margin-bottom: 20px;
    }

    .error-page-1 p {
        font-size: 14px;
    }

    .error-page-1 a {
        color: var(--smp-primary) !important;
        text-decoration: none;
    }

    .error-page-1 .smp-btn {
        color: white !important;
    }

/*#endregion*/

/*#region Theme Switcher Styles */

.theme-switch {
    position: relative;
    width: 60px;
    height: 30px;
    margin-left: 1rem;
}

    .theme-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.theme-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 30px;
}

    .theme-slider:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .theme-slider {
    background-color: var(--smp-primary);
}

    input:checked + .theme-slider:before {
        transform: translateX(30px);
    }

.theme-switch i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: #666;
    font-size: 14px;
}

.theme-switch .fa-sun {
    left: 8px;
}

.theme-switch .fa-moon {
    right: 8px;
}

/* Update the dark theme variables */
:root[data-theme="dark"] {
    --smp-bg: #121212;
    --smp-text: #FFFFFF;
    --smp-text-secondary: #A0AEC0;
    --smp-border: rgba(255,255,255,0.1);
    --smp-card-bg: #1E1E1E;
    --smp-card-shadow: rgba(0,0,0,0.5);
    --navbar-bg: #1E1E1E;
    --smp-input-bg: #2D2D2D;
    --smp-hover-bg: #2D2D2D;
}

/* Update nav links for dark mode */
[data-theme="dark"] .nav-link {
    color: var(--smp-text);
}

    [data-theme="dark"] .nav-link:hover {
        color: var(--smp-primary);
        background-color: var(--smp-hover-bg);
        border-radius: 4px;
    }

/* Update brand for dark mode */
[data-theme="dark"] .smp-brand {
    color: var(--smp-primary);
}

/* Update auth buttons for dark mode */
[data-theme="dark"] .btn-outline-primary {
    color: var(--smp-primary);
    border-color: var(--smp-primary);
}

    [data-theme="dark"] .btn-outline-primary:hover {
        background-color: var(--smp-primary);
        color: var(--smp-text);
    }

/* Update features section for dark mode */
[data-theme="dark"] .smp-features {
    background-color: var(--smp-bg);
}

[data-theme="dark"] .smp-feature-card {
    background: var(--smp-card-bg);
    border: 1px solid var(--smp-border);
}

    [data-theme="dark"] .smp-feature-card h3 {
        color: var(--smp-text);
    }

    [data-theme="dark"] .smp-feature-card p {
        color: var(--smp-text-secondary);
    }

/* Update FAQs banner section for dark mode */
[data-theme="dark"] .smp-faqs-banner {
    background-color: var(--smp-bg);
}

[data-theme="dark"] .bottom-banner-content {
    background-color: var(--smp-bg);
}

[data-theme="dark"] .banner-text .banner-header h6 {
    color: var(--smp-text);
}

/* Update theme switcher for dark mode */
[data-theme="dark"] .theme-switch i {
    color: var(--smp-text);
}

[data-theme="dark"] .theme-slider {
    background-color: #4A5568;
}

/* Update footer for dark mode */
[data-theme="dark"] .smp-footer {
    background-color: var(--smp-card-bg);
    border-top: 1px solid var(--smp-border);
}

    [data-theme="dark"] .smp-footer p {
        color: var(--smp-text-secondary);
    }

[data-theme="dark"] .social-links a {
    color: var(--smp-text-secondary);
    transition: color 0.3s ease;
}

    [data-theme="dark"] .social-links a:hover {
        color: var(--smp-primary);
    }

/* Update navbar toggler for dark mode */
[data-theme="dark"] .navbar-toggler {
    border-color: var(--smp-border);
    color: var(--smp-text);
}

[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1);
}

/* Update hero section for dark mode */
[data-theme="dark"] .carousel {
    background: linear-gradient(135deg, #1A365D 0%, #2D3748 100%);
}

/* Add subtle transitions for theme switching */
.navbar,
.smp-feature-card,
.nav-link,
.btn,
.social-links a {
    transition: all 0.3s ease;
}

/* Update headings for dark mode */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--smp-text);
}

/* Update lead text for dark mode */
[data-theme="dark"] .lead {
    color: var(--smp-text-secondary);
}

/* Add hover effects for cards in dark mode */
[data-theme="dark"] .smp-feature-card:hover {
    transform: translateY(-5px);
    background-color: var(--smp-hover-bg);
    border-color: var(--smp-primary);
}

/* Update form elements for dark mode */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--smp-input-bg);
    border-color: var(--smp-border);
    color: var(--smp-text);
}

    [data-theme="dark"] .form-control:focus,
    [data-theme="dark"] .form-select:focus {
        background-color: var(--smp-input-bg);
        border-color: var(--smp-primary);
        color: var(--smp-text);
    }

/* Update dropdown menus for dark mode */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--smp-card-bg);
    border-color: var(--smp-border);
}

[data-theme="dark"] .dropdown-item {
    color: var(--smp-text);
}

    [data-theme="dark"] .dropdown-item:hover {
        background-color: var(--smp-hover-bg);
        color: var(--smp-primary);
    }


/* Dark mode for login */
[data-theme="dark"] .login {
    background: var(--smp-bg)
}

[data-theme="dark"] .modern-login-card {
    background: var(--smp-card-bg);
}

/* Language Switcher Styles */
.language-switch {
    display: flex;
    align-items: center;
    justify-content: start;
}

    .language-switch label {
        position: relative;
        display: inline-block;
        width: 90px;
        height: 30px;
    }

        .language-switch label input {
            opacity: 0;
            width: 0;
            height: 0;
        }

.lang-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 0 4px;
}

    .lang-slider:before {
        position: absolute;
        content: "";
        height: 24px;
        width: 45px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 24px;
        z-index: 1;
    }

.lang-option {
    position: relative;
    z-index: 2;
    font-size: 0.75rem;
    font-weight: 500;
    transition: .4s;
    width: 50%;
    text-align: center;
    color: var(--smp-text);
}

    .lang-option.eng {
        color: var(--smp-dark);
    }

    .lang-option.afr {
        color: var(--smp-text-secondary);
    }

input:checked + .lang-slider:before {
    transform: translateX(39px);
}

input:checked + .lang-slider .lang-option.eng {
    color: var(--smp-text-secondary);
}

input:checked + .lang-slider .lang-option.afr {
    color: var(--smp-dark);
}

/* Dark mode styles for language switcher */
[data-theme="dark"] .lang-slider {
    background-color: #4A5568;
}

    [data-theme="dark"] .lang-slider:before {
        background-color: var(--smp-card-bg);
    }

[data-theme="dark"] .lang-option.eng {
    color: var(--smp-text);
}

[data-theme="dark"] .lang-option.afr {
    color: var(--smp-text-secondary);
}

[data-theme="dark"] input:checked + .lang-slider .lang-option.eng {
    color: var(--smp-text-secondary);
}

[data-theme="dark"] input:checked + .lang-slider .lang-option.afr {
    color: var(--smp-text);
}

[data-theme="dark"] .smp-btn-signout {
    background-color: #4A5568;
    color: var(--smp-white);
    border-color: var(--smp-white);
}

/* Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--smp-bg);
    display: flex !important;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 500ms ease-out;
}

.loader-container {
    text-align: center;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid var(--smp-border);
    border-top: 3px solid var(--smp-primary);
    border-radius: 50%;
    animation: spinSMP 1s linear infinite;
    margin: 0 auto 1rem;
}

.loading-text {
    color: var(--smp-text);
    font-size: 1.2rem;
    font-weight: 500;
}

@keyframes spinSMP {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Hide the overlay when loading is complete */
#loading-overlay.loaded {
    opacity: 0;
    pointer-events: none;
    display: none !important;
}

/* Add transition for content wrapper */
#content-wrapper {
    opacity: 0;
    transition: opacity 500ms ease-in;
}

    #content-wrapper.visible {
        opacity: 1;
    }

/*#endregion*/





/*RESPONSIVE STYLES PER BREAK POINT*/

/* SM Screen (600px and up) */
@media (min-width: 600px) {
}

/* MD Breakpoint (tablets, 768px and up) */
@media (min-width: 768px) {

    /*#region Navbar*/

    .navbar .smp-btn {
        font-size: 14px;
        padding: 12px 20px;
    }

    /*#endregion*/

    /*#region Banner*/

    .smp-carousel.carousel {
        height: 475px;
    }

    /*#endregion*/

    /*#region Bottom Banner*/

    .bottom-banner-content {
        padding: 2em;
        max-width: 440px;
        margin: 60px 0;
    }

    /*#endregion*/

    /*#region Client Portal*/

    /*#region Navigation Styles */

    .client-portal .nav-item {
        width: auto;
    }

    /*#endregion*/

    /*#endregion*/

    /*#region Pricing*/

    .smp-pricelist .promo-badge {
        right: 32%;
    }

    /*#endregion*/

    /*#region Stats*/

    .smp-stats .stat-inner {
        padding-bottom: 0px;
    }

    .smp-stats .stat-item {
        padding-bottom: 55px;
    }

        .smp-stats .stat-item i {
            font-size: 50px;
        }

        .smp-stats .stat-item::after {
            content: '';
            height: 80px;
            width: 80px;
        }

    /*#endregion*/

    /*#region Login/Register/Forget Password*/

    .user-access .card .card-title {
        font-size: 26px;
    }

    .user-access .card p {
        font-size: 18px;
    }

    /*#endregion*/

    /*#region Packages*/

    /*#region Learner Detail Panel */

    .manage-package-section .smp-btn {
        width: unset;
    }

    /*#endregion*/

    /*#endregion*/

    /*#region WhatsApp Banner*/

    .smp-whatsapp-banner .bottom-banner-content {
        align-self: center;
        margin-bottom: unset;
    }

    /*#endregion*/

    /*#region Learner Portal*/

    /*#region Master*/

    .learner-portal h5 {
        font-size: 18px;
    }

    /*#endregion*/

    /*#region Dashboard*/

    .dashboard .welcome-banner h1 {
        font-size: 32px;
    }

    .dashboard .welcome-banner p {
        font-size: 22px;
    }

    .dashboard h4 {
        font-size: 16px;
    }

    /*#endregion*/

    /*#endregion*/

}


/* LG Breakpoint (tablets, 992px and up) */
@media (min-width: 992px) {

    /*#region Navbar*/

    .navbar .navbar-nav .nav-item {
        border: unset;
    }

    .navbar .brand-logo {
        max-height: 90px;
    }

    /*#endregion*/

    /*#region Banner*/

    .smp-carousel.carousel {
        height: 525px;
    }

        .smp-carousel.carousel h1 {
            font-size: 32px;
            text-align: end;
        }

        .smp-carousel.carousel h4 {
            font-size: 24px;
            text-align: end;
        }

    /*#endregion*/

    /*#region About*/

    .smp-about {
        padding: 75px 0;
    }

    /*#endregion*/

    /*#region Features Section */

    .smp-features {
        padding: 75px 0;
    }

    /*#endregion*/

    /*#region Bottom Banner*/

    .bottom-banner-content {
        max-width: 575px;
    }

    /*#endregion*/

    /*#region Services*/

    .smp-services {
        padding: 75px 0;
    }

    /*#endregion*/

    /*#region Review*/

    .smp-review {
        padding: 75px 0;
    }

    /*#endregion*/

    /*#region FAQs*/

    .smp-faqs {
        padding: 75px 0;
    }

    /*#endregion*/

    /*#region FAQs Banner*/

    .smp-faqs-banner .padding-box {
        padding: 75px 0;
    }

    /*#endregion*/

    /*#region Pricing*/

    .smp-pricelist {
        padding: 75px 0;
    }

        .smp-pricelist .promo-badge {
            right: 7%;
        }

    /*#endregion*/

    /*#region Stats*/

    .smp-stats {
        padding: 75px 0;
    }

        .smp-stats .stat-item {
            padding: 75px 50px 70px;
        }

    /*#endregion*/

    /*#region News*/

    .smp-news {
        padding: 75px 0;
    }

    /*#endregion*/

    /*#region Examples*/

    .examples-page {
        padding: 75px 0;
    }

    /*#endregion*/

    /*#region Contact*/

    .smp-contact {
        padding: 75px 0;
    }

        .smp-contact .contact-form-thank-you {
            font-size: 90px;
            padding: 50px;
        }

    /*#endregion*/

    /*#region Login/Register/Forget Password*/

    .user-access {
        padding: 75px 0;
    }

    /*#endregion*/

    /*#region Client Portal*/

    /*#region My Details*/

    .client-details-card .card-header h3 {
        font-size: 22px;
    }

    /*#endregion*/

    /*#endregion*/

    /*#region Learner Portal*/

    /*#region Navbar*/

    .learner-portal-navbar .breadcrumb {
        margin-left: 20px;
    }

    /*#endregion*/

    /*#region Sidebar*/

    .side-bar .sidebar-header i {
        font-size: 45px;
    }

    /*#endregion*/

    /*#region Thank You*/

    .thank-you-page {
        padding: 75px 0;
    }

    /*#endregion*/

    /*#endregion*/

    /*#region Checkout */

    .checkout {
        padding: 75px 0;
    }

    /*#endregion*/

    /*#region Thank You Page*/

    /*#region Payment Success Styles */

    .smp-transaction-status {
        padding: 75px 0;
    }

    /*#endregion*/

    /*#endregion*/

    /*#region footer*/

    .smp-footer {
        padding: 3rem 0 2rem;
    }

        .smp-footer .brand-logo {
            max-height: 100px;
        }

    /*#endregion*/

    /*#region Terms & Conditions*/

    .smp-termsConditions {
        padding: 75px 0;
    }

    /*#endregion*/

    /*#region Privacy Policy*/

    .smp-privacy {
        padding: 75px 0;
    }

    /*#endregion*/
}


/* Normal Screen 18 Inch - 19 Inch ( (Resolution 1366x768 ) 1349px and up) */
@media (min-width: 1349px) {

    /*#region Master*/

    .section-title {
        margin-bottom: 30px;
    }

        .section-title h2 {
            font-size: 35px;
        }

        .section-title p {
            font-size: 18px;
        }

    .smp-btn {
        font-size: 16px;
        padding: 15px 22px;
    }

    /*#endregion*/

    /*#region Navbar*/

    .navbar .brand-logo {
        height: 70px;
    }

    .navbar .nav-link {
        padding: 10px 15px !important;
    }

    .navbar .navbar-nav .nav-item {
        border: unset;
    }

        .navbar .navbar-nav .nav-item .nav-link {
            font-size: 14px;
        }

            .navbar .navbar-nav .nav-item .nav-link::after {
                content: "";
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                right: 100%;
                top: 100%;
                transition: transform 0.6s cubic-bezier(0.19,1,0.22,1);
                border-bottom: 3px solid var(--smp-primary);
                transition: right 0.5s;
                margin: 0px 10px 0 10px;
            }

            .navbar .navbar-nav .nav-item .nav-link:hover {
                color: var(--smp-primary);
            }

                .navbar .navbar-nav .nav-item .nav-link:hover::after {
                    right: 0;
                    transform: scaleX(1);
                    transform-origin: left center;
                    transition-duration: 0.4s;
                }

            .navbar .navbar-nav .nav-item .nav-link.active::after {
                right: 0;
            }

            .navbar .navbar-nav .nav-item .nav-link.active {
                color: var(--smp-primary);
            }

    .navbar .smp-btn {
        font-size: 14px;
        padding: 14px 16px;
    }

    /*#endregion*/

    /*#region Banner*/

    .smp-carousel.carousel {
        min-height: 668px;
    }

        .smp-carousel.carousel h1 {
            font-size: 40px;
        }

        .smp-carousel.carousel h4 {
            font-size: 30px;
        }

        .smp-carousel.carousel p {
            font-size: 18px;
        }

        .smp-carousel.carousel h3 {
            font-size: 24px;
        }

        .smp-carousel.carousel .carousel-caption {
            top: 3.25rem;
        }

            .smp-carousel.carousel .carousel-caption.carousel-caption-top-right {
                top: 8.25rem;
                text-align: right;
            }

    /*#endregion*/

    /*#region Stats*/

    .smp-stats .stat-item::after {
        height: 80px;
        width: 80px;
    }

    .smp-stats .stat-item i {
        font-size: 45px;
    }

    .smp-stats .stat-inner .last-stat {
        border-right: unset;
    }

    .smp-stats .stat-item img {
        margin-bottom: 30px;
        max-width: 55px;
        display: block;
    }

    .smp-stats .stat-item .count-text {
        font-size: 25px;
    }

    .smp-stats .stat-inner .stat-item p {
        font-size: 16px;
    }

    /*#endregion*/

    /*#region Features Section */

    .smp-features .block-icon {
        height: 70px;
        width: 70px;
        font-size: 30px;
    }

    .smp-features .card h3 {
        font-size: 20px;
    }

    /*#endregion*/

    /*#region WhatsApp Banner*/

    .smp-whatsapp-banner .bottom-banner-content {
        opacity: 0.9;
    }

    .smp-whatsapp-banner .whatsapp-card .contact-text label {
        font-size: 38px;
    }

    .smp-whatsapp-banner .whatsapp-card .contact-text .whatsapp-highlight {
        font-size: 25px;
    }

    /*#endregion*/

    /*#region Services*/

    .smp-services h4 {
        font-size: 20px;
    }

    /*#endregion*/

    /*#region Review*/

    .smp-review .review-item.card small {
        font-size: 14px;
    }

    /*#endregion*/

    /*#region Site Content (Learner Portal)*/

    .site-content h5 {
        margin-bottom: 15px;
    }

    /*#endregion*/

    /*#region Learner Portal*/

    /*#region Navbar*/

    .learner-portal-navbar .breadcrumb .breadcrumb-item {
        font-size: 16px;
    }

    /*#endregion*/

    /*#region Dashboard*/

    .dashboard .welcome-banner h1 {
        font-size: 36px;
    }

    .dashboard .welcome-banner p {
        font-size: 18px;
    }

    .dashboard h4 {
        font-size: 20px;
    }

    /*#endregion*/

    /*#region  Sidebar*/

    .side-bar {
        height: 100%;
    }

        .side-bar .sidebar-header h4 {
            font-size: 24px;
        }

        .side-bar .admin-profile i {
            font-size: 26px;
        }

        .side-bar .admin-profile .btn-link i {
            font-size: 16px;
        }

        .side-bar .admin-profile h5 {
            font-size: 16px;
        }

        .side-bar .admin-profile h6 {
            font-size: 14px;
        }

        .side-bar .admin-profile p {
            font-size: 13px;
        }

    /*#endregion*/

    /*#region Thank You*/

    .thank-you-title {
        font-size: 35px;
    }

    /*#endregion*/

    /*#endregion*/

    /*#region Client Portal*/

    /*#region Navigation Styles */

    .client-portal .nav-link {
        font-size: 16px;
    }

    .client-portal-card .card-header h3 {
        font-size: 16px;
    }

    .client-portal-card .card-body h4 {
        font-size: 14px;
    }

    /*#endregion*/

    /*#endregion*/

    /*#region FAQs*/

    .smp-faqs .accordion-button {
        font-size: 18px;
    }

    .smp-faqs .accordion-body {
        font-size: 16px;
    }

    .smp-faqs .whatsapp-contact-link .contact-text label {
        font-size: 22px;
    }

    /*#endregion*/

    /*#region Pricelist*/

    .smp-pricelist .card .card-header h4 {
        font-size: 20px;
    }

    .smp-pricelist h3 {
        font-size: 24px;
    }

    .smp-pricelist .card .card-header i {
        font-size: 22px;
    }

    .smp-pricelist .card .card-header label {
        font-size: 18px;
    }

    .smp-pricelist .card .card-body h6 {
        font-size: 22px;
    }

    .smp-pricelist .card .card-body .feature-detail h4 {
        font-size: 30px;
    }

        .smp-pricelist .card .card-body .feature-detail h4 span {
            font-size: 20px;
        }

    .smp-pricelist .card .card-body .feature-detail h5 {
        font-size: 30px;
    }

        .smp-pricelist .card .card-body .feature-detail h5 span {
            font-size: 20px;
        }

        .smp-pricelist .card .card-body .feature-detail h5 s {
            font-size: 25px;
        }

    /*#endregion*/

    /*#region Checkout */

    .checkout .card-header h5 {
        font-size: 18px;
    }

    .checkout .table .text-end {
        font-size: 18px;
    }

    .checkout .amount-display strong {
        font-size: 20px;
    }

    .checkout .card-body h6 {
        font-size: 18px;
    }

    .checkout .summary-card h6 {
        font-size: 16px !important;
    }

    .checkout .summary-card .amount-display strong {
        font-size: 20px;
    }

    /*#endregion*/

    /*#region Thank You Page*/

    /*#region Payment Success Styles */

    .smp-transaction-status .card-header h3 {
        font-size: 30px;
    }

    .smp-transaction-status .transaction-hero h4 {
        font-size: 25px;
    }

    .smp-transaction-status .transaction-hero p {
        font-size: 18px;
    }

    .smp-transaction-status .details-section h5 {
        font-size: 18px;
    }

    /*#endregion*/

    /*#endregion*/

    /*#region Contact*/

    .smp-contact .block-icon {
        height: 60px;
        min-width: 60px;
        font-size: 28px;
    }

    .smp-contact .contact-details-title {
        font-size: 23px;
    }

    .smp-contact .contact-form-thank-you h4 {
        font-size: 60px;
    }

    .smp-contact .contact-form-thank-you label {
        font-size: 80px;
    }

    .contact-details-block label, .contact-details-block a, .contact-details-block .my-auto span, .contact-details-block .my-auto label {
        font-size: 14px;
    }

    .smp-contact .contact-details-block .block-icon {
        min-width: 60px;
    }

    /*#endregion*/

    /*#region Footer*/

    .smp-footer {
        padding: 4rem 0 2rem;
    }

    .smp-footer-title {
        font-size: 18px;
    }

    .smp-footer-bottom {
        margin-top: 2rem;
    }

    /*#endregion*/

    /*#region Error Page*/

    .error-page-1 h1 {
        font-size: 85px;
    }

    .error-page-1 h2 {
        font-size: 75px;
        margin-bottom: 30px;
    }

    .error-page-1 p {
        font-size: 18px;
    }

    /*#endregion*/
}


/*High Definition Plus (HD+) ( (Resolution 1600x900), 1600px and up) */
@media (min-width: 1600px) {

    /*#region Master*/

    .section-title {
        margin-bottom: 40px;
    }

        .section-title h2 {
            font-size: 45px;
        }

        .section-title p {
            font-size: 24px;
        }

    p, li {
        font-size: 16px;
    }

    .smp-btn {
        font-size: 16px;
        padding: 15px 22px;
    }

    /*#endregion*/

    /*#region Navbar*/

    .navbar .brand-logo {
        height: 80px;
    }

    .navbar .nav-link {
        padding: 10px 20px !important;
    }

    .navbar .navbar-nav .nav-item .nav-link {
        font-size: 17px;
    }

    /*#endregion*/

    /*#region Banner*/

    .smp-carousel.carousel {
        min-height: 753px;
    }

        .smp-carousel.carousel h1 {
            font-size: 60px;
        }

        .smp-carousel.carousel h4 {
            font-size: 44px;
        }

        .smp-carousel.carousel p {
            font-size: 22px;
        }

        .smp-carousel.carousel h3 {
            font-size: 27px;
        }

        .smp-carousel.carousel .summaries-online-banner img {
            object-position: 98%;
        }

    /*#endregion*/

    /*#region Stats*/

    .smp-stats .stat-item i {
        font-size: 60px;
    }

    .smp-stats .stat-item::after {
        height: 90px;
        width: 90px;
    }


    .smp-stats .stat-item .count-text {
        font-size: 30px;
    }

    .smp-stats .stat-inner .stat-item p {
        font-size: 18px;
    }


    /*#endregion*/

    /*#region Features Section */

    .smp-features .card h3 {
        font-size: 23px;
    }

    /*#endregion*/

    /*#region Services*/

    .smp-services h4 {
        font-size: 23px;
    }

    /*#endregion*/

    /*#region Pricelist*/

    .smp-pricelist h3 {
        font-size: 24px;
    }

    .smp-pricelist .card .card-body label {
        font-size: 18px;
    }

    .smp-pricelist .card .card-body h4 {
        font-size: 35px;
    }

    .smp-pricelist .card .card-body label, .smp-pricelist .card .card-body p {
        font-size: 16px;
    }

    /*#endregion*/

    /*#region Login/Register/Forget Password*/

    .user-access .card .card-title {
        font-size: 28px;
    }

    .user-access .card p {
        font-size: 20px;
    }

    /*#endregion*/

    /*#region Checkout */

    .checkout .card-header h5 {
        font-size: 22px;
    }

    /*#endregion*/

    /*#region Contact */

    .contact-details-block label, .contact-details-block a, .contact-details-block .my-auto span, .contact-details-block .my-auto label {
        font-size: 16px;
    }

    /*#endregion*/

    /*#region Client Portal*/

    /*#region Navigation Styles */

    .client-portal .nav-link {
        font-size: 18px;
    }

    /*#endregion*/

    /*#endregion*/

    /*#region Learner Portal*/

    /*#region Navbar*/

    .learner-portal-navbar .breadcrumb .breadcrumb-item {
        font-size: 18px;
    }

    /*#endregion*/

    /*#region  Sidebar*/

    .side-bar .sidebar-header i {
        font-size: 40px;
    }

    .side-bar .sidebar-header h4 {
        font-size: 22px;
    }

    .side-bar .admin-profile i {
        font-size: 26px;
    }

    .side-bar .admin-profile .btn-link i {
        font-size: 16px;
    }

    .side-bar .admin-profile h5 {
        font-size: 16px;
    }

    .side-bar .admin-profile h6 {
        font-size: 14px;
    }

    .side-bar .admin-profile p {
        font-size: 13px;
    }

    /*#endregion*/

    /*#region Dashboard*/

    .dashboard .card h3 {
        font-size: 18px;
    }

    /*#endregion*/

    /*#region Thank You*/

    .thank-you-title {
        font-size: 40px;
    }

    /*#endregion*/

    /*#endregion*/

}

/*Extra Large Screen 23 Inch ( (Resolution 1920x1080 ) 1800px and up) */
@media (min-width: 1800px) {

    /*#region Banner*/

    .smp-carousel.carousel {
        min-height: 819px;
    }

        .smp-carousel.carousel .summaries-online-banner img {
            object-position: 57%;
        }

    /*#endregion*/

    /*#region Learner Portal*/

    /*#region Master*/

    .learner-portal h5 {
        font-size: 20px;
    }

    /*#endregion*/

    /*#region  Sidebar*/

    .side-bar .sidebar-header i {
        font-size: 45px;
    }

    .side-bar .sidebar-header h4 {
        font-size: 24px;
    }

    .side-bar .admin-profile i {
        font-size: 28px;
    }

    .side-bar .admin-profile .btn-link i {
        font-size: 18px;
    }

    /*#endregion*/

    /*#region Dashboard*/

    .dashboard .welcome-banner h1 {
        font-size: 45px;
    }

    .dashboard .welcome-banner p {
        font-size: 20px;
    }

    .dashboard .card h3 {
        font-size: 20px;
    }

    /*#endregion*/

    /*#endregion*/
}

/*Extra Large Screen 27 Inch ( (Resolution 2560x1440 ) 2560px and up) */
@media (min-width: 2560px) {
}

/*Extra Large Screen 32 Inch ( (Resolution 3840x2160 ) 3840px and up) */
@media (min-width: 3840px) {
}