@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

*, body, h1, h2, h3, h4, h5, h6, p, span, a, button, input, select, textarea, .btn, .title, .subtitle, .nav-link, .dropdown-item, .category-type1-title, .lms1-cCard-title, label, figure, div {
    font-family: 'Cairo', Tahoma, sans-serif !important;
}

@import url("../fonts/inter/stylesheet.css");
/* font-family: 'Inter'; */

/* font-family: 'SF Pro Display'; */
@import url("../fonts/space-grotesk/stylesheet.css");
/* font-family: 'Space Grotesk'; */
@import url("../fonts/epilogue/stylesheet.css");
/* font-family: 'Epilogue'; */
@import url("../fonts/roboto/stylesheet.css");
/* font-family: 'Roboto'; */
@import url("../fonts/general-sans/stylesheet.css");
/* font-family: 'General Sans'; */
@import url("../fonts/source-code-pro/stylesheet.css");
/* font-family: 'Source Code Pro'; */
@import url("../fonts/plus-jakarta-sans/stylesheet.css");
/* font-family: 'Plus Jakarta Sans'; */

.d-hidden {
    display: none;
}

.cursor-pointer {
    cursor: pointer;
}

.mt-5px {
    margin-top: 5px !important;
}

.mt-6px {
    margin-top: 6px !important;
}

.mt-7px {
    margin-top: 7px !important;
}

.mt-8px {
    margin-top: 8px !important;
}

.mt-9px {
    margin-top: 9px !important;
}

.mt-10px {
    margin-top: 10px !important;
}

.mt-11px {
    margin-top: 11px !important;
}

.mt-12px {
    margin-top: 12px !important;
}

.mt-13px {
    margin-top: 13px !important;
}

.mt-14px {
    margin-top: 14px !important;
}

.mt-15px {
    margin-top: 15px !important;
}

.mt-16px {
    margin-top: 16px !important;
}

.mt-17px {
    margin-top: 17px !important;
}

.mt-18px {
    margin-top: 18px !important;
}

.mt-19px {
    margin-top: 19px !important;
}

.mt-20px {
    margin-top: 20px !important;
}

.me-5px {
    margin-right: 5px !important;
}

.me-6px {
    margin-right: 6px !important;
}

.me-7px {
    margin-right: 7px !important;
}

.me-8px {
    margin-right: 8px !important;
}

.me-9px {
    margin-right: 9px !important;
}

.me-10px {
    margin-right: 10px !important;
}

.me-11px {
    margin-right: 11px !important;
}

.me-12px {
    margin-right: 12px !important;
}

.me-13px {
    margin-right: 13px !important;
}

.me-14px {
    margin-right: 14px !important;
}

.me-15px {
    margin-right: 15px !important;
}

.me-16px {
    margin-right: 16px !important;
}

.me-17px {
    margin-right: 17px !important;
}

.me-18px {
    margin-right: 18px !important;
}

.me-19px {
    margin-right: 19px !important;
}

.me-20px {
    margin-right: 20px !important;
}


.text-20px {
    font-size: 20px !important;
}

.text-19px {
    font-size: 19px !important;
}

.text-18px {
    font-size: 18px !important;
}

.text-17px {
    font-size: 17px !important;
}

.text-16px {
    font-size: 16px !important;
}

.text-15px {
    font-size: 15px !important;
}

.text-14px {
    font-size: 14px !important;
}

.text-13px {
    font-size: 13px !important;
}

.text-12px {
    font-size: 12px !important;
}

.text-11px {
    font-size: 11px !important;
}

.text-10px {
    font-size: 10px !important;
}

.text-9px {
    font-size: 9px !important;
}

.text-8px {
    font-size: 8px !important;
}

.fw-100 {
    font-weight: 100 !important;
}

.fw-200 {
    font-weight: 200 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.fw-900 {
    font-weight: 900 !important;
}

.radius-0 {
    border-radius: 0px !important;
}

.radius-5 {
    border-radius: 5px !important;
}

.radius-6 {
    border-radius: 6px !important;
}

.radius-7 {
    border-radius: 7px !important;
}

.radius-8 {
    border-radius: 8px !important;
}

.radius-9 {
    border-radius: 9px !important;
}

.radius-10 {
    border-radius: 10px !important;
}

.radius-11 {
    border-radius: 11px !important;
}

.radius-12 {
    border-radius: 12px !important;
}

.radius-13 {
    border-radius: 13px !important;
}

.radius-14 {
    border-radius: 14px !important;
}

.radius-15 {
    border-radius: 15px !important;
}

.radius-end-8 {
    border-radius: 0px 8px 8px 0px !important;
}


/*Start common css*/
.ellipsis-line-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.ellipsis-line-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.ellipsis-line-4 {
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.ellipsis-line-5 {
    display: -webkit-box !important;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.object-fit-cover {
    object-fit: cover;
}

/*End common css*/


/*Start courses page*/
.list-btn:hover,
.list-btn.active {
    background-color: var(--color-4);
    color: var(--color-9);
    border: 1.5px solid var(--color-4);
}

.list-btn svg path {
    fill: #0D0C23;
}

.list-btn:hover svg path,
.list-btn.active svg path {
    fill: #fff;
}

.nice-select:active,
.nice-select.open,
.nice-select:focus,
.form-select:focus {
    border-color: var(--color-15);
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background-color: #F2F4F6;
}

.courses-card .courses-card-body .courses-text .review-icon i.filled {
    color: var(--bs-yellow);
}

/*End courses page*/


/* Pagenation */
.pagenation-items {
    background-color: var(--bg-white);
    display: flex;
    justify-content: center;
    padding-bottom: 70px;
}

.page-link,
.page-item a {
    padding: 6px 14px;
    margin-right: 11px;
    border-radius: 5px;
    color: var(--color-13);
    border: 0px solid #00000000;
    background-color: var(--bg-white);
    font-size: 16px;
    font-weight: 400;
}

.pagenation .active,
.page-item.active .page-link {
    background-color: #754FFE;
    color: #fff;
    box-shadow: 0px 7px 18px -8px #754ffe;
}

.page-item:last-child:not(.active) .page-link,
.page-item:first-child:not(.active) .page-link {
    border-radius: 5px;
    border: none;
    background-color: var(--bg-white);
    color: var(--color-9);
    border: 1px solid var(--bg-white);
}

.page-link:focus,
.page-item a:hover {
    box-shadow: none;
    color: var(--color-13);
    background-color: transparent;
}

.page-link:hover,
.page-item a:hover {
    z-index: 2;
    color: #fff;
    background-color: var(--color-4);
    border-color: var(--color-4);
}

/*End pegination*/
.instructor-item .content .social-nav a {
    font-size: 16px !important;
}

.blog-item .content .link {
    margin-top: 7px;
}

.instructor-item .content p {
    visibility: hidden;
    opacity: 0;
    transition: .5s;
}

.instructor-item:hover .content p {
    visibility: visible;
    opacity: 1;
}

.title-two .title {
    /* font-family: 'Inter', sans-serif; */
    font-family: 'Clash Grotesk';

    font-weight: 500;
}

.efont {
    font-family: 'Clash Grotesk';
    font-weight: 500;
}

/*Instructor page social button*/
.social-btn {
    display: grid;
    color: var(--color-4);
    border-radius: 10px;
    padding: 15px 10px;
    min-width: 80px;
    font-size: 14px;
    justify-content: center;
    transition: .5s;
}

.social-btn:hover,
.social-btn:focus {
    color: var(--bg-white-2);
    background-color: var(--color-4);
    transition: .5s;
}

.social-btn svg {
    margin: auto;
    transition: .5s;
    margin-bottom: 3px;
}

.social-btn:hover svg path {
    fill: #fff;
}

/*End Instructor page social button*/


/*Course details page*/
.course-heading-info {
    display: flex;
    flex-wrap: wrap;
}

.course-heading-info .info-tag {
    display: flex;
    margin-right: 18px;
    color: var(--color-9);
    font-size: 18px;
}

.course-heading-info .info-tag i {
    margin-right: 4px;
    margin-top: 4px;
}

@media only screen and (max-width: 500px) {
    .course-heading-info .info-tag .text-12px {
        margin-top: 2px !important;
    }
}

.created-by-instructor {
    color: var(--color-9);
}

.created-by-instructor:hover {
    color: var(--color-8);
}



/*Removed this code from style.css file*/
/*.tab-content h3{
      font-size: 22px;
      font-weight: 600;
      margin-top: 40px;
      margin: 20px 26px;
    }
    .tab-content p{
      margin: 20px 26px;
      line-height: 1.7;
    }
    .tab-content ul{
      margin: 0px 31px;
    }
    .tab-content ul li{
      list-style-type: none;
    }

    .tab-content ul li a{
      text-decoration: none;
      color: #6E798A;

    }
    .tab-content ul li{
      position: relative;
      margin: 20px 10px;
    }
    .tab-content ul li:after{
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: var(--color-4);
      left: -18px;
      top: 6px;
    }
    .tab-content ul li::before{
      content: "";
      position: absolute;
      width: 1.5px;
      height: 45px;
      background-color: #754ffe58;
      left: -14px;
      top: 8px;
    }
    .tab-content ul li:last-child::before{
      display: none;
    }*/

.course-description {
    /* margin: 20px 24px; */
    line-height: 2;
    font-size: 15px;
}

.course-description h3.description-head {
    font-size: 20px;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 16px;
    color: #000;
}

.course-description.requirements ul {
    list-style: inside;
}

ul.step-down {
    margin: 0px 8px;
}

ul.step-down li {
    list-style-type: none;
}

ul.step-down li a {
    text-decoration: none;
    color: #6E798A;

}

ul.step-down li {
    position: relative;
    margin: 20px 10px;
}

ul.step-down li:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-4);
    left: -18px;
    top: 6px;
}

ul.step-down li::before {
    content: "";
    position: absolute;
    width: 1.5px;
    height: calc(100% + 28px);
    background-color: #754ffe58;
    left: -14px;
    top: 8px;
}

ul.step-down li:last-child::before {
    display: none;
}

.course-left-side .faq.accordion-button::after {
    margin-left: unset !important;
    background-size: unset;
    top: unset;
    position: initial !important;
}

.course-decription .course-right-section {
    position: sticky;
    top: 10px;
}


@media only screen and (max-width: 991px) {
    .course-decription .course-right-section {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .course-decription .course-left-side {
        margin-top: 35px !important;
    }
}

.course-right-section .button a:hover,
.course-right-section .button a.active {
    background-color: var(--color-4);
    color: #fff;
}


/*curriculum-*/
.curriculum-accordion .accordion-button.collapsed::after {
    margin-left: -37px;
    background-size: 18px;
    top: 0;
    position: absolute;
    transition: all .3s;
    width: 20px;
    height: 20px;
}

.curriculum-accordion .accordion-button::after {
    margin-left: -37px;
    background-size: 18px;
    top: 0;
    position: absolute;
    transition: all .3s;
    width: 20px;
    height: 20px;
}

/*End course details page

/*Headre searchbar*/
.menu-search {
    z-index: 997 !important;
}

/*Headre searchbar*/



/*Compare page*/
.compare-table .table th {
    max-width: 80px !important;
}

.select2-selection.select2-selection--single {
    height: 40px !important;
    padding: 6px 5px !important;
}

.select2-selection__arrow {
    height: 38px !important;
}

.select2-selection__rendered,
.select2-results__option {
    font-size: 14px !important;
}

.compare-table .table td {
    width: 26%;
    min-width: 200px;
}

.compare-table .table th {
    width: 22%;
    min-width: 200px;
}

/*End compare page*/



/*Blog page*/
.image-placeholder-2 {
    position: absolute;
    width: 100%;
    height: 100% !important;
    background: radial-gradient(circle, rgb(117 79 254 / 89%) 0%, rgb(117 79 254) 74%) !important;
}

.blog-search-input {
    height: 42px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #cdcdcd;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0px;
}

.blog-search-button {
    display: none;
    padding: 0px 20px;
    border: none;
    border-bottom: 1px solid #cdcdcd;
    background-color: #fff;
}

.blog-search-input.form-control:focus {
    border-color: #754ffe !important;
}

/*End Blog page*/



/*Button*/
.btn-primary {
    border: 1.5px solid #6e798a45;
    background-color: var(--color-4);
    padding: 12px 30px;
    color: var(color-9);
}

.btn-primary:hover {
    background-color: var(--color-4);
}

/*Button end*/
/*Color*/
.bg-primary:not([class*="bg-opacity"]) {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/*End color*/


.right-section .search {
    margin-top: unset;
}


/*Student profile*/
.wish-list-body .wish-list-search {
    background-color: var(--bg-white);
    box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 15px 0px !important;
    border: 1px solid #f3f1f8 !important;
}

.my-course-1-full-body {
    background-color: var(--bg-white);
    box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 15px 0px !important;
    border: 1px solid #f3f1f8 !important;
}

.student-profile-info {
    text-align: center;
    margin: 30px 0px 30px 0px;
}

.student-profile-info .profile-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
}

.student-profile-info h4 {
    margin-top: 20px;
    color: var(--color-1);
    font-size: 18px;
    font-weight: 600;
}

.student-profile-info span {
    color: var(--color-11);
    font-size: 12px;
    font-weight: 500;
}

.btn-profile-menu {
    text-decoration: none;
    color: var(--color-1);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    width: 100%;
    border-radius: 8px;
    transition: .5s;
    margin: 2px 0px;
}

.btn-profile-menu:hover,
.btn-profile-menu.active {
    background-color: var(--color-4);
    color: var(--color-9);
    transition: .5s;
}

.invoice-bill::after {
    background-color: #fff;
}

@media print {
    .print-content {
        position: fixed !important;
        margin: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 3333 !important;
        width: 100% !important;
        background: #fff !important;
    }

    .print-d-none {
        display: none !important;
    }

    footer,
    nav,
    title {
        display: none !important;
    }

    body {
        overflow: hidden !important;
    }
}

.bg-white-2 {
    background-color: var(--bg-white-2) !important;
}

.conversation-body-1.active {
    background-color: #6e798a1a;
}

/*End student profile*/

.webui-popover {
    z-index: 99 !important;
}

.single-popup-course>.courses-card-body {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 8px -2px !important;
}

.category-hide-icon {
    position: absolute;
    top: 41%;
    right: 10px;
}

.expert-instructor .instructor-card .instructor-card-body img {
    object-fit: cover;
    border-radius: 5%;
}

.speech-item-img img {
    max-width: 300px !important;
}

/*Home 2nd*/
.h-2-top-body .h-2-top a {
    position: relative;
}

.h-2-top-body .h-2-top a {
    osition: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h-2-top-body:hover .h-2-top a {
    color: #fff !important;
}

.h-2-instructor .h-2-instructor-full .h-2-instructor-image img {
    width: 90%;
    height: auto !important;
    display: flex;
    margin: auto;
    position: absolute;
    left: 5%;
    top: -40px;
    border-radius: 10px;
}

.eInstructor2 .h-2-instructor-full .h-2-instructor-image img {
    height: 262px !important;
}

/*Home 3rd*/
.category-product-body:hover .category-product-body a i {
    color: #fff !important;
}

.h-3-top-categories .category-product .category-product-body a:first-child>i {
    padding: 8px;
    border-radius: 50%;
    border: 2px solid #FB6871;
}

.h-3-top-categories .category-product .category-product-body:hover a:first-child>i {
    border: 2px solid #FFF;
}

/*Home 4th*/
.instructor-item {
    max-height: 340px !important;
}

/*Hone 5th*/
.course-item-5 .content {
    bottom: 0px !important;
    top: unset !important;
    padding: 12px 20px 70px !important;
}

.course-training-five .img {
    max-width: 170px !important;
}

.instructor-item-5 .content {
    max-height: 85px;
}

.instructor-item-5:hover .social {
    bottom: 70px;
}

/*End Home page*/

/*Header*/
/*Language selector*/
.right-icon .language-control .nice-select {
    padding: 2px 20px;
    font-size: 12px;
    height: 25px;
}

.nice-select .option {
    line-height: 30px !important;
    min-height: 30px !important;
    margin: 4px 10px;
    background: #F2F4F6;
    border-radius: 4px;
    color: #0D0C23;
    padding: 0;
    padding-left: 10px;
}

/*Language selector END*/

/*Start search bar*/
.header-search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px;
}

.search-container {
    position: relative;
}

.header-search-icon {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    font-size: 18px;
    color: #999;
    cursor: pointer;
    border: none;
    width: 30px;
    height: 30px;
    padding: 4px 7px;
    background-color: transparent;
    z-index: 1;
}

.search-input-form .dropdown .btn {
    transform: translateY(0px) !important;
    border: 0px solid #e0d8ff;
    color: #000;
}

.search-input-form .dropdown .dropdown-toggle.show .search-menu-icon {
    display: none;
}

.search-input-form .dropdown .dropdown-toggle:not(.show) .close-menu-icon {
    display: none;
}

.search-input-floating {
    width: 100%;
    max-width: 380px;
    border: 1px solid #e0d8ff;
    min-width: 350px;

    padding: 7px 6px 7px 38px;
    border-radius: 3px;
    transition: border-color 0.3s ease-in-out, opacity 0.3s ease-in-out, width 0.3s ease-in-out;
    font-size: 14px;
    color: #555;
    outline: none;
    opacity: 1;
}



.search-input {
    width: 0;
    padding: 7px 6px 7px 38px;
    border: 1px solid #e0d8ff00;
    border-radius: 3px;
    transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out;
    font-size: 14px;
    color: #555;
    margin-left: 4px;
    outline: none;
    opacity: 1;
}


.search-input:focus,
.search-input.focused {
    width: 100%;
    max-width: 380px;
    border: 1px solid #e0d8ff;
    transition: border-color 0.3s ease-in-out, width 0.3s ease-in-out;
}

/*End search bar*/


/*Mobile device start*/
.btn-toggle {
    width: 100%;
    padding: 10px 20px;
    color: var(--bs-emphasis-color);
    background-color: transparent;
}

.btn-toggle-list {
    padding: 10px 20px;
}

.btn-toggle:hover,
.btn-toggle:focus {
    color: rgba(var(--bs-emphasis-color-rgb), .85);
    background-color: var(--bs-tertiary-bg);
}

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

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

.btn-toggle[aria-expanded="true"] {
    color: rgba(var(--bs-emphasis-color-rgb), .85);
}

.btn-toggle[aria-expanded="true"]::after {
    transform: rotate(90deg);
}

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

.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
    background-color: var(--bs-tertiary-bg);
}

.scrollarea {
    overflow-y: auto;
}

/*Mobile device ended*/
/*Header end*/











/*UI FIX*/
/* .courses-card .courses-card-body .courses-text p{
    color: #6e798a !important;
} */
.grid-view-body .courses-card .courses-text .review-icon {
    margin-top: 11px;
    margin-bottom: 17px;
}

/* .courses-list-view-card .courses-list-view-card-body .courses-text{
    padding: 12px 20px !important;
} */
.courses-card-body {
    box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 15px 0px !important;
    border: 1px solid #f3f1f8 !important;
}

.course-all-category {
    border: 1px solid #f3f1f8 !important;
    box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 15px 0px !important;
}

/* .list-card-control .btn{
    border: 1px solid #64799616 !important;
} */
.select-box .nice-select .current {
    color: #0D0C23;
}

.select-box .nice-select {
    background-color: #FFF !important;
}

.language-control .nice-select::after {
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    right: 0;
}

.language-control .nice-select {
    background-color: transparent !important;
    border: none !important;
}

.language-control .nice-select .current {
    color: var(--color-9);
    font-weight: 500;
}

.form-select {
    border: 1px solid hsl(222.86deg 12.73% 89.22%) !important;
}

.course-category h3 {
    color: #1e293c;
}

.courses-card .courses-card-body .review-btn {
    margin-left: auto;
}

.courses-card .courses-card-body {
    display: block;
    width: 100%;
}

.courses-card .courses-card-body .courses-text .ellipsis-line-2 {
    margin-left: 0px;
}

.price-free {
    color: #6bbc92 !important;
}

.course-right-section .course-card .enrol .icon h4,
.course-right-section .course-card .enrol>h5 {
    font-size: 16px;
    color: #202937;
    font-weight: 500;
}

/* .course-right-section .course-card .ammount{
    padding: 0;
} */
.course-right-section .course-card .enrol .icon img {
    margin: 0px 18px 0px 0px;
}

.font-inter-light {
    font-family: 'Inter', sans-serif !important;
    color: var(--primary-color) !important;
}

.font-inter-dark {
    font-family: 'Inter', sans-serif;
    color: var(--color-5) !important;
}

.course-left-side .nav-link.active svg *,
.course-left-side .nav-link:hover svg * {
    fill: var(--color-4);
}

.instructor .instructor-icon i {
    width: 38px;
    text-align: center;
}

.accordion-header {
    margin: 20px 0px 20px;
}

.course-left-side .accordion-item {
    border-bottom: 1.5px solid #ebebeb;
}

.course-left-side .accordion-button {
    padding: 0px 0px 10px 23px;
}

.accordion-item-title {
    font-size: 16px;
    font-family: 'Inter';
    font-weight: 500;
    color: var(--color-5);
}

.ac-lecture li a {
    /* padding: 10px 15px; */
    color: var(--color-5);
}

.ac-lecture li a span {
    font-size: 15px;
}

.ac-lecture li a span i {
    font-size: 19px;
    position: relative;
    top: 2px;
}

/* .reviews{
    margin: 0px 30px;
} */

.menu_pro_tgl_bg,
.menu_pro_wish {
    background-color: var(--color-9);
}

@media only screen and (min-width: 992px) {
    .course-card {
        margin-top: -225px
    }
}

.courses-card .courses-card-body .courses-text {
    padding: 16px;
}

.common-card {
    background-color: var(--bg-white);
    box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 15px 0px !important;
    border: 1px solid #f3f1f8 !important;
}

.message .conversation .conversation-1 .conversation-img p {
    width: 15px;
    height: 15px;
    line-height: 13px;
}

.courses-price-left {
    align-items: center;
}

.course-item-5 .img img {
    margin-bottom: -30px;
}

/*UI FIX END*/



/*Notification Start*/
.notify-icon {
    border-radius: 50%;
    background-color: #e6dfff;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
}

.notify-icon i {
    font-size: 16px !important;
}

.grid-view-body .courses-card .courses-text .review-icon span {
    line-height: 17px;
}

/*Notification End*/

/*Filter side bar bategory show more show less*/
.course-all-category .course-category .webdesign {
    padding: 0px 1px;
}

.course-all-category .course-category .webdesign.less {
    max-height: 320px;
    overflow: hidden;
    padding: 0px 1px;
    transition: height 4s !important;
}

.instructor-1 .instructor-about,
.instructon-contact,
.instructor-about .grid-view-body .row {
    background-color: #fff;
}

.invoice-2-table-head h6 {
    margin: 15px 0px;
    color: var(--bs-dark-border-subtle);
}

.student .student-body-text {
    height: 220px;
}

@media (max-width: 420px) {
    .student .man {
        width: 100%;
        object-fit: contain;
        padding: 0px;
    }

    .slick-track {
        gap: 0px !important;
    }
}

.category-product .category-product-body {
    margin: 10px 0px !important;
}


.sbundle-items .bundle-body {
    max-height: 270px !important;
    min-height: 180px !important;
    overflow-y: auto;
}

.availOptions .aBox {
    width: 120px;
    height: 100px;
    margin-left: 8px;
}

.bannar-card {
    position: unset;
    bottom: unset;
    margin-top: 55px;
}

@media screen and (max-width: 575px) {
    .banner-five-content .title span.graphic {
        font-size: 50px !important;
        line-height: 80px;
    }
}


.btn-fill {
    border: 1px solid #754FFE !important;
    transition: .5s;
    padding: 12px 30px;
}

.btn-fill:hover {
    background: #754FFE;
    color: #fff;
}

.einsBtn .btn {
    padding: 14px 0 !important;
    font-weight: 500;
}

.courses .eimage img {
    height: 230px !important;
    object-fit: cover;
}

.follow-btn {
    border: 1px solid #754FFE !important;
    font-size: 13px;
    padding: 8px 30px;
    transition: .5s;
    font-weight: 500;
}

.follow-btn:hover {
    background-color: #754FFE;
    color: #fff;
}

.instructor-right .follow-btn {
    font-size: 14px;
}

.grecaptcha-badge {
    z-index: 99999;
}


.main-nav-wrap .nav-item .nav-link {
    color: #0D0C23 !important;
    font-weight: 500 !important;
    font-size: 14px;
    background: transparent !important;
}

.ctBtn {
    background-color: #754FFE;
    padding: 7px 18px;
    border-radius: 5px;
    color: #fff !important;
}

.language-control .nice-select .option {
    line-height: 28px !important;
    min-height: 19px !important;
    margin: 6px 4px;
}


/* Addon Css */
.course-bundle-details .created-by-instructor {
    color: #0D0C23;
    font-weight: 500;
    font-size: 16px;
}

.course-right-section .course-card .card-img img {
    border-radius: 12px 12px 0 0;
    padding: 16px;
}

.eBundle-details .course-details-sidebar h1 {
    font-size: 24px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif;
    margin-bottom: 7px !important;
}





/* New Home Css */
.elegant-testimonial-slide {
    box-shadow: 0px 4px 10px rgba(147, 148, 158, 0.2);
    padding: 20px;
    border-radius: 10px;
    margin: 3px;
}

.ele-testimonial-profile-area {
    column-gap: 12px;
    margin-bottom: 16px;
}

.ele-testimonial-profile-area .profile {
    min-width: 64px;
    width: 64px;
    height: 64px;
}

.ele-testimonial-profile-area .profile img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.ele-testimonial-profile-name .name {

    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #0d221d;
}

.ele-testimonial-profile-name .time {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #858c8a;
    margin-bottom: 2px;
}

.ele-testimonial-profile-name .rating {
    column-gap: 5.32px;
}

.ele-testimonial-profile-name i {
    color: #fad300;
}

.ele-testimonial-profile-name .thin i {
    color: #babab4f0;
}

.elegant-testimonial-slide .review {
    font-size: 15px;
    line-height: 24px;
    color: #858c8a;
}


.mb-2px {
    margin-bottom: 2px !important;
}

.mb-4px {
    margin-bottom: 4px !important;
}

.mb-5px {
    margin-bottom: 5px !important;
}

.mb-6px {
    margin-bottom: 6px !important;
}

.mb-8px {
    margin-bottom: 8px !important;
}

.mb-10px {
    margin-bottom: 10px !important;
}

.mb-12px {
    margin-bottom: 12px !important;
}

.mb-14px {
    margin-bottom: 14px !important;
}

.mb-16px {
    margin-bottom: 16px !important;
}

.mb-18px {
    margin-bottom: 18px !important;
}

.mb-20px {
    margin-bottom: 20px !important;
}

.mb-26px {
    margin-bottom: 26px !important;
}

.mb-28px {
    margin-bottom: 28px !important;
}

.mb-30px {
    margin-bottom: 30px !important;
}

.mb-40px {
    margin-bottom: 40px !important;
}

.mb-50px {
    margin-bottom: 50px !important;
}

.mb-60px {
    margin-bottom: 60px !important;
}

.mb-70px {
    margin-bottom: 70px !important;
}

.mb-80px {
    margin-bottom: 80px !important;
}

.mb-90px {
    margin-bottom: 90px !important;
}

.mb-100px {
    margin-bottom: 100px !important;
}

.mb-110px {
    margin-bottom: 110px !important;
}

.mb-120px {
    margin-bottom: 120px !important;
}

/* padding */
.p-2px {
    padding: 2px !important;
}

.p-6px {
    padding: 6px !important;
}

.p-10px {
    padding: 10px !important;
}

.p-12px {
    padding: 12px !important;
}

.p-14px {
    padding: 14px !important;
}

.p-16px {
    padding: 16px !important;
}

.p-18px {
    padding: 18px !important;
}

.p-20px {
    padding: 20px !important;
}

.p-26px {
    padding: 26px !important;
}

.p-40px {
    padding: 40px !important;
}

/* pb */
.pb-18px {
    padding-bottom: 18px !important;
}

.pb-30px {
    padding-bottom: 30px !important;
}

/* font size */
.fs-12px {
    font-size: 12px !important;
}

.fs-13px {
    font-size: 13px !important;
}

.fs-14px {
    font-size: 14px !important;
}

.fs-15px {
    font-size: 15px !important;
}

.fs-16px {
    font-size: 16px !important;
}

.fs-17px {
    font-size: 17px !important;
}

.fs-18px {
    font-size: 18px !important;
}

.fs-20px {
    font-size: 20px !important;
}

.fs-28px {
    font-size: 28px !important;
}

.fs-31px {
    font-size: 31px !important;
}

.fs-32px {
    font-size: 32px !important;
}

.fs-34px {
    font-size: 34px !important;
}

.fs-40px {
    font-size: 40px !important;
}

.fs-43px {
    font-size: 43px !important;
}

.fs-44px {
    font-size: 44px !important;
}

.fs-48px {
    font-size: 48px !important;
}

.fs-52px {
    font-size: 52px !important;
}

.fs-56px {
    font-size: 56px !important;
}

.fs-82px {
    font-size: 82px !important;
}

.fs-105px {
    font-size: 105px !important;
}


/* line hight */
.lh-normal {
    line-height: normal !important;
}

.lh-18px {
    line-height: 18px !important;
}

.lh-19px {
    line-height: 19px !important;
}

.lh-20px {
    line-height: 20px !important;
}

.lh-22px {
    line-height: 22px !important;
}

.lh-23px {
    line-height: 23px !important;
}

.lh-24px {
    line-height: 24px !important;
}

.lh-25px {
    line-height: 25px !important;
}

.lh-26px {
    line-height: 26px !important;
}

.lh-28px {
    line-height: 28px !important;
}

.lh-29px {
    line-height: 29px !important;
}

.lh-30px {
    line-height: 30px !important;
}

.lh-35px {
    line-height: 35px !important;
}

.lh-36px {
    line-height: 36px !important;
}

.lh-37px {
    line-height: 37px !important;
}

.lh-38px {
    line-height: 38px !important;
}

.lh-42px {
    line-height: 42px !important;
}

.lh-44px {
    line-height: 44px !important;
}

.lh-48px {
    line-height: 48px !important;
}

.lh-52px {
    line-height: 52px !important;
}

.lh-56px {
    line-height: 56px !important;
}

.lh-60px {
    line-height: 60px !important;
}

.lh-64px {
    line-height: 64px !important;
}

.lh-107px {
    line-height: 107px !important;
}

.lh-129px {
    line-height: 129px !important;
}

/* title */
.title-1 {
    font-family: 'Poppins';
    color: #030531;
    font-weight: 600;
    line-height: 1.3;
}

.italic-1 {
    font-style: italic;
    background: linear-gradient(133deg, #264871 18.22%, #076785 89.38%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 3px;
}

.subtitle-1 {
    font-family: 'Rubik';
    font-weight: 400;
    color: #86868d;
    line-height: 1.5;
}

.title-2 {
    font-family: 'Poppins';
    color: #062320;
    font-weight: 600;
    line-height: 1.3;
}

.title-3 {
    font-family: 'Lexend Deca';
    font-weight: 500;
    line-height: 1.3;
    color: #0f101a;
}

.subtitle-2 {
    font-family: 'Outfit';
    font-weight: 400;
    line-height: 1.5;
    color: #93949e;
}

.subtitle-3 {
    font-family: 'Poppins';
    font-weight: 400;
    line-height: 1.5;
    color: #8f919b;
}

.subtitle-4 {
    font-family: 'Poppins';
    font-weight: 400;
    line-height: 1.5;
    color: #838b95;
}

.title-4 {
    font-family: 'Lato';
    font-weight: 600;
    line-height: 1.3;
    color: #1d242d;
}

.title-5 {
    font-family: 'DM Sans';
    font-weight: 600;
    line-height: 1.3;
    color: #121421;
}

.subtitle-5 {
    font-family: 'Poppins';
    font-weight: 400;
    line-height: 1.5;
    color: #93949e;
}

.subtitle-6 {
    font-family: 'Manrope';
    font-weight: 500;
    line-height: 1.6;
    color: #8e8e96;
}

.title-6 {
    color: var(--whiteColor);
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600;
    line-height: 130.5%;
}

.subtitle-7 {
    color: var(--whiteColor);
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

.title-7 {
    color: #121314;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
}

/* letter Spacing */
.ls-1-7px {
    letter-spacing: 1.7px;
}

.ls-1px {
    letter-spacing: 1px;
}

/* Text Color */
.text-dark-2 {
    color: #171719 !important;
}

.text-dark-3 {
    color: #121314 !important;
}

.text-dark-4 {
    color: #49494A !important;
}

.text-danger-2 {
    color: var(--skinColor6) !important;
}

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

.text-pink-2 {
    color: var(--skinColor7) !important;
    letter-spacing: 0.14em;
}

.text-purple-2 {
    color: #c874f4 !important;
}

.text-brown-2 {
    color: #feaf75 !important;
}

.text-skyblue-2 {
    color: #58c3ff !important;
}

.text-yellow-2 {
    color: #FFC832 !important;
}

.text-secondary-2 {
    color: #8A9097 !important;
}

.rounded-20px {
    border-radius: 20px !important;
}

.rounded-10px {
    border-radius: 10px !important;
}

.rounded-5px {
    border-radius: 5px !important;
}/* =========================================================
   1. PROTECT & ENFORCE FONTAWESOME AND SVG ICONS
   ========================================================= */
i, 
.fa, 
.fas, 
.far, 
.fab, 
.fa-solid, 
.fa-regular, 
.fa-brands, 
.fa-sharp,
[class^="fa-"], 
[class*=" fa-"],
i::before, 
span::before, 
.fa::before, 
.fas::before, 
.far::before, 
.fab::before,
.fa-solid::before,
.fa-regular::before,
.fa-brands::before,
.fa-sharp::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
}

.fab, .fa-brands, .fab::before, .fa-brands::before {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
}

.far, .fa-regular, .far::before, .fa-regular::before {
    font-weight: 400 !important;
}

.fas, .fa-solid, .fas::before, .fa-solid::before {
    font-weight: 900 !important;
}

/* =========================================================
   2. CAIRO FONT FOR TEXTUAL ELEMENTS ONLY (NEVER ON ICONS)
   ========================================================= */
body, p, h1, h2, h3, h4, h5, h6, a, button, input, select, textarea, label, td, th, li, 
.btn, .title, .subtitle, .nav-link, .dropdown-item, .lms1-cCard-title, .category-type1-title, 
.hero2-iconbox-title, .hero2-iconbox-category, .form-control, .card-title, .modal-title, .badge {
    font-family: 'Cairo', Tahoma, sans-serif !important;
}

/* =========================================================
   3. RESPONSIVE TYPOGRAPHY & MULTI-SCREEN OPTIMIZATION
   ========================================================= */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* Large Screens (>= 992px) */
@media (min-width: 992px) {
    .fs-52px, .title-9 {
        font-size: 38px !important;
        line-height: 1.35 !important;
    }
    .subtitle-9 {
        font-size: 16px !important;
        line-height: 1.8 !important;
    }
}

/* Tablet Screens (768px - 991px) */
@media (max-width: 991px) {
    .fs-52px, .title-9 {
        font-size: 30px !important;
        line-height: 1.4 !important;
    }
    .subtitle-9 {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
    .home1-section-title .title, h1.title {
        font-size: 26px !important;
    }
    .lms-hero2-banner img {
        max-width: 180px !important;
        height: auto !important;
    }
}

/* Mobile Screens (<= 767px) */
@media (max-width: 767px) {
    .fs-52px, .title-9 {
        font-size: 23px !important;
        line-height: 1.45 !important;
    }
    .subtitle-9 {
        font-size: 14px !important;
        line-height: 1.7 !important;
        margin-bottom: 20px !important;
    }
    .home1-section-title {
        margin-bottom: 25px !important;
    }
    .home1-section-title .title, h1.title {
        font-size: 21px !important;
        line-height: 1.4 !important;
    }
    .home1-section-title .info {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
    }
    .lms1-cCard-title {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
    .category-type1-title {
        font-size: 12.5px !important;
        line-height: 1.3 !important;
    }
    .btn.lms1-btn-purple, .btn.lms1-btn-blue, .btn.btn-primary {
        font-size: 14px !important;
        padding: 9px 20px !important;
    }
    .hero2-iconbox1-rounded {
        padding: 6px 10px !important;
    }
    .hero2-iconbox-title {
        font-size: 12px !important;
    }
    .hero2-iconbox-category {
        font-size: 10px !important;
    }
    .lms-hero2-banner img {
        max-width: 140px !important;
        height: auto !important;
    }
    .offcanvas {
        max-width: 85vw !important;
    }
    .mobile-search input {
        font-size: 14px !important;
    }
    .navbar-brand img {
        max-height: 42px !important;
    }
}

/* Extra Small Screens (<= 420px) */
@media (max-width: 420px) {
    .fs-52px, .title-9 {
        font-size: 20px !important;
    }
    .subtitle-9 {
        font-size: 13px !important;
    }
    .home1-section-title .title, h1.title {
        font-size: 18px !important;
    }
}


/* =========================================================
   MOBILE & TABLET APP-LIKE EXPERIENCE (BeautyTech App UX)
   ========================================================= */

/* 1. CIRCULAR CATEGORY STORIES & HORIZONTAL SWIPER */
.lms-category-type1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
}

.category-type1-banner {
    border-radius: 50% !important;
    width: 86px !important;
    height: 86px !important;
    aspect-ratio: 1/1 !important;
    margin: 0 auto 10px auto !important;
    padding: 3px !important;
    background: #ffffff !important;
    border: 2.5px solid #6366f1 !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.22) !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.category-type1-banner .banner {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.category-type1-icon {
    display: none !important;
}

.category-type1-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e1b4b !important;
    text-align: center !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease !important;
}

.lms-category-type1:hover .category-type1-banner {
    transform: translateY(-4px) scale(1.05) !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35) !important;
}

.lms-category-type1:hover .category-type1-title {
    color: #4f46e5 !important;
}

/* Horizontal Swiper for Categories on Mobile and Tablets */
@media (max-width: 991px) {
    .app-category-scroll-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 16px !important;
        padding: 10px 15px 25px 15px !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
        scrollbar-width: none !important;
        justify-content: flex-start !important;
    }
    
    .app-category-scroll-container::-webkit-scrollbar {
        display: none !important;
    }
    
    .app-category-item {
        flex: 0 0 96px !important;
        max-width: 96px !important;
        width: 96px !important;
        scroll-snap-align: start !important;
        padding: 0 !important;
    }

    .category-type1-banner {
        width: 74px !important;
        height: 74px !important;
        border-width: 2px !important;
        margin-bottom: 6px !important;
    }

    .category-type1-title {
        font-size: 11.5px !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
}

/* 2. DUAL-CARD (2 PER ROW) APP-LIKE COURSE GRID ON MOBILE */
@media (max-width: 767px) {
    .lms1-course-card, .courses-card-body {
        border-radius: 16px !important;
        padding: 8px !important;
        background: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid #f1f5f9 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        transition: transform 0.2s ease !important;
    }

    .lms1-course-card:active, .courses-card-body:active {
        transform: scale(0.98) !important;
    }

    .lms1-cCard-banner, .courses-card-image {
        border-radius: 12px !important;
        aspect-ratio: 16 / 10 !important;
        overflow: hidden !important;
        margin-bottom: 8px !important;
    }

    .lms1-cCard-banner img, .courses-card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .lms1-cCard-title, .courses-text h5 {
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        min-height: 35px !important;
        color: #1e1b4b !important;
    }

    .lms1-cCard-body > .d-flex.align-items-center.row-gap-3,
    .courses-text .review-icon {
        display: none !important;
    }

    .lms1-btn-dark {
        font-size: 11.5px !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
    }

    .course1-rating {
        transform: scale(0.8);
        transform-origin: right center;
    }
}

/* 3. NATIVE MOBILE APP BOTTOM NAVIGATION BAR */
.mobile-app-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    background: #ffffff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9990;
    border-top: 1px solid #f1f5f9;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.app-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 700;
    flex: 1;
    transition: color 0.2s ease;
}

.app-nav-item i {
    font-size: 18px;
    margin-bottom: 3px;
    transition: transform 0.2s ease;
}

.app-nav-item.active {
    color: #4f46e5 !important;
}

.app-nav-item.highlight .highlight-circle {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    margin-top: -22px;
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.4);
    border: 3px solid #ffffff;
}

.app-nav-item.highlight .highlight-circle i {
    font-size: 18px;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    body {
        padding-bottom: 70px !important;
    }
}
@media (min-width: 768px) {
    .mobile-app-bottom-bar {
        display: none !important;
    }
}


/* ==========================================================================
   PWA MOBILE APP EXPERIENCE OPTIMIZATIONS
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Hide the bulky desktop footer completely on mobile */
    .lms2-footer-section {
        display: none !important;
    }

    /* PWA Mobile App Footer Signature */
    .stratum-pwa-footer {
        padding-top: 15px;
        padding-bottom: 25px;
        margin-bottom: 75px !important;
    }
    
    .pwa-footer-inner {
        background: rgba(15, 23, 42, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-radius: 16px !important;
    }

    /* Clearance for the bottom app dock */
    body {
        padding-bottom: 85px !important;
        -webkit-tap-highlight-color: transparent;
    }

    /* Floating WhatsApp Button position on mobile so it floats above the bottom dock */
    .floating-whatsapp-btn {
        bottom: 78px !important;
        left: 16px !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 26px !important;
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35) !important;
    }

    /* Native PWA Bottom App Bar enhancements */
    .mobile-app-bottom-bar {
        height: 64px !important;
        background: rgba(15, 23, 42, 0.94) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.3) !important;
    }

    .app-nav-item {
        color: #94a3b8 !important;
        font-size: 10px !important;
        font-weight: 600 !important;
    }

    .app-nav-item.active {
        color: #818cf8 !important;
    }

    .app-nav-item.active i {
        color: #818cf8 !important;
        transform: translateY(-2px);
    }

    .app-nav-item.highlight .highlight-circle {
        background: linear-gradient(135deg, #6366f1, #a855f7) !important;
        border: 3px solid #0f172a !important;
        box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5) !important;
    }
}


/* WhatsApp Floating Button Global Styles */
.floating-whatsapp-btn {
    position: fixed !important;
    bottom: 25px !important;
    left: 25px !important;
    z-index: 9999 !important;
    background: #25d366 !important;
    color: white !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 32px !important;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}
.floating-whatsapp-btn:hover {
    transform: scale(1.1) !important;
    color: white !important;
}

@media (max-width: 767.98px) {
    /* Lift WhatsApp above the bottom navigation bar on mobile */
    .floating-whatsapp-btn {
        bottom: 84px !important;
        left: 18px !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 26px !important;
        box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35) !important;
    }
}



/* ==========================================================================
   STRATUM NATIVE MOBILE APP HEADER & SEARCH
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Hide the top sub-header on small screens */
  .sub-header {
    display: none !important;
  }

  /* Sleek App Bar Header */
  .stratum-mobile-app-header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    background: rgba(15, 23, 42, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    min-height: 56px;
  }

  .stratum-app-logo {
    height: 38px !important;
    width: auto !important;
    max-width: 140px !important;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
  }

  .btn-app-header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f8fafc;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  .btn-app-header-action:hover, .btn-app-header-action:focus {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    color: #ffffff;
  }
  .btn-menu-drawer {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2)) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #a5b4fc !important;
  }

  /* App Search Tray */
  .stratum-app-search-tray {
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
    padding: 12px 16px 14px 16px;
    width: 100%;
  }

  .search-input-pill-wrap {
    display: flex;
    align-items: center;
    background: rgba(30, 41, 59, 0.9);
    border: 1.5px solid rgba(99, 102, 241, 0.4);
    border-radius: 9999px;
    padding: 3px 5px 3px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .search-input-pill-wrap:focus-within {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
  }

  .search-pill-icon {
    color: #818cf8;
    font-size: 15px;
    margin-left: 8px;
  }

  .search-input-pill {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 13.5px;
    outline: none;
    padding: 6px 4px;
  }
  .search-input-pill::placeholder {
    color: #94a3b8;
    font-size: 12.5px;
  }

  .search-pill-submit-btn {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 9999px;
    cursor: pointer;
    transition: transform 0.15s ease;
  }
  .search-pill-submit-btn:active {
    transform: scale(0.95);
  }

  /* Trending Chips */
  .search-chips-container {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    padding-top: 6px;
    scrollbar-width: none;
  }
  .search-chips-container::-webkit-scrollbar {
    display: none;
  }
  .chips-title {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
  }
  .app-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    padding: 3px 10px;
    color: #cbd5e1;
    font-size: 11px;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  .app-chip:hover, .app-chip.highlight {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
  }

  /* Old clunky inline-form hidden on mobile to prevent conflicts */
  .inline-form {
    display: none !important;
  }
}


/* ==========================================================================
   NATIVE MOBILE APP PERMANENT SEARCH & COMPONENT POLISH
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Permanent Natural Search Bar on Mobile */
  .mobile-permanent-search-bar {
    width: 100% !important;
    display: block !important;
  }
  .search-input-pill-wrap {
    display: flex;
    align-items: center;
    background: rgba(30, 41, 59, 0.95);
    border: 1.5px solid rgba(99, 102, 241, 0.4);
    border-radius: 9999px;
    padding: 3px 5px 3px 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
  }
  .search-input-pill-wrap:focus-within {
    border-color: #818cf8;
    background: rgba(15, 23, 42, 0.98);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
  }
  .search-pill-icon {
    color: #818cf8;
    font-size: 15px;
    margin-left: 8px;
  }
  .search-input-pill {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 13px;
    outline: none;
    padding: 6px 4px;
  }
  .search-input-pill::placeholder {
    color: #94a3b8;
    font-size: 12px;
  }
  .search-pill-submit-btn {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 9999px;
    cursor: pointer;
  }

  /* Mobile App Stories / Shortcuts Bar */
  .stratum-mobile-shortcuts {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 2px;
    margin-bottom: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .stratum-mobile-shortcuts::-webkit-scrollbar {
    display: none;
  }
  .shortcut-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
    width: 66px;
  }
  .shortcut-app-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: rgba(30, 41, 59, 0.7);
    border: 1.5px solid rgba(99, 102, 241, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #a5b4fc;
    margin-bottom: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
  }
  .shortcut-app-icon.highlight {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
  }
  .shortcut-app-item span {
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
    text-align: center;
    white-space: nowrap;
  }

  /* Compact section spacing across the whole page on mobile */
  .mb-100px, .mb-80px, .mb-80, .pb-100, .pb-110 {
    margin-bottom: 24px !important;
    padding-bottom: 16px !important;
  }
  .mt-100px, .mt-80px {
    margin-top: 20px !important;
  }

  /* Mobile App Card Polish */
  .lms-category-type1, .category-type3-card {
    border-radius: 16px !important;
    padding: 12px !important;
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .course1-card, .lms5-course-card, .course-box-2 {
    border-radius: 16px !important;
    overflow: hidden !important;
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  }
}

/* =========================================================
   MOBILE OFFCANVAS DRAWER DIRECTION & SMOOTH SCROLL
   ========================================================= */
#offcanvasWithBothOptions.offcanvas {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 1060 !important;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.6) !important;
}

[dir="rtl"] #offcanvasWithBothOptions.offcanvas {
  box-shadow: 8px 0 30px rgba(0, 0, 0, 0.6) !important;
}

#offcanvasWithBothOptions .offcanves-top,
#offcanvasWithBothOptions .offcanvas-header {
  flex: 0 0 auto !important;
}

#offcanvasWithBothOptions .offcanvas-body {
  flex: 1 1 auto !important;
  height: calc(100vh - 75px) !important;
  height: calc(100dvh - 75px) !important;
  max-height: calc(100vh - 75px) !important;
  max-height: calc(100dvh - 75px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding-bottom: 120px !important;
}

#offcanvasWithBothOptions .offcanvas-body::-webkit-scrollbar {
  width: 5px !important;
}
#offcanvasWithBothOptions .offcanvas-body::-webkit-scrollbar-track {
  background: transparent !important;
}
#offcanvasWithBothOptions .offcanvas-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25) !important;
  border-radius: 4px !important;
}

.mobile-view-offcanves .btn-close {
  position: static !important;
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.8;
  padding: 8px;
}
.mobile-view-offcanves .btn-close:focus,
.mobile-view-offcanves .btn-close:hover {
  opacity: 1;
}

.mobile-view-offcanves .offcanves-btn {
  margin-top: 0 !important;
  gap: 8px !important;
  flex-direction: row !important;
}
.mobile-view-offcanves .offcanves-btn a {
  margin: 0 !important;
  padding: 6px 14px !important;
}

#offcanvasWithBothOptions .offcanves-profile {
  padding: 16px 14px !important;
  background: rgba(30, 41, 59, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#offcanvasWithBothOptions .offcanves-profile a {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

#offcanvasWithBothOptions .offcanves-profile .user-details h4 {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}

#offcanvasWithBothOptions .offcanves-profile .user-details p {
  color: #94a3b8 !important;
  font-size: 12px !important;
  margin-bottom: 0 !important;
}

#offcanvasWithBothOptions .btn-close {
  position: static !important;
  margin-inline-start: auto !important;
  filter: invert(1) grayscale(100%) brightness(200%) !important;
  opacity: 0.85 !important;
}

/* =========================================================
   1. ELIMINATE ANY WHITE PART AT TOP OF HEADER ACROSS ALL PAGES
   ========================================================= */
html, 
body {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    color: #0f172a !important;
}

header,
.menubar,
.menubar-area {
    background-color: #0b0f19 !important;
    background: #0b0f19 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

@media (max-width: 991.98px) {
    header,
    .menubar,
    .menubar-area {
        background-color: #0b0f19 !important;
        background: #0b0f19 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
    
    .stratum-mobile-app-header {
        border-top: none !important;
        margin-top: 0 !important;
        top: 0 !important;
    }
}

/* =========================================================
   2. MOBILE APP STYLING FOR ALL INNER PAGES
   ========================================================= */
@media (max-width: 991.98px) {
    /* Compact Breadcrumb Header */
    .bread-crumb {
        background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%) !important;
        background-image: none !important;
        padding: 16px 0 12px 0 !important;
        margin-bottom: 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .bread-crumb h1 {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
    }
    .bread-crumb .breadcrumb {
        margin-bottom: 2px !important;
        font-size: 11.5px !important;
    }
    .bread-crumb .breadcrumb a,
    .bread-crumb .breadcrumb span {
        color: #94a3b8 !important;
        font-size: 11.5px !important;
    }
    .bread-crumb .breadcrumb-item.active span {
        color: #c7d2fe !important;
        font-weight: 600 !important;
    }
    .bread-crumb .fa-chevron-right {
        font-size: 10px !important;
        color: #64748b !important;
        margin: 0 4px !important;
    }

    /* Compact Inner Section Padding & Safe Area */
    body {
        padding-bottom: 85px !important;
    }
    .grid-view.courses-list-view,
    .course-header-area,
    .about-us-1,
    .contact-us-1,
    .cart-section,
    .my-courses-section {
        padding-top: 14px !important;
        padding-bottom: 24px !important;
    }

    /* Course Cards on Mobile */
    .courses-card,
    .courses-list-view-card {
        border-radius: 16px !important;
        background: rgba(30, 41, 59, 0.7) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        margin-bottom: 14px !important;
        overflow: hidden !important;
    }
}

/* =========================================================
   3. STRATUM PWA INSTALL BANNER & MODAL STYLES
   ========================================================= */
.stratum-pwa-banner {
    position: fixed;
    bottom: 74px;
    left: 12px;
    right: 12px;
    max-width: 440px;
    margin: 0 auto;
    z-index: 1055;
    opacity: 0;
    transform: translateY(25px);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.stratum-pwa-banner.stratum-pwa-show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.pwa-banner-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.97) 0%, rgba(30, 27, 75, 0.97) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.45);
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(99, 102, 241, 0.25);
}

.pwa-card-main {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    margin-bottom: 12px;
}

.pwa-icon-wrap {
    flex-shrink: 0;
}

.pwa-app-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
}

.pwa-info {
    flex: 1;
    min-width: 0;
}

.pwa-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(99, 102, 241, 0.25);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
    color: #c7d2fe;
    margin-bottom: 3px;
}

.pwa-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
    line-height: 1.3;
}

.pwa-desc {
    font-size: 11.5px;
    color: #94a3b8;
    margin-bottom: 0;
    line-height: 1.4;
}

.pwa-dismiss-btn {
    position: absolute;
    top: -4px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #94a3b8;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

[dir="rtl"] .pwa-dismiss-btn {
    left: -4px;
    right: auto;
}

[dir="ltr"] .pwa-dismiss-btn {
    right: -4px;
    left: auto;
}

.pwa-dismiss-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.pwa-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pwa-btn-install {
    flex: 1;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4) !important;
    transition: all 0.2s ease !important;
}

.pwa-btn-install:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.6) !important;
}

.pwa-btn-later {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

.pwa-btn-later:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* iOS Safari Guide Modal */
.stratum-pwa-ios-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ios-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
}

.ios-modal-card {
    position: relative;
    background: #0f172a;
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 20px;
    max-width: 380px;
    width: 100%;
    z-index: 2;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

@media (max-width: 767.98px) {
    body.has-pwa-banner .floating-whatsapp-btn {
        bottom: 215px !important;
        transition: bottom 0.35s ease !important;
    }
}


/* ==========================================================================
   STRATUM HIGH-CONTRAST ACCESSIBILITY & BADGE COLOR SYSTEM (WCAG AAA)
   Ensures crystal-clear readability: No blue text on light-blue/cyan ever.
   ========================================================================== */

/* Universal Badge Baseline */
.badge {
    letter-spacing: 0.2px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-shadow: none !important;
}

/* Light / Soft Badges & Pills - Always Dark High-Contrast Text */
.badge.bg-primary.bg-opacity-10,
.badge.bg-primary.bg-opacity-10.text-primary,
.badge.bg-opacity-10.text-primary,
.badge.text-primary {
    background-color: #eef2ff !important;
    color: #1e1b4b !important; /* Deep Navy */
    border: 1px solid #c7d2fe !important;
}

.badge.bg-info.bg-opacity-10,
.badge.bg-info.bg-opacity-10.text-info,
.badge.bg-opacity-10.text-info,
.badge.text-info {
    background-color: #ecfeff !important;
    color: #083344 !important; /* Deep Cyan */
    border: 1px solid #a5f3fc !important;
}

.badge.bg-success.bg-opacity-10,
.badge.bg-success.bg-opacity-10.text-success,
.badge.bg-opacity-10.text-success,
.badge.text-success {
    background-color: #ecfdf5 !important;
    color: #064e3b !important; /* Deep Forest Green */
    border: 1px solid #a7f3d0 !important;
}

.badge.bg-warning.bg-opacity-10,
.badge.bg-warning.bg-opacity-10.text-warning,
.badge.bg-opacity-10.text-warning {
    background-color: #fefce8 !important;
    color: #713f12 !important; /* Deep Warm Amber */
    border: 1px solid #fde047 !important;
}

.badge.bg-danger.bg-opacity-10,
.badge.bg-danger.bg-opacity-10.text-danger,
.badge.bg-opacity-10.text-danger,
.badge.text-danger {
    background-color: #fef2f2 !important;
    color: #7f1d1d !important; /* Deep Crimson */
    border: 1px solid #fecaca !important;
}

.badge.bg-purple.bg-opacity-10,
.badge.bg-purple.bg-opacity-10.text-purple,
.badge.bg-opacity-10.text-purple {
    background-color: #faf5ff !important;
    color: #581c87 !important; /* Deep Violet */
    border: 1px solid #e9d5ff !important;
}

.badge.bg-secondary.bg-opacity-10,
.badge.bg-secondary.bg-opacity-10.text-secondary {
    background-color: #f1f5f9 !important;
    color: #0f172a !important; /* Deep Slate */
    border: 1px solid #cbd5e1 !important;
}

/* Light / White Badges - Must have dark text */
.badge.bg-light,
.badge.bg-white {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
}

/* Solid Badges - Pure White Text on Dark/Vibrant Backgrounds */
.badge.bg-primary:not([class*="bg-opacity"]),
.badge.bg-primary:not([class*="bg-opacity"]) * {
    background-color: #4338ca !important;
    color: #ffffff !important;
}

.badge.bg-secondary:not([class*="bg-opacity"]),
.badge.bg-secondary:not([class*="bg-opacity"]) * {
    background-color: #334155 !important;
    color: #ffffff !important;
}

.badge.bg-success:not([class*="bg-opacity"]),
.badge.bg-success:not([class*="bg-opacity"]) * {
    background-color: #059669 !important;
    color: #ffffff !important;
}

.badge.bg-info:not([class*="bg-opacity"]),
.badge.bg-info:not([class*="bg-opacity"]) * {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}

.badge.bg-danger:not([class*="bg-opacity"]),
.badge.bg-danger:not([class*="bg-opacity"]) * {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

.badge.bg-dark:not([class*="bg-opacity"]),
.badge.bg-dark:not([class*="bg-opacity"]) * {
    background-color: #0f172a !important;
    color: #ffffff !important;
}

/* Solid Warning / Yellow Badge - Must have Dark Text */
.badge.bg-warning:not([class*="bg-opacity"]),
.badge.bg-warning:not([class*="bg-opacity"]) * {
    background-color: #fbbf24 !important;
    color: #0f172a !important;
}

/* Soft Icon Boxes across site */
.bg-primary.bg-opacity-10 {
    background-color: #eef2ff !important;
}
.bg-primary.bg-opacity-10 i,
.bg-primary.bg-opacity-10.text-primary,
.bg-primary.bg-opacity-10 .text-primary {
    color: #312e81 !important;
}

.bg-info.bg-opacity-10 {
    background-color: #ecfeff !important;
}
.bg-info.bg-opacity-10 i,
.bg-info.bg-opacity-10.text-info,
.bg-info.bg-opacity-10 .text-info {
    color: #083344 !important;
}

.bg-success.bg-opacity-10 {
    background-color: #ecfdf5 !important;
}
.bg-success.bg-opacity-10 i,
.bg-success.bg-opacity-10.text-success,
.bg-success.bg-opacity-10 .text-success {
    color: #064e3b !important;
}

.bg-warning.bg-opacity-10 {
    background-color: #fefce8 !important;
}
.bg-warning.bg-opacity-10 i,
.bg-warning.bg-opacity-10.text-warning,
.bg-warning.bg-opacity-10 .text-warning {
    color: #713f12 !important;
}

.bg-danger.bg-opacity-10 {
    background-color: #fef2f2 !important;
}
.bg-danger.bg-opacity-10 i,
.bg-danger.bg-opacity-10.text-danger,
.bg-danger.bg-opacity-10 .text-danger {
    color: #7f1d1d !important;
}


/* ==========================================================================
   STRATUM DESKTOP HIGH-CONTRAST ACCESSIBILITY ENGINE (WCAG AAA)
   Fixes all dark-on-dark text, ensures crystal-clear readability on all large screens.
   ========================================================================== */

/* Universal High Contrast Baseline for Content */
.home1-section-title .title,
h1.title,
.home1-section-title h1 {
    color: #0f172a !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

.home1-section-title .info,
.home1-section-title p {
    color: #475569 !important;
    font-weight: 500 !important;
}

.category-type1-title {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.lms1-cCard-title,
.courses-text h5,
.course-card1-details .title-info .title {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* Large Screens (>= 992px) */
@media (min-width: 992px) {
    /* 1. Header Navigation Bar: Dark Midnight Glass with Pure White & High-Contrast Links */
    nav.navbar.tariq-glass,
    .stratum-mobile-app-header {
        background: rgba(15, 23, 42, 0.96) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    }

    /* All Top-Level Navbar text and links */
    nav.navbar .nav-link,
    nav.navbar .nav-item > a,
    nav.navbar .navbar-nav > li > a,
    nav.navbar .navbar-collapse > a,
    nav.navbar .right-menubar > a,
    nav.navbar .navbar-nav > li > a > span,
    nav.navbar .nav-link > span {
        color: #ffffff !important;
        font-weight: 600 !important;
        font-size: 14.5px !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
        transition: color 0.2s ease, transform 0.2s ease !important;
    }

    nav.navbar .nav-link:hover,
    nav.navbar .nav-item > a:hover,
    nav.navbar .navbar-nav > li > a:hover {
        color: #38bdf8 !important; /* Electric Cyan Hover */
    }

    /* Stratum Lab Link */
    #stratumLabDropdown {
        color: #c7d2fe !important;
    }
    #stratumLabDropdown:hover {
        color: #e0e7ff !important;
    }

    /* Stratum Pro Link */
    nav.navbar a[href*="pro"] {
        color: #fde047 !important;
    }

    /* Consultation Link */
    nav.navbar a[href*="consultations"] {
        color: #a5b4fc !important;
    }

    /* Stratum Atlas Link */
    nav.navbar a[href*="blogs"] {
        color: #67e8f9 !important;
    }

    /* Dropdown Menus on Hover */
    .main-nav-wrap li .navbarHover {
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
        border-radius: 12px !important;
    }
    .navbarHover a,
    .navbarHover strong,
    .navbarHover .text-cat,
    .navbarHover span {
        color: #0f172a !important;
        text-shadow: none !important;
    }
    .navbarHover span.text-muted {
        color: #64748b !important;
    }
    .navbarHover li a:hover {
        background-color: #f1f5f9 !important;
        color: #4f46e5 !important;
    }

    /* Search Bar on Desktop */
    .header-search {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    .header-search input.search-input {
        color: #ffffff !important;
    }
    .header-search input.search-input::placeholder {
        color: rgba(255, 255, 255, 0.6) !important;
    }
    .header-search svg path {
        fill: #ffffff !important;
    }

    /* Cart Icon SVG */
    .menu_pro_cart_tgl svg path {
        fill: #ffffff !important;
    }

    /* 2. Hero Section on Desktop */
    .lms-hero-section2 {
        background-color: #ffffff !important;
    }
    .title-9, .fs-52px {
        color: #0f172a !important;
        font-weight: 800 !important;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) !important;
    }
    .subtitle-9 {
        color: #334155 !important;
        font-weight: 500 !important;
    }

    /* 3. Cards & Sections Background on Desktop */
    .course-card1-link,
    .lms1-course-card,
    .courses-card-body {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    }

    /* 4. Breadcrumbs on Desktop */
    .bread-crumb {
        background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%) !important;
        padding: 40px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    .bread-crumb h1 {
        color: #ffffff !important;
        font-weight: 800 !important;
    }
    .bread-crumb .breadcrumb a,
    .bread-crumb .breadcrumb-item {
        color: #cbd5e1 !important;
    }
    .bread-crumb .breadcrumb-item.active {
        color: #ffffff !important;
        font-weight: 600 !important;
    }
}


    /* STRICT DROPDOWN FIX: ALL text inside dropdowns, popovers, and hover menus MUST BE DARK on white background */
    nav.navbar .navbarHover,
    nav.navbar ul.navbarHover,
    nav.navbar .dropdown-menu,
    nav.navbar .sub-category-menu,
    nav.navbar .menu_pro_wish,
    nav.navbar .menu_pro_tgl_bg {
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
        border-radius: 14px !important;
    }

    nav.navbar .navbarHover *,
    nav.navbar ul.navbarHover *,
    nav.navbar .dropdown-menu *,
    nav.navbar .sub-category-menu *,
    nav.navbar .menu_pro_wish *,
    nav.navbar .menu_pro_tgl_bg * {
        text-shadow: none !important;
    }

    nav.navbar .navbarHover a,
    nav.navbar ul.navbarHover a,
    nav.navbar .navbarHover li a,
    nav.navbar .dropdown-menu a,
    nav.navbar .sub-category-menu a {
        color: #0f172a !important;
    }

    nav.navbar .navbarHover strong,
    nav.navbar ul.navbarHover strong,
    nav.navbar .navbarHover h4,
    nav.navbar .navbarHover h5,
    nav.navbar .navbarHover h6,
    nav.navbar .navbarHover .text-cat {
        color: #0f172a !important;
        font-weight: 700 !important;
    }

    nav.navbar .navbarHover span,
    nav.navbar ul.navbarHover span,
    nav.navbar .navbarHover p,
    nav.navbar .dropdown-menu span,
    nav.navbar .sub-category-menu span {
        color: #475569 !important; /* Deep Slate Gray - 100% visible on white */
    }

    nav.navbar .navbarHover span.text-muted,
    nav.navbar ul.navbarHover span.text-muted,
    nav.navbar .navbarHover .text-muted,
    nav.navbar .dropdown-menu .text-muted {
        color: #475569 !important; /* Never white or faint */
        font-size: 11.5px !important;
        font-weight: 500 !important;
    }

    nav.navbar .navbarHover li a:hover,
    nav.navbar ul.navbarHover li a:hover {
        background-color: #f1f5f9 !important;
        color: #4f46e5 !important;
    }

    nav.navbar .navbarHover li a:hover strong {
        color: #4f46e5 !important;
    }

    nav.navbar .navbarHover li a:hover span {
        color: #1e1b4b !important;
    }

/* ==========================================================================
   STRATUM HIGH-CONTRAST & ACCESSIBILITY MASTER RULES (WCAG AA/AAA COMPLIANT)
   Fixes all light-on-light and dark-on-dark contrast discrepancies site-wide
   ========================================================================== */

/* 1. Universal Breadcrumbs on Dark Backgrounds */
.bread-crumb,
.bread-crumb.courses-details {
    background: linear-gradient(135deg, #0b0f19 0%, #1e1b4b 60%, #312e81 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.bread-crumb h1,
.bread-crumb .courses-details-1st-text h1 {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35) !important;
}
.bread-crumb p,
.bread-crumb .courses-details-1st-text p {
    color: #e2e8f0 !important;
    font-size: 15.5px !important;
    line-height: 1.7 !important;
}
.bread-crumb .breadcrumb,
.bread-crumb .breadcrumb li,
.bread-crumb .breadcrumb a,
.bread-crumb .breadcrumb span,
.bread-crumb .breadcrumb-item,
.bread-crumb .breadcrumb-item a,
.bread-crumb .breadcrumb-item span,
.bread-crumb .nBread a,
.bread-crumb .nBread span {
    color: #cbd5e1 !important;
    text-decoration: none !important;
}
.bread-crumb .breadcrumb-item.active,
.bread-crumb .breadcrumb-item.active span,
.bread-crumb .nBread .breadcrumb-item.active {
    color: #ffffff !important;
    font-weight: 700 !important;
}
.bread-crumb .breadcrumb a:hover,
.bread-crumb .breadcrumb-item a:hover,
.bread-crumb .nBread a:hover {
    color: #38bdf8 !important;
}
.bread-crumb .breadcrumb i,
.bread-crumb .brd-home,
.bread-crumb .fa-chevron-right,
.bread-crumb .fa-chevron-left {
    color: #94a3b8 !important;
}

/* Course Details Banner Meta Info */
.courses-details .info-tag,
.courses-details .info-tag p,
.courses-details .info-tag span,
.courses-details .info-tag a,
.courses-details .info-tag i,
.courses-details .eInfo p,
.courses-details .eInfo a,
.courses-details .created-by-instructor,
.courses-details .f-14 {
    color: #f8fafc !important;
}
.courses-details .info-tag svg,
.courses-details .info-tag svg path {
    fill: #f8fafc !important;
}
.courses-details .info-tag i.fa-star {
    color: #fbbf24 !important;
}
.courses-details .created-by-instructor:hover {
    color: #38bdf8 !important;
    text-decoration: underline !important;
}

/* 2. Global Pagination High-Contrast Fix (Eliminate White-on-White) */
.page-item .page-link,
.page-item:last-child .page-link,
.page-item:first-child .page-link,
.page-item:last-child:not(.active) .page-link,
.page-item:first-child:not(.active) .page-link {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}
.page-item .page-link:hover,
.page-item:last-child:not(.active) .page-link:hover,
.page-item:first-child:not(.active) .page-link:hover {
    background-color: #f1f5f9 !important;
    color: #0284c7 !important;
    border-color: #94a3b8 !important;
}
.page-item.active .page-link,
.pagenation .active {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
}

/* 3. Global Accordions & FAQ High Contrast on Light Backgrounds */
.accordion-item,
.custom-accordion-two .accordion-item {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}
.accordion-button {
    color: #0f172a !important;
    font-weight: 700 !important;
    background-color: #ffffff !important;
}
.accordion-button:not(.collapsed) {
    color: #0284c7 !important;
    background-color: #f8fafc !important;
}
.accordion-body,
.accordion-body p,
.accordion-body span,
.accordion-body div,
.custom-accordion-two .accordion-body,
.custom-accordion-two .accordion-body p,
.faq-5 .accordion-body,
.faq-5 .accordion-body p {
    color: #1e293b !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
}

/* 4. Text Contrast Overrides for Dark Containers */
.text-white-50 {
    color: #f1f5f9 !important;
    opacity: 0.94 !important;
}
.bg-dark .text-muted,
.card.bg-dark .text-muted,
.tariq-glass .text-muted,
[style*="background: linear-gradient"] .text-muted:not(.badge):not(.btn) {
    color: #cbd5e1 !important;
}

/* 5. Safe Muted Text on Light Backgrounds (Eliminates Faint Gray) */
body .text-muted:not(.card *),
.card:not(.bg-dark):not([style*="background: linear-gradient"]):not([style*="background: #0"]):not([style*="background:#0"]) .text-muted {
    color: #475569 !important; /* Deep Slate Gray - AA contrast */
}

/* 6. Pricing Badges & Strikethroughs */
.lms1-btn-dark,
.course-price,
span.btn.lms1-btn-dark {
    background-color: #0f172a !important;
    color: #ffffff !important;
}
.lms1-btn-dark del,
.course-price del,
span.btn.lms1-btn-dark del {
    color: #cbd5e1 !important;
    opacity: 0.88 !important;
    font-size: 12px !important;
}

/* 7. Yellow & Light Badges High Contrast */
.badge.bg-warning,
.badge[style*="background: #fef08a"],
.badge[style*="background: #fbbf24"],
.badge[style*="background:#fbbf24"] {
    color: #0f172a !important;
    font-weight: 700 !important;
}
.badge.bg-light {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 700 !important;
}

/* 8. Desktop & Mobile Header Contrast Protection */
.header-search-icon,
.header-search-icon svg,
.header-search-icon svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
}
.header-search input.search-input {
    color: #ffffff !important;
}
.header-search input.search-input::placeholder {
    color: #94a3b8 !important;
}

/* 9. Desktop & Mobile Footers */
.lms2-footer-section .ft2-title {
    color: #f8fafc !important;
    font-weight: 700 !important;
}
.lms2-footer-section .ft2-nav-link {
    color: #cbd5e1 !important;
}
.lms2-footer-section .ft2-nav-link:hover {
    color: #38bdf8 !important;
}
.lms2-footer-section p {
    color: #e2e8f0 !important;
}


/* ==========================================================================
   STRATUM MASTER RESPONSIVE SPACING & DIMENSIONS ENGINE (2026)
   ========================================================================== */

/* 1. Global Container & Typography Scaling */
@media (min-width: 1400px) {
    .container, .container-lg, .container-xl, .container-xxl {
        max-width: 1360px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    .container {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .navbar .nav-link {
        font-size: 12.5px !important;
        padding: 5px 7px !important;
    }
    .navbar-brand img {
        max-height: 36px !important;
    }
}

/* 2. Desktop Navigation Bar Fine-Tuning */
@media (min-width: 992px) {
    .stratum-mobile-app-header {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    .navbar .navbar-nav {
        align-items: center !important;
    }
    .navbar .nav-link {
        font-size: 13.5px !important;
        font-weight: 600 !important;
        padding: 6px 10px !important;
        letter-spacing: -0.2px;
    }
    .navbarHover {
        border-radius: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4) !important;
    }
}

/* 3. Hero Banners Responsive Hierarchy */
@media (min-width: 992px) {
    .claim-hero,
    .bmr-hero,
    .costing-hero,
    .formula-doctor-hero,
    .concierge-hero,
    .vault-hero {
        padding: 45px 0 38px !important;
    }
    .claim-hero h1,
    .bmr-hero h1,
    .costing-hero h1,
    .formula-doctor-hero h1,
    .concierge-hero h1 {
        font-size: 2.1rem !important;
        line-height: 1.35 !important;
    }
}

@media (max-width: 767.98px) {
    /* Mobile Hero Banners */
    .claim-hero,
    .bmr-hero,
    .costing-hero,
    .formula-doctor-hero,
    .concierge-hero,
    .vault-hero {
        padding: 22px 0 18px !important;
    }
    .claim-hero h1,
    .bmr-hero h1,
    .costing-hero h1,
    .formula-doctor-hero h1,
    .concierge-hero h1,
    .stratum-showcase-section h2 {
        font-size: 1.45rem !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }
    .claim-hero .lead,
    .bmr-hero .lead,
    .costing-hero .lead,
    .formula-doctor-hero .lead,
    .concierge-hero .lead,
    .stratum-showcase-section .lead {
        font-size: 0.88rem !important;
        line-height: 1.65 !important;
        margin-bottom: 12px !important;
    }
    
    /* Mobile Card Paddings & Spacing */
    .card,
    .claim-card,
    .bmr-card,
    .costing-card,
    .concierge-card,
    .kpi-card {
        padding: 14px !important;
        border-radius: 14px !important;
        margin-bottom: 14px !important;
    }
    
    /* Mobile Form Inputs */
    .form-control,
    .form-select,
    .bmr-input,
    .concierge-input {
        font-size: 13.5px !important;
        padding: 8px 12px !important;
    }
    
    /* Mobile Buttons */
    .btn-lg {
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
    
    /* Mobile Tables Scrollability */
    .table-responsive,
    .bmr-sheet table,
    .costing-card table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Mobile Floating Buttons Placement */
    .floating-whatsapp-btn {
        bottom: 74px !important;
        left: 14px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 22px !important;
        z-index: 1040 !important;
    }
    [dir="rtl"] .floating-whatsapp-btn {
        right: auto !important;
        left: 14px !important;
    }
    
    .floating-notif-btn {
        bottom: 126px !important;
        left: 14px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
        z-index: 1035 !important;
    }
    [dir="rtl"] .floating-notif-btn {
        right: auto !important;
        left: 14px !important;
    }
}


/* ==========================================================================
   STRATUM MASTER RESPONSIVE LAYOUT & DESKTOP NAVIGATION ENGINE (2026)
   ========================================================================== */

/* 1. Global Viewport & Horizontal Overflow Prevention */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* 2. Global Container System & Margin Consistency */
@media (min-width: 1400px) {
    .container, .container-lg, .container-xl, .container-xxl,
    body > header .container,
    body > header .sub-header .container,
    section .container {
        max-width: 1380px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    .container,
    body > header .container,
    body > header .sub-header .container,
    section .container {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 991.98px) {
    .container,
    section .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* 3. Master Desktop Header Navigation (Screens >= 992px) */
@media (min-width: 992px) {
    /* Navbar Main Container */
    nav.navbar.stratum-mobile-app-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1060 !important;
        width: 100% !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        background: rgba(11, 15, 25, 0.96) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35) !important;
        overflow: visible !important;
    }

    nav.navbar.stratum-mobile-app-header > .header-navbar-fluid,
    nav.navbar.stratum-mobile-app-header > .container {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: clamp(16px, 2.5vw, 40px) !important;
        padding-right: clamp(16px, 2.5vw, 40px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible !important;
    }

    /* Brand Logo Wrap */
    .stratum-mobile-top-row {
        display: flex !important;
        align-items: center !important;
        margin-inline-end: 12px !important;
        flex-shrink: 0 !important;
    }

    .stratum-mobile-top-row .navbar-brand {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .stratum-app-logo {
        height: 38px !important;
        width: auto !important;
        max-width: 135px !important;
        object-fit: contain !important;
    }

    /* Force Desktop Navbar Collapse to show horizontally */
    .navbar-expand-lg .navbar-collapse,
    nav.navbar .navbar-collapse {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-grow: 1 !important;
        flex-basis: auto !important;
        overflow: visible !important;
        gap: 6px !important;
    }

    /* Main Navigation links */
    nav.navbar .navbar-nav.main-nav-wrap,
    nav.navbar .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    nav.navbar .navbar-nav .nav-item {
        position: relative !important;
        flex-shrink: 0 !important;
    }

    nav.navbar .nav-link {
        color: #f1f5f9 !important;
        font-weight: 600 !important;
        font-size: 12.5px !important;
        padding: 6px 7px !important;
        white-space: nowrap !important;
        border-radius: 8px !important;
        letter-spacing: -0.2px !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
        transition: all 0.15s ease !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    nav.navbar .nav-link:hover {
        color: #38bdf8 !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }

    /* Dropdown Hover Windows */
    nav.navbar .navbarHover {
        position: absolute !important;
        top: 100% !important;
        z-index: 1070 !important;
        background: #ffffff !important;
        border-radius: 14px !important;
        box-shadow: 0 18px 45px -10px rgba(0, 0, 0, 0.45) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    /* Right Menubar (Actions, Currency, Cart, User) */
    nav.navbar .right-menubar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        margin-inline-start: auto !important;
    }

    /* Compact Search Trigger Button */
    .search-input-form .search-input-button {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        color: #ffffff !important;
        font-size: 13px !important;
    }

    .search-input-form .search-input-button:hover {
        background: rgba(255, 255, 255, 0.18) !important;
    }

    /* Currency Dropdown Button */
    #currencyDropdownMenu {
        font-size: 12px !important;
        padding: 3px 8px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
    }

    /* Cart & Wishlist Buttons */
    .wisth_tgl_2div .menu_pro_cart_tgl {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px 6px !important;
        position: relative !important;
    }

    .menu_number {
        position: absolute !important;
        top: -4px !important;
        right: -6px !important;
        background: #ef4444 !important;
        color: #ffffff !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        padding: 1px 5px !important;
        border-radius: 10px !important;
    }

    /* Hide Mobile Exclusive Elements on Desktop */
    .mobile-permanent-search-bar,
    .menu-offcanves.d-lg-none,
    .inline-form {
        display: none !important;
    }
}

/* Responsive Desktop Screen Scales */
@media (min-width: 992px) and (max-width: 1249.98px) {
    nav.navbar .nav-link {
        font-size: 11px !important;
        padding: 4px 4px !important;
    }
    .header-nav-badge {
        font-size: 8px !important;
        padding: 1px 3px !important;
    }
    .stratum-app-logo {
        max-width: 105px !important;
        height: 32px !important;
    }
    nav.navbar .right-menubar {
        gap: 3px !important;
    }
    nav.navbar .right-menubar .btn-sm {
        padding: 2px 7px !important;
        font-size: 11.5px !important;
    }
}

@media (min-width: 1250px) and (max-width: 1499.98px) {
    nav.navbar .nav-link {
        font-size: 12px !important;
        padding: 5px 6px !important;
    }
    .header-nav-badge {
        font-size: 9px !important;
        padding: 2px 4px !important;
    }
}

@media (min-width: 1500px) {
    nav.navbar .nav-link {
        font-size: 13px !important;
        padding: 6px 9px !important;
    }
    nav.navbar .navbar-nav.main-nav-wrap {
        gap: 4px !important;
    }
    nav.navbar .right-menubar {
        gap: 8px !important;
    }
}

/* 4. Small Screen Adjustments (< 992px) */
@media (max-width: 991.98px) {
    nav.navbar.stratum-mobile-app-header > .header-navbar-fluid,
    nav.navbar.stratum-mobile-app-header > .container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .stratum-mobile-top-row {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .sub-header {
        display: none !important;
    }
    nav.navbar .navbar-collapse {
        display: none !important;
    }
    .mobile-permanent-search-bar {
        display: block !important;
        width: 100% !important;
        margin-top: 6px !important;
    }
    .inline-form {
        display: none !important;
    }
}


/* ==========================================================================
   STRATUM DESKTOP HEADER BULLETPROOF RESPONSIVE OVERRIDE (ANTI-OVERFLOW)
   ========================================================================== */
@media (min-width: 992px) {
    nav.navbar.stratum-mobile-app-header {
        overflow: visible !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    nav.navbar.stratum-mobile-app-header > .header-navbar-fluid,
    nav.navbar.stratum-mobile-app-header > .container {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: clamp(8px, 1.2vw, 18px) !important;
        padding-right: clamp(8px, 1.2vw, 18px) !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .stratum-mobile-top-row {
        margin-inline-end: 8px !important;
        flex-shrink: 0 !important;
    }

    .stratum-app-logo {
        height: 34px !important;
        width: auto !important;
        max-width: 125px !important;
        object-fit: contain !important;
    }

    .navbar-expand-lg .navbar-collapse,
    nav.navbar .navbar-collapse {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-grow: 1 !important;
        overflow: visible !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    nav.navbar .navbar-nav.main-nav-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        flex-shrink: 1 !important;
    }

    nav.navbar .navbar-nav .nav-item {
        position: relative !important;
        flex-shrink: 0 !important;
    }

    nav.navbar .nav-link {
        color: #f1f5f9 !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        padding: 4px 6px !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    nav.navbar .right-menubar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
        margin-inline-start: auto !important;
    }

    .search-input-form .search-input-button {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
    }
}

/* Scaling down gracefully on laptops & medium desktop displays (992px to 1440px) */
@media (min-width: 992px) and (max-width: 1440px) {
    nav.navbar .nav-link {
        font-size: 11px !important;
        padding: 3px 4.5px !important;
        letter-spacing: -0.2px !important;
    }
    nav.navbar .nav-link i {
        font-size: 11px !important;
    }
    .stratum-app-logo {
        max-width: 110px !important;
        height: 30px !important;
    }
    nav.navbar .right-menubar {
        gap: 3px !important;
    }
    nav.navbar .right-menubar .btn-sm {
        padding: 2px 6px !important;
        font-size: 11px !important;
    }
    #currencyDropdownMenu {
        font-size: 11px !important;
        padding: 2px 5px !important;
    }
}

/* Ultra compact for smaller laptops & tablets (992px to 1220px) */
@media (min-width: 992px) and (max-width: 1220px) {
    nav.navbar .nav-link {
        font-size: 10.5px !important;
        padding: 2px 3.5px !important;
    }
    .stratum-mobile-top-row {
        margin-inline-end: 4px !important;
    }
    .stratum-app-logo {
        max-width: 95px !important;
        height: 28px !important;
    }
}

#offcanvasWithBothOptions.offcanvas.show {
  display: flex !important;
  visibility: visible !important;
  transform: none !important;
}

/* ==========================================================================
   STRATUM FIX (2026-10-12): Desktop = logo only in top sub-header.
   The in-navbar logo row is MOBILE-ONLY; hide it on desktop so the menu
   gets the full width (it was taking 100% width and pushing the menu off-screen).
   ========================================================================== */
@media (min-width: 992px) {
    header nav.navbar.stratum-mobile-app-header .stratum-mobile-top-row,
    nav.navbar .stratum-mobile-top-row.d-lg-none {
        display: none !important;
        width: 0 !important;
    }
    header nav.navbar.stratum-mobile-app-header #navbarSupportedContent {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    header nav.navbar.stratum-mobile-app-header {
        position: sticky !important;
        top: 0 !important;
        margin-top: 0 !important;
    }
}
/* ==========================================================================
   STRATUM HEADER & NAVIGATION - MASTER RESPONSIVE PERFECTION
   Date: 2026-10-12
   1. Sub-header: Desktop-only, contains the ONLY desktop logo, contact, language & social.
      Padded identically to navbar container so logo never hugs edge or clips.
   2. Navbar: Logo row completely hidden on Desktop (min-width: 992px).
      Menu items & action buttons fluidly scale to fit 992px to 4K screens.
      Login & Join buttons ALWAYS 100% visible, never pushed off-screen.
   3. Mobile (< 992px):
      Sub-header hidden.
      Mobile top row active with well-proportioned logo, cart badge, and 3-lines drawer trigger.
      Drawer (#offcanvasWithBothOptions) opens reliably with full menu.
   ========================================================================== */

/* --- SUB-HEADER (DESKTOP ONLY) --- */
@media (min-width: 992px) {
    header .sub-header {
        display: block !important;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.92)) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 4px 0 !important;
    }

    header .sub-header > .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: clamp(16px, 2.5vw, 40px) !important;
        padding-right: clamp(16px, 2.5vw, 40px) !important;
    }

    header .sub-header .stratum-top-logo {
        height: clamp(36px, 2.6vw, 44px) !important;
        width: auto !important;
        max-width: 180px !important;
        object-fit: contain !important;
        display: block !important;
    }

    header .sub-header .navbar-brand {
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

@media (max-width: 991.98px) {
    header .sub-header {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* --- NAVBAR (DESKTOP: min-width: 992px) --- */
@media (min-width: 992px) {
    /* Hide the mobile logo row completely on desktop so it NEVER shows twice */
    header nav.navbar.stratum-mobile-app-header .stratum-mobile-top-row,
    nav.navbar .stratum-mobile-top-row,
    .stratum-mobile-top-row.d-lg-none {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 0% !important;
    }

    /* Container */
    nav.navbar.stratum-mobile-app-header > .header-navbar-fluid,
    nav.navbar.stratum-mobile-app-header > .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: clamp(16px, 2.5vw, 40px) !important;
        padding-right: clamp(16px, 2.5vw, 40px) !important;
        overflow: visible !important;
    }

    /* Navbar Collapse Content */
    header nav.navbar.stratum-mobile-app-header #navbarSupportedContent,
    nav.navbar .navbar-collapse {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        overflow: visible !important;
        gap: clamp(4px, 0.8vw, 14px) !important;
    }

    /* Main Menu Links Wrap */
    .navbar-nav.main-nav-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(1px, 0.35vw, 6px) !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 1 !important;
    }

    .navbar-nav.main-nav-wrap .nav-item {
        display: flex !important;
        align-items: center !important;
    }

    .navbar-nav.main-nav-wrap .nav-item .nav-link {
        font-size: clamp(11px, 0.78vw, 13.5px) !important;
        padding: 4px clamp(3px, 0.35vw, 8px) !important;
        white-space: nowrap !important;
        font-weight: 600 !important;
        letter-spacing: -0.15px !important;
    }

    .navbar-nav.main-nav-wrap .nav-item .nav-link i {
        font-size: clamp(10px, 0.72vw, 13px) !important;
        margin-inline-end: 2px !important;
    }

    .navbar-nav.main-nav-wrap .nav-item .nav-link .header-nav-badge {
        font-size: 9px !important;
        padding: 1px 5px !important;
    }

    /* Right Menubar (Alerts, Currency, Cart, Login, Join) */
    .right-menubar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(3px, 0.4vw, 8px) !important;
        margin-inline-start: auto !important;
        flex-shrink: 0 !important;
    }

    .right-menubar .btn,
    .right-menubar a.btn {
        font-size: clamp(11px, 0.75vw, 13px) !important;
        padding: 3px clamp(6px, 0.6vw, 12px) !important;
        white-space: nowrap !important;
    }

    .right-menubar #currencyDropdownMenu {
        font-size: clamp(10.5px, 0.72vw, 12.5px) !important;
        padding: 2px clamp(5px, 0.4vw, 8px) !important;
    }

    /* Permanent search form on desktop - hide mobile search */
    .mobile-permanent-search-bar.d-lg-none {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* --- MOBILE & TABLET (< 992px) --- */
@media (max-width: 991.98px) {
    header nav.navbar.stratum-mobile-app-header .stratum-mobile-top-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 0 4px !important;
    }

    .stratum-app-logo {
        height: 38px !important;
        width: auto !important;
        max-width: 150px !important;
        object-fit: contain !important;
        display: block !important;
    }

    .btn-app-header-action {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    /* Drawer offcanvas */
    #offcanvasWithBothOptions.offcanvas {
        max-width: 340px !important;
        width: 85vw !important;
        background: #0f172a !important;
    }

    #offcanvasWithBothOptions.offcanvas.show {
        display: flex !important;
        visibility: visible !important;
        transform: none !important;
    }
}
/* ==========================================================================
   STRATUM HEADER & NAVIGATION - MASTER RESPONSIVE PERFECTION
   Date: 2026-10-12
   1. Sub-header: Active on Desktop (min-width: 1200px).
      Contains the ONLY desktop logo, contact info, language, and social icons.
      Padded identically to navbar container so logo never hugs edge or clips.
   2. Navbar: Logo row completely hidden on Desktop (min-width: 1200px).
      Menu items & action buttons fit comfortably on 1200px to 4K screens.
      Login & Join buttons ALWAYS 100% visible, never pushed off-screen.
   3. Tablet & Mobile (< 1200px):
      Sub-header hidden.
      Mobile top row active with well-proportioned logo, cart badge, and 3-lines drawer trigger.
      Drawer (#offcanvasWithBothOptions) opens reliably with full menu, Login, and Academy.
   ========================================================================== */

/* --- SUB-HEADER (DESKTOP: min-width: 1200px) --- */
@media (min-width: 1200px) {
    header .sub-header {
        display: block !important;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.92)) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 5px 0 !important;
    }

    header .sub-header > .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: clamp(20px, 3vw, 48px) !important;
        padding-right: clamp(20px, 3vw, 48px) !important;
    }

    header .sub-header .stratum-top-logo {
        height: 44px !important;
        width: auto !important;
        max-width: 180px !important;
        object-fit: contain !important;
        display: block !important;
    }

    header .sub-header .navbar-brand {
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

@media (max-width: 1199.98px) {
    header .sub-header {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* --- NAVBAR (DESKTOP: min-width: 1200px) --- */
@media (min-width: 1200px) {
    /* Hide the in-navbar logo row completely on desktop so it NEVER shows twice */
    header nav.navbar.stratum-mobile-app-header .stratum-mobile-top-row,
    nav.navbar .stratum-mobile-top-row,
    .stratum-mobile-top-row.d-xl-none,
    .stratum-mobile-top-row.d-lg-none {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 0% !important;
    }

    /* Container */
    nav.navbar.stratum-mobile-app-header > .header-navbar-fluid,
    nav.navbar.stratum-mobile-app-header > .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: clamp(20px, 3vw, 48px) !important;
        padding-right: clamp(20px, 3vw, 48px) !important;
        overflow: visible !important;
    }

    /* Navbar Collapse Content */
    header nav.navbar.stratum-mobile-app-header #navbarSupportedContent,
    nav.navbar .navbar-collapse {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        overflow: visible !important;
        gap: clamp(4px, 0.8vw, 14px) !important;
    }

    /* Main Menu Links Wrap */
    .navbar-nav.main-nav-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(1px, 0.35vw, 6px) !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 1 !important;
    }

    .navbar-nav.main-nav-wrap .nav-item {
        display: flex !important;
        align-items: center !important;
    }

    .navbar-nav.main-nav-wrap .nav-item .nav-link {
        font-size: clamp(12px, 0.82vw, 14px) !important;
        padding: 4px clamp(3px, 0.4vw, 8px) !important;
        white-space: nowrap !important;
        font-weight: 600 !important;
        letter-spacing: -0.15px !important;
    }

    .navbar-nav.main-nav-wrap .nav-item .nav-link i {
        font-size: clamp(11px, 0.75vw, 13px) !important;
        margin-inline-end: 3px !important;
    }

    .navbar-nav.main-nav-wrap .nav-item .nav-link .header-nav-badge {
        font-size: 9px !important;
        padding: 1px 5px !important;
    }

    /* Right Menubar (Alerts, Currency, Cart, Login, Join) */
    .right-menubar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(4px, 0.5vw, 10px) !important;
        margin-inline-start: auto !important;
        flex-shrink: 0 !important;
    }

    .right-menubar .btn,
    .right-menubar a.btn {
        font-size: clamp(11.5px, 0.78vw, 13px) !important;
        padding: 4px clamp(8px, 0.7vw, 14px) !important;
        white-space: nowrap !important;
    }

    .right-menubar #currencyDropdownMenu {
        font-size: clamp(11px, 0.75vw, 12.5px) !important;
        padding: 3px clamp(6px, 0.5vw, 10px) !important;
    }

    /* Permanent search form on desktop - hide mobile search */
    .mobile-permanent-search-bar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* --- MOBILE & TABLET (< 1200px) --- */
@media (max-width: 1199.98px) {
    header nav.navbar.stratum-mobile-app-header .stratum-mobile-top-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 0 4px !important;
    }

    header nav.navbar.stratum-mobile-app-header #navbarSupportedContent {
        display: none !important;
    }

    .mobile-permanent-search-bar {
        display: block !important;
        width: 100% !important;
    }

    .stratum-app-logo {
        height: 40px !important;
        width: auto !important;
        max-width: 160px !important;
        object-fit: contain !important;
        display: block !important;
    }

    .btn-app-header-action {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    /* Drawer offcanvas */
    #offcanvasWithBothOptions.offcanvas {
        max-width: 350px !important;
        width: 85vw !important;
        background: #0f172a !important;
    }

    #offcanvasWithBothOptions.offcanvas.show {
        display: flex !important;
        visibility: visible !important;
        transform: none !important;
    }
}
/* ==========================================================================
   STRATUM STYLING REFINEMENT (2026-10-12)
   1. Sub-Header on Desktop:
      - Solid Mauve/Purple (موف) background matching the theme.
      - Navy dark (كحلي) text, links, and icons (#0f172a).
      - Pristine white rounded pill container around the STRATUM logo (مفرغ بالابيض).
   2. Mobile Offcanvas Drawer:
      - Eliminate white backgrounds on click/focus/active on any item.
      - Subtle dark glass highlight (rgba(255,255,255,0.08)) so white text stays 100% visible.
   ========================================================================== */

/* --- 1. SUB-HEADER (DESKTOP: min-width: 1200px) --- */
@media (min-width: 1200px) {
    header .sub-header {
        display: block !important;
        background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 50%, #fae8ff 100%) !important;
        background-color: #ede9fe !important;
        border-bottom: 1px solid rgba(147, 51, 234, 0.18) !important;
        padding: 5px 0 !important;
        position: relative !important;
        z-index: 1040 !important;
    }

    header .sub-header > .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: clamp(20px, 3vw, 48px) !important;
        padding-right: clamp(20px, 3vw, 48px) !important;
    }

    /* White Cutout / Pill around Brand Logo */
    header .sub-header .navbar-brand {
        background: #ffffff !important;
        padding: 5px 16px !important;
        border-radius: 50px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.9) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    header .sub-header .navbar-brand:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
    }

    header .sub-header .stratum-top-logo {
        height: 38px !important;
        width: auto !important;
        max-width: 160px !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Navy text for Phone, Email & Links */
    header .sub-header .icon-left .nav a,
    header .sub-header a.text-white,
    header .sub-header .nav a {
        color: #0f172a !important;
        opacity: 0.9 !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        transition: color 0.2s ease, opacity 0.2s ease !important;
    }

    header .sub-header .icon-left .nav a:hover,
    header .sub-header a.text-white:hover {
        color: #4338ca !important;
        opacity: 1 !important;
    }

    /* Contact Icons (Phone & Email) */
    header .sub-header .icon-left .nav a i.fa-phone-alt,
    header .sub-header .icon-left .nav a i.text-primary {
        color: #2563eb !important;
    }

    header .sub-header .icon-left .nav a i.fa-envelope,
    header .sub-header .icon-left .nav a i.text-info {
        color: #0284c7 !important;
    }

    /* Divider between logo and contact */
    header .sub-header .border-start,
    header .sub-header .border-secondary {
        border-color: rgba(15, 23, 42, 0.15) !important;
    }

    /* Social Icons in Sub-Header */
    header .sub-header .right-icon ul.nav a {
        color: #0f172a !important;
        opacity: 0.8 !important;
        font-size: 13px !important;
        transition: transform 0.2s ease, color 0.2s ease !important;
    }

    header .sub-header .right-icon ul.nav a:hover {
        color: #4338ca !important;
        opacity: 1 !important;
        transform: translateY(-1px) !important;
    }

    /* Language Switcher in Sub-Header */
    header .sub-header .language-control select {
        background: #ffffff !important;
        color: #0f172a !important;
        border: 1px solid rgba(15, 23, 42, 0.2) !important;
        border-radius: 20px !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
    }

    header .sub-header .language-control select option {
        color: #0f172a !important;
        background: #ffffff !important;
    }
}

/* --- 2. MOBILE OFFCANVAS DRAWER - FIX WHITE CLICK BACKGROUND --- */
#offcanvasWithBothOptions.offcanvas {
    background: #0b1120 !important;
    color: #ffffff !important;
}

/* Force all buttons, links and collapsible items to NEVER turn white on click/focus */
#offcanvasWithBothOptions .btn-toggle,
#offcanvasWithBothOptions .btn-toggle-list,
#offcanvasWithBothOptions .btn-toggle-nav a,
#offcanvasWithBothOptions .btn,
#offcanvasWithBothOptions a,
#offcanvasWithBothOptions button {
    outline: none !important;
    box-shadow: none !important;
}

#offcanvasWithBothOptions .btn-toggle {
    background-color: transparent !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

#offcanvasWithBothOptions .btn-toggle:hover,
#offcanvasWithBothOptions .btn-toggle:focus,
#offcanvasWithBothOptions .btn-toggle:active {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

#offcanvasWithBothOptions .btn-toggle[aria-expanded="true"] {
    background-color: rgba(56, 189, 248, 0.12) !important;
    color: #38bdf8 !important;
}

#offcanvasWithBothOptions .btn-toggle-list {
    background-color: transparent !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease !important;
}

#offcanvasWithBothOptions .btn-toggle-list:hover,
#offcanvasWithBothOptions .btn-toggle-list:focus,
#offcanvasWithBothOptions .btn-toggle-list:active {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Sub-category links inside collapsible lists */
#offcanvasWithBothOptions .btn-toggle-nav a {
    color: #cbd5e1 !important;
    background-color: transparent !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

#offcanvasWithBothOptions .btn-toggle-nav a:hover,
#offcanvasWithBothOptions .btn-toggle-nav a:focus,
#offcanvasWithBothOptions .btn-toggle-nav a:active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #38bdf8 !important;
}

/* Category Arrow Icon inside .btn-toggle */
#offcanvasWithBothOptions .btn-toggle::after {
    filter: invert(1) brightness(200%) !important;
}

/* Language and Currency boxes in Drawer */
#offcanvasWithBothOptions .btn-group .btn-outline-light:focus,
#offcanvasWithBothOptions .btn-group .btn-outline-light:active,
#offcanvasWithBothOptions .dropdown button.btn-outline-light:focus,
#offcanvasWithBothOptions .dropdown button.btn-outline-light:active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Nice-select arrow and text in Sub-Header */
header .sub-header .nice-select {
    color: #0f172a !important;
    font-weight: 700 !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.25) !important;
}
header .sub-header .nice-select .current {
    color: #0f172a !important;
    font-weight: 700 !important;
}
header .sub-header .nice-select:after {
    border-bottom: 2px solid #0f172a !important;
    border-right: 2px solid #0f172a !important;
}