/*
 * S&D Professional Institute — Brand Override
 * Primary:  Navy   #1B2A5E
 * Accent:   Orange #E87722
 * Replaces eClass default orange/blue palette throughout the theme.
 */

/* ── CSS Variable Overrides ─────────────────────────────────────────────── */
:root {
    --bg_orange:            #E87722;
    --bg_pinkish_orange:    #E87722;
    --bg_vivid_orange:      #F5A870;
    --bg_nebula:            #d7d7d7;
    --bg_blue:              #1B2A5E;
    --bg_light_blue:        #253580;
    --bg_rich_blue:         #2E4A8E;
    --bg_dark_blue:         #0F1A3D;
    --bg_dark_navy:         #080E2A;
    --bg_tealish_blue:      #141E4A;
    --bg_royal_blue:        #1B2A5E;
    --bg_dusky_blue:        #253580;
    --bg_sky_blue:          #E87722;
    --bg_mariner_blue:      #1B2A5E;
    --bg_warm_blue:         #2A3F8E;
    --bg_bright_blue:       #1B2A5E;
    --bg_cyan_blue:         #EEF1F9;

    --text_orange:          #E87722;
    --text_pinkish_orange:  #E87722;
    --text_vivid_orange:    #F5A870;
    --text_blue:            #1B2A5E;
    --text_light_blue:      #253580;
    --text_rich_blue:       #2E4A8E;
    --text_dark_blue:       #0F1A3D;
    --text_dark_navy:       #080E2A;
    --text_tealish_blue:    #141E4A;
    --text_royal_blue:      #1B2A5E;
    --text_dusky_blue:      #253580;
    --text_warm_blue:       #2A3F8E;
    --text_cyan_blue:       #EEF1F9;

    --border_orange:        #E87722;
    --border_pinkish_orange:#E87722;
    --border_blue:          #1B2A5E;
    --border_light_blue:    #253580;

    --linear-gradient-bg-color:              linear-gradient(-45deg, #E87722 0, #C45A0A 100%);
    --linear-gradient-reverse-bg-color:      linear-gradient(-45deg, #C45A0A 0, #E87722 100%);
    --linear-gradient-about-bg-color:        linear-gradient(197.61deg, #1B2A5E, #2E4A8E);
    --linear-gradient-about-blue-bg-color:   linear-gradient(40deg, #0F1A3D 33%, #253580 84%);
    --linear-gradient-career-bg-color:       linear-gradient(22.73deg, #E87722 4%, #F5A870);

    --background-blue-bg-color:         #1B2A5E;
    --background-red-bg-color:          #E87722;
    --background-grey-bg-color:         #F7F8FA;
    --background-light-grey-bg-color:   #F9F9F9;
    --background-black-bg-color:        #0F1A3D;
    --background-white-bg-color:        #FFF;
    --background-mehroon-bg-color:      #C45A0A;
    --text-black-color:                 #0F1A3D;
    --text-light-grey-color:            #777;
    --text-dark-grey-color:             #4A5568;
    --text-red-color:                   #E87722;
    --text-blue-color:                  #1B2A5E;
    --text-dark-blue-color:             #080E2A;
    --text-white-color:                 #FFF;
}

/* ══════════════════════════════════════════════════════
   NAVBAR — S&D Professional Institute
   White background | Orange accent #E87722
   ══════════════════════════════════════════════════════ */

/* Full-width white background */
#header-sticky,
.menu-area,
header .menu-area,
.sticky-bar {
    background: #ffffff !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The inner nav strip */
.second-menu {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 3px solid #E87722 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

/* Row: fixed 72px tall, everything centered vertically */
.second-menu.fullscreen .row {
    align-items: center !important;
    min-height: 72px !important;
    flex-wrap: nowrap !important;
}
.second-menu.fullscreen {
    padding: 0 !important;
}

/* ── Logo ── */
.second-menu .logo {
    display: flex !important;
    align-items: center !important;
    height: 72px !important;
    padding: 0 !important;
}
.second-menu .logo img {
    max-height: 52px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}
.logotext {
    color: #1B2A5E !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: -0.5px !important;
    line-height: 1.1 !important;
}

/* ── Top-level nav links ── */
.second-menu .main-menu {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 72px !important;
}
.second-menu .main-menu ul {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    list-style: none !important;
}
.second-menu .main-menu ul > li {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}
.second-menu .main-menu ul > li > a,
.sticky-bar.stick .main-menu ul > li > a {
    color: #1B2A5E !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    padding: 0 12px !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    transition: color 0.2s !important;
    white-space: nowrap !important;
}
/* Orange underline indicator on hover/active */
.second-menu .main-menu ul > li > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 12px !important;
    right: 12px !important;
    height: 3px !important;
    background: #E87722 !important;
    transform: scaleX(0) !important;
    transition: transform 0.2s ease !important;
    border-radius: 2px 2px 0 0 !important;
}
.second-menu .main-menu ul > li > a:hover,
.second-menu .main-menu ul > li.active > a {
    color: #E87722 !important;
}
.second-menu .main-menu ul > li > a:hover::after,
.second-menu .main-menu ul > li.active > a::after {
    transform: scaleX(1) !important;
}

/* ── Level-1 dropdown — drops DOWN below the nav bar ── */
.second-menu .main-menu ul > li > ul {
    background: #ffffff !important;
    border-top: 3px solid #E87722 !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 8px 24px rgba(15,26,61,0.18) !important;
    min-width: 210px !important;
    padding: 6px 0 !important;
    display: block !important;
    flex-direction: unset !important;
    align-items: unset !important;
    height: auto !important;
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 9999 !important;
}

/* ── Level-2 flyout — flies out to the RIGHT of each child item ── */
.second-menu .main-menu ul > li > ul li ul {
    background: #ffffff !important;
    border-top: 3px solid #E87722 !important;
    border-radius: 0 8px 8px 8px !important;
    box-shadow: 4px 8px 24px rgba(15,26,61,0.18) !important;
    min-width: 210px !important;
    padding: 6px 0 !important;
    display: block !important;
    flex-direction: unset !important;
    align-items: unset !important;
    height: auto !important;
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: 100% !important;
    z-index: 10000 !important;
}

/* li items in both levels — block, relative for nested anchor */
.second-menu .main-menu ul li ul li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    flex: none !important;
    align-items: unset !important;
    position: relative !important;
}

/* Child menu items — orange permanently */
.second-menu .main-menu ul li ul li a,
.second-menu .main-menu ul li ul li a:visited {
    color: #E87722 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 9px 20px !important;
    display: block !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    height: auto !important;
    min-height: unset !important;
    transition: background 0.15s, padding-left 0.15s !important;
}
.second-menu .main-menu ul li ul li a:hover,
.second-menu .main-menu ul li ul li:hover > a {
    color: #C45A0A !important;
    background: rgba(232,119,34,0.07) !important;
    padding-left: 26px !important;
}
/* hide the pseudo underline on all submenu items */
.second-menu .main-menu ul li ul li a::after {
    display: none !important;
}

/* ── Right-side action icons ── */
.nav-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 72px !important;
    padding: 0 !important;
    gap: 10px !important;
}

/* ── Login button ── */
.nav-login-btn .btn,
.header-btn a,
.header-btn .btn {
    background: #E87722 !important;
    border-color: #E87722 !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 8px 20px !important;
}
.nav-login-btn .btn:hover,
.header-btn a:hover,
.header-btn .btn:hover {
    background: #C45A0A !important;
    border-color: #C45A0A !important;
}

/* ── User dropdown trigger ── */
.my-dropdown {
    background: #E87722 !important;
    border-color: #E87722 !important;
    border-radius: 50px !important;
}

/* ── Mobile hamburger ── */
.mean-container .mean-bar {
    background: #1B2A5E !important;
}
.mean-container a.meanmenu-reveal {
    color: #E87722 !important;
    border-color: #E87722 !important;
}
.mean-container a.meanmenu-reveal span {
    background: #E87722 !important;
}

/* ── Sticky scroll ── */
.sticky-bar.stick {
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}

/* ── Slider / Hero ────────────────────────────────────────────────────────── */
.slider-area,
.slider-active {
    background: #0F1A3D !important;
}
.slider-content h5 {
    color: #E87722 !important;
}
.slider-content h1,
.slider-main-heading {
    color: #ffffff !important;
}
.slider-content p {
    color: #c8d0e0 !important;
}
/* search bar */
.home-search .searchButton,
.searchButton {
    background: #E87722 !important;
    border-color: #E87722 !important;
    color: #fff !important;
}
.home-search .searchButton:hover,
.searchButton:hover {
    background: #C45A0A !important;
}
.home-search .searchTerm:focus,
.searchTerm:focus {
    border-color: #E87722 !important;
}

/* ── Buttons (global) ─────────────────────────────────────────────────────── */
.btn-primary,
.ss-btn,
.ss-btn-2,
a.ss-btn,
a.ss-btn-2 {
    background: #E87722 !important;
    border-color: #E87722 !important;
    color: #fff !important;
}
.btn-primary:hover,
.ss-btn:hover,
.ss-btn-2:hover,
a.ss-btn:hover,
a.ss-btn-2:hover {
    background: #C45A0A !important;
    border-color: #C45A0A !important;
}
.btn-blue,
.blue-btn {
    background: #1B2A5E !important;
    border-color: #1B2A5E !important;
    color: #fff !important;
}
.btn-blue:hover,
.blue-btn:hover {
    background: #0F1A3D !important;
}

/* ── Section headings sub-titles ────────────────────────────────────────── */
.section-title span,
.section-title2 span,
.sub-title,
.sub-title2,
.cat-title span {
    color: #E87722 !important;
}
.section-title h2,
.section-title2 h2 {
    color: #0F1A3D !important;
}

/* ── Facts / icon boxes ───────────────────────────────────────────────────── */
.services-box07 .icon i,
.services-box07 .icon svg {
    color: #E87722 !important;
}
.services-box07:hover {
    border-color: #E87722 !important;
}

/* ── Course cards ─────────────────────────────────────────────────────────── */
.course-link:hover,
.course-link:focus {
    color: #E87722 !important;
}
.price,
.course-price {
    color: #E87722 !important;
}
.tag,
.course-tag {
    background: #E87722 !important;
    color: #fff !important;
}
.course-action .add-to-cart:hover,
.enroll-btn:hover {
    background: #E87722 !important;
    color: #fff !important;
}

/* ── Category tabs ──────────────────────────────────────────────────────── */
.course-menu ul li a.active,
.course-menu ul li a:hover,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    color: #E87722 !important;
    border-bottom-color: #E87722 !important;
}

/* ── Instructor cards ───────────────────────────────────────────────────── */
.instructor-social a:hover {
    background: #E87722 !important;
    border-color: #E87722 !important;
}

/* ── Testimonials ───────────────────────────────────────────────────────── */
.testimonial-active .testimonial-item::before,
.testi-top .quote-icon {
    color: #E87722 !important;
}

/* ── Stats / counter section ──────────────────────────────────────────────── */
.count-icon i,
.count-icon svg {
    color: #E87722 !important;
}
.counter-bg,
.count-box {
    background: #1B2A5E !important;
}
.count-text h2,
.count-box h2 {
    color: #ffffff !important;
}

/* ── Call to Action (CTA) band ───────────────────────────────────────────── */
.cta-bg,
.cta-area,
section[class*="cta"] {
    background: linear-gradient(135deg, #1B2A5E 0%, #2E4A8E 100%) !important;
}
.cta-area h2,
.cta-area p {
    color: #ffffff !important;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer.l {
    background-color: #0F1A3D !important;
    background-image: none !important;
    border-top: 4px solid #E87722 !important;
}
.footer-top {
    background: transparent !important;
}
.f-widget-title h2 {
    color: #E87722 !important;
    border-bottom: 2px solid #E87722 !important;
    padding-bottom: 10px !important;
}
.footer-link ul li a,
.footer-text p,
.footer-widget p {
    color: #c8d0e0 !important;
}
.footer-link ul li a:hover {
    color: #E87722 !important;
    padding-left: 5px;
    transition: 0.2s;
}
.footer-social a {
    background: rgba(232,119,34,0.15) !important;
    border: 1px solid rgba(232,119,34,0.4) !important;
    color: #E87722 !important;
}
.footer-social a:hover {
    background: #E87722 !important;
    border-color: #E87722 !important;
    color: #fff !important;
}
.copyright-wrap {
    background: #080E2A !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.copyright-wrap p,
.copyright-wrap a {
    color: #8898aa !important;
}
.copyright-wrap a:hover {
    color: #E87722 !important;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb-area,
.breadcrumb-bg {
    background: linear-gradient(135deg, #0F1A3D 0%, #1B2A5E 60%, #2E4A8E 100%) !important;
}
.breadcrumb-title h2,
.breadcrumb-title h1 {
    color: #ffffff !important;
}
.breadcrumb-list li,
.breadcrumb-list li a {
    color: #c8d0e0 !important;
}
.breadcrumb-list li.active,
.breadcrumb-list li span {
    color: #E87722 !important;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.pagination .page-item.active .page-link {
    background: #E87722 !important;
    border-color: #E87722 !important;
}
.pagination .page-link:hover {
    color: #E87722 !important;
}
.pagination .page-link {
    color: #1B2A5E !important;
}

/* ── Badges / labels ────────────────────────────────────────────────────── */
.badge-primary,
.badge-orange {
    background: #E87722 !important;
}
.badge-dark,
.badge-navy {
    background: #1B2A5E !important;
}

/* ── Sidebar widgets ────────────────────────────────────────────────────── */
.widget-title h4,
.widget-title h3 {
    color: #1B2A5E !important;
    border-left: 4px solid #E87722 !important;
    padding-left: 10px !important;
}

/* ── Progress bars ───────────────────────────────────────────────────────── */
.progress-bar {
    background: #E87722 !important;
}

/* ── Slick dots / arrows ────────────────────────────────────────────────── */
.slick-dots li.slick-active button::before,
.slick-dots li button::before {
    color: #E87722 !important;
}
.slick-prev::before,
.slick-next::before {
    color: #E87722 !important;
}

/* ── Back to top ─────────────────────────────────────────────────────────── */
#scrollUp,
.scroll-top {
    background: #E87722 !important;
    border-color: #E87722 !important;
}
#scrollUp:hover,
.scroll-top:hover {
    background: #1B2A5E !important;
}

/* ── Links (global) ─────────────────────────────────────────────────────── */
a:hover {
    color: #E87722;
}

/* ── About / feature sections ───────────────────────────────────────────── */
.about-content .features-list li i,
.about-content .features-list li svg,
.check-list li i,
.check-list li svg {
    color: #E87722 !important;
}

/* ── Star ratings ───────────────────────────────────────────────────────── */
.rating i,
.star-rating i {
    color: #E87722 !important;
}

/* ── Mobile nav actions ──────────────────────────────────────────────────── */
.nav-header-actions .nav-wishlist > a:hover,
.nav-header-actions .shopping-cart > a:hover {
    border-color: #E87722 !important;
    background: rgba(232,119,34,0.06) !important;
}
.nav-header-actions .navigation .dropdown > .btn:hover {
    border-color: #E87722 !important;
}

/* ── Top announcement bar (promo) ───────────────────────────────────────── */
#promo-outer {
    background: #E87722 !important;
}
#promo-outer a {
    color: #fff !important;
}