:root {
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --background-color: #F8F8F8;
    --Primary-color: #09787C;
    --Secomdary-color: #FFDD75;
    --Primary-Surface-1: #E9F1F1;
    --Secondary-Surface-2: #E1ECEC;
    --Surface-color-2: #F0F0F0;
    --Text-color-1: #09787C;
    --Text-color-2: #052021;
    --Text-color-3: #FFF9F9;
    --Text-color-4: #7F7F7F;
    --Stroke-color: #DFDFDF;
    --primary-font: 'Urbanist', sans-serif;
    --Heroscreen-surface-color: rgba(9, 120, 124, 0.6);
    --Button-Hover-color: #FFD34E;
    --Button-Stroke-color: #FFC81F;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
}


:root {
    --nav-color: #212529; /* The default color of the main navmenu links */
    --nav-hover-color: #0d83fd; /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #0d83fd; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

* {
    margin: 0;
    padding: 0;
    outline: none !important;
}

html, body {
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth !important;
}

.navbar-brand {
    font-family: var(--primary-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    background-color: var(--Primary-color);
    color: var(--Text-color-3);
    border-radius: 50px;
    padding: 8px;
}

    .navbar-brand img {
        width: 32px;
        height: 32px;
        margin-right: 10px;
    }
@media(max-width:768px) {
    .navbar-brand img {
        margin-right: 0px !important;
    }
}

.e3-logo {
    font-family: "Zen Dots", serif;
    font-size: 20px;
    font-weight: 500;
}

    .e3-logo .e {
        color: var(--Secomdary-color);
    }

    .e3-logo .three {
        color: var(--Text-color-3);
    }

    .e3-logo a {
        color: var(--Text-color-3);
        font-family: var(--primary-font);
    }
/*.Talk-to-us {
    border-radius: 50px;
    color: var(--Primary-color);
    border: 2px solid var(--Primary-color);
    font-family: var(--primary-font);
    font-size: 20px;
    padding: 10px 16px 10px 16px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .Talk-to-us:hover {
        background-color: var(--Secondary-Surface-2);
        color: var(--Primary-color);
    }*/
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
    padding: 20px 0;
    transition: all 0.5s;
    z-index: 997;
}

    .header .header-container {
        border-radius: 50px;
        padding: 5px 16px 5px 16px;
        background: var(--Primary-Surface-1);
        box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    }



.header .btn-getstarted,
.header .btn-getstarted:focus {
    color: var(--Text-color-3);
    background: var(--Text-color-1);
    font-size: 20px;
    padding: 8px 20px;
    margin: 0 0 0 8px;
    border-radius: 50px;
    transition: 0.3s;
    text-decoration: none;
}


@media (max-width: 1200px) {
    .header {
        padding-top: 10px;
    }

        .header .header-container {
            margin-left: 8px;
            margin-right: 8px;
            padding: 8px 4px 8px 8px;
        }

        .header .logo {
            order: 1;
        }

        .header .btn-getstarted {
            order: 3;
            margin: 0 8px 0 0;
            padding: 4px 8px;
            font-size: 16px;
        }

        .header .navmenu {
            order: 2;
        }

    .navbar-brand img {
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }

    .e3-logo {
        font-family: "Zen Dots", serif;
        font-size: 16px;
        font-weight: 500;
    }

        .e3-logo a {
            color: var(--Text-color-3);
            font-family: var(--primary-font);
            font-size: 12px;
        }
}


.accent-background {
    --background-color: #F8F8F8;
    --default-color: #052021;
    --heading-color: #ffffff;
    --accent-color: #ffffff;
    --surface-color: #00b6a1;
    --contrast-color: #09787C;
    background-image: url('../_content/EntranceExamExercise.RCL/images/hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

.hero {
    width: 100%;
    position: relative;
    padding: 140px 0 20px 0;
    height: 100%;
    z-index: 2;
}
@media(max-width:576px){
    .hero {
        padding: 80px 0 16px 0;
    }
}

    .hero .container {
        position: relative;
        z-index: 3;
    }

    .hero h2 {
        font-size: 48px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .hero h2 {
        color: var(--Text-color-3);
    }

    .hero p {
        color: var(--Text-color-3);
        font-weight: 400;
        margin-bottom: 30px;
        font-size: 24px;
        font-family: var(--primary-font);
    }

    .hero .btn-get-started {
        color: var(--contrast-color);
        background: var(--accent-color);
        font-family: var(--heading-font);
        font-weight: 500;
        font-size: 14px;
        letter-spacing: 1px;
        display: inline-block;
        padding: 14px 40px;
        border-radius: 50px;
        transition: 0.3s;
        border: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
        background-color: color-mix(in srgb, var(--default-color), transparent 90%);
    }

        .hero .btn-get-started:hover {
            border-color: color-mix(in srgb, var(--default-color), transparent 60%);
        }


@media (max-width: 640px) {
    .hero h2 {
        font-size: 36px;
    }

    .hero .btn-get-started,
    .hero .btn-watch-video {
        font-size: 14px;
    }
}

.hero .icon-boxes {
    z-index: 4;

}

@media (min-width: 1200px) {
    .hero .icon-boxes:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(50% + 20px);
        /* background-color: #09787C;*/
        border-top: 1px solid color-mix(in srgb, #052021, transparent 90%);
    }
}

.hero .icon-box {
    padding: 16px 16px;
    position: relative;
    overflow: hidden;
    background: var(--background-color);
    box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    border-radius: 8px;
    z-index: 1;
    height: 100%;
    width: 100%;
    text-align: center;
}
@media(max-width:576px){
    .hero .icon-box {
        padding: 8px 8px;
        text-align: center;
    }
}
    .hero .icon-box .title {
        font-weight: 500;
        margin-bottom: 15px;
        font-size: 20px;
        text-decoration: none;
    }

.stretched-link {
    text-decoration: none;

}

.hero .icon-box .title a {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    transition: 0.3s;
}

.hero .icon-box .icon {
    margin-bottom: 20px;
    padding-top: 10px;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    font-size: 48px;
    line-height: 1;
    color: color-mix(in srgb,#052021, transparent 20%);
}
@media(max-width:576px) {
    .hero .icon-box .card-icon {
        margin-bottom: 8px;
        padding-top: 8px;
        height:40px;
        width:40px;
    }

}.hero .icon-box:hover {
    background-color: color-mix(in srgb, var(--background-color), white 10%);
}

    .hero .icon-box:hover .title a,
    .hero .icon-box:hover .icon {
        color: var(--contrast-color);
    }



.hero .sign-up-form {
    margin-top: 40px;
    margin-bottom: 120px;
    padding: 10px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--Text-color-3) 5%, white 100%);
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    position: relative; /* Allows absolute positioning inside */
   
}
.sign-up-form .validation-message {
    color: red;
    font-size: 14px;
    position: absolute;
    bottom: -20px; /* Moves the message below the form */
    left: 0;
}

    .hero .sign-up-form input[type=tel] {
        background-color: transparent;
        border: 0;
        padding: 4px 10px;
        width: 100%;
    }

        .hero .sign-up-form input[type=tel]:focus-visible {
            outline: none;
        }

    .hero .sign-up-form input[type=submit] {
        border: 0;
        box-shadow: none;
        background-color: var(--Secomdary-color);
        border-color: var(--accent-color);
        padding: 8px 20px 10px 20px;
        border-radius: 7px;
        color: var(--Text-color-1);
        transition: 0.3s;
        font-weight: 600;
    }

        .hero .sign-up-form input[type=submit]:hover {
            background-color: var(--Button-Hover-color);
        }

.get-start-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--Secomdary-color);
    color: var(--Text-color-1);
    font-size: 24px;
    font-weight: 600;
    font-family: var(--primary-font);
    padding: 8px 16px 8px 8px;
    border: none;
    border-radius: 50px;
    transition: background-color 0.3s ease;
}
    .get-start-btn:hover {
        background-color: var(--Button-Hover-color); 
    }
    .get-start-btn.logo {
        width: 24px;
        height: 24px;
    }

.d-logo {
    position:relative;
    width: 600px;
    height: 600px;
}







.services .service-item {
    background-color: var(--surface-color);
    padding: 40px;
    box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.faq {
    margin-top: 80px;
}

    .faq .faq-subtitle {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: var(--Text-color-1)!important;
    }

    .faq .faq-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: var(--Text-color-1);
    }


    .faq .faq-description {
        font-size: 1.25rem;
        color: var(--Text-color-4);
        margin-bottom: 2rem;
    }

    .faq .faq-arrow {
        color: var(--Text-color-1);
    }

/*--------------------------------------------------------------
# Search Bar Section
--------------------------------------------------------------*/
.search {
    margin-top:80px !important;
}
    .search h2 {
        color: var(--Text-color-1);
        font-weight: bold;
    }
    .search P {
        color: var(--Text-color-4);
        font-size:24px;
    }
    @media(max-width:576px){
        .search P {
            font-size: 16px;
        }
    }
.custom-search-bar {
    background-color: var(--background-color);
    border: 2px solid var(--Stroke-color);
    border-radius: 50px;
    padding: 10px 15px;
}

    .custom-search-bar input {
        border: none;
        background: transparent;
        background-color: var(--background-color)!important;
        outline: none;
    }

    .custom-search-bar button {
        color: var(--Text-color-1);
        border: none;
        border-radius: 20px;
        padding: 5px 12px;
    }

        .custom-search-bar button:hover {
            background-color: var(--Text-color-1);
            color:var(--Text-color-3);
        }
.q-box {
    color: var(--Text-color-1);
    border-radius: 4px;
    border: 2px solid var(--Stroke-color);
    max-width: 80px;
    max-height: 40px;
    padding: 5px 12px;
}
/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials h2 {
    color: var(--Text-color-1);
    font-weight: bold;
    margin-bottom: 1rem;
    font-family: var(--primary-font);
}

.testimonials {
    background-color: var(--Primary-Surface-1);
}

    .testimonials .testimonial-item {
        background-color: var(--background-color);
        box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.08);
        padding: 30px;
        position: relative;
        height: 100%;
        border-radius: 8px;
    }

        .testimonials .testimonial-item .testimonial-img {
            width: 90px;
            border-radius: 50px;
            border: 6px solid var(--background-color);
            float: left;
            margin: 0 10px 0 0;
        }

        .testimonials .testimonial-item h3 {
            font-size: 18px;
            font-weight: bold;
            margin: 10px 0 5px 0;
        }

        .testimonials .testimonial-item h4 {
            font-size: 14px;
            color: color-mix(in srgb, var(--default-color), transparent 20%);
            margin: 0;
        }

        .testimonials .testimonial-item .stars {
            margin: 10px 0;
        }

            .testimonials .testimonial-item .stars i {
                color: #ffc107;
                margin: 0 1px;
            }

        .testimonials .testimonial-item .quote-icon-left,
        .testimonials .testimonial-item .quote-icon-right {
            color: color-mix(in srgb, var(--Text-color-1), transparent 50%);
            font-size: 26px;
            line-height: 0;
        }

        .testimonials .testimonial-item .quote-icon-left {
            display: inline-block;
            left: -5px;
            position: relative;
        }

        .testimonials .testimonial-item .quote-icon-right {
            display: inline-block;
            right: -5px;
            position: relative;
            top: 10px;
            transform: scale(-1, -1);
        }

        .testimonials .testimonial-item p {
            font-style: italic;
            margin: 15px 0 0 0;
            padding: 0;
            color: var(--Text-color-4);
        }


    .testimonials .section-title h2 {
        color: var(--Text-color-1);
        font-weight: 700;
    }

    .testimonials .section-title {
        color: var(--Text-color-4);
        font-size: 16px;
    }


/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
    .navmenu {
        padding: 0;
        background:none;
    }

        .navmenu ul {
            margin: 0;
            padding: 0;
            display: flex;
            list-style: none;
            align-items: center;
            background-color: none !important;
        }

        .navmenu li {
            position: relative;
            background-color: none !important;
        }

        .navmenu a,
        .navmenu a:focus {
            color: var(--Text-color-2);
            padding: 18px 15px;
            font-size: 20px;
            font-family: var(--primary-font);
            display: flex;
            align-items: center;
            justify-content: space-between;
            white-space: nowrap;
            transition: 0.3s;
            text-decoration: none;
            background-color:none !important;
        }

            .navmenu a i,
            .navmenu a:focus i {
                font-size: 20px;
                line-height: 0;
                margin-left: 5px;
                transition: 0.3s;
                background-color: none !important;
            }

        .navmenu li:last-child a {
            padding-right: 0;
        }

        .navmenu li:hover > a,
        .navmenu .active,
        .navmenu .active:focus {
            color: var(--Text-color-1);
        }

        .navmenu .dropdown ul {
            margin: 0;
            padding: 10px 0;
            background: var(--nav-dropdown-background-color);
            display: block;
            position: absolute;
            visibility: hidden;
            left: 14px;
            top: 130%;
            opacity: 0;
            transition: 0.3s;
            border-radius: 4px;
            z-index: 99;
            box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
        }

            .navmenu .dropdown ul li {
                min-width: 200px;
            }

            .navmenu .dropdown ul a {
                padding: 10px 20px;
                font-size: 20px;
                text-transform: none;
                color: var(--nav-dropdown-color);
                text-decoration: none;
            }

                .navmenu .dropdown ul a i {
                    font-size: 16px;
                    text-decoration: none;
                }

                .navmenu .dropdown ul a:hover,
                .navmenu .dropdown ul .active:hover,
                .navmenu .dropdown ul li:hover > a {
                    color: var(--Text-color-1);
                }

        .navmenu .dropdown:hover > ul {
            opacity: 1;
            top: 100%;
            visibility: visible;
        }

        .navmenu .dropdown .dropdown ul {
            top: 0;
            left: -90%;
            visibility: hidden;
        }

        .navmenu .dropdown .dropdown:hover > ul {
            opacity: 1;
            top: 0;
            left: -100%;
            visibility: visible;
        }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
    .mobile-nav-toggle {
        color: var(--Text-color-2);
        font-size: 28px;
        line-height: 0;
        margin-right: 10px;
        cursor: pointer;
        transition: color 0.3s;
    }

    .navmenu {
        padding: 0;
        z-index: 9997;
    }

        .navmenu ul {
            display: none;
            list-style: none;
            position: absolute;
            inset: 60px 20px 20px 20px;
            padding: 10px 0;
            margin: 0;
            border-radius: 6px;
            background-color: var(--nav-mobile-background-color);
            overflow-y: auto;
            transition: 0.3s;
            z-index: 9998;
            box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
        }

        .navmenu a,
        .navmenu a:focus {
            color: var(--nav-dropdown-color);
            padding: 10px 20px;
            font-family: var(--nav-font);
            font-size: 17px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: space-between;
            white-space: nowrap;
            transition: 0.3s;
            text-decoration: none;
        }

            .navmenu a i,
            .navmenu a:focus i {
                font-size: 12px;
                line-height: 0;
                margin-left: 5px;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                transition: 0.3s;
                background-color: var(--Primary-Surface-1);
            }

                .navmenu a i:hover,
                .navmenu a:focus i:hover {
                    background-color: var(--Primary-Surface-1);
                    color: var(--Text-color-2);
                }

            .navmenu a:hover,
            .navmenu .active,
            .navmenu .active:focus {
                color: var(--Text-color-1);
            }

                .navmenu .active i,
                .navmenu .active:focus i {
                    background-color: var(--Primary-Surface-1);
                    color: var(--Text-color-1);
                    transform: rotate(180deg);
                }

        .navmenu .dropdown ul {
            position: static;
            display: none;
            z-index: 99;
            padding: 10px 0;
            margin: 10px 20px;
            background-color: var(--nav-dropdown-background-color);
            border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
            box-shadow: none;
            transition: all 0.5s ease-in-out;
        }

            .navmenu .dropdown ul ul {
                background-color: rgba(33, 37, 41, 0.1);
            }

        .navmenu .dropdown > .dropdown-active {
            display: block;
            background-color: rgba(33, 37, 41, 0.03);
        }

    .mobile-nav-active {
        overflow: hidden;
    }

        .mobile-nav-active .mobile-nav-toggle {
            color: #fff;
            position: absolute;
            font-size: 32px;
            top: 15px;
            right: 15px;
            margin-right: 0;
            z-index: 9999;
        }

        .mobile-nav-active .navmenu {
            position: fixed;
            overflow: hidden;
            inset: 0;
            background: rgba(33, 37, 41, 0.8);
            transition: 0.3s;
        }

            .mobile-nav-active .navmenu > ul {
                display: block;
            }
}
/* Active menu item styling */
#navmenu a.ActiveState {
    color: var(--Text-color-1) !important; /* Change text color */
    font-weight: bold; /* Make it bold */
    position: relative;
}

    /* Optional: Add an underline effect */
    #navmenu a.ActiveState::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 100%;
        height: 2px;
        transition: width 0.3s ease-in-out;
    }

/* ActiveState in dropdown */
.navmenu .dropdown-menu a.ActiveState { 
    color: var(--Text-color-1) !important; /* Change text color */
    font-weight: bold; /* Make it bold */
}



.mobile-nav-toggle {
    font-size: 32px;
    cursor: pointer;
    color: #000; /* Adjust as needed */
}

/* Ensure alignment and spacing */
@media (max-width: 991px) {
    .mobile-nav-toggle {
        margin-left: 10px; /* Space between login button and toggle icon */
    }

    .btn-getstarted {
        padding: 8px 15px; /* Adjust button padding */
    }
}

.navmenu ul li a.active {
    color: var(--Text-color-1);
    font-weight: bold;
}

.custom-section .card {
    border: none;
    border-radius: 16px;
    transition: transform 0.3s ease;
}

    .custom-section .card:hover {
        transform: translateY(-10px);
    }

.custom-section .card-text {
    font-size: 1rem;
    color: var(--Text-color-4);
}

.custom-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    color: var(--background-color);
    font-size: 40px;
}

.rounded-half {
    margin-top: 80px;
    background-color: var(--Primary-Surface-1);
    border-radius: 0 20000px 20000px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .rounded-half h1 {
        color: var(--Text-color-1);
        font-weight: bold;
        margin-bottom: 1rem;
        font-family: var(--primary-font);
    }
/* .text-vertical {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      color: #d8e4e4;
      font-size:6rem;
      font-weight: bold;
      position:absolute;
      transform: translateY(-50%) rotate(180deg);} */


.custom-section h1 {
    line-height: 60px;
    font-family: 'Franklin Gothic Heavy';
    color: var(--Text-color-1);
    max-width: 878px;
    text-align: center;
    margin-bottom: 40px;
}


.card-body .plan-badge {
    position: absolute;
    top: 10px;
    right: -12px;
}

/* Yellow Tag Image */
.tag-wrapper {
    position: absolute;
    top: 10px;
    right: -26px;
    box-shadow: none;
}

    .tag-wrapper img {
        width: 180px; /* Adjust size as needed */
        display: block;
        box-shadow: none;
    }

/* Advance Plan Text */
.tag-text {
    position: absolute;
    top: 5px;
    right: 25px;
    font-size: 20px !important;
    font-weight: 700;
    color: var(--Text-color-1);
    pointer-events: none; /* Prevents clicking on text */
}


/* Services with Slider */
.services {
    background-color: var(--Primary-Surface-1);
}

.services-container {
    background-color: var(--Primary-Surface-1);
    padding: 50px;
}

.slider-card {
    background-color: var(--Primary-Surface-1);
    padding: 24px;
    border-radius: 8px;
    min-height: 250px;
}

    .slider-card h5 {
        font-size: 24px;
        font-family: var(--primary-font);
        font-weight: 500;
        color: var(--Text-color-2);
        padding-bottom: 32px;
    }

    .slider-card p {
        font-size: 16px;
        font-family: var(--primary-font);
        font-weight: 500;
        color: var(--Text-color-4);
        padding-bottom: 32px;
    }

/* .slider-nav button {
    background-color:var(--background-color);
    border: 2px solid var(--Primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display:block;
    justify-content: center;
    align-items: center;
    color:var(--Primary-color);
    position: absolute;
    top: 105%;
} */
.text-uppercase {
    color: var(--Text-color-1);
    font-family: var(--primary-font);
    font-size: 24px;
    font-weight: 600;
}

.faq .faq-subtitle {
    color: var(--Text-color-1) font-family: var(--Heroscreen-font);
    font-family: 'Franklin Gothic Heavy';
}

.content {
    color: var(--Text-color-4);
    font-family: var(--primary-font);
    font-size: 24px;
}

.carousel-control-prev {
    background-color: var(--background-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: block;
    justify-content: center;
    align-items: center;
    color: var(--Primary-color);
    position: absolute;
    top: 105%;
}

.carousel-control-next {
    background-color: var(--background-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: block;
    justify-content: center;
    align-items: center;
    color: var(--Primary-color);
    position: absolute;
    top: 105%;
    right: 80%;
}

.number-badge {
    position: absolute;
    top: 16px;
    right: 16px;
}

@media (max-width: 575px) {
    .carousel-control-next {
        right: 70%;
    }
}
/* Accordion styles */
.benefits {
    margin-top: 80px;
    margin-bottom: 80px;
}
    .benefits p {
        color: var(--Text-color-3);
    }
    .benefits .accordion {
        --bs-accordion-active-bg: #09787C;
        --bs-accordion-active-color: white;
        --bs-accordion-btn-focus-box-shadow: none;
    }

    .benefits .accordion-button.collapsed {
        background-color: var(--Primary-color);
        color: var(--Text-color-3);
        font-family: var(--primary-font);
        font-size: 20px;
    }

    .benefits .accordion-item {
        border-radius: 8px;
        border: none;
    }

    .benefits .accordion-button {
        font-size: 20px;
    }

    .benefits .accordion-item:has(.accordion-button:not(.collapsed)) {
        background-color: var(--Primary-color);
        color: var(--Text-color-3);
        font-family: var(--primary-font);
        font-size: 16px;
        font-weight: 300;
    }

.benefits h2 {
    color: var(--Text-color-1);
    font-weight: bold;
    margin-bottom: 1rem;
    font-family: var(--primary-font);
}
/* Custom HR line */
.benefits hr {
    border: none;
    height: 3px;
    background-color: var(--Secomdary-color);
    margin: 20px 0;
}

/* Custom SVG icons for accordion */
    .benefits .accordion-button::after {
        display: inline-block;
        background-image: url('../_content/EntranceExamExercise.RCL/images/closeandopen.svg');
        background-size: contain;
        background-repeat: no-repeat;
        content: '';
        width: 40px;
        height: 40px;
    }

    .benefits .accordion-button:not(.collapsed)::after {
        transform: rotate(180deg);
        background-image: url('../_content/EntranceExamExercise.RCL/images/closeandopen.svg');
    }



/* Syllabus */
/* Style for the buttons */
.Syllabus {
    margin-top: 80px;
}

    .Syllabus .nav-link {
        background-color: var(--background-color);
        transition: all 0.3s ease-in-out;
        color: var(--Text-color-2);
        font-family: var(--primary-font);
        font-weight: bold;
        text-align: left;
        width: 300px;
        height: 100px;
    }
@media(max-width:576px){
    .Syllabus .nav-link {
        width:100%;
        height:56px;
    }

} .Syllabus .nav-link img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

        @media(max-width:576px){
            .Syllabus .nav-link img {
                width: 24px;
                height: 24px;
            }
        }
        .Syllabus .nav-link:hover {
            background-color: var(--background-color);
            color: var(--Text-color-2);
            border-color: #abbdd1;
        }



.p-4 {
    padding: 5px !important;
    font-family: var(--primary-font);
}

#Syllabus h3 {
    position: relative;
    font-weight: 600;
    font-family: var(--primary-font);
    color: var(--Text-color-1);
    text-align: left;
}

.tab-content .btn-primary {
    background-color: var(--Secomdary-color);
    border: none;
    color: var(--Text-color-1);
    font-weight: 600;
    font-family: var(--primary-font);
    width: 100%;
    height: 42px;
    font-size: 20px;
}

    .tab-content .btn-primary:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
    }

    .tab-content .btn-primary:active {
        background-color: var(--Button-Hover-color); /* Ensure this variable is defined */
        color: var(--Text-color-1); /* Adjust the text color */
        border: none; /* Removes border on click */
        outline: none; /* Prevents focus outline on click */
        box-shadow: none; /* Removes shadow on click for a clean look */
    }

.tab-content h3 {
    color: var(--Text-color-1);
    font-weight: 600;
}


.Syllabus .nav-link.active,
.nav-link:focus {
    background-color: var(--Secomdary-color);
    color: var(--Text-color-2);
    border-color: rgba(248, 248, 248, 1);
    border-radius: 8px;
}



.tab-pane span {
    font-weight: 600;
    color: var(--Text-color-1);
}

.tab-content {
    background-color: var(--Primary-Surface-1);
    padding: 24px;
    border-radius: 8px;
    font-family: var(--primary-font);
    color: var(--Text-color-4);
    font-size: 20px;
}

@media(max-width:567px){
    .tab-content {
        padding: 16px;
        font-size: 16px;
    }
}

.view-more-button {
    border: 2px solid var(--Primary-color);
    color: var(--Text-color-1);
    font-weight: 600;
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    transition: background-color 0.3s, color 0.3s;
}

    .view-more-button:hover {
        background-color: var(--Primary-color);
        color: var(--Text-color-3);
    }
.creat-more-test {
    border: 2px solid var(--Primary-color);
    color: var(--Text-color-1);
    font-weight: 600;
    border-radius: 8px;
    padding: 0.5rem 1.5rem !important;
    transition: background-color 0.3s, color 0.3s;
}

    .creat-more-test:hover {
        background-color: var(--Primary-color);
        color: var(--Text-color-3);
    }


/* Footer -----------------------------------------------------------------------------------------------------------------------*/
.subscribe-section .right-col {
    background-color: var(--Text-color-1); /* Background color for the entire section */
    padding: 16px 0 16px 0;
    font-family: var(--primary-font);
    display: flex;
    align-items: center;
    justify-content: center;
}

.subscribe-section .left-col {
   
    color: #ffffff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0 16px 0;
}


/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
    color: var(--Text-color-3);
    background-color: var(--Primary-color);
    font-size: 14px;
    position: relative;
    font-family:var(--primary-font);
}

    .footer .footer-top {
        padding-top: 50px;
    }
    @media(max-width:576px){
        .footer .footer-top {
            padding-top: 0px;
        }
    }
    .footer .footer-about .logo {
        margin-bottom: 25px;
    }

        .footer .footer-about .logo img {
            max-height: 40px;
            margin-right: 6px;
        }

        .footer .footer-about .logo text {
            color: var(--Text-color-3);
            font-size: 30px;
            font-weight: 700;
            letter-spacing: 1px;
            font-family: var(--heading-font);
        }

    .footer .footer-about p {
        font-size: 14px;
        font-family: var(--heading-font);
        color: var(--Text-color-3);
    }

    .footer .social-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid color-mix(in srgb, var(--Text-color-3), transparent 50%);
        font-size: 16px;
        color: color-mix(in srgb, var(--Text-color-3), transparent 50%);
        margin-right: 10px;
        transition: 0.3s;
    }

        .footer .social-links a:hover {
            color: var(--Text-color-3);
            border-color: var(--Text-color-3);
        }

    .footer h4 {
        font-size: 16px;
        font-weight: bold;
        position: relative;
        padding-bottom: 12px;
        color: var(--Text-color-3);
    }

    .footer .footer-links {
        margin-bottom: 30px;
    }

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

            .footer .footer-links ul i {
                padding-right: 2px;
                font-size: 12px;
                line-height: 0;
                text-decoration: none;
            }

            .footer .footer-links ul li {
                padding: 10px 0;
                display: flex;
                align-items: center;
                text-decoration: none;
            }

                .footer .footer-links ul li:first-child {
                    padding-top: 0;
                }

            .footer .footer-links ul a {
                color: color-mix(in srgb, var(--Text-color-3), transparent 20%);
                display: inline-block;
                line-height: 1;
                text-decoration: none;
            }

                .footer .footer-links ul a:hover {
                    color: var(--Secomdary-color);
                }

    .footer .footer-contact p ,strong{
        font-size:14px !important;
        margin-bottom: 5px;
        color:var(--Text-color-3);
    }
.copyright p, strong{
    color: var(--Text-color-3) !important;
    font-size: 14px !important;
}
.sitename {
    font-size: 14px !important;
}
.footer .copyright {
    padding-top: 25px;
    padding-bottom: 25px;
    background-color: color-mix(in srgb, var(--Text-color-3), transparent 95%);
}

        .footer .copyright p {
            margin-bottom: 0;
        }

    .footer .credits {
        margin-top: 6px;
        font-size: 13px;
    }

    .footer .footer-about .logo span {
    }

    .footer .footer-about .e3-logo .e {
        color: var(--Secomdary-color);
        font-family: "Zen Dots", serif;
    }

    .footer .footer-about .e3-logo .three {
        color: var(--Text-color-3);
        font-family: "Zen Dots", serif;
    }

    .footer .footer-about .e3-logo a {
        color: var(--Text-color-3);
        font-family: var(--primary-font);
    }


    .footer .sign-up-form {
        padding: 10px;
        border-radius: 7px;
        background: color-mix(in srgb, var(--Text-color-3) 5%, white 100%);
        box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.1);
        display: flex;
    }

        .footer .sign-up-form input[type=email] {
            background-color: transparent;
            border: 0;
            padding: 4px 10px;
            width: 100%;
        }

            .footer .sign-up-form input[type=email]:focus-visible {
                outline: none;
            }

        .footer .sign-up-form input[type=submit] {
            border: 0;
            box-shadow: none;
            background-color: var(--Secomdary-color);
            border-color: var(--accent-color);
            padding: 10px 20px 10px 20px;
            border-radius: 7px;
            color: var(--Text-color-1);
            transition: 0.3s;
            font-weight: 600;
            font-size: 16px;
        }

            .footer .sign-up-form input[type=submit]:hover {
                background-color: var(--Button-Hover-color);
            }







/* Abou us ------------------------------------------------------------------------------------------------------*/
.about-banner {
    position: relative;
    background-image: url('../_content/EntranceExamExercise.RCL/images/aboutbannerimg.png');
    background-size: cover;
    height: 480px;
}
@media(max-width:576px){
    .about-banner {
        height: 200px;
    }
}
    .about-banner .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.about-banner-Exam {
    position: relative;
    background-image: url('../_content/EntranceExamExercise.RCL/images/aboutbannerimg.png');
    background-size: cover;
    height: 150px;
}

    .about-banner-Exam .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .about-banner h1 {
        position: relative;
        color: var(--Text-color-3);
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
        font-family: 'Franklin Gothic Heavy';
    }

.about-section p {
    font-family: var(--primary-font);
    font-size: 20px;
    color: var(--Text-color-4);
    text-align: start;
}

/* mission-section */
.mission-section {
    background-color: var(--background-color);
    padding: 3rem;
}

@media(max-width:567px) {
    .mission-section {
        padding: 1rem;
    }
}

.mission-section h2 {
    color: var(--Text-color-1);
    font-weight: bold;
    text-align: start;
    margin-bottom: 1rem;
    font-family: var(--primary-font);
}

.mission-section p.lead {
    color: var(--Text-color-4);
    text-align: start;
    font-family: var(--primary-font);
    margin-bottom: 2rem;
    font-size: 20px;
    text-align: justify;
}

.mission-card {
    background-color: var(--Primary-Surface-1) !important;
    border: none;
    border-radius: 8px;
    text-align: start;
    padding: 2rem;
    transition: transform 0.3s;
}

    .mission-card:hover {
        transform: translateY(-10px);
    }

    .mission-card h5 {
        color: var(--Text-color-1);
        font-weight: bold;
        font-family: var(--primary-font);
    }

    .mission-card p {
        color: var(--Text-color-4);
        font-family: var(--primary-font);
        font-size: 16px;
    }

/* values section */
.Values-section {
    background-color: var(--background-color);
    padding: 3rem;
}

@media(max-width:567px) {
    .Values-section {
        padding: 1rem;
    }
}

.Values-section h2 {
    color: var(--Text-color-1);
    font-weight: bold;
    text-align: start;
    margin-bottom: 1rem;
    font-family: var(--primary-font);
}

.Values-section p.lead {
    color: var(--Text-color-4);
    text-align: start;
    font-family: var(--primary-font);
    margin-bottom: 2rem;
    font-size: 20px;
    text-align: justify;
}

.Values-card {
    background-color: var(--Primary-Surface-1) !important;
    border: none;
    border-radius: 8px;
    text-align: start;
    padding: 2rem;
    transition: transform 0.3s;
}

    .Values-card:hover {
        transform: translateY(-10px);
    }

    .Values-card h5 {
        color: var(--Text-color-1);
        font-weight: bold;
        font-family: var(--primary-font);
    }

    .Values-card p {
        color: var(--Text-color-4);
        font-family: var(--primary-font);
        font-size: 16px;
    }
/* Search page ------------------------------------------------------------------------------------------------------*/

.search-banner {
    position: relative;
    background-image: url('../_content/EntranceExamExercise.RCL/images/aboutbannerimg.png');
    background-size: cover;
    height: 400px;
}
@media(max-width:576px){
    .search-banner {
        height: 300px;
    }
}
    .search-banner .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .search-banner h1 {
        color: var(--Text-color-3);
        text-align: center;
        font-family: 'Franklin Gothic Heavy';
    }
.search-content {
    position: relative;
    color: var(--Text-color-3);
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}
.search-content h4 {
    color: var(--Text-color-3);
}
.show-answer-btn {
    text-decoration: none;
    color: var(--Text-color-1);
    font-weight: 600;
    font-size: 14px;
    border: none !important;
}

.answer.alert {
    background-color: var(--Primary-Surface-1) !important;
    height: auto !important;
}

.search-questions p, strong, label {
    font-size: 14px !important;
    margin-bottom: 0px !important;
}
@media(max-width:576px)
{
    .search-questions p, strong, label {
        font-size: 14px !important;
        margin-bottom: 0px !important;
    }
}
.question-number {
    font-size: 14px !important;
}

/* video-review  for the modal */

.video-review .modal-content {
    border-radius: 12px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

.video-review .modal-title {
    font-weight: bold;
    color: var(--Text-color-2);
}
.video-review .modal-body{
    padding:16px !important;
}
.video-review .modal-header {
    padding: 16px !important;
}
    @media(max-width:576px) {
        .video-review .modal-body {
        padding:8px !important;
    }
        .video-review .modal-header {
            padding: 8px !important;
        }
}
/* Subscription Plan ----------------------------------------------------------------------------------------------------------------*/
.plans-section h2 {
    color: var(--Text-color-1);
    font-weight: bold;
    text-align: start;
    margin-bottom: 1rem;
}

.plans-section .lead {
    text-align: start;
    color: var(--Text-color-4);
    margin-bottom: 2rem;
    font-size: 20px;
}
@media(max-width:576px){
    .plans-section .lead {
        font-size: 16px;
    }
}
.plan-card {
    background-color: var(--background-color);
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    transition: transform 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* .plan-card:hover {
        transform: scale(1.05);
    }*/
@media(max-width:576px){
    .plan-card {
        padding: 1rem;
    }
}


.plan-badge {
    position: absolute;
    top: 10px;
    right: -27px;
}

.plan-price {
    color: var(--Text-color-1);
    font-size: 1.5rem;
    font-weight: bold;
}

    .plan-price span {
        font-size: 1rem;
        color: var(--Text-color-4);
        text-align: start;
    }

.plan-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    color: var(--Text-color-4);
    font-size: 16px;
    flex-grow: 1;
}

    .plan-features li {
        margin-bottom: 0.5rem;
        text-align: start;
    }

.button-container {
    text-align: center;
    margin-top: auto; /* Pushes the button to the bottom */
}

.btn-get-started {
    border: 2px solid var(--Primary-color);
    color: var(--Text-color-1);
    font-weight: 600;
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    transition: background-color 0.3s, color 0.3s;
}

    .btn-get-started:hover {
        background-color: var(--Primary-color);
        color: var(--Text-color-3);
    }

    .btn-get-start{
        background-color: var(--Primary-color);
        color: var(--Text-color-3);
    }

.btn-get-start:hover {
    background-color: var(--Primary-color);
    color: var(--Text-color-3);
}


/* Plan Comparison */
.Comparison h2 {
    font-weight: bold;
    color: var(--Text-color-1);
}

.Comparison .table {
    background-color: var(--background-color);
    border-radius: 8px;
    overflow: hidden;
    color: var(--Text-color-4);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #F0F0F0;
    color: var(--Text-color-4);
}

.Comparison .table thead {
    background-color: var(--Secondary-Surface-2);
    color: var(--Text-color-1);
}

    .Comparison .table thead th {
        font-size: 1rem;
        text-transform: capitalize;
    }

th,
td {
    text-align: start;
    vertical-align: middle;
}

th {
    font-weight: 600;
    font-family: var(--primary-font);
}

.Table-Header th {
    font-weight: 600;
    font-family: var(--primary-font);
    color: var(--Text-color-1);
}

.container {
    margin-top: 50px;
}


/* FQA----------------------------------------------------------------------------------------------------------------------- */

.faq-title {
    font-weight: 600;
    color: var(--Text-color-1);
    font-family: var(--primary-font);
}

.faq-subtitle {
    font-size: 16px;
    color: var(--Text-color-4);
    font-family: var(--primary-font);
}

.faq-input {
    margin-top: 20px;
    display: flex;
    position: relative
}

    .faq-input .form-control {
        border-radius: 8px;
        padding: 10px 15px;
        border: 2px solid var(--Stroke-color);
        transition: all 0.3s ease;
       
    }

        .faq-input .form-control:focus {
            border: none;
        }

    .faq-input .btn {
        border-radius: 8px;
        padding: 10px 20px;
        background-color: var(--Secomdary-color);
        color: var(--Text-color-1);
        font-family: var(--primary-font);
        font-weight: bold;
        border: var(--Button-Stroke-color);
        transition: background-color 0.3s ease;
    }

        .faq-input .btn:hover {
            background-color: var(--Button-Hover-color);
        }

#fqaAccordion .accordion-button {
    background-color: var(--Surface-color-2);
    color: var(--Text-color-2);
    font-family: var(--primary-font);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    padding: 10px 15px;
}
.accordion-button:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent; /* Optional: Adjust if needed */
}

#fqaAccordion .accordion-item {
    border: none;
    border-radius: 8px;
    margin-bottom: 10px;
    background-color: var(--Surface-color-2);
    color: var(--Text-color-2);
    font-size: 16px;
    font-family: var(--primary-font);
}

/* contact-section  ---------------------------------------------------------------------------------------*/
.contact-card {
    background-color: var(--background-color);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media(max-width:576px) {
    .contact-card {
        padding: 16px;
    }
}

.contact-card h2 {
    font-weight: 600;
    color: var(--Text-color-1);
    font-family: var(--primary-font);
}

.contact-section h2 {
    font-weight: 600;
    color: var(--Text-color-1);
    font-family: var(--primary-font);
}

.contact-card p {
    color: var(--Text-color-4);
    font-size: 16px;
    font-family: var(--primary-font);
}

.contact-form input,
.contact-form textarea {
    border: 1px solid var(--Stroke-color);
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
}

.contact-form button {
    background-color: var(--Secomdary-color);
    color: var(--Text-color-1);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: bold;
    height: 48px;
}

    .contact-form button:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
        height: 48px
    }

.text-muted {
    font-size: 12px;
    color: var(--Text-color-4);
}

.contact-section p {
    color: var(--Text-color-4);
    font-family: var(--primary-font);
    font-size: 16px;
}

.contact-section h5 {
    color: var(--Text-color-1);
    font-size: 20px;
}

.contact-section {
    background-color: var(--Primary-Surface-1);
    padding: 48px 0;
}

@media(max-width:576px) {
    .contact-section {
        padding: 24px 0;
    }
}

.faq-input .btn {
    background-color: var(--Secomdary-color);
    color: var(--Text-color-1);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: bold;
    height: 48px;
   
}

    .faq-input .btn:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
        height: 48px
    }
.faq-input .validation-message {
    color: red;
    font-size: 14px;
    position: absolute;
    bottom: -20px; /* Moves the message below the form */
    left: 0;
}





/* location-section */
.location-section {
    padding: 50px 16px;
}

@media(max-width:576px) {
    .location-section {
        padding: 16px 16px;
        margin-top: 16px;
    }
}

.map-container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.location-details h2 {
    font-weight: 600;
    color: var(--Text-color-1);
    font-family: var(--primary-font);
}

.location-details p {
    color: var(--Text-color-4);
    margin-bottom: 5px;
    font-size: 18px;
    font-family: var(--primary-font);
}

.location-details h5 {
    font-weight: 400;
    margin-top: 18px;
    font-family: var(--primary-font);
}

/* checkout-container ----------------------------------------------------------------------------------------*/
.checkout-container {
    padding: 16px;
    background-color: var(--Secondary-Surface-2);
    margin-top: 40px;
}

.checkout-header {
    font-weight: 700;
    color: var(--Text-color-1);
}

.checkout-text {
    color: var(--Text-color-4);
    font-size: 16px;
    font-family: var(--primary-font);
}

.coupon-section {
    margin-top: 20px;
}

    .coupon-section input {
        border-radius: 5px;
        border: 1px solid var(--Stroke-color);
        padding: 8px 10px;
        width: 70%;
        border-radius: 8px;
        font-family: var(--primary-font);
    }

    .coupon-section button {
        background-color: var(--Secomdary-color);
        color: var(--Text-color-1);
        border: none;
        padding: 8px 15px;
        border-radius: 8px;
        font-weight: 600;
        font-family: var(--primary-font);
    }

        .coupon-section button:hover {
            background-color: var(--Button-Hover-color);
            color: var(--Text-color-1);
        }

.order-summary {
    background-color: var(--background-color);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 100%;
}

    .order-summary a {
        font-size: 16px;
    }

.summary-item {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--Text-color-4);
    font-family: var(--primary-font);
}

.summary-highlight {
    font-weight: 600;
    color: var(--Text-color-1);
    font-family: var(--primary-font);
}

.btn-checkout {
    background-color: var(--Secomdary-color);
    color: var(--Text-color-1);
    border: none;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 8px;
    width: 100%;
    margin-top: 20px;
    font-family: var(--primary-font);
}

    .btn-checkout:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
    }

.checkout-container .form-label {
    font-family: var(--primary-font);
    font-size: 24px;
    color: var(--Text-color-1);
    font-weight: 300;
}
/*payment-success --------------------------------------------------------------------------------------------------*/
.payment-success-header {
    background-color: #dff4e1;
    padding: 20px;
    border-bottom: 2px solid #79BD92;
    text-align: center;
    margin-bottom: 20px;
    color: #28a745;
    font-family: var(--primary-font);
}


.invoice-wrapper .invoice-header {
    background-color: var(--background-color);
    color: var(--Text-color-3);
    padding: 15px;
}

.invoice-wrapper .invoice-container {
    max-width: 800px;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: var(--background-color);
}

.invoice-wrapper .section-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--Text-color-2);
    font-family: var(--primary-font);
}

.invoice-wrapper .table th,
.invoice-wrapper .table td {
    vertical-align: middle;
    text-align: center;
}

.invoice-wrapper .btn-yellow {
    background-color: var(--Secomdary-color);
    color: var(--Text-color-1);
    border: none;
    font-weight: 500;
    font-family: var(--primary-font);
}

    .invoice-wrapper .btn-yellow:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
        font-family: var(--primary-font);
    }

.invoice-wrapper .receipt-banner {
    position: relative;
    background: url('../_content/EntranceExamExercise.RCL/images/paymentsuccess.svg') no-repeat center center;
    background-size: cover;
    height: 80px;
    color: var(--Text-color-2);
    font-family: var(--primary-font);
}

    .invoice-wrapper .receipt-banner .payment-logo {
        color: var(--Text-color-3);
        font-family: var(--primary-font);
    }

.invoice-wrapper .paymentsuccess {
    margin-top: 164px;
}

.invoice {
    background-color: var(--Secondary-Surface-2);
    position: relative;
    top: 200px;
    padding-bottom: 16px;
}

.btn-outlinesecondary {
    border: 1px solid var(--Primary-color);
    color: var(--Primary-color);
    font-weight: 500;
    font-family: var(--primary-font);
}

    .btn-outlinesecondary:hover {
        background-color: var(--Primary-color);
        color: var(--Text-color-3);
        font-family: var(--primary-font);
    }

/* Unsuccessful -----------------------------------------------------------------------------------------------*/

.payment-unsuccess-header {
    background-color: #FFEEEE;
    padding: 20px;
    border-bottom: 2px solid #ED9191;
    text-align: center;
    margin-bottom: 20px;
    color: #FF7575;
    font-family: var(--primary-font);
}

.payment-card2 {
    color: var(--Text-color-4);
    max-width: 994px;
}

.invoice-wrapper .unsuccess-banner {
    position: relative;
    background: url('../_content/EntranceExamExercise.RCL/images/unsuccesful.png') no-repeat center center;
    background-size: cover;
    height: 80px;
    color: var(--Text-color-3);
    font-family: var(--primary-font);
    max-width: 994px;
}



/* Testimonial------------------------------------------------------------------------------------------------- */
.achievement {
    position: relative;
    top: 80px;
}
/*--------------------------------------------------------------
#  Pagination Section
--------------------------------------------------------------*/
.blog-pagination {
    padding-top: 0;
    color: color-mix(in srgb, var(--Text-color-2), transparent 40%);
    text-decoration: none;
}

    .blog-pagination ul {
        display: flex;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .blog-pagination li {
        margin: 0 5px;
        transition: 0.3s;
    }

        .blog-pagination li a {
            color: color-mix(in srgb, var(--Text-color-2), transparent 40%);
            padding: 7px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

            .blog-pagination li a.active,
            .blog-pagination li a:hover {
                background: var(--Primary-color);
                color: var(--Text-color-3);
            }

                .blog-pagination li a.active a,
                .blog-pagination li a:hover a {
                    color: var(--Text-color-3);
                }

/*--------------------------------------------------------------
#  Details Section
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
    padding-top: 10px;
}

    .comment-form form {
        background-color: var(--background-color);
        margin-top: 30px;
        padding: 30px;
    }

        .comment-form form h4 {
            font-weight: bold;
            font-size: 22px;
        }

        .comment-form form p {
            font-size: 14px;
        }

        .comment-form form input {
            background-color: var(--background-color);
            color: var(--Text-color-2);
            border: 1px solid color-mix(in srgb, var(--Text-color-4), transparent 70%);
            font-size: 14px;
            border-radius: 4px;
            padding: 10px 10px;
        }

            .comment-form form input:focus {
                color: var(--Text-color-2);
                background-color: var(--background-color);
                box-shadow: none;
                border-color: var(--Primary-color);
            }

            .comment-form form input::placeholder {
                color: color-mix(in srgb, var(--Text-color-4), transparent 50%);
            }

        .comment-form form textarea {
            background-color: var(--background-color);
            color: var(--Text-color-2);
            border: 1px solid color-mix(in srgb, var(--Text-color-4), transparent 70%);
            border-radius: 4px;
            padding: 10px 10px;
            font-size: 14px;
            height: 120px;
        }

            .comment-form form textarea:focus {
                color: var(--Text-color-2);
                box-shadow: none;
                border-color: var(--Primary-color);
                background-color: var(--surface-color);
            }

            .comment-form form textarea::placeholder {
                color: color-mix(in srgb, var(--Text-color-4), transparent 50%);
            }

        .comment-form form .form-group {
            margin-bottom: 25px;
        }

        .comment-form form .btn-primary {
            border-radius: 4px;
            padding: 10px 20px;
            border: 0;
            background-color: var(--Secomdary-color);
            color: var(--Text-color-1);
            font-weight: 500;
        }

            .comment-form form .btn-primary:hover {
                color: var(--Text-color-1);
                background-color: var(--Button-Hover-color);
            }

.Testimonials-card {
    font-family: var(--primary-font);
    border: 2px solid var(--Stroke-color);
    border-radius: 8px;
    background-color: var(--background-color);
    font-size: 16px;
    color: var(--Text-color-2);
    font-weight: 500;
}

.achievement h4 {
    font-size: 32px;
    padding-bottom: 16px;
    color: var(--Text-color-1);
    font-family: var(--primary-font);
}

.achievement p {
    font-size: 16px;
    padding-bottom: 64px;
    color: var(--Text-color-4);
    font-family: var(--primary-font);
}

.achievement {
    /*  padding-top: 164px;*/
}

/* talk to us ---------------------------------------------------------------------------------------------------------------------------------------------*/
.info-section {
    padding: 16px;
    background-color: var(--Secondary-Surface-2);
    margin-top: 164px;
}

.info-details {
    text-align: left;
    font-family: var(--primary-font);
}

    .info-details p {
        font-size: 16px;
        font-family: var(--primary-font);
    }

.form-card {
    border-radius: 15px;
    background: var(--background-color);
    padding: 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: var(--primary-font);
}

.submit-btn {
    background-color: var(--Secomdary-color);
    border: none;
    color: var(--Text-color-1);
    font-family: var(--primary-font);
    font-size: 20px;
    font-weight: 500;
}

    .submit-btn:hover {
        background-color: var(--Button-Hover-color);
    }

.form-footer {
    font-size: 16px;
    color: var(--Text-color-4);
    font-family: var(--primary-font);
}

.illustration img {
    max-width: 100%;
}


/* login----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.login .Left-Section {
    background-color: var(--Primary-color);
}

.login .Home-Section {
    background-color: var(--background-color);
    border-radius:8px;
    max-width:576px;
}
.login .Right-Section {
    background-color: var(--background-color);
    border-radius: 8px;
 
}

.login .btn-submit {
    background-color: var(--Secomdary-color);
    border: 2px solid var(--Secomdary-color);
    color: var(--Text-color-1);
    font-family: var(--primary-font);
    font-size: 20px;
    font-weight: 600;
}
    .login .btn-submit:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
        font-family: var(--primary-font);
    }
.login .btn-create {
    background-color:var(--Text-color-1);
    color: var(--Text-color-3);
    border: 2px solid var(--Text-color-1);
    font-family: var(--primary-font);
    font-size: 20px;
    font-weight: 600;
}


.login .form-card h4 {
    color: var(--Text-color-1);
}

.login p {
    font-size: 16px;
    color: var(--Text-color-2);
    font-weight: 500;
}

.login .navbar-brand {
    color: var(--Text-color-3);
    font-family: var(--primary-font);
    font-size: 20px;
}

.login .illustration {
    max-width: 100%;
    background-color: var(--Primary-color);
}

.login .form-control:focus {
    box-shadow: none !important;
    border-color: var(--Primary-color);
}

.custom-validation-summary {
    background-color: #f8d7da; /* Light red background for error summary */
    color: #842029; /* Dark red text for error messages */
    border: 1px solid #f5c2c7; /* Light red border */
    padding: 10px; /* Add some padding for better readability */
    border-radius: 5px; /* Slightly rounded corners */
    margin-bottom: 15px; /* Space below the summary */
    font-size: 14px; /* Adjust font size */
    text-align: left; /* Align text to the left */
    list-style-type: none; /* Removes bullets from the list */
}

.validation-message {
    color: red; /* Makes the text red */
    font-size: 14px; /* Adjusts the font size */
    margin-top: 5px; /* Adds spacing between input and message */
    display: block; /* Ensures it appears below the input field */
}

.is-invalid {
    border: 1px solid red !important; /* Red border when invalid */
    background-color: #ffe6e6; /* Light red background for better visibility */
}

/*Sign Up----------------------------------------------------------------------------------------------------------------------------------------------------------------- */


.SignUp .Left-Section {
    background-color: var(--Primary-color);
    padding-top: 80px;
}

.SignUp .form-card {
    width: 350px;
}

.SignUp .Right-Section {
    background-color: var(--background-color);
    padding-top: 80px;
}

.SignUp .btn-submit {
    background-color: var(--Secomdary-color);
    border: none;
    color: var(--Text-color-1);
    font-family: var(--primary-font);
    font-size: 20px;
    font-weight: 600;
}

    .SignUp .btn-submit:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
        font-family: var(--primary-font);
    }

.SignUp .form-card h4 {
    color: var(--Text-color-1);
}

.SignUp .form-label {
    color: var(--Text-color-2);
    font-size: 16px;
    font-family: var(--primary-font);
    font-weight: 500;
}

.SignUp .navbar-brand {
    color: var(--Text-color-3);
    font-family: var(--primary-font);
    font-size: 20px;
}

.SignUp p {
    font-size: 16px;
    color: var(--Text-color-2);
    font-weight: 500;
}

.SignUp .illustration {
    max-width: 100%;
    background-color: var(--Primary-color);
}

.SignUp .form-control:focus {
    box-shadow: none !important;
    border-color: var(--Primary-color);
}

.input-container {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    width: 100%;
}

    .input-container input {
        width: 100%; /* Ensures input takes full width */
    }
/* Custom modal styling */
.custom-modal .modal-content {
    background-color: #f0f8ff; /* Light blue background */
    border-radius: 10px;
    padding: 20px;
}

.custom-modal .title {
    color: var(--Text-color-1);
    text-align: center;
    font-size: 24px;
}

.custom-modal p {
    display: flex;
    color: var(--Text-color-4);
    font-size: 16px;
}

/* Optional: Style for the Close button */
.custom-modal .btn-secondary {
    background-color: var(--Secomdary-color);
    color: var(--Primary-color);
    border: none;
}

/*Forgot Password----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.Forgot-Password .Left-Section {
    background-color: var(--Primary-color);
}

.Forgot-Password .Right-Section {
    background-color: var(--background-color);
}

.Forgot-Password .btn-submit {
    background-color: var(--Secomdary-color);
    color: var(--Text-color-1);
    font-family: var(--primary-font);
    font-size: 20px;
    font-weight: 600;
}

    .Forgot-Password .btn-submit:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
        font-family: var(--primary-font);
    }

    .Forgot-Password .btn-submit:active {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1); /* Darker shade when clicked */
        border: none;
    }

.Forgot-Password .form-card h4 {
    color: var(--Text-color-1);
}

.Forgot-Password .form-label {
    color: var(--Text-color-2);
    font-size: 16px;
    font-family: var(--primary-font);
    font-weight: 500;
}

.Forgot-Password .navbar-brand {
    color: var(--Text-color-3);
    font-family: var(--primary-font);
    font-size: 20px;
}

.Forgot-Password p {
    font-size: 16px;
    color: var(--Text-color-2);
    font-weight: 500;
}

.Forgot-Password .illustration {
    max-width: 100%;
}

.Forgot-Password .form-control:focus {
    box-shadow: none !important;
    border-color: var(--Primary-color);
}

/*Forgot Password OTO----------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*.otp-page{
    background-color: var(--background-color);
    font-family: "Urbanist", sans-serif;
}*/

.otp-page .left-section {
    background-color: var(--Primary-color);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.otp-page .right-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background-color: var(--background-color);
}

.otp-page .form-card {
    max-width: 350px;
    padding: 20px;
}

.otp-page .btn-submit {
    background-color: var(--Secomdary-color);
    border: none;
    color: var(--Primary-color);
    font-size: 20px;
    font-weight: 600;
}

    .otp-page .btn-submit:hover {
        background-color: var(--Button-Hover-color);
    }

    .otp-page .btn-submit:active {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1); /* Darker shade when clicked */
        border: none;
    }

.otp-page .otp-input {
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 1.5rem;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
}

.otp-page p {
    font-size: 16px;
    color: var(--Text-color-2);
    font-weight: 500;
}

@media (max-width: 576px) {
    .otp-page .left-section,
    .otp-page .right-section {
        padding: 20px;
    }
}

.otp-page .form-control:focus {
    box-shadow: none !important;
    border-color: var(--Primary-color);
}
/*Reset password----------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.reset-password-page .left-section {
    background-color: var(--Primary-color);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
}



.reset-password-page .right-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background-color: var(--background-color);
}

.reset-password-page .form-card {
    max-width: 350px;
    padding: 20px;
}

.reset-password-page .btn-submit {
    background-color: var(--Secomdary-color);
    border: none;
    color: var(--Primary-color);
    font-size: 20px;
    font-weight: 600;
}

    .reset-password-page .btn-submit:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
    }

.reset-password-page .otp-input {
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 1.5rem;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
}

.reset-password-page p {
    font-size: 16px;
    color: var(--Text-color-2);
    font-weight: 500;
}

.reset-password-page .form-control:focus {
    box-shadow: none !important;
    border-color: var(--Primary-color);
}

.reset-password-page .form-label {
    color: var(--Text-color-2);
    font-size: 16px;
    font-family: var(--primary-font);
    font-weight: 500;
}

/* Media query for mobile responsiveness */
@media (max-width: 576px) {
    .reset-password-page {
        display: flex; /* Use flexbox for better mobile responsiveness */
        flex-direction: column; /* Stack sections vertically */
    }

        .reset-password-page .left-section,
        .reset-password-page .right-section {
            padding: 20px;
            width: 100%; /* Ensure full width for mobile */
        }
}


/* Dashboard------------------------------------------------------------------------------------------------- */
/*.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    text-align: end;
    padding: 10px 0;
    z-index: -1000;*/ /* Ensures it stays above other elements */
/*}*/


/* Start: Global */

.bg-indigo {
    background-color: var(--Primary-color);
}

.dropdown-toggle::after {
    display: none;
}

.cursor-pointer {
    cursor: pointer;
}

.fw-semibold {
    font-weight: 600;
}

.fs-7 {
    font-size: .875rem;
}


.fx-dropdown-menu {
    min-width: 16rem;
    padding: 0;
    overflow: hidden;
}

.brand-image {
    font-family: var(--primary-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    background-color: var(--Primary-color);
    color: var(--Text-color-3);
    padding: 8px;
}

    .brand-image img {
        width: 40px;
        height: 40px;
        margin-right: 20px;
    }

.sidebar {
    background-color: var(--Primary-color);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: hidden;
    overflow-x: hidden;
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 490;
    opacity: 1;
    visibility: visible;
    transition: opacity .2s;
   
}

.sidebar.collapsed ~ .sidebar-overlay {
    opacity: 0;
    visibility: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}

.sidebar.collapsed:hover,
.sidebar {
    width: 16rem;
    overflow-y: auto;
    transition: width .2s, left .2s;
    left: 0;
    z-index: 500;
}

    .sidebar.collapsed {
        left: -16rem;
    }

    .sidebar::-webkit-scrollbar {
        width: .25rem;
    }

    .sidebar::-webkit-scrollbar-track {
        background-color: var(--bs-gray-300);
    }

    .sidebar::-webkit-scrollbar-thumb {
        background-color: var(--bs-gray-500);
    }

        .sidebar::-webkit-scrollbar-thumb:hover {
            background-color: var(--bs-gray-600);
        }

.sidebar-toggle {
    cursor: pointer;
    transition: .2s;
    color: var(--Text-color-3);
}

    .sidebar-toggle:hover {
        color: var(--Secomdary-color);
    }

.sidebar-menu {
    flex-grow: 1;
}

    .sidebar-menu:last-child {
        margin-top: auto;
    }



.sidebar-menu {
    list-style-type: none;
}

.sidebar-menu-item {
    margin-bottom: .25rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .sidebar-menu-item a {
        text-decoration: none;
        display: flex;
        align-items: center;
        color: var(--Text-color-3);
        padding: .375rem .75rem;
        border-radius: 8px;
        font-size: 16px;
        font-family:var(--primary-font);
        
    }

    .sidebar-menu-item > a {
        overflow: hidden;
    }

        .sidebar-menu-item.focused > a,
        .sidebar-menu-item > a:hover {
            background-color: #2E888B;
            border-radius: 8px;
        }

    .sidebar-menu-item.active {
        background-color: var(--Secomdary-color);
        color: var(--Text-color-1);
        box-shadow: 0 .25rem .25rem rgba(0, 0, 0, 0.175);
        border-radius: 8px;
        font-size: 16px;
    }

        .sidebar-menu-item.active a {
            color: var(--Text-color-1);
            font-size: 16px;
        }

            .sidebar-menu-item.active a:hover {
                color: var(--Text-color-3);
                font-size: 16px;
            }

    /* Default state: show white icon */
    .sidebar-menu-item .icon-default {
        display: inline-block;
    }

    .sidebar-menu-item .icon-active {
        display: none;
    }

    /* On hover & active: show green icon */

    .sidebar-menu-item.active .icon-default {
        display: none;
    }

    .sidebar-menu-item:hover .icon-default {
        display: inline-block;
    }

    .sidebar-menu-item.active .icon-active {
        display: inline-block;
    }

    .sidebar-menu-item:hover .icon-active {
        display: none;
    }
.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item.active {
    background-color: var(--Text-color-1) !important;
    color: white !important;
}



















/*    ----------------------------------*/
/* start: Suummary */
.summary-icon {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-light);
    font-size: 1.5rem;
    border-radius: 50%;
}




/* end: Suummary */
/* end: Main */



/* start: Breakpoints */
/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /* start: Sidebar */
    .sidebar-overlay {
        opacity: 0;
        visibility: hidden;
    }

    .sidebar.collapsed {
        width: 4.75rem;
        left: 0;
    }

        .sidebar.collapsed .sidebar-logo {
            display: none;
        }

        .sidebar.collapsed:hover .sidebar-logo {
            display: block;
        }

        .sidebar.collapsed:hover .sidebar-toggle {
            margin-left: auto;
            margin-right: 0;
        }

        .sidebar.collapsed .sidebar-toggle {
            margin: 0 auto;
            transform: rotateZ(90deg);
        }


    /* end: Sidebar */



    /* start: Main */
    main {
        transition: padding-left .2s;
        padding-left: 16rem;
    }

    .sidebar.collapsed ~ main {
        padding-left: 4.75rem;
    }
    /* end: Main */
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}
/* end: Breakpoints */

.Main {
    background-color: #E9F1F1;
}




.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
    width: 100%;
}

/* end: Sidebar */

/* start: Navbar */
nav {
    display: flex;
    align-items: center;
    background-color: var(--Primary-color);
    color: var(--Text-color-3);
    /*position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
}

.navbar-profile-image {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
}

.navbar-link {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .25rem;
}

    .navbar-link:hover {
        background-color: var(--bs-gray-200);
    }

.breadcrumb-item {
    color: var(--Text-color-4);
    font-size: 16px;
    text-decoration: none;
}

.breadcrumb .btn {
    color: var(--Text-color-4);
    font-size: 16px;
    text-decoration: none;
}
/* end: Navbar */
/* Dashboard Element---------------------------------------------------------------------------------------- */
.content {
    flex: 1;
    max-width: 100vw;
    width: 100vw;
    height: 100%;
}

@media (min-width:768px) {
    .content {
        max-width: auto;
        width: auto;
    }
}


.btn-Dashboard {
    background-color: var(--Secomdary-color);
    border: none;
    color: var(--Text-color-1);
    font-family: var(--primary-font);
    font-size: 16px;
    font-weight: 600;
}

    .btn-Dashboard:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
        font-family: var(--primary-font);
    }


.card {
    box-shadow: 0 0 .875rem 0 rgba(34, 46, 60, .05);
    margin-bottom: 24px;
    background-color: var(--background-color);
}

.Welcome-note h4 {
    color: var(--Text-color-2);
    font-family: var(--primary-font);
}

.dash-banner {
    background: linear-gradient(to right, rgba(121, 102, 197, 1), rgba(181, 163, 255, 1));
}
.text-sm{
    font-size:20px
}
@media(max-width:576px){
    .text-sm {
        font-size:16px
    }
}
.progress-bar, .progress {
    height: 8px;
}
.bg-info {
    background-color: var(--Text-color-1) !important;
}
.list-group-item {
    background-color: var(--background-color) !important;
}
.progress-text {
 color: var(--Text-color-4);
}


#month-select {
    background-color: var(--background-color);
    border-color: var(--Stroke-color);
    color: var(--Text-color-2);
}

    #month-select:focus, #month-select:active {
        box-shadow: none !important;
        outline: none !important;
    }

.Heading-Text h4 {
    color: var(--Text-color-2);
    font-family: var(--primary-font) !important;
}

.overview h6 {
    color: var(--Text-color-2);
}
/* Button container styles */
.arrow-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px; /* Size of the button */
    height: 40px;
    border: 2px solid var(--Stroke-color); /* Border color */
    border-radius: 50%; /* Circular shape */
    background-color: var(--background-color); /* Transparent background */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

    /* Arrow icon inside the button */
    .arrow-btn img {
        width: 24px; /* Adjust the size of the arrow */
        height: 24px;
    }

    /* Hover effect */
    .arrow-btn:hover {
        /* Light background on hover */
        border-color: var(--Primary-color); /* Darker border on hover */
    }
/* Responsive styling */
.day-box {
    min-width: 50px;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
}

/* Adjust spacing for small screens */
@media (max-width: 768px) {
    .overview p {
        font-size: 14px;
        text-align: center;
    }

    .week-days {
        flex-wrap: wrap;
        justify-content: center;
    }

    .day-box {
        font-size: 12px;
        width: 35px;
    }
}

.test-series-card {
    background-color: #E9F1F1;
    border-radius: 8px;
    text-align: left;
    position: relative;
    max-height: 300px; /* Set a maximum height, you can adjust this value */
    overflow: hidden; /* This ensures that content overflowing the max height will be hidden */
}

    .test-series-card h4 {
        color: var(--Text-color-1);
        margin-bottom: 8px;
        z-index: 1;
    }

    .test-series-card p {
        color: #9e9e9e;
        margin-bottom: 8px;
        z-index: 1;
        font-size: 16px;
    }

    .test-series-card img {
        position: absolute;
        bottom: 0;
        right: 0px;
        width: auto;
        border-radius: 8px;
    }

.view-syllabus {
    background-color: var(--Secomdary-color);
    color: var(--Primary-color);
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    z-index: 1;
    text-decoration:none;
    max-width:120px;
}

    .view-syllabus:hover {
        background-color: var(--Button-Hover-color);
    }

    .view-syllabus::after {
        font-size: 24px;
        margin-left: 8px;
    }



.Status-Section {
    background-color: var(--background-color);
    border-radius: 12px;
}

.nav-tabs {
    border-bottom: none !important;
}

#statusTab .nav-link {
    border-radius: 50px;
    padding: 4px 16px;
    display: inline-block;
    background-color: var(--Primary-Surface-1);
    font-size: 16px;
    color: var(--Text-color-4);
}

#statusTab .active {
    background-color: var(--Text-color-1) !important;
    color: var(--Text-color-3) !important;
}

.status-card-icon-missed {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    background-color: #fcdede;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.status-card-icon-completed {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    background-color: #d4f9d4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.status-card-icon-upcoming {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    background-color: #ffe4c4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .card-body {
        height: 100%;
    }

#statusTabContent {
    max-height: 400px;
    overflow-y: auto;
}

#statusTabContent::-webkit-scrollbar {
        width: 6px;
    }
 #statusTabContent::-webkit-scrollbar-thumb {
        background-color: var(--Text-color-1);
        border-radius: 10px;
    }

     #statusTabContent::-webkit-scrollbar-thumb:hover {
            background-color: #aaa;
        }





.status.completed {
    background-color: #d4f9d4;
    color: #28a745;
}

.status.missed {
    background-color: #fcdede;
    color: #dc3545;
}

.status.upcoming {
    background-color: #ffe4c4;
    color: #ff9f43;
}

.status-button .btn-secondary {
    background-color: var(--Secondary-Surface-2) !important;
    border: none;
    color: var(--Text-color-4);
}

.text-primary {
    color: #00796b; /* Primary teal color */
}

.btn-primary {
    background-color: var(--Secomdary-color); /* Yellow button */
    color: var(--Text-color-1);
    border: none; /* Text color for button */
}

    .btn-primary:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Primary-color); /* Slightly darker yellow on hover */
    }

.download-omr .text-omr {
    color: var(--Text-color-4);
    font-size: 20px;
}
@media(max-width:576px){
    .download-omr .text-omr {
        font-size: 16px;
    }
}
.doctor-img{
    height:200px;
}
@media(max-width:576px){
    .doctor-img {
        height: 150px;
    }
}
/*Dashboard Profile----------------------------------------------------------------------------------------------------------------*/
.profile-section-wrapper .profile-pic {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.profile-section-wrapper .edit-icon {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: #fff;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Remaining styles can remain unchanged */

.section-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.Edit-Box {
    background-color: var(--Primary-Surface-1);
}

.Profile strong {
    color: var(--Text-color-1);
}

.card {
    background-color: var(--background-color);
    border: none;
}

.card-header {
    background-color: var(--Primary-Surface-1);
    border-bottom: none;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--Text-color-2);
}
/*.card-header .edit-link {
    color: var(--Text-color-1);
}*/

.card-body .row div {
    font-size: 1rem;
    margin-bottom: 10px;
}

.card-body .value {
    color: var(--Text-color-2);
    font-weight: 500;
}

.card-body .label {
    color: var(--Text-color-4);
    font-weight: 500;
}


.edit-link {
    font-size: 1rem;
    font-weight: 500;
    color: var(--Text-color-1);
    text-decoration: none; /* Ensure no underline by default */
}

    .edit-link:hover {
        text-decoration: none !important; /* Ensure underline is removed */
        color: var(--Text-color-1); /* Maintain original text color */
    }

    .edit-link:focus,
    .edit-link:active {
        color: var(--Text-color-1) !important; /* Maintain consistent color */
        outline: none !important; /* Remove the default outline */
        box-shadow: none !important; /* Remove the focus ring */
    }

.Profile {
    max-width: auto;
}


.Dashboard-primary-btn {
    background-color: var(--Secomdary-color);
    border: none;
    color: var(--Text-color-1);
    font-weight: 600;
    font-family: var(--primary-font);
}

    .Dashboard-primary-btn:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
    }

.Upgrade-plan {
    border-radius: 4px;
    background: linear-gradient(to right, #796CAD, #A290E7);
}

    .Upgrade-plan .Text {
        color: var(--Text-color-3);
        font-size: 1rem;
    }

    .Upgrade-plan .strong {
        color: var(--Text-color-3);
        font-size: 1.5rem;
        font-weight: 600;
    }



     
 /* Ensure second modal appears above the first */
  
/*Dashboard Profile End----------------------------*/

/*Edit accademy Start----------------------------*/

.modal-content {
    border-radius: 8px;
    background-color: var(--Primary-Surface-1);
}

.modal-header h5 {
    color: var(--Text-color-1)
}

.modal-body .form-label {
    font-weight: 500;
    color: var(--Text-color-2);
    font-size: 1rem;
    text-decoration: none; /* Removes underline */
}

.btn-option {
    background-color: var(--background-color);
    color: var(--Text-color-4);
    border: 1px solid var(--Text-color-1);
}

    .btn-option.active,
    .btn-option:hover {
        background-color: var(--Primary-color);
        color: var(--Text-color-3);
    }

.btn-save {
    background-color: var(--Secomdary-color);
    border: none;
    color: var(--Text-color-1);
    font-family: var(--primary-font);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

    .btn-save:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
    }

    .btn-save:disabled {
        background-color: #b0b0b0; /* Grey background */
        color: #ffffff; /* White text */

        opacity: 0.6; /* Slightly transparent */
        border: 1px solid #cccccc; /* Light grey border */
    }

.btn-cancel {
    color: var(--Text-color-2);
    border: 1px solid var(--Stroke-color);
    background-color: var(--background-color);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

    .btn-cancel:hover {
        background-color: var(--Text-color-1);
        color: var(--Text-color-3);
    }


.form-control:focus {
    box-shadow: none !important;
    border-color: var(--Primary-color);
}
/* Custom radio button style */
/* Custom radio button style */
.radio-btn {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--Stroke-color);
    background-color: #fff;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .radio-btn:checked {
        background-color: var(--Primary-color);
        border-color: var(--Primary-color);
    }

        .radio-btn:checked::after {
            content: "";
            position: absolute;
            top: 4px;
            left: 4px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: white;
            transition: all 0.3s ease;
        }

    .radio-btn:hover {
        border-color: var(--Primary-color);
    }

    .radio-btn:focus {
        outline: none;
        box-shadow: none;
    }

/* popup */

/* Custom class for the modal content */
.popup { /* Changed class name here */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2); /* Custom box shadow */
    border: none;
    border-radius: 10px; /* Optional: round the corners */
}

    .popup p {
        font-size: 16px;
    }
    /* Modal header background color */
    .popup .modal-header {
        background-color: #09787C;
        color: var(--Text-color-1);
    }

        .popup .modal-header .modal-title {
            font-size: 20px;
            font-weight: 500;
            color: var(--Text-color-3);
        }


    .popup .modal-body img {
        width: 80px;
        height: 80px;
    }


    .popup .modal-footer button {
        text-transform: uppercase;
        font-weight: bold;
    }

/* Background image for the modal header */
.bg-header {
    background-image: url('../_content/EntranceExamExercise.RCL/images/popupheader.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--Text-color-1);
}


/*Create Test Page Start------------------------------------------*/

.step-card {
    padding: 20px;
    background-color: var(--Primary-Surface-1);
    border-radius: 4px;
    text-align: left;
    position: relative;
    height: 200px;
}

    .step-card h4 {
        color: var(--Text-color-1);
        margin-bottom: 4px;
        z-index: 1;
    }

    .step-card p {
        color: #9e9e9e;
        margin-bottom: 4px;
        z-index: 1;
        font-size: 16px;
        width: 40%;
        word-wrap: break-word; /* Ensure text wraps to the next line */
        text-align: start; /* Optional: Center-align the text */
        margin: 0; /* Center within the container */
        padding: 1px; /* Add some space for readability */
    }

    .step-card img {
        position: absolute;
        bottom: 0px;
        right: -0px;
        width: auto;
        border-radius: 4px;
        z-index: 0;
    }

@media (max-width: 1440px) {
    .step-card img {
        width: 60%; /* Reduce width on large screens */
    }

    .step-card p {
        width: 60%;
    }
}

@media (max-width: 1200px) {
    .step-card img {
        width: 50%; /* Reduce width on large screens */
    }
}

@media (max-width: 992px) {
    .step-card img {
        width: 40%; /* Further reduce width for tablets */
        right: 0px; /* Adjust positioning */
    }
}

@media (max-width: 768px) {
    .step-card img {
        width: 40%; /* Adjust for mobile screens */
        right: 0px;
    }

    .step-card p {
        width: 40%;
    }
}

@media (max-width: 576px) {
    .step-card img {
        width: 40%; /* Make image smaller for small devices */
        right: 0px;
    }

    .step-card p {
        width: 80%;
    }

    .step-card {
        height: 150px;
    }
}

@media (max-width: 320px) {
    .step-card img {
        width: 40%; /* Make image smaller for small devices */
        right: 0px;
    }
}


.create-btn {
    background-color: var(--Secomdary-color);
    border: none;
    color: var(--Text-color-1);
    font-family: var(--primary-font);
    font-size: 20px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
}

    /* Hover effect for the button */
    .create-btn:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
    }



.scheduled-tests {
    --primary-color: #008080; /* Teal color for primary buttons */
    --background-color: #f8faff; /* Light blue background */
}

    /* Ensure body inside .scheduled-tests has the correct styles */
    .scheduled-tests body {
        background-color: var(--background-color);
        font-family: Arial, sans-serif;
    }

    /* Styling for nav-tabs */
    .scheduled-tests .scheduled-nav {
        display: flex;
        flex-wrap: wrap; /* Allows items to wrap */
        list-style-type: none;
        padding-left: 0;
    }

    .scheduled-tests .scheduled-nav-item {
        margin-right: 20px;
    }
    @media(max-width:567px){
        .scheduled-tests .scheduled-nav-item {
            margin-right: 8px;
        }
    }

    .scheduled-tests .scheduled-nav-link {
        font-weight: 500;
        font-size: 20px;
        color: var(--Text-color-2);
        border: none;
        padding: 8px 8px;
        background: none;
        border-radius: 8px;
        transition: all 0.3s ease;
    }
    @media(max-width:576px){
        .scheduled-tests .scheduled-nav-link {
            font-size: 16px;
            padding: 4px 4px;
        }
    }

        .scheduled-tests .scheduled-nav-link.active {
            color: var(--primary-color);
            border: none;
            border-bottom: 3px solid var(--primary-color);
            font-weight: 600;
            background-color: var(--background-color);
        }



    .scheduled-tests .card-body a {
        font-weight: 500;
        font-size: 16px;
        color: var(--primary-color);
        text-decoration: none;
    }

    .scheduled-tests .card-body span {
        font-weight: 500;
        font-size: 20px;
        color: var(--Text-color-2);
        text-decoration: none;
    }

    .scheduled-tests .card-body p {
        font-weight: 500;
        font-size: 16px;
        color: var(--Text-color-4);
        text-decoration: none;
    }

    .scheduled-tests .card-body a:hover {
        text-decoration: underline;
    }

    .scheduled-tests .btn-link-primary {
        font-weight: 500;
        color: var(--primary-color);
       /* background-color:var(--Secomdary-color);*/
        font-size: 20px;
        border: none;
    }
     /*   .scheduled-tests .btn-link-primary:hover {
            background-color: var(--Button-Hover-color);
        }*/
        @media(max-width:576px) {
            .scheduled-tests .btn-link-primary {
            font-size: 20px;
            padding:0px;
        }
    }
.scheduled-card .test-title {
    font-size: 20px;
    color: var(--Text-color-2);
}
@media(max-width:576px){
    .scheduled-card .test-title {
        font-size: 16px;
    }
}

.scheduled-card {
    border-radius: 8px;
    background-color: var(--background-color);
    border: none;
    margin-bottom: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@media(max-width:576px) {
    .scheduled-card {
        padding: 8px;
    }
}



.divider {
    border-left: 2px solid var(--Stroke-color);
    height: 40px;
    margin: 0 20px;
}

.score-container {
    font-size: 20px;
    font-weight: 600;
    color: var(--Text-color-2);
}

.score-label {
    font-size: 16px;
    color: var(--Text-color-4);
}

/*STEP 1*/
/*.modal-backdrop, .offcanvas-backdrop {
    display: none !important;
    opacity: 0 !important;
}*/

.overlay {
    display: none !important; /* Hide unwanted overlays */
}

.modal-step {
    display: none;
}

    .modal-step.active {
        display: block;
    }

.subject-item {
    background-color: var(--background-color);
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--Stroke-color);
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}


    .subject-item input[type="checkbox"] {
        margin-right: 16px;
        margin-left: 10px;
    }


.btn-next {
    background-color: var(--Secomdary-color);
    color: var(--Text-color-1);
    font-weight: 600;
    border-radius: 8px;
    border: none;
    font-size: 20px;
    padding: 10px 20px;
    width: 180px;
}
@media(max-width:576px){
    .btn-next {
        padding: 4px 8px;
        font-size:16px;
    }
}

    .btn-next:hover {
        background-color: var(--Button-Hover-color);
    }

    .btn-next:disabled {
        background-color: #b0b0b0; /* Grey background */
        color: #ffffff; /* White text */
        cursor: not-allowed !important; /* Show a not-allowed cursor */
        opacity: 0.6; /* Slightly transparent */
        border: 1px solid #cccccc; /* Light grey border */
    }
/* Style the checkbox */
.styled-checkbox {
    width: 20px;
    height: 20px;
    resize: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid var(--Text-color-4);
    border-radius: 4px;
    background-color: white;
    position: relative;
}
    /* Style the checkbox when checked */
    .styled-checkbox:checked {
        background-color: var(--Primary-color) !important;
        border-color: var(--Primary-color) !important;
    }

        /* Add a checkmark when checked */
        .styled-checkbox:checked::after {
            content: "";
            position: absolute;
            left: 6px;
            top: 1px;
            width: 8px;
            height: 12px;
            border: 1px solid white;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }

.form-check-input {
    width: 20px;
    height: 20px;
    resize: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid var(--Text-color-4);
    border-radius: 4px;
    background-color: white;
    outline: none !important;
    box-shadow: none !important;
}
    /* Style the checkbox when checked */
    .form-check-input:checked {
        background-color: var(--Primary-color) !important;
        border-color: var(--Primary-color) !important;
    }

.btn-close {
    background: transparent;
    border: none;
    padding: 0;
}

.modal-heading {
    font-size: 32px;
}
@media(max-width:576px){
    .modal-heading {
        font-size:24px;
    }
}


/*STEP 2*/
/* Custom Styles */

.custom-modal-container .modal-step {
    margin-bottom: 20px;
}

.custom-modal-container .subject-collapse button {
    text-align: left;
    width: 100%;
}

.custom-modal-container .form-check {
    margin-left: 30px;
}

.custom-modal-container .nav-link.active {
    background-color: #007bff;
    color: white;
}

.custom-modal-container .modal-step {
    display: none;
}

    .custom-modal-container .modal-step.active {
        display: block;
    }

.custom-modal-container .subject-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .custom-modal-container .subject-item:hover {
        background-color: #f8f9fa;
    }

    .custom-modal-container .subject-item input[type="checkbox"] {
        margin-right: 15px;
    }

/*.custom-modal-container .subject-icon {
    font-size: 24px;
    margin-right: 15px;
}*/

.custom-modal-container .collapse-content {
    max-height: 200px;
    overflow-y: auto;
    background-color: #FFFFFF;
    border-radius: 8px;
}

.custom-modal-container .dropdown-icon {
    transition: transform 0.3s ease;
}

.custom-modal-container .toggle-btn[aria-expanded="true"] .dropdown-icon {
    transform: rotate(180deg);
}

.form-check-label {
    color: var(--Text-color-2);
    font-size: 16px;
}

.subject-item span {
    font-weight: 500;
    color: var(--Text-color-2);
    font-size: 1rem;
    text-decoration: none !important; /* Removes underline */
}

.scrollspy-sidebar {
    scrollbar-width: thin; /* Thinner scrollbar */
    scrollbar-color: #09787C #EAEAEA; /* Thumb color and track color */
}

/*Step-3*/
.Question-time .form-label {
    color: var(--Text-color-1);
    font-size: 16px;
    font-weight: 500;
}

.modal-body {
    padding: 24px;
    background-color: var(--background-color);
}
@media(max-width:576px){
    .modal-body {
        padding: 16px;
    }
}

/*TEST CREATED*/
.btn-Takelater-secondary {
    color: var(--Text-color-1);
    border: 1px solid var(--Stroke-color);
    background-color: var(--background-color);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

    .btn-Takelater-secondary:hover {
        background-color: var(--Text-color-1);
        color: var(--Text-color-3);
    }

.btn-Begin {
    background-color: var(--Secomdary-color);
    border: none;
    color: var(--Text-color-1);
    font-family: var(--primary-font);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

    .btn-Begin:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
    }

.btn-twonext[disabled] {
    opacity: 1;
    cursor: not-allowed !important;
    background-color: var(--Secomdary-color);
    color: var(--Text-color-1);
}

.btn-twonext {
    background-color: var(--Secomdary-color);
    color: var(--Text-color-1);
    font-weight: 600;
    border-radius: 8px;
    border: none;
    font-size: 20px;
    padding: 10px 20px;
    width: 180px;
}

    .btn-twonext:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
    }
/*Test Page*/
.timer p {
    margin-bottom: 0px;
}

@media (max-width:576px) {
    .timer p {
        font-size: 16px;
    }
}
.clock-icon{
    height:24px;
    width:24px;
}
.main {
    overflow-x: hidden;
}
.Test {
    overflow-x: hidden;
}
    .Test .Test-card {
        margin-top: 72px !important;
        background-color: var(--background-color);
        border-radius: 8px;
        border: 1px solid var(--Stroke-color);
        padding: 15px;
        height: 100vh;
    }
.middle-bar {
    margin-top: 72px !important;
    background-color:var(--Primary-Surface-1)!important;
    padding: 10px;
    margin-top: 50px; /* space for fixed top */
    margin-bottom: 50px; /* space for fixed bottom */
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
}
.scroll-content {
    overflow-y: auto;
    background-color: var(--background-color) !important;
    padding: 16px;
    border-radius: 10px;
    flex: 1;
}
.Test-section-wrapper {
    overflow-y: hidden;
    overflow-x: hidden;
}
.full-height {
    height: 100vh;
}

.Test-offcanvas-toggle {
    margin-bottom: 8px;
    height: 40px; /* Full height minus top and bottom nav */
    overflow-y: hidden;
    overflow-x: hidden;
}

.Test-bottom-nav {
    background-color: var(--background-color);
}

.btn-begin-test {
    background-color: var(--Secomdary-color);
    border: none;
    color: var(--Text-color-1);
    font-weight: 600;
    font-family: var(--primary-font);
    max-width: 250px;
}

    .btn-begin-test:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
    }

.introduction-content strong {
    color: var(--Text-color-2)!important;
    font-size:16px;
}

.introduction-content p {
    color: var(--Text-color-4);
}

.introduction-content li {
    color: var(--Text-color-4);
}

.introduction-content h4,
.introduction-content h5 {
    color: var(--Text-color-2);
}
/*Question pallet*/
.question-pallet-container {
    padding: 16px;
}

.status-key {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .status-key span {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .status-key .circle {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        cursor: pointer;
        border: none;
    }

.question-pallet-container .answered {
    background-color: #79BD92;
    border: none;
}

.question-pallet-container .not-answered {
    background-color: #ED9191;
    border: none;
}

.question-pallet-container .not-viewed {
    background-color: var(--background-color);
    border: none;
}

.question-pallet-container .marked {
    background-color: #FFDD75;
    border: none;
}

.question-grid {
    display: grid;
    grid-template-columns: repeat(5, 40px);
    grid-auto-rows: 40px;
    gap: 8px;
    width: calc(5 * 40px + 4 * 8px);
    max-height: 425px;
    overflow-y: auto;
    overflow-x: hidden;
}

    .question-grid button {
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 8px;
        background-color: var(--background-color);
    }

    .question-grid::-webkit-scrollbar {
        width: 6px;
    }

    .question-grid::-webkit-scrollbar-thumb {
        background-color: var(--Text-color-1);
        border-radius: 10px;
    }

        .question-grid::-webkit-scrollbar-thumb:hover {
            background-color: #aaa;
        }

.offcanvas-header {
    border-bottom: 1px solid #ddd;
}

#offcanvasPhysics, #leftOffcanvas {
    max-width: 300px;
    background-color: var(--Secondary-Surface-2);
}

/*    .subject-palette-btn {
        position: absolute;
        top: 60px;
        left: 0px;
    }*/

.vertical-button-subject {
    background-color: var(--background-color);
    border: 1px solid var(--Stroke-color);
    border-radius: 0px 8px 8px 0px; /* Top-left, Top-right, Bottom-right, Bottom-left */
    padding: 4px 4px 4px 4px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

    .vertical-button-subject .text {
        display: block;
        font-weight: 500;
        font-size: 16px;
    }
/*
    .question-palette-btn {
        position: absolute;
        top: 60px;
        right: 0px;
    }*/

.vertical-button-question {
    background-color: var(--background-color);
    border-top: 1px solid var(--Stroke-color);
    border-right: none;
    border-bottom: 1px solid var(--Stroke-color);
    border-left: 1px solid var(--Stroke-color);
    border-radius: 8px 0px 0px 8px; /* Top-left, Top-right, Bottom-right, Bottom-left */
    padding: 4px 4px 4px 4px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

    .vertical-button-question .text {
        display: block;
        font-weight: 500;
        font-size: 16px;
    }

/*Bottom nav bar*/
.Next-Preview-btn .circle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 2px solid var(--Text-color-1);
    background-color: transparent;
    color: var(--Text-color-1);
    transition: all 0.3s ease;
}

.circle-btn svg {
    width: 24px;
    height: 24px;
    stroke: var(--Text-color-1);
    transition: stroke 0.3s ease;
}

.circle-btn:hover {
    background-color: var(--Text-color-1);
    color: white;
}

    .circle-btn:hover svg {
        stroke: white;
    }

.circle-btn.filled svg {
    stroke: white;
}

.circle-btn.filled {
    background-color: var(--Text-color-1);
    color: white;
    border-color: var(--Text-color-1);
}

    .circle-btn.filled:hover {
        background-color: var(--Text-color-1);
        border-color: var(--Text-color-1);
    }

@media (max-width:768px) {
    .Next-Preview-btn .circle-btn {
        width: 32px;
        height: 32px;
        margin-bottom:40px;
    }
}

.btn-mark-for-review {
    font-size: 20px;
    color: var(--Text-color-1);
}

@media (max-width:576px) {
    .btn-mark-for-review {
        font-size: 16px;
    }
}

.btn-mark-for-Previous:disabled, .btn-Save-test:disabled {
    opacity: 0.5; 
    background-color: gray; 
    color: white; 
    pointer-events: none; 
}

.btn-mark-for-Previous {
    background-color: var(--background-color);
    border: 2px solid var(--Stroke-color);
    color: var(--Text-color-1);
    font-weight: 600;
    font-family: var(--primary-font);
    max-width: 250px;
    font-size: 20px;
}

    .btn-mark-for-Previous:hover {
        background-color: #09787C;
        color: white;
        border-color: #09787C;
    }

@media (max-width:576px) {
    .btn-mark-for-Previous {
        font-size: 16px;
    }
}

.btn-Save-test {
    background-color: var(--Secomdary-color);
    border: none;
    color: var(--Text-color-1);
    font-weight: 600;
    font-family: var(--primary-font);
    max-width: 250px;
    font-size: 20px;
}

    .btn-Save-test:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
    }

@media (max-width:576px) {
    .btn-Save-test {
        font-size: 16px;
    }
}

.bookmark-btn {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

@media (max-width:576px) {
    .bookmark-btn {
        width: 24px;
        height: 24px;
    }
}

.answered {
    background-color: #79BD92;
    color: var(--Text-color-3);
}

.not-answered {
    background-color: #ED9191;
    color: var(--Text-color-3);
}

.review {
    background-color: #FFDD75;
    color: var(--Text-color-2);
}

.bookmark-btn:active {
    transform: scale(0.9);
}

.hidden {
    display: none;
}

.Option {
    max-width: 600px;
}


.option-box {
    border: 2px solid #ccc;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.3s;
    border-radius: 8px;
}

    .option-box p {
        margin-bottom: 0px;
    }

    .option-box:hover {
        border-color: #09787C;
    }

    .option-box.selected {
        border-color: #09787C;
    }

/* Custom Radio Button */
.radio-input {
    display: none; /* Hide the default radio button */
}

    .radio-input + label {
        position: relative;
        padding-left: 30px;
        cursor: pointer;
    }

        .radio-input + label::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            border-radius: 50%;
            background-color: white;
            transition: all 0.3s;
        }

    /* When radio button is selected */
    .radio-input:checked + label::before {
        background-color: #09787C;
        border-color: #09787C;
    }

    .radio-input:checked + label {
        color: #09787C;
    }

.clear-btn {
    background-color: #f8f9fa;
    color: #09787C;
    border: 1px solid #ccc;
}

    .clear-btn:hover {
        background-color: #09787C;
        color: white;
        border-color: #09787C;
    }

#questionNo {
    font-size: 20px;
    color: var(--Text-color-2);
    font-weight: 600;
}
/* Extra small screens */
@media (max-width: 576px) {
    #questionNo {
        font-size: 16px;
    }
}
/*Test page subject bar*/
.Subject-Top {
    color: var(--Text-color-2);
    font-size: 24px;
    font-weight: 600;
}

@media (max-width:576px) {
    .Subject-Top {
        font-size: 16px;
    }
}

.text-Information {
    color: var(--Text-color-2);
    font-size: 16px;
    font-weight: 500;
}

.text-danger {
    font-size: 24px;
    font-weight: 600;
}

.btn-back-test {
    color: var(--Text-color-1);
    border: 1px solid var(--Stroke-color);
    background-color: var(--background-color);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    max-width: 140px;
}

    .btn-back-test:hover {
        background-color: var(--Text-color-1);
        color: var(--Text-color-3);
    }

.btn-submit-test {
    background-color: var(--Secomdary-color);
    border: none;
    color: var(--Text-color-1);
    font-family: var(--primary-font);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    max-width: 140px;
}

    .btn-submit-test:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
    }

.Not-Answered {
    background-color: #ED9191;
    border: none;
}

.Answered {
    background-color: #79BD92;
    border: none;
}

.Not-Viewed {
    background-color: var(--background-color);
    border: 1px solid var(--Stroke-color);
    color: var(--Text-color-2);
}

.Mark-for-Review {
    background-color: var(--Secomdary-color);
}

#testModal li {
    color: var(--Text-color-2);
    font-size: 16px;
    font-weight: 500;
}

#testModal p {
    color: var(--Text-color-4);
    font-size: 16px;
    font-weight: 500;
}

.explanation {
    color: var(--Text-color-2);
}
.question-header p {
    margin-bottom: 0px;
}
.question-header{

}
/*Report*/
.Mark-card {
    border: none;
    border-radius: 8px;
    background-color: white;
}

.chart-container {
    height: 120px;
    width: 120px;
    margin: auto;
}
.chart-strong {
    font-size: 20px !important  ;
    color: var(--Text-color-1) !important;
}
    .title-reoprt {
        color: var(--Text-color-2) !important;
    }
.score-card h5 {
    color: var(--Text-color-4) !important;
}
.score-card h3 {
    color: var(--Text-color-1) !important;
}

.view-reports-btn {
    border: 1.5px solid var(--Primary-color);
    color: var(--Text-color-1);
    font-weight:600;
    font-size:16px;
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    transition: background-color 0.3s, color 0.3s;
}

    .view-reports-btn:hover {
        background-color: var(--Primary-color);
        color: var(--Text-color-3);
    }

.legend {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

    .legend-item span {
        width: 24px;
        height: 24px;
        display: inline-block;
        margin-right: 8px;
        border-radius: 50%;
    }

.Mark-card, .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

    .Mark-card h4 {
        color: var(--Text-color-4);
        font-size: 20px;
    }

.row {
    display: flex;
    flex-wrap: wrap;
}

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

.g-2 {
    gap: 1rem;
}


.stats h5 {
    color: var(--Text-color-4);
}

.tab-subject span {
    font-size: 16px;
    color: var(--Text-color-4);
}

.legend-item h6{
    color: var(--Text-color-4);
}

.btn-View-Solution {
    background-color: var(--background-color);
    border: 2px solid var(--Stroke-color);
    color: var(--Text-color-1);
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 8px;
    width: 200px;
}

    .btn-View-Solution:hover {
        background-color: var(--Text-color-1);
        color: var(--Text-color-3);
    }

.btn-Re-Attempt {
    background-color: var(--Secomdary-color);
    color: var(--Text-color-1);
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 8px;
    width: 200px;
}

    .btn-Re-Attempt:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
    }


.subject-nav-tabs .nav-item-subject {
    margin-right: 20px;
}

.subject-nav-tabs .nav-link-subject {
    font-weight: 500;
    font-size: 20px;
    color: var(--Text-color-2);
    border: none;
    padding: 8px 8px;
    background: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .subject-nav-tabs .nav-link-subject.active {
        color: var(--primary-color);
        border: none;
        border-bottom: 3px solid var(--Text-color-1);
        font-weight: 600;
        background-color: var(--background-color);
    }

.correct-box {
    border: 3px solid #79BD92;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 8px;
    display:flex;
    align-items:center;
    justify-content:start;
}
    .correct-box p {
        margin-bottom: 0px;
    }
    .wrong-box {
        border: 3px solid #ED9191;
        padding: 15px;
        margin-bottom: 10px;
        cursor: pointer;
        border-radius: 8px;
    }
        .wrong-box p {
            margin-bottom: 0px;
        }
.attempt-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border: 1px solid var(--Stroke-color);
    border-radius: 8px;
    margin-bottom: 12px;
    background-color: white;
}

.attempt-item-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}
    .attempt-item-icon .logo {
        width: 36px !important;
        height: 36px !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.report-link {
    color: var(--Text-color-1);
    text-decoration: none;
    font-weight: 500;
}

    .report-link:hover {
        text-decoration: underline;
        color: var(--Text-color-1);
    }
#re-attempt-modal{
    font-family:var(--primary-font);
}
.attempt-subtitle {
    color: var(--Text-color-4);
}
/*Bookmark*/
.bookmark-container {
    width: 100%;
    margin: auto;
    padding: 20px;
    background-color: var(--background-color);
    border-radius: 8px;
}

.bookmark-title {
    font-size: 1.5rem;
}

.bookmark-subtitle {
    color: gray;
}

.bookmark-container .card-custom {
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
}

.bookmark-container .physics {
    background-color: #d3effb;
}

.bookmark-container .chemistry {
    background-color: #fde8e4;
}

.bookmark-container .botany {
    background-color: #e5f7d8;
}

.bookmark-container .zoology {
    background-color: #fdecd5;
}

.bookmark-container .question-count {
    color: gray;
    font-weight: normal;
}

.study-material .section-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--Text-color-2);
}

.previous-questions .section-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--Text-color-2);
}

.card-custom {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    /* transition: transform 0.2s ease;*/
}

    /*  .card-custom:hover {
        transform: translateY(-5px);
    }*/

    .card-custom img {
        width: 150px;
        height: 90px;
    }

    .card-custom h5 {
        font-size: 1.2rem;
        margin-top: 10px;
    }

.study-material h4 {
    color: var(--Text-color-2);
    font-weight: 500;
}

.previous-questions h4 {
    color: var(--Text-color-2);
    font-weight: 500;
}

.subject-btn {
    border-radius: 10px;
}

.module-card {
    background-color: white;
    border-radius: 10px;
    padding: 15px;
}

.doc-card {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

    .doc-card img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }

.doc-arrow {
    margin-left: auto;
}

.science-tabs-container .nav-tabs {
    border-bottom: none;
}

.science-tabs-container .nav-item .nav-link {
    border: 1px solid var(--Stroke-color);
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 20px;
    color: var(--Text-color-1);
}

    .science-tabs-container .nav-item .nav-link:hover {
        background-color: #e9ecef;
    }

    .science-tabs-container .nav-item .nav-link.active {
        background-color: var(--Text-color-1) !important;
        color: var(--Text-color-3) !important;
    }

.science-tabs-container #scienceTabsContent {
    background-color: var(--background-color);
}

.subjectandchapter h4 {
    color: var(--Text-color-2);
    font-weight: 500;
}

.doc-card span {
    font-size: 20px;
}
/*MyProgress*/
.form-selects{
    max-width:300px !important;
}
.form-select:focus {
    box-shadow: none !important;
    outline: var(--Text-color-1) !important;
    border: 1px solid var(--Text-color-1) !important;
}
.form-select option:hover {
    background-color: var(--Text-color-1)!important;
    color: var(--Text-color-3)!important;
}
.table-responsive td {
    font-size: 16px;
    color: var(--Text-color-4);
}

.table-responsive th {
    font-size: 20px;
    color: var(--Text-color-1);
}

.table-responsive {
    border-radius: 8px;
}

.myprogress h4 {
    color: var(--Text-color-2);
    font-weight: 500;
}

.myprogress p {
    color: var(--Text-color-4);
    font-size: 16px;
}

.btn-status {
    background-color: var(--Secomdary-color);
    color: var(--Text-color-1);
    font-weight: 600;
}

    .btn-status:hover {
        background-color: var(--Button-Hover-color);
    }
/*MockTest*/
.test-card-score {
    background-color: white;
    border-radius: 8px;
    padding: 16px;
    margin: 8px;
    max-width: 400px;
}

@media (max-width: 576px) {
    .test-card-score {
        max-width: 100%;
    }
}

.test-card {
    background-color: white;
    border-radius: 8px;
    padding: 15px;
}

.status-badge {
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
}

.status-active {
    background-color: #E6FFE0;
    color: #399223;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px !important;
    font-weight: 500;
}

.status-upcoming {
    background-color: #FFEEDE;
    color: #F37E4F !important;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px !important;
    font-weight: 500;
}

.status-missed {
    background-color: #FFEAEA;
    color: #FF7878 !important;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px !important;
    font-weight: 500;
}

.status-upgrade {
    background-color: var(--bs-gray-500);
    color: var(--Text-color-3);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px !important;
    font-weight: 500;
    max-width: 124px;
}

    .status-upgrade img {
        height: 24px;
        width: 24px;
    }


.begin-test-btn {
    background-color: var(--Secomdary-color);
    color: var(--Text-color-1);
    font-weight: 600;
}

    .begin-test-btn:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
    }
    .begin-test-btn:disabled {
        opacity: 0.4;
        background-color: gray;
        color: white;
        pointer-events: none;
    }

.view-syllabus-btn {
    background-color: var(--Primary-Surface-1);
    /* border:1px solid var(--Text-color-1);*/
    color: var(--Text-color-1);
    font-weight: 600;
}

    .view-syllabus-btn:hover {
        background-color: var(--Text-color-1);
        color: var(--Text-color-3);
    }

.disabled-button {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
    pointer-events: auto; /* ensures clicking still works */
}


/*Completed test*/


.icon {
    font-size: 18px;
    color: #007bff;
}

.score-box {
    background-color: #e9f5eb;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.attempt-box {
    background-color: #fdf1dc;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.mock-test span {
    font-size: 16px;
}

.mock-test p {
    font-size: 16px;
}

.mock-test h4 {
    color: var(--Text-color-2);
}

.mock-test h6 {
    color: var(--Text-color-2);
}
/*Create Test*/
.creat-test-card {
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    text-align: left;
    position: relative;
    max-width: 440px;
}

    .creat-test-card h4 {
        color: var(--Text-color-1);
        margin-bottom: 4px;
        z-index: 1;
    }

    .creat-test-card p {
        color: #9e9e9e;
        margin-bottom: 4px;
        z-index: 1;
        font-size: 16px;
        width: 40%;
        word-wrap: break-word; /* Ensure text wraps to the next line */
        text-align: start; /* Optional: Center-align the text */
        margin: 0; /* Center within the container */
        padding: 1px; /* Add some space for readability */
    }

    .creat-test-card img {
        position: absolute;
        bottom: 0px;
        right: -0px;
        width: auto;
        border-radius: 4px;
        z-index: 1;
    }

.Get-Started-button {
    position: relative;
    background-color: var(--Secomdary-color); /* Light yellow */
    color: var(--Text-color-1); /* Teal */
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 200;
    max-width: 150px;
}

    .Get-Started-button:hover {
        background-color: var(--Button-Hover-color); /* Slightly darker yellow */
    }


.score-box h4 {
    color: #357855;
}

.score-box p {
    color: #357855;
}

.attempt-box h4 {
    color: #A46825;
}

.attempt-box p {
    color: #A46825;
}

.filter-btn {
    cursor: pointer;
       
}

.offcanvas-header-filter {
    background-color: var(--Text-color-1);
    color: var(--Text-color-3)
}

.offcanvas-body-filter {
    background-color: var(--Primary-Surface-1)
}


.icon-circle {
    background-color: var(--Text-color-1); /* Teal background */
    color: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.divider-test {
    border-left: 2px solid var(--Stroke-color); /* Light grey border */
    height: 60px;
    margin: auto 20px;
}

.section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--Text-color-2);
}

.section-value {
    font-size: 18px;
    font-weight: 600;
}

    .section-value span {
        color: var(--Text-color-1); /* Teal color for highlights */
    }

.test {
    background-color: white;
    border-radius: 8px;
    padding: 15px;
    max-width: 480px;
}

/*Syllabus Page-------------------------------*/
.syllabus{
    font-family:var(--primary-font);
}
.syllabus .table th {
    background-color: #09787C;
    color: #fff;
    font-weight: 500;
}

.syllabus .status-badge {
    background-color: #ffebd2;
    color: #f7944d;
    font-weight: 500;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
}

    .syllabus .subject-header {
        background-color: #09787C;
        font-weight: 500;
        color: #E9F1F1;
        border-radius: 4px 4px 0 0; /* top-left, top-right, bottom-right, bottom-left */
        padding: 8px;
    }

.syllabus .subject-sub-header {
    color: #09787C;
}

.syllabus .syllabus-card {
    border-radius: 8px;
    border: none;
    background-color: var(--background-color);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
    
    justify-content: flex-start; /* Adjust alignment */
}

/*study-materials=========================================*/
.edu-ui {
    position: fixed;
}
@media(max-width:768px){
    .edu-ui {
        margin-bottom: 150px;
    }
}
.edu-ui .sidebar {
    background: #f8f9fa;
    overflow-y: auto;
    margin-bottom: 150px;
    min-height: 400px;
    max-height: calc(100vh - 200px);
}
     .sidebar .position-sticky {
        background: #f8f9fa;
    }

.edu-ui .nav-link {
    color: var(--Text-color-2);
    border-bottom: 1px solid var(--Stroke-color);
}

    .edu-ui .nav-link.active {
        background-color: #09787C;
        color: white;
    }
    .edu-ui .nav-link:hover {
        background-color: var(--bs-gray-300);
    }
.edu-ui .btn-primary {
    color: var(--Text-color-3);
    background-color: var(--Text-color-1);
    font-size: 20px;
    padding: 8px 20px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
    .edu-ui .btn-primary:hover {
        box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    }
    .edu-ui .btn-primary:active {
        color: var(--Text-color-3);
        background-color: var(--Text-color-1);
    }

    @media(max-width:576px) {
        .edu-ui .btn-primary {
        color: var(--Text-color-3);
        background-color: var(--Text-color-1);
        font-size: 16px;
        padding: 8px 8px;
    }
}
.edu-ui .subject-theory {
    background-color: var(--Primary-Surface-1);
    font-family: var(--primary-font);
    overflow-y: auto;
    margin-bottom: 80px;
    min-height: 400px;
    max-height: calc(100vh - 150px); /* Adjust based on your header/footer */
}
        .edu-ui .subject-theory h4 {
            color: var(--Text-color-1);
        }
        .edu-ui .subject-theory h6, p {
            color: var(--Text-color-2);
        }
        .edu-ui .subject-theory p {
            color: var(--Text-color-4);
        }
.text-justify {
    text-align: justify;
}



.edu {
    background: #f8f9fa;
    margin-bottom: 80px;
    height: 750px;
    overflow-y: auto;
}

.edu .nav-link {
    color: var(--Text-color-2);
    border-bottom: 1px solid var(--Stroke-color);
}

    .edu .nav-link.active {
        background-color: #09787C;
        color: white;
    }

    .edu .nav-link:hover {
        background-color: var(--bs-gray-300);
    }

.edu .btn-primary {
    color: var(--Text-color-3);
    background-color: var(--Text-color-1);
    font-size: 20px;
    padding: 8px 20px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

    .edu .btn-primary:hover {
        box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    }

    .edu .btn-primary:active {
        color: var(--Text-color-3);
        background-color: var(--Text-color-1);
    }


/* News -----------------------------------------------------------------------------------------------------------------------*/

.table-fixed {
    width: 100%;
}

    .table-fixed th, .table-fixed td {
        white-space: nowrap;
    }

.News {
    margin-top: 116px;
    font-family:var(--primary-font);
}

@media(max-width:768px) {
    .News {
        margin-top: 60px;
    }
}

/*Create Test-------------------------*/
/*------------------------------------*/
.sub-chapter{
    border-radius:8px;
}
/* Remove blue focus shadow */
.sub-chapter .accordion-button{
    box-shadow: none !important;
    outline: none !important;
}

/* Optional: Customize button appearance */
.sub-chapter .accordion-button, .form-check-input: {
    background-color: transparent !important;
}

    .sub-chapter .accordion-button:not(.collapsed) {
        background-color: #f8f9fa !important; /* Light gray when expanded */
    }
.arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

    .arrow.rotate {
        transform: rotate(90deg);
    }

.All-Sub .subject-item{
    cursor:pointer;
}

    .Q-stage {
        background-color: #ffffff !important;
    }
.Question-time .form-control {
    max-width: 400px !important;
}
.share-link h6{
    font-size:14px;
}

.PrivatePolicy{
    margin-top:40px;
    font-family:var(--primary-font);
}
@media(max-width:1200px){
    .PrivatePolicy {
        margin-top:32px;
    }
}
.PrivatePolicy p, li {
    color: var(--Text-color-4);
}
.PrivatePolicy h3 {
    color: var(--Text-color-1);
}
.Result table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.Result th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: start;
}

.Result th {
    background-color: #f4f4f4;
}
.Result p, ul, li{
    color:var(--Text-color-4);
}
.Result h1, h2, h3, h4, h5, h6 {
    color: var(--Text-color-1);
}

.Result .highlight {
    font-weight: bold;
}
.Result .text-danger{
    font-size:16px;
}
.Result .text-danger
.Result{
    font-family:var(--primary-font);
}
.Result strong {
    color: var(--Text-color-2)!important;
}
    .error-container h1 {
        font-size: 80px;
        font-family: var(--primary-font);
        color: var(--Text-color-1) !important;
    }
.error-container h3 {
    font-size: 24px;
    font-family: var(--primary-font);
    color: var(--Text-color-2);
}
.error-container p {
    font-size: 16px;
    font-family: var(--primary-font);
    color: var(--Text-color-4);
}
.error-container {
    margin-top: 80px;
}
.All-Sub .btn-option {
    background-color: #f8f9fa; /* Light gray background */
    color: var(--Text-color-1) !important; /* Bootstrap's default text color */
    padding: 0.5rem 1rem;
    border-radius: 8px; /* Rounded corners */
    transition: background-color 0.3s, box-shadow 0.3s;
    width: 100%; /* Full width for mobile */
    text-align: left;
    gap: 0.75rem; /* Space between image and text */
}

    .All-Sub .btn-option:hover,
    .All-Sub .btn-option:focus {
        background-color: var(--Text-color-1);
        color: var(--Text-color-3) !important; /* Slightly darker on hover */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        text-decoration: none;
        outline: none;
    }

    .All-Sub .btn-option img {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }


/* Responsive adjustments if needed */
@media (min-width: 768px) {
    .All-Sub .btn-option {
        width: auto;
    }
}


.btn[disabled] {
    opacity: 0.5;
    background-color: gray;
    color: white;
    pointer-events: none;
}

.PYQs-Content{
    font-family:var(--primary-font) !important;
}
    .PYQs-Content h2 {
        color: var(--Text-color-1);
        font-weight: bold;
        margin-bottom: 1rem;
        font-family: var(--primary-font);
    }
    .PYQs-Content h4 {
        color: var(--Text-color-1);
        margin-bottom: 1rem;
        font-family: var(--primary-font);
    }
    .PYQs-Content p {
        color: var(--Text-color-4);
        font-family: var(--primary-font);
        font-size:20px;
    }
    @media(max-width:576px){
        .PYQs-Content p {
            font-size:16px;
        }
    }
.PYQs-Content strong {
    color: var(--Text-color-2);
}
.PYQs-Content li {
    color: var(--Text-color-4);
    font-family: var(--primary-font);
    font-size: 20px;
}
.PYQs-Content th {
    color: var(--Text-color-1);
    font-family: var(--primary-font);
    font-size: 20px;
}
.PYQs-Content a {
    color: var(--Text-color-2);
    font-family: var(--primary-font);
    font-size: 20px;
}

    .PYQs-Content a:hover {
        color: var(--Text-color-1) !important;
        text-decoration: underline !important;
    }
.PYQs-Content .table th {
    background-color: #F4f4f4 !important;
}
.PYQs-Content .btn-status {
    all: unset !important;
    color: var(--Text-color-1) !important;
    background-color: var(--Secomdary-color)!important;
    color: var(--Text-color-1)!important;
    font-weight: 600!important;
    padding:8px!important;
    border-radius:4px!important;
}
.PYQs-Content img{
    height:24px;
    width:24px;
}



.doubt-section .bottom-nav {
    background-color: white;
    border-top: 1px solid #ccc;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding: 0.5rem;
}

.doubt-section .nav-item-custom {
    flex: 1;
    text-align: center;
    color: teal;
    border: none !important;
    background-color: white !important;
}

    .doubt-section .nav-item-custom.active {
        background-color: #e0eeee !important;
        border-radius: 15px;
        padding: 0.5rem;
        border:none !important;
    }

    .doubt-section .nav-item-custom i {
        font-size: 1.5rem;
        display: block;
    }

    .doubt-section .nav-item-custom span {
        font-size: 0.9rem;
    }



.cameras .ocr-image {
    width: 100%;
    border-radius: 12px;
    display: block;
}

.cameras .capture-controls {
    display: flex;
    justify-content: space-around;
    padding: 1rem;
}

.cameras .search-area {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1rem;
}

    .cameras .search-area textarea {
        flex: 1;
        resize: vertical;
        
    }
.crop-container{
    height:400px !important;
}
.pagination{
    margin-bottom:85px;
}
.pagination .btn-primary {
    background-color: var(--Secomdary-color);
    color: var(--Text-color-1);
}
    .pagination .btn-primary:hover {
        background-color: var(--Button-Hover-color);
        color: var(--Text-color-1);
    }
    .pagination .btn-outline-primary {
        border: 1px solid var(--Text-color-1);
        color: var(--Text-color-1);
    }
    .pagination .btn-outline-primary.active {
        background-color: var(--Text-color-1);
        color: var(--Text-color-3);
    }
        .pagination .btn-outline-primary:hover {
            background-color: var(--Text-color-1);
            color: var(--Text-color-3);
            border: 1px solid var(--Text-color-1);
        }


.cropper-point {
    width: 20px !important;
    height: 20px !important;
    background-color: var(--Text-color-1) !important; /* Optional: green handles */
    border-radius: 50% !important;
}

    .cropper-point.point-se,
    .cropper-point.point-sw,
    .cropper-point.point-nw,
    .cropper-point.point-ne {
        cursor: pointer;
    }
.app-banner {
    padding: 2rem 2rem;
    background: var(--Secomdary-color);
    background: linear-gradient(80.16deg, #ee7b92, #bf59c2 50%, #a63ddd 75%, #8400ff);
    border-radius: 8px;
}
.app-banner-hedder h2{
    font-size: 32px !important;
    color: white;
    font-weight:600;
}
.app-banner-hedder p{
    color: white;
}
  
    .btn-google {
        color: white;
        padding: 10px 20px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        font-weight: 500;
    }

    .btn-google img {
        height: 64px;
        margin-right: 10px;
    }

.qr-img {
    height: 64px;
    margin-left: 20px;
}

.app-mockup {
    max-height: 400px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    border-radius: 1.8rem;
}
#subChapterAccordion .accordion-button:not(.collapsed) {
    background-color:var(--bs-gray-200);
    color: var(--Text-color-2);
}
#subChapterAccordion,
#subChapterAccordion .accordion-body {
    height: auto !important;
    overflow: visible;
    display: block;
}
    #subChapterAccordion,
    #subChapterAccordion .accordion-body strong {
        color: var(--Text-color-1)!important;
        font-size: 16px !important;
        font-family: var(--primary-font);
    }
        #subChapterAccordion,
        #subChapterAccordion .accordion-body p {
            font-size: 14px;
            font-family: var(--primary-font);
        }
.subject-materials {
    text-transform: capitalize;
}