/*********************
BRAND THEME - RESEARCHER OMAR REBRAND
Primary: #193A68
Secondary: #041736
Light Accent: #FAC98A
Gold Accent: #BA854A
Font: FF Shamel Family
WCAG 2.1 AA Compliant
*********************/

/* ===========================
   FONT IMPORTS & BASE TYPOGRAPHY
   =========================== */
@font-face {
    font-family: 'FF Shamel Family';
    src: url('/fonts/FFShamelFamily-Regular.woff2') format('woff2'),
         url('/fonts/FFShamelFamily-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FF Shamel Family';
    src: url('/fonts/FFShamelFamily-Bold.woff2') format('woff2'),
         url('/fonts/FFShamelFamily-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Fallback if FF Shamel not available */
.MyFont,
body,
h1, h2, h3, h4, h5, h6,
p, a, span, div,
.c-font-uppercase,
.c-font-bold,
.c-font-sbold,
.c-font-thin,
.nav,
.navbar-nav,
.btn,
input,
textarea,
select,
label {
    font-family: 'FF Shamel Family', 'Droid Arabic Kufi', 'Tajawal', 'Segoe UI', Tahoma, sans-serif !important;
}

/* ===========================
   BASE BODY TYPOGRAPHY - WCAG COMPLIANT
   =========================== */
body {
    color: #041736;
    font-size: 17px;
    line-height: 1.75;
    background-color: #ffffff;
}

p {
    color: #041736;
    font-size: 16px;
    line-height: 1.8;
}

/* ===========================
   HEADINGS - WCAG COMPLIANT
   =========================== */
h1, h2, h3, h4, h5, h6 {
    color: #041736;
}

h1 {
    font-size: 28px;
    line-height: 1.4;
}

h2 {
    font-size: 24px;
    line-height: 1.5;
}

h3 {
    font-size: 22px;
    line-height: 1.5;
}

h4 {
    font-size: 18px;
    line-height: 1.6;
}

h5 {
    font-size: 16px;
    line-height: 1.6;
}

h6 {
    font-size: 14px;
    line-height: 1.6;
}

/* ===========================
   LINK COLORS - PRIMARY BRAND
   =========================== */
a {
    color: #193A68;
}

a:active, a:hover, a:focus {
    color: #041736;
}

.c-theme-link:focus, 
.c-theme-link:active, 
.c-theme-link:hover {
    color: #193A68 !important;
}

.c-theme-link:focus > i, 
.c-theme-link:active > i, 
.c-theme-link:hover > i {
    color: #193A68 !important;
}

.c-theme-link.c-active {
    color: #193A68 !important;
}

.c-theme-link.c-active > i {
    color: #193A68 !important;
}

/* ===========================
   NAVIGATION - PRIMARY BRAND
   =========================== */
.c-theme-nav li:focus > a:not(.btn), 
.c-theme-nav li:active > a:not(.btn), 
.c-theme-nav li:hover > a:not(.btn) {
    color: #FAC98A !important;
}

.c-theme-nav li:focus > .c-quick-sidebar-toggler > .c-line, 
.c-theme-nav li:active > .c-quick-sidebar-toggler > .c-line, 
.c-theme-nav li:hover > .c-quick-sidebar-toggler > .c-line {
    background: #193A68 !important;
}

.c-theme-nav li.c-active {
    color: #193A68 !important;
}

.c-theme-nav li.c-active > a:not(.btn) {
    color: #FAC98A !important;
}

.c-theme-nav li.c-active > .c-quick-sidebar-toggler > .c-line {
    background: #193A68 !important;
}

.c-theme-nav > li > .dropdown-menu.c-menu-type-mega > .nav.nav-tabs > li:hover > a {
    color: #193A68 !important;
}

.c-theme-nav > li > .dropdown-menu.c-menu-type-mega > .nav.nav-tabs > li.active {
    border-bottom: 1px solid #193A68 !important;
}

.c-theme-nav > li > .dropdown-menu.c-menu-type-mega > .nav.nav-tabs > li.active > a {
    color: #193A68 !important;
}

.c-theme-nav.nav.nav-tabs > li:hover > a {
    color: #193A68 !important;
}

.c-theme-nav.nav.nav-tabs > li.active {
    border-bottom: 1px solid #193A68 !important;
}

.c-theme-nav.nav.nav-tabs > li.active > a {
    color: #193A68 !important;
}

/* ===========================
   THEME UL LISTS
   =========================== */
.c-theme-ul > li:focus > a:not(.btn), 
.c-theme-ul > li:active > a:not(.btn), 
.c-theme-ul > li:hover > a:not(.btn) {
    color: #193A68 !important;
}

.c-theme-ul > li:focus > a:not(.btn) > i, 
.c-theme-ul > li:active > a:not(.btn) > i, 
.c-theme-ul > li:hover > a:not(.btn) > i {
    color: #193A68 !important;
}

.c-theme-ul > li:focus > button > .c-line, 
.c-theme-ul > li:active > button > .c-line, 
.c-theme-ul > li:hover > button > .c-line {
    background: #193A68 !important;
}

.c-theme-ul > li.active, 
.c-theme-ul > li.c-active {
    color: #193A68 !important;
}

.c-theme-ul > li.active > a:not(.btn), 
.c-theme-ul > li.c-active > a:not(.btn) {
    color: #193A68 !important;
}

.c-theme-ul > li.active > a:not(.btn) > i, 
.c-theme-ul > li.c-active > a:not(.btn) > i {
    color: #193A68 !important;
}

.c-theme-ul-bg > li {
    color: #ffffff;
    background: #193A68 !important;
}

/* ===========================
   THEME FONT/COLOR CLASSES
   =========================== */
.c-theme-font,
.c-theme-color {
    color: #193A68 !important;
}

.c-theme-font > i,
.c-theme-color > i {
    color: #193A68 !important;
}

.c-theme-font-hover:hover {
    color: #193A68 !important;
}

/* ===========================
   THEME BACKGROUNDS
   =========================== */
.c-theme-bg {
    background-color: #193A68 !important;
}

.c-theme-bg.c-theme-darken {
    background-color: #041736 !important;
}

.c-theme-bg-after:after {
    background-color: #193A68 !important;
}

.c-theme-bg-before:before {
    background-color: #193A68 !important;
}

.c-theme-bg-on-hover:hover {
    background-color: #193A68 !important;
}

/* ===========================
   THEME BORDERS
   =========================== */
.c-theme-border {
    border-color: #193A68 !important;
}

.c-theme-border-after:after {
    border-color: #193A68 !important;
}

.c-theme-border-before:before {
    border-color: #193A68 !important;
}

/* ===========================
   BUTTONS - PRIMARY STYLE
   =========================== */
.c-theme-btn,
.btn-primary,
.c-btn-primary {
    background-color: #193A68 !important;
    border-color: #193A68 !important;
    color: #ffffff !important;
}

.c-theme-btn:hover,
.c-theme-btn:focus,
.c-theme-btn:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.c-btn-primary:hover,
.c-btn-primary:focus,
.c-btn-primary:active {
    background-color: #041736 !important;
    border-color: #041736 !important;
    color: #ffffff !important;
}

/* Button Border Variant */
.c-theme-btn.c-btn-border-2x,
.c-btn-border-1x.c-theme {
    background: transparent !important;
    border-color: #193A68 !important;
    color: #193A68 !important;
}

.c-theme-btn.c-btn-border-2x:hover,
.c-btn-border-1x.c-theme:hover {
    background-color: #193A68 !important;
    color: #ffffff !important;
}

/* Gold Accent Buttons */
.c-btn-gold,
.btn-gold {
    background-color: #BA854A !important;
    border-color: #BA854A !important;
    color: #ffffff !important;
}

.c-btn-gold:hover,
.btn-gold:hover {
    background-color: #9a6d3a !important;
    border-color: #9a6d3a !important;
    color: #ffffff !important;
}

/* MyColor override from original */
.MyColor {
    background: #193A68 !important;
    background-color: #193A68 !important;
    border-color: #193A68 !important;
    color: #ffffff !important;
}

.MyColor:hover {
    background: #041736 !important;
    background-color: #041736 !important;
    border-color: #041736 !important;
    color: #ffffff !important;
}

/* ===========================
   HEADER STYLING - WHITE NAVBAR
   =========================== */
.c-layout-header .c-navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e8e8e8;
}

.c-layout-header .c-topbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e8e8e8;
}

.c-layout-header .c-topbar .c-top-menu .c-icons a,
.c-layout-header .c-topbar .c-top-menu .c-icons li {
    color: #193A68 !important;
}

.c-layout-header .c-topbar .c-top-menu .c-icons a:hover {
    color: #BA854A !important;
}

.c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li > .c-link {
    color: #193A68 !important;
    font-size: 14px;
    font-weight: 600;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li > .c-link i {
    font-size: 14px;
    color: #193A68;
    transition: all 0.3s ease;
}

.c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li:hover > .c-link,
.c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li.c-active > .c-link {
    color: #BA854A !important;
}

.c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li:hover > .c-link i,
.c-layout-header .c-navbar .c-mega-menu > .nav.navbar-nav > li.c-active > .c-link i {
    color: #BA854A !important;
}

/* CTA Button in Navbar */
.navbar-cta-btn {
    background-color: #193A68 !important;
    color: #ffffff !important;
    padding: 10px 25px !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin: 12px 0 12px 15px;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease !important;
    border: none !important;
}

.navbar-cta-btn:hover {
    background-color: #BA854A !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(25, 58, 104, 0.3);
}

.navbar-cta-btn i {
    font-size: 14px;
    color: #ffffff !important;
}

/* Mobile Menu Toggle */
.c-layout-header .c-hor-nav-toggler .c-line {
    background-color: #193A68 !important;
}

/* Header scroll state */
.c-layout-header.c-layout-header-fixed.c-layout-header-fixed-minimized .c-navbar {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Navbar container alignment */
.c-navbar-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.c-mega-menu .nav.navbar-nav {
    display: flex;
    align-items: center;
}

/* ===========================
   FOOTER STYLING
   =========================== */
.c-layout-footer,
.c-layout-footer.c-bg-dark {
    background-color: #041736 !important;
}

.c-layout-footer .c-prefooter {
    background-color: #041736 !important;
}

.c-layout-footer .c-postfooter,
.c-layout-footer .c-postfooter.c-bg-dark-2 {
    background-color: #021025 !important;
}

.c-layout-footer h3,
.c-layout-footer .c-font-white {
    color: #ffffff !important;
}

.c-layout-footer p,
.c-layout-footer .c-text {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 15px;
    line-height: 1.75;
}

.c-layout-footer .c-links li a {
    color: rgba(255, 255, 255, 0.8) !important;
}

.c-layout-footer .c-links li a:hover {
    color: #FAC98A !important;
}

.c-layout-footer .c-copyright {
    color: rgba(255, 255, 255, 0.7) !important;
}

.c-layout-footer .c-theme-font,
.c-layout-footer span.c-theme-font {
    color: #FAC98A !important;
}

/* ===========================
   CONTENT TITLE LINE
   =========================== */
.c-content-title-1 .c-line-center,
.c-content-title-1 .c-line-left {
    background-color: #193A68 !important;
}

.c-content-title-1 .c-line-center.c-theme-bg,
.c-line-center.c-theme-bg {
    background-color: #BA854A !important;
}

/* ===========================
   BREADCRUMBS
   =========================== */
.c-layout-breadcrumbs-1 {
    background-color: #193A68 !important;
}

.c-layout-breadcrumbs-1.c-bgimage {
    background-color: #193A68 !important;
}

.c-layout-breadcrumbs-1 h3 {
    color: #041736 !important;
}

/* ===========================
   CARDS & CONTENT BOXES
   =========================== */
.c-content-box {
    background-color: #ffffff;
}

.c-content-box.c-bg-grey {
    background-color: #f8f9fa !important;
}

.c-content-box.c-bg-dark {
    background-color: #041736 !important;
}

.c-content-box.c-bg-dark p,
.c-content-box.c-bg-dark span {
    color: rgba(255, 255, 255, 0.9) !important;
}

.c-content-box.c-bg-dark h1,
.c-content-box.c-bg-dark h2,
.c-content-box.c-bg-dark h3,
.c-content-box.c-bg-dark h4,
.c-content-box.c-bg-dark h5,
.c-content-box.c-bg-dark h6 {
    color: #ffffff !important;
}

/* ===========================
   BLOG POST CARDS
   =========================== */
.c-content-blog-post-card-1 .c-body a {
    color: #193A68 !important;
}

.c-content-blog-post-card-1 .c-body a:hover {
    color: #041736 !important;
}

.c-content-blog-post-card-1 .c-body p {
    color: #041736 !important;
}

/* ===========================
   FORMS
   =========================== */
.form-control {
    border-color: #d1d5db;
    color: #041736;
    font-size: 16px;
}

.form-control:focus {
    border-color: #193A68 !important;
    box-shadow: 0 0 0 3px rgba(25, 58, 104, 0.15);
}

.form-control::placeholder {
    color: #6b7280;
}

label {
    color: #041736;
    font-size: 16px;
}

/* ===========================
   GO TO TOP BUTTON
   =========================== */
.c-layout-go2top {
    background-color: #193A68 !important;
}

.c-layout-go2top:hover {
    background-color: #041736 !important;
}

.c-layout-go2top i {
    color: #ffffff !important;
}

/* ===========================
   SLIDER CUSTOMIZATION
   =========================== */
.c-layout-revo-slider .c-action-btn,
.c-layout-revo-slider .c-theme-btn {
    background-color: #193A68 !important;
    border-color: #193A68 !important;
    color: #ffffff !important;
}

.c-layout-revo-slider .c-action-btn:hover,
.c-layout-revo-slider .c-theme-btn:hover {
    background-color: #041736 !important;
    border-color: #041736 !important;
}

/* ===========================
   TABS
   =========================== */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #193A68 !important;
    border-bottom-color: #193A68 !important;
}

.nav-tabs > li > a:hover {
    color: #193A68 !important;
}

/* ===========================
   MODAL STYLING
   =========================== */
.modal-header {
    background-color: #193A68;
    color: #ffffff;
}

.modal-header .modal-title {
    color: #ffffff !important;
}

.modal-header .close {
    color: #ffffff;
    opacity: 0.8;
}

.modal-header .close:hover {
    opacity: 1;
}

.modal-body {
    color: #041736;
}

/* ===========================
   SOCIAL ICONS
   =========================== */
.c-top-menu .c-icons li a i {
    color: #193A68 !important;
}

.c-top-menu .c-icons li a:hover i {
    color: #BA854A !important;
}

/* ===========================
   SELECTION HIGHLIGHT
   =========================== */
::selection {
    background-color: #193A68;
    color: #ffffff;
}

::-moz-selection {
    background-color: #193A68;
    color: #ffffff;
}

/* ===========================
   ACCESSIBILITY FOCUS STATES
   =========================== */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
    outline: 2px solid #193A68;
    outline-offset: 2px;
}

/* ===========================
   SKIP LINK FOR ACCESSIBILITY
   =========================== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #193A68;
    color: #ffffff;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* ===========================
   HIGH CONTRAST TEXT HELPERS
   =========================== */
.text-primary {
    color: #193A68 !important;
}

.text-secondary {
    color: #041736 !important;
}

.text-accent {
    color: #BA854A !important;
}

.text-light-accent {
    color: #FAC98A !important;
}

.bg-primary {
    background-color: #193A68 !important;
}

.bg-secondary {
    background-color: #041736 !important;
}

.bg-accent {
    background-color: #BA854A !important;
}

.bg-light-accent {
    background-color: #FAC98A !important;
}

/* ===========================
   RESPONSIVE TYPOGRAPHY
   =========================== */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }
    
    h1 {
        font-size: 24px;
    }
    
    h2 {
        font-size: 22px;
    }
    
    h3 {
        font-size: 20px;
    }
    
    p {
        font-size: 16px;
        line-height: 1.7;
    }
}

/* ===========================
   MOBILE MENU
   =========================== */
@media (max-width: 991px) {
    .c-mega-menu.c-shown {
        background-color: #ffffff !important;
    }
    
    .c-mega-menu .nav.navbar-nav > li > .c-link {
        color: #193A68 !important;
        border-bottom-color: rgba(25, 58, 104, 0.1) !important;
    }
    
    .c-mega-menu .nav.navbar-nav > li:hover > .c-link,
    .c-mega-menu .nav.navbar-nav > li.c-active > .c-link {
        color: #BA854A !important;
    }
}

/* ===========================
   PRINT STYLES
   =========================== */
@media print {
    body {
        color: #000000;
        background: #ffffff;
    }
    
    a {
        color: #000000;
    }
    
    .c-layout-header,
    .c-layout-footer,
    .c-layout-go2top {
        display: none;
    }
}