/*#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-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-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;
}


.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 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 */

.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 {
        border: 1px solid var(--smp-secondary);
        color: #fff;
        background-color: var(--smp-secondary);
        box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
        transform: translateY(-2px);
    }

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

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

.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;
}

.toast-bg-success {
    background-color: var(--smp-green) !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;
}

/*#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;
    }

.smp-brand {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--smp-primary);
    text-decoration: none;
}

.brand-logo {
    height: 100px;
}

.nav-link {
    color: var(--smp-secondary);
    font-weight: 600;
    padding: 10px 20px !important;
    transition: color 0.3s ease;
    text-decoration: none;
    position: relative;
}

.smp-auth-buttons .user-info i {
    color: var(--smp-text);
}

.smp-auth-buttons .user-info span {
    color: var(--smp-text);
    font-weight: 600;
}

.smp-auth-buttons .btn {
    margin-left: 1rem;
}

.navbar .user-info {
    text-decoration: none;
    color: var(--smp-text);
}

    .navbar .user-info:hover {
        color: var(--smp-primary);
    }

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

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


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

/*#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 .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, .smp-carousel.carousel .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);
            background-color: var(--smp-primary);
        }

/*#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;
}

.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 Costs (Home page)*/

.smp-costs .bottom-banner-item {
    min-height: 700px;
}

.smp-costs .section-title {
    margin-bottom: 20px;
}

.banner-text .banner-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, var(--smp-primary) 0%, var(--smp-secondary) 100%);
    color: var(--smp-white);
    border-radius: 12px;
    padding: 0.7rem 1.5rem 0.7rem 1.2rem;
    margin-bottom: 15px;
    box-shadow: 0 2px 12px rgba(33,150,243,0.08);
}

.banner-text .banner-price-label {
    font-size: 18px;
    font-weight: 500;
}

.banner-text .banner-price-value {
    font-size: 18px;
    font-weight: 700;
    background: rgba(255,255,255,0.13);
    border-radius: 8px;
    padding: 0.1em 0.7em;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.smp-costs .banner-text .banner-features li {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--smp-text);
    margin-bottom: 0.7rem;
    font-weight: 500;
}

    .smp-costs .banner-text .banner-features li i {
        color: var(--smp-primary);
        font-size: 20px;
        margin-right: 0.7em;
        min-width: 1.5em;
    }

.smp-costs .banner-text ul li:last-child {
    margin-bottom: unset;
}

.banner-text .banner-header h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--smp-primary);
}

.banner-text .banner-header h6 {
    font-size: 18px;
    font-weight: 500;
    color: var(--smp-secondary);
    margin-bottom: 15px;
}

.banner-text .banner-features {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.btn-arrow {
    background: var(--smp-white);
    border: 1.5px solid var(--smp-primary);
    color: var(--smp-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.2s, color 0.2s, border 0.2s;
    box-shadow: 0 2px 8px rgba(33,150,243,0.08);
}

    .btn-arrow:hover, .btn-arrow:focus {
        background: var(--smp-primary);
        color: #fff;
        border-color: var(--smp-primary);
    }

/*#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 .service-info p, .smp-services .service-info ul, .smp-services .service-info li {
        font-size: 14px;
    }

    .smp-services .service-info ul {
        padding-left: 1.2rem;
        margin-bottom: 1.5rem;
    }

    .smp-services .service-info li {
        margin-bottom: 0.5rem;
    }

    .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: 40px;
}

/*#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: 90px;
            width: 90px;
            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: 60px;
        }

    .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: 42px;
        font-weight: 600;
        margin-right: 15px;
        color: white;
    }

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

    .smp-stats .stat-inner .stat-item p {
        font-size: 18px;
        font-weight: 500;
        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 Pricelist*/
.smp-pricelist {
    padding: 45px 0;
    background-image: url('../media/summaries online/cost/thoughtful boy with pencil.jpg');
    background-repeat: no-repeat, repeat;
    background-size: cover;
    background-position: center;
}

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

    .smp-pricelist h3 {
        font-size: 35px;
        color: #fff;
        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;
    }

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

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

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

        .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 h4 {
            font-size: 35px;
            color: var(--smp-text);
            font-weight: 700;
        }

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

        .smp-pricelist .card .card-body p {
            font-weight: 200;
            font-size: 12px;
        }

        .smp-pricelist .card .card-body label {
            display: block !important;
            margin: unset;
            font-size: 14px;
            color: var(--smp-text);
        }

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

    .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;
        line-height: 32px;
        border: 1px solid var(--smp-secondary);
    }

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

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

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

/*#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: 55px;
        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: 1.5rem;
        margin-bottom: 1.5rem;
        letter-spacing: 0.5px;
    }

    .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 label {
        cursor: pointer;
    }

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

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

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

    .smp-contact .message {
        height: 200px;
    }

/*#endregion*/

/*#region Login/Rgeister*/

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

    .login-register .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;
    }

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

        .login-register .card i {
            color: var(--smp-primary);
        }

    .login-register .smp-button {
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(33,150,243,0.08);
        margin: 5px 0;
    }

        .login-register .smp-button:hover {
            background-color: var(--smp-secondary);
            border-color: var(--smp-secondary);
        }

/* 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 Navigation Styles */
.client-portal .nav-tabs {
    border: none;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: var(--smp-card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 4px var(--smp-card-shadow);
    margin-top: 20px;
}

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

.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;
}

    .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);
        box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
    }

        .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 My Details*/

.client-portal-header {
    margin-bottom: 2rem;
}

    .client-portal-header h2 {
        color: var(--smp-text);
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .client-portal-header p {
        color: var(--smp-text-secondary);
        font-size: 1rem;
    }

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

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

        .client-details-card .card-header h3 {
            color: var(--smp-text);
            font-size: 1.4rem;
            font-weight: 600;
            margin: 0;
        }

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

/*#endregion*/

/*#region Learner*/

.learners-header {
    margin-bottom: 2rem;
}

    .learners-header h2 {
        color: var(--smp-text);
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .learners-header p {
        color: var(--smp-text-secondary);
        font-size: 1rem;
    }

.learner-form-card {
    background-color: var(--smp-card-bg);
    border: 1px solid var(--smp-border);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--smp-card-shadow);
    margin-bottom: 2rem;
}

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

        .learner-form-card .card-header h3 {
            color: var(--smp-text);
            font-size: 1.4rem;
            font-weight: 600;
            margin: 0;
        }

    .learner-form-card .card-body {
        padding: 1.5rem;
    }

.learner-grid-card {
    background-color: var(--smp-card-bg);
    border: 1px solid var(--smp-border);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--smp-card-shadow);
    margin-bottom: 2rem;
}

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

        .learner-grid-card .card-header h3 {
            color: var(--smp-text);
            font-size: 1.4rem;
            font-weight: 600;
            margin: 0;
        }

    .learner-grid-card .card-body {
        padding: 1.5rem;
    }

.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;
}

.learners-container .btn-viewLearner {
    border: 1px solid var(--smp-green);
    background-color: var(--smp-green);
}

    .learners-container .btn-viewLearner:hover, .learners-container .btn-editLearner:hover {
        background-color: var(--smp-white);
    }

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

    .learners-container .btn-viewLearner:hover i {
        color: var(--smp-green);
    }

.learners-container .btn-editLearner {
    border: 1px solid var(--smp-primary);
    background-color: var(--smp-primary);
}

    .learners-container .btn-editLearner:hover i {
        color: var(--smp-primary);
    }

/*#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;
}

    .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);
    }




@media (max-width: 600px) {
    .learner-detail-box {
        padding: 1.2rem 1rem;
        max-width: 100%;
    }
}

/*#endregion*/

/*#endregion*/

/*#endregion*/

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

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

.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;
}

    .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%;*/
}

.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;
}


/*#endregion*/

/*#region Learner Portal*/

.master-col-lg-10 {
    min-height: 100vh;
    background-color: #f8f9fa;
}

/*#region Sidebar*/

.side-bar {
    height: 100vh;
    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);
    }

    .side-bar h4 {
        color: var(--smp-text);
    }

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

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

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

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

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

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

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

.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;
}

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

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

    .nav-pills .nav-link span {
        font-size: 0.9rem;
    }

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

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


.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);
    }

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

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

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

.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: 18px;
        font-weight: 600;
    }

    .dashboard .card .btn-link {
        color: var(--smp-primary);
        transition: padding-left 0.2s ease-in-out;
    }

    .dashboard .card:hover .btn-link {
        padding-left: 0.5rem;
    }

    .dashboard .card:hover .fa-arrow-right {
        transform: translateX(5px);
    }

.dashboard .fa-arrow-right {
    transition: transform 0.2s ease-in-out;
}

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

/*#endregion*/

/*#endregion*/

/*#region Footer */

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

    .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: 3rem;
    padding-top: 2rem;
    text-align: center;
}

/*#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 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);
}

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

/* Update smp-costs section for dark mode */


[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 {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 30px;
}

    .language-switch 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: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

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

@keyframes spin {
    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;
    }

/* Login Page Theme Support */
.smp-card {
    background-color: var(--smp-card-bg);
    border-color: var(--smp-border);
}

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

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

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

.smp-input {
    background-color: var(--smp-input-bg);
    border-color: var(--smp-border);
    color: var(--smp-text);
}

    .smp-input:focus {
        background-color: var(--smp-input-bg);
        border-color: var(--smp-primary);
        color: var(--smp-text);
        box-shadow: 0 0 0 0.25rem rgba(33, 150, 243, 0.25);
    }

.smp-checkbox {
    background-color: var(--smp-input-bg);
    border-color: var(--smp-border);
}

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

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

.smp-divider {
    border-color: var(--smp-border);
}

.smp-button {
    background-color: var(--smp-primary);
    border-color: var(--smp-primary);
    color: var(--smp-white);
}

    .smp-button:hover {
        background-color: var(--smp-primary);
        border-color: var(--smp-primary);
        opacity: 0.9;
        color: var(--smp-white);
    }

/*#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 Banner*/

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

    /*#endregion*/

    /*#region Bottom Banner*/

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

    /*#endregion*/

    /*#region Pricing*/

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

    /*#endregion*/

    /*#region Stats*/

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

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

    /*#endregion*/

    /*#region WhatsApp Banner*/

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

    /*#endregion*/

}


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

    /*#region Navbar*/

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

    /*#endregion*/

    /*#region Banner*/

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

    /*#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 Costs (Home Page)*/

    .smp-costs .banner-text .banner-inner-content {
        font-size: 16px;
    }

    /*#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 .trail-badge {
            right: 36%;
        }

    /*#endregion*/

    /*#region Stats*/

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

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

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

    /*#endregion*/

    /*#region News*/

    .smp-news {
        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/Rgeister*/

    .login-register {
        padding: 75px 0;
    }

    /*#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: 40px;
    }

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

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

    p {
        font-size: 16px;
    }

    /*#endregion*/

    /*#region Navbar*/

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

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

            .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);
            }

    /*#endregion*/

    /*#region Banner*/

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

        .smp-carousel.carousel .carousel-item img {
            object-position: unset;
        }

        .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 .carousel-caption {
            top: 3.25rem;
        }

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

    /*#endregion*/

    /*#region Features Section */

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

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

    /*#endregion*/

    /*#region Costs (Home Page)*/

    .smp-costs .banner-text .banner-header h4 {
        font-size: 26px;
    }

    .smp-costs .banner-text .banner-price-value {
        font-size: 24px;
    }

    .smp-costs .banner-text .banner-features li {
        font-size: 16px;
    }

    .smp-costs .bottom-banner .bottom-banner-content {
        min-width: 590px;
        margin: 170px 0;
    }

    /*#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: 24px;
    }

    .smp-services .service-info p, .smp-services .service-info ul, .smp-services .service-info li {
        font-size: 16px;
    }


    /*#endregion*/

    /*#region Review*/

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

    /*#endregion*/

    /*#region Learner Portal*/

    /*#region Home*/

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

    /* Card link hover effect */

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

    /*#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 i {
        font-size: 22px;
    }

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

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

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

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

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

    .smp-pricelist .card .card-body p {
        font-size: 14px;
    }

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

    /*#endregion*/

    /*#region Contact*/

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

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

    .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: 16px;
    }

    /*#endregion*/

    /*#region Footer*/

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

    /*#endregion*/
}


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

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

    /*#region Banner*/

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

    /*#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) {
}

/* 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;
}