@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap");
@import url('custom-toast.css');

.social-menu__link span {
    font-size: 1.5rem;
    /* line-height: 1.9; */
}

.account .nav, .learningBoard .nav, .course-content .nav, .path-content .nav {
    overflow-x: inherit;
}

.invoice-qr img {
    display: block !important;
    border: 1px solid #d9d9d9;
    padding: 15px;
}

@media print {

    body {
        background-color: #fff;
        font-size: 14px;
    }

    th {
        font-size: 12px;
    }

    .receipt {
        width: 100%;
        margin: 0;
        border: none;
        border-radius: 0;
        -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 1);
        box-shadow: 0 0 0 rgba(255, 255, 255, 1);
        padding-left: 10px;
        padding-right: 10px;
        max-width: 100%;
    }

}

.item .quote {
    min-height: 160px;
}

.lessons-list__lesson-item i {
    position: relative;
    top: 20px;
    right: 5px;
}

.discussions .post__excerpt {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.btn-menu-gray {
    color: #121212;
    border-color: #e8e8e8;
}

.quiz-timer {
    position: relative;
    bottom: 100px;
}

.vue-step-wizard {
    display: flex;
    flex-direction: column-reverse;
    background-color: #f6f6f6 !important;
    width: 100% !important;
    padding: 0 !important;
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
    border-radius: 10px !important;
}

.vue-step-wizard .step-body {
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
    width: 100% !important;
    padding: 1.5rem !important;
}

.vue-step-wizard .step-header .step-progress {
    height: 6px !important;
    margin: 1.5rem !important;
    background-color: #e9ecef;
}

.step-progress .bar {
    height: 6px !important;
    border-radius: 1rem;
}

.vue-step-wizard .step-pills, .vue-step-wizard .step-footer {
    display: none;
}

.step-progress .bar {
    background-color: var(--tt-primary-color) !important;
}

.btn-step-disabled {
    background-color: #383836 !important;
    border-color: #484848 !important;
}

.about-tab .container {
    max-width: 100% !important;
}

.droppable {
    width: 400px;
    /* height: 35px; */
    background: var(--tt-light-color);
    /* border-radius: 5px; */
}

.draggable {
    width: 400px;
    /* height: 35px; */
    /* background: #121212; */
    color: #fff;
    /* border-radius: 5px; */
    text-align: center;
}

[v-cloak] {
    display: none !important;
}

.js-owl-ttcards .owl-item img {
}

.tt-card__image {
    /*height: 241px;*/
}

.draggable-vaild {
    background: var(--tt-primary-color);
}

@media (min-width: 992px) {
    .navbar .search-form {
        width: 100% !important;
        margin-left: 20px;
        margin-right: 20px;
    }

    .navbar .navbar-nav {
        white-space: nowrap;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        margin-left: 10px;
    }
}

.social-menu__link--whatsapp {
    background-color: #00E676 !important;
    color: #fff;
}

.social-menu__link--link {
    background-color: #8E9EAF !important;
    color: #fff;
    position: relative;
    top: -1px;
}

#modal_social_share input {
    margin-right: 10px;
}

.js-owl-courses-ttcards .owl-dots .owl-dot {
    background: transparent !important;
    border: none !important;
}

.js-owl-courses-ttcards .owl-nav {
    display: none;
}

.quote__star-icon {
    margin-left: .125rem;
}

.courses-loading .vue-skeletor {
    border-radius: 20px !important;
    margin-left: 10px !important;
    width: 100% !important;
    height: 370px !important;
}

@media (max-width: 1200px) {
    .courses-loading {
        flex-direction: column;
        flex-wrap: wrap;
        height: 370px !important;
        overflow: hidden;
    }

    .courses-loading .vue-skeletor {
        width: 50% !important;
    }
}

@media (max-width: 768px) {
    .courses-loading .vue-skeletor {
        width: 100% !important;
    }
}

.cursor-pointer {
    cursor: pointer !important;
}

.contact-us iframe {
    width: 100%;
    height: 400px;
}

.wpwl-form-card {
    min-width: 20% !important;
    min-height: 20% !important;
    border: none;
    box-shadow: none;
    background: transparent;
    padding-bottom: 0;
    margin-bottom: 0;
}

.wpwl-button-pay {
    font-family: "Tajawal", sans-serif !important;
    margin-top: 10px;
    width: 100%;
    font-weight: bold;
    border: none !important;
    background: var(--tt-primary-color) !important;
}

.wpwl-wrapper label, .wpwl-label {
    color: #0b0b0b;
    font-weight: 500;
    display: block;
    width: 100%;
    margin-bottom: 6px;
    padding-right: 5px;
}

.wpwl-wrapper {
    font-family: "Tajawal", sans-serif !important;
}

.wpwl-wrapper input, .wpwl-control-cvv, .wpwl-control-cardNumber {
    direction: ltr;
    text-align: right;
    font-family: "Tajawal";
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 1.5rem;
    /*outline: none;*/
    background: transparent;
    color: #0b0b0b;
    border: 2px solid #A2A2A2;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    border-radius: 5px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    outline: none !important;
}

.contact-section .map-wrapper {
    /*max-width: 400px;*/
    /*height: 320px;*/
}

/* .draggable:hover {
    cursor: grab;
} */
.vue-star-rating .sr-only {
    display: none !important;
}

.courses-section .owl-carousel .owl-item {
    float: right !important;
}

/*.owl-carousel .owl-wrapper-outer {*/
/*    direction: rtl !important;*/
/*}*/
.lesson-content-wrapper .plyr__video-embed iframe {
    height: 100%;
}

.navbar .messages-btn .number, .navbar .notification-btn .number {
    width: auto;
    height: 20px;
    border-radius: 50%;
    background-color: var(--tt-red-color);
    text-align: center;
    line-height: 15px;
    font-weight: 500;
    color: #fff;
    position: absolute;
    top: -12px;
    left: -11px;
    padding: 5px;
    margin-right: 7px;
    display: flex;
    justify-content: center;
    padding-left: 5px;
    align-items: center;
    direction: rtl;
    font-size: 11px;
}

.tools-bar {
    position: fixed;
    left: 10px;
    margin-top: auto;
    margin-bottom: auto;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    background: var(--tt-secondary-color);
    top: 40%;
    border-radius: 9999px;
    color: var(--tt-dark-color);
    z-index: 500;

}


.tools-bar ul {
    list-style: none;
    padding: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0;
}

.tools-bar ul li {
    padding: 13px;
    font-size: 15px;
    border-top-left-radius: 9999px;
    border-top-right-radius: 9999px;
    color: var(--tt-dark-color);
    padding-bottom: 5px;

}

.tools-bar ul li a {
    text-decoration: none;
    color: var(--tt-dark-color);
}

.tools-bar ul li i:before {
    color: var(--tt-dark-color);
}

.tools-bar ul li:active {
    /*background: var(--tt-secondary-color);*/
}

.tools-bar ul li.tool-active {
    background: var(--tt-secondary-color);
    /*@apply tw-bg-gradient-to-r tw-from-secondary-activeButtonTop tw-via-secondary-activeButtonMiddle tw-to-secondary-activeButtonBottom ;*/

}

.messaging-box__message-item {
    height: fit-content;
    padding-bottom: 10px;
    padding-top: 10px;
}

.messaging-box__message-time {
    font-size: 12px;
    margin-bottom: 0;
    margin-top: 7px;
}

.messaging-box__messages {
    display: block;
}

.messaging-box__message-item {
    overflow-wrap: anywhere;
}

.messaging-box__message-item.typing {
    font-size: 12px !important;
}

.image-table img {
    max-inline-size: 100%;
    block-size: auto;
}

.btn-futurex-login {
    background-color: #11998e;
    color: #fff;
}

.btn-futurex-login:hover {
    color: #fff;
}

.lessons-pagination .page-item:first-of-type .page-link {
    color: var(--tt-primary-color);
}

.lessons-pagination .page-item .page-link {
    color: var(--tt-primary-color);
}

.lessons-pagination .page-item .page-link.disabled {
    color: var(--tt-gray-light-color);
    cursor: inherit;
}

.lessons-pagination .page-item .page-link.disabled:hover {
    color: var(--tt-gray-light-color) !important;
}

.lessons-pagination .page-item .page-link:focus, .lessons-pagination .page-item .page-link:hover {
    background-color: transparent;
    border: none;
    color: var(--tt-primary-color) !important;
    box-shadow: none;
}

.lessons-pagination .page-item .page-link:focus {
    color: var(--tt-gray-light-color);
}

div.hopscotch-bubble {
    border-radius: 8px;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.left {
    left: -34px;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.right {
    right: -22px;
}

div.hopscotch-bubble .hopscotch-content {
    font-family: 'Somar', sans-serif;
    text-align: right;
    line-height: 20px;
    padding-top: 15px;
    padding-right: 15px;
}

div.hopscotch-bubble h3 {
    font-family: 'Somar', sans-serif;
    text-align: right;
    line-height: 20px;
}

div.hopscotch-bubble .hopscotch-nav-button.next:hover {
    background-color: var(--tt-primary-color) !important;
    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, var(--tt-primary-color)), color-stop(100%, var(--tt-primary-color))) !important;
    background-image: -webkit-linear-gradient(to bottom, var(--tt-primary-color) 0, var(--tt-primary-color) 100%) !important;
    background-image: -moz-linear-gradient(to bottom, var(--tt-primary-color) 0, var(--tt-primary-color) 100%) !important;
    background-image: -o-linear-gradient(to bottom, var(--tt-primary-color) 0, var(--tt-primary-color) 100%) !important;
    background-image: linear-gradient(to bottom, var(--tt-primary-color) 0, var(--tt-primary-color) 100%) !important;
}

div.hopscotch-bubble .hopscotch-nav-button.next {
    font-family: 'Somar', sans-serif;
    font-size: x-small;
    border-color: var(--tt-primary-color) !important;
    color: #fff;
    margin: 0 0 0 10px;
    text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
    background-color: var(--tt-primary-color) !important;
    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, var(--tt-primary-color)), color-stop(100%, var(--tt-primary-color))) !important;
    background-image: -webkit-linear-gradient(to bottom, var(--tt-primary-color) 0, var(--tt-primary-color) 100%) !important;
    background-image: -moz-linear-gradient(to bottom, var(--tt-primary-color) 0, var(--tt-primary-color) 100%) !important;
    background-image: -o-linear-gradient(to bottom, var(--tt-primary-color) 0, var(--tt-primary-color) 100%) !important;
    background-image: linear-gradient(to bottom, var(--tt-primary-color) 0, var(--tt-primary-color) 100%) !important;
}

.cc-theme-edgeless.cc-window {
    font-family: 'Somar', sans-serif !important;
}

.custom_swal > .swal2-actions > .swal2-deny {
    background-color: #ffffff !important;
    border: #000000 2px solid;
    color: #000000;
}

.custom_swal > .swal2-actions > .swal2-deny:hover {
    background-color: #000000 !important;
    border: #000000 2px solid;
    color: #ffffff;
}

.custom_swal > .swal2-actions > .swal2-confirm {
    border: 2px;
}

.custom_swal .swal2-info {
    color: #DFA400 !important;
    border-color: #DFA400 !important;
}

.custom_swal .swal2-styled.swal2-default-outline:focus {
    box-shadow: 0 0 0 3px #d6a61694;
}

[data-paylib="number"] {
    direction: initial !important;
    text-align: right;
}

.payment-methods {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.payment-methods__item {
    width: 60px;
    height: 40px;
    border-radius: .625rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 10px
}

.payment-methods__item:last-of-type {
    margin-left: 0
}

@media (min-width: 576px) {
    .payment-methods__item {
        width: 70px;
        height: 50px
    }
}

.payment-methods__image {
    display: block;
    width: 100%;
    max-width: 26px
}

.payment-methods__image--lg {
    max-width: 34px
}

.payment-methods__image--xl {
    max-width: 40px
}

.cc-bg {
    text-align: right;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position: left;
    background-position-x: 8px;
}

.cc-bg.cc-mada-bg {
    background-size: 60px;
    background-image: url(/assets/images/mada-logo.svg);
}

.cc-bg.cc-visa-bg {
    background-size: 40px;
    background-image: url(/assets/images/payment-methods/visa-logo.svg);
}

.cc-bg.cc-mastercard-bg {
    background-size: 30px;
    background-image: url(/assets/images/payment-methods/mastercard-logo.svg);
}

/* .labels__item--active {
    color: var(--tt-course-text-color) !important;
}

.labels__item:hover {
    color: var(--tt-course-text-color) !important;
} */

.navbar--for-courses .dropdown-buttons-group .dropdown-item:last-of-type {
    width: auto;
    padding-right: 5px;
    padding-left: 5px;
}

.datepicker table tbody {
    font-size: 14px;
}

.datepicker table tr td span {
    width: auto;
    float: right;
    margin: 3px;
    padding: 3px;
}

.datepicker table tr td span.focused {
    width: auto;
}

.v-pulse {
    background: var(--tt-primary-color) !important;
}

.nav-item.dropdown .dropdown-item:active {
    background: var(--tt-primary-color) !important;
}

.contact-section--without-form .map-wrapper {
    max-width: none
}

.contact-section--without-form ul.list-unstyled {
    margin-left: auto;
    margin-right: auto;
    max-width: 300px
}

@media (min-width: 576px) {
    .contact-section--without-form ul.list-unstyled {
        max-width: 460px
    }
}

@media (min-width: 768px) {
    .contact-section--without-form ul.list-unstyled {
        max-width: 520px
    }
}

@media (min-width: 992px) {
    .contact-section--without-form ul.list-unstyled {
        max-width: 560px
    }
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--tt-primary-color) !important;
}

.tt-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.navbar .nav-logo {
    display: inline-block;
    min-width: 90px;
}

@media (min-width: 992px) {
    .navbar .nav-logo {
        min-width: 105px;
    }
}

.tt-hero-section .overlay {
    background: var(--tt-course-bg-color) !important;
}

.tt-hero-section--for-program.tt-hero-section--short-text .overlay {
    background: var(--tt-program-bg-color) !important;
}

.live-indector {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--tt-red-color);
    position: relative;

    &::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        background-color: var(--tt-red-color);
        opacity: 1;
        animation: live-indector 0.75s linear infinite;
    }
}

@keyframes live-indector {
    0% {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 1;
    }
    100% {
        top: -0.5rem;
        bottom: -0.5rem;
        left: -0.5rem;
        right: -0.5rem;
        opacity: 0;
    }
}

.payment-page .nav .nav-item .nav-link .tabby-logo-svg {
    width: 63px;
}

.payment-page .nav .nav-item .nav-link .tabby-logo-svg .st0 {
    fill: var(--tt-primary-color);
}

.payment-page .nav .nav-item .nav-link.active .tabby-logo-svg .st0 {
    fill: #fff;
}

.payment-page .tabby-badge {
    width: 30%;
    max-width: 120px;
}

.quote__img-wrapper .quote__img {
    height: auto !important;
}

.tt-card__info-avatar {
    width: 3rem;
    height: 3rem;
}

.progress .progress-bar {
    min-width: 0px;
}

/**
Hero section
**/
.hero-section .hero-carousel .hero-slides-wrapper {
    position: relative !important;
    z-index: 0 !important;
}

.hero-section .hero-carousel {
    aspect-ratio: 939 / 1000;
}

@media (min-width: 768px) {
    .hero-section .hero-carousel {
        aspect-ratio: 20 / 15;
    }
}

@media (min-width: 992px) {
    .hero-section .hero-carousel {
        aspect-ratio: 691 / 333;
    }
}

#hero-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-section .hero-carousel .content-wrapper, .hero-section .hero-carousel .carousel-content {
    display: flex;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    min-height: 120px;
    width: 80%;
}

.hero-section .hero-carousel .content-wrapper form, .hero-section .hero-carousel .carousel-content form {
    width: 100%;
}

.hero-carousel-slide form {
    pointer-events: auto;
    position: relative;
    z-index: 1000000; /* Adjust as needed */
}

.footer--light * h6 {
    color: #fff !important;
}

.dragable-answer {
    padding: 0.45rem 1rem;
    border-radius: 5px;
    min-height: 40px
}

.dragable-answer--placeholder {
    border: 1px dashed #dddddd;
    text-align: center;
    font-size: 0.85rem;
    color: var(--tt-gray-light-color)
}

.dragable-answer--item {
    background-color: var(--tt-gray-light-color);
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.dragable-answer--item-dragged {
    background-color: rgba(var(--tt-primary-color-rgb), 0.7);
    background-color: var(--tt-primary-color)
}

.dragable-answer--item-placeholder {
    background-color: var(--tt-light-color)
}

.pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link {
    width: 4.5rem;
}

.course-description img {
    max-width: 100%;
    height: auto;
}

.show-password-btn {
    top: 30px;
}

#bsToast {
    background: transparent;
}

.form-floating-file > label {
    top: -7px;
}

.form-floating-file input::file-selector-button {
    background-color: var(--tt-white-color); /* Example: a light purple background */
    color: var(--tt-dark-color);
}

.page-content .nav {
    overflow-x: auto;
}

.page-content .multi-lang-form .nav {
    border-radius: 0;
}

.invoice-title {
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    left: 50%;
    top: 3rem;
    transform: translate(-50%, -50%);
}

/* Visual unification (note #41): front form fields should be soft-rounded
   squares, not full pills, to match the modern home design. */
.page-content .form-control,
.page-content .form-select,
.page-content .form-floating > .form-control,
.contact-form-wrapper .form-control,
.contact-form-wrapper .form-select {
    border-radius: 12px;
}

/* Footer responsive (note #39): academy32.css redefines the footer columns
   several times and its LAST block has no mobile reset, so the columns stay
   side-by-side on phones (non-home pages). Force single-column stacking. */
@media (max-width: 992px) {
    .edu-footer-area .col-footer-main,
    .edu-footer-area .col-footer-link {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Visual unification (note #41): only .btn-primary was soft (12px); other
   button variants stayed full pills (50rem) on internal pages. Align every
   front button to the modern soft radius. Buttons explicitly marked
   .rounded-pill / .rounded-circle keep their shape (Bootstrap !important). */
.btn {
    border-radius: 12px;
}

.start-actions-button .btn,
.end-actions-button .btn {
    border-radius: var(--tt-br-pill, 50rem);
}

.btn.btn-circle {
    border-radius: var(--tt-br-pill, 50rem);
}

/* Top nav unification (note #43): internal pages now mirror the home page's
   light header instead of the old navy bar (academy32.css "Dark Version for
   Internal Page"). White background + dark text/tools in both static and
   sticky states. The active-link underline and hover color use the dark accent
   because the bar background is now white. Only top-level links
   (nav > ul > li > a) are retargeted so dropdown items keep their card styling. */
body.page-internal #main-header {
    background: #fff;
    box-shadow: 0 5px 25px rgba(0, 31, 85, 0.08);
    border-bottom: 1px solid rgba(0, 31, 85, 0.06);
}

body.page-internal #main-header nav > ul > li > a {
    color: var(--color-heading);
}

body.page-internal #main-header nav > ul > li > a.active {
    color: var(--primary-purple);
}

body.page-internal #main-header nav > ul > li > a:hover {
    color: var(--brand-navy);
}

body.page-internal #main-header nav > ul > li > a.active::after {
    background: var(--brand-navy);
}

body.page-internal #main-header .tool-btn {
    color: var(--color-heading);
    border-color: rgba(0, 31, 85, 0.1);
    background: transparent;
}

body.page-internal #main-header .tool-btn:hover {
    background: var(--brand-navy);
    color: #fff;
    border-color: var(--brand-navy);
}

body.page-internal #main-header .login-btn {
    background: var(--brand-navy);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 31, 85, 0.3);
}

body.page-internal #main-header .login-btn:hover {
    background: var(--brand-navy-light);
    box-shadow: 0 5px 18px rgba(0, 31, 85, 0.4);
}

/* Home success-stories slider (note #44): the side cards now recede via Swiper's
   coverflow effect (depth + the wrapper's perspective), not a CSS scale. The old
   scale(0.88) on .testimonial-grid shrank the card inside its 335px slide box,
   which is what left the visible gap between the active and side cards — removed.
   Opacity (0.4 vs 1) is still handled in home.css. */

/* Pagination is now a static row below the slider (moved out of .swiper) — override
   academy32's absolute/bottom positioning so the dots are always visible. */
#success-stories-standalone .stories-pagination {
    position: static !important;
    bottom: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 18px;
}
/* Ensure the active bullet is clearly colored (purple, elongated). */
#success-stories-standalone .stories-pagination .swiper-pagination-bullet {
    background: #d0d0d0;
    opacity: 1;
}
#success-stories-standalone .stories-pagination .swiper-pagination-bullet-active {
    background: var(--brand-purple, #4904dc) !important;
    width: 30px;
    border-radius: 10px;
}
#main-header nav .dropdown-menu .dropdown-item,
#main-header nav .dropdown-menu .dropdown-item:hover,
#main-header nav .dropdown-menu .dropdown-item:focus,
#main-header nav .dropdown-menu .dropdown-item.active {
    border-bottom: none;
}

.course-details-page .floating-box {
    z-index: 3;
}

.instructors-list__avatar {
    height: 3.5rem;
    object-fit: cover;
}

/* =========================================================================
   Top-nav sub-menu (dropdown) — make it work on EVERY front page.
   The hover card used to live only in home-v2/home.css, which loads on the
   home page alone, so the top sub-menu (e.g. "عن الأكاديمية") never opened on
   internal pages. Scoped to #main-header (not body.home-design-custom) so it
   applies on home + internal and in both home-design modes. Identical to the
   home.css rules, so it is harmless where home.css is also loaded.
   ========================================================================= */
@media (min-width: 992px) {
    #main-header nav ul li.dropdown > a {
        cursor: pointer;
    }

    #main-header nav ul li.dropdown > a i.fas {
        font-size: 12px;
        transition: transform var(--transition);
    }

    #main-header nav ul li.dropdown:hover > a i.fas,
    #main-header nav ul li.dropdown:focus-within > a i.fas {
        transform: rotate(180deg);
    }

    #main-header nav ul li.dropdown > .dropdown-menu {
        display: block;
        position: absolute;
        top: 100%;
        inset-inline-end: 0;
        inset-inline-start: auto;
        margin: 0;
        margin-top: 14px;
        padding: 10px;
        min-width: 230px;
        background: #fff;
        border: none;
        border-radius: 16px;
        box-shadow: 0 18px 45px rgba(0, 31, 85, 0.16),
                    0 4px 12px rgba(0, 31, 85, 0.08);
        list-style: none;
        text-align: start;
        z-index: 1100;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        pointer-events: none;
        transition: opacity var(--transition),
                    transform var(--transition),
                    visibility var(--transition);
    }

    /* hover bridge over the 14px gap so the cursor can travel link -> card */
    #main-header nav ul li.dropdown > .dropdown-menu::before {
        content: '';
        position: absolute;
        top: -16px;
        inset-inline: 0;
        height: 16px;
        background: transparent;
    }

    /* decorative pointer arrow */
    #main-header nav ul li.dropdown > .dropdown-menu::after {
        content: '';
        position: absolute;
        top: -7px;
        inset-inline-end: 22px;
        width: 14px;
        height: 14px;
        background: #fff;
        transform: rotate(45deg);
        box-shadow: -3px -3px 8px rgba(0, 31, 85, 0.06);
        border-radius: 3px;
    }

    #main-header nav ul li.dropdown:hover > .dropdown-menu,
    #main-header nav ul li.dropdown:focus-within > .dropdown-menu,
    #main-header nav ul li.dropdown > .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    #main-header nav ul li.dropdown .dropdown-menu > li {
        position: static;
        width: 100%;
    }

    #main-header nav ul li.dropdown .dropdown-menu .dropdown-item {
        display: block;
        width: 100%;
        padding: 11px 16px;
        margin: 2px 0;
        border-radius: 10px;
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.5;
        color: var(--color-heading);
        background: transparent;
        text-align: start;
        white-space: nowrap;
        text-decoration: none;
        transition: background var(--transition), color var(--transition);
    }

    #main-header nav ul li.dropdown .dropdown-menu .dropdown-item:hover,
    #main-header nav ul li.dropdown .dropdown-menu .dropdown-item:focus,
    #main-header nav ul li.dropdown .dropdown-menu .dropdown-item.active {
        background: rgba(73, 4, 220, 0.10);
        color: var(--primary-purple);
    }

    /* the active/hover underline must not leak into dropdown rows */
    #main-header nav ul li.dropdown .dropdown-menu .dropdown-item::after {
        display: none;
    }

    #main-header.sticky nav ul li.dropdown .dropdown-menu .dropdown-item {
        color: var(--color-heading);
    }

    #main-header.sticky nav ul li.dropdown .dropdown-menu .dropdown-item:hover,
    #main-header.sticky nav ul li.dropdown .dropdown-menu .dropdown-item.active {
        color: var(--primary-purple);
    }
}

/* =========================================================================
   Active/hover top-nav underline colour follows the bar background:
   white on a dark bar (home hero), dark navy on a white bar (internal pages
   and any sticky/scrolled header). Also adds the missing hover underline
   (the base theme only drew it for .active).
   ========================================================================= */
#main-header nav ul li a {
    position: relative;
    /* drop the base theme's stray purple line (academy32.css:2122); the real
       underline is the ::after below (white on dark bar, navy on white bar) */
    border-bottom: none;
}

#main-header nav ul li a:hover::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    transition: var(--transition);
}

/* dark bar (home hero, not scrolled) -> white underline */
body.page-home #main-header nav ul li a.active::after,
body.page-home #main-header nav ul li a:hover::after {
    background: #fff;
}

/* white bar (internal pages + any sticky header) -> dark underline */
body.page-internal #main-header nav ul li a.active::after,
body.page-internal #main-header nav ul li a:hover::after,
#main-header.sticky nav ul li a.active::after,
#main-header.sticky nav ul li a:hover::after {
    background: var(--brand-navy);
}

/* =========================================================================
   Hero detail pages (course / program / path) — header blends into the hero.
   The body gets `header-over-hero` (NOT `page-hero`: that name is already a
   light page-banner component in academy32.css — `.page-hero{padding:80px 0
   130px; background:linear-gradient(#f8f9fc,#fff)}` — so it collides and dumps
   80px padding + a light background onto <body>). On these pages the header
   OVERLAYS the hero (absolute, transparent, light text) and turns into the
   white bar on scroll, exactly like the home page. home.css does this via
   `body.home-design-custom header{position:absolute}` but only loads on the
   home route; academy32.css's last stray `header{position:relative}` wins
   everywhere else — so position is set explicitly here, for BOTH states.
   Set in front/layout/app.blade.php from the view's transparent_header flag.
   ========================================================================= */
body.header-over-hero #main-header:not(.sticky) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    box-shadow: none;
    border-bottom: none;
}

body.header-over-hero #main-header:not(.sticky) nav > ul > li > a {
    color: rgba(255, 255, 255, 0.9);
}

body.header-over-hero #main-header:not(.sticky) nav > ul > li > a.active,
body.header-over-hero #main-header:not(.sticky) nav > ul > li > a:hover {
    color: #fff;
}

/* underline white over the dark hero (active + hover) */
body.header-over-hero #main-header:not(.sticky) nav ul li a.active::after,
body.header-over-hero #main-header:not(.sticky) nav ul li a:hover::after {
    background: #fff;
}

body.header-over-hero #main-header:not(.sticky) .tool-btn,
body.header-over-hero #main-header:not(.sticky) .user-avatar {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
    background: transparent;
}

body.header-over-hero #main-header:not(.sticky) .tool-btn:hover {
    background: #fff;
    color: var(--brand-navy);
    border-color: #fff;
}

body.header-over-hero #main-header:not(.sticky) .login-btn {
    background: #fff;
    color: var(--brand-navy);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.header-over-hero #main-header:not(.sticky) .login-btn:hover {
    background: #fff;
}

/* On scroll the overlay becomes the white bar with dark text. academy32's own
   header.sticky rule is clobbered by its later concatenated duplicates here, so
   set it explicitly (home gets this from home.css's body.home-design-custom). */
body.header-over-hero #main-header.sticky {
    position: fixed;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 25px rgba(0, 31, 85, 0.1);
    border-bottom: none;
}

body.header-over-hero #main-header.sticky nav > ul > li > a {
    color: var(--color-heading);
}

body.header-over-hero #main-header.sticky nav > ul > li > a.active {
    color: var(--primary-purple);
}

body.header-over-hero #main-header.sticky nav > ul > li > a:hover {
    color: var(--brand-navy);
}

body.header-over-hero #main-header.sticky nav ul li a.active::after,
body.header-over-hero #main-header.sticky nav ul li a:hover::after {
    background: var(--brand-navy);
}

body.header-over-hero #main-header.sticky .tool-btn,
body.header-over-hero #main-header.sticky .user-avatar {
    color: var(--color-heading);
    border-color: rgba(0, 31, 85, 0.1);
}

/* the hero clears the now-absolute header (matches home's .hero{padding-top:120px}) */
body.header-over-hero .hero-area {
    padding-top: 120px;
}

.program-timeline__desc ul,
.program-timeline__desc ol {
    padding-inline-start: 1.25rem;
    margin: 0;
}

.program-timeline__desc ul {
    list-style: disc;
}

.program-timeline__desc ol {
    list-style: decimal;
}

.program-timeline__desc li {
    margin-bottom: 0.125rem;
}

.rich-text ul,
.rich-text ol,
.course-description ul,
.course-description ol,
.article-text ul,
.article-text ol,
.story-content ul,
.story-content ol,
.custom-section ul,
.custom-section ol,
.survey-description ul,
.survey-description ol,
#lesson-screen > p ul,
#lesson-screen > p ol,
#transcript-tab-pane ul,
#transcript-tab-pane ol,
.flex-shrink-99 > span ul,
.flex-shrink-99 > span ol {
    padding-inline-start: 1.25rem;
    margin: 0 0 0.5rem;
}

.rich-text ul,
.course-description ul,
.article-text ul,
.story-content ul,
.custom-section ul,
.survey-description ul,
#lesson-screen > p ul,
#transcript-tab-pane ul,
.flex-shrink-99 > span ul {
    list-style: disc;
}

.rich-text ol,
.course-description ol,
.article-text ol,
.story-content ol,
.custom-section ol,
.survey-description ol,
#lesson-screen > p ol,
#transcript-tab-pane ol,
.flex-shrink-99 > span ol {
    list-style: decimal;
}

.rich-text li,
.course-description li,
.article-text li,
.story-content li,
.custom-section li,
.survey-description li,
#lesson-screen > p li,
#transcript-tab-pane li,
.flex-shrink-99 > span li {
    margin-bottom: 0.125rem;
}