:root {
  --sar-primary: #275D90;
  --sar-secondary: #2F5E95;
  --sar-accent: #356CA8;
  --sar-bg-soft: #F6F7F9;
  --sar-border: #D9DDE4;
  --sar-white: #FFFFFF;
  --sar-text: #21325B;
  --sar-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html,
body,
button,
input,
textarea,
select,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
div,
small,
strong,
li,
label,
nav,
section,
article {
  font-family: var(--sar-font) !important;
}

a { color: var(--sar-primary); }
a:hover { color: var(--sar-secondary); }

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.card-title,
.section-title,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  color: var(--sar-primary) !important;
}

.text-dark,
.text-gray-900,
.text-gray-800 {
  color: var(--sar-text) !important;
}

.text-primary { color: var(--sar-primary) !important; }
.text-info { color: var(--sar-accent) !important; }

.bg-primary,
.badge-primary,
.btn-primary,
.dropdown-item.active,
.dropdown-item:active,
.page-item.active .page-link {
  background-color: var(--sar-primary) !important;
  border-color: var(--sar-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--sar-secondary) !important;
  border-color: var(--sar-secondary) !important;
}

.btn-outline-primary {
  color: var(--sar-primary) !important;
  border-color: var(--sar-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: var(--sar-white) !important;
  background-color: var(--sar-primary) !important;
  border-color: var(--sar-primary) !important;
}

.border-primary { border-color: var(--sar-primary) !important; }

.bg-light,
.bg-gray-100,
.bg-gray-200 {
  background-color: var(--sar-bg-soft) !important;
}

.border,
.border-top,
.border-bottom,
.form-control,
.form-select,
.card {
  border-color: var(--sar-border) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sar-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(39,93,144,.14) !important;
}

.nav-link.active,
.nav-link:hover,
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--sar-primary) !important;
}

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

.badge,
.rounded-pill.bg-primary {
  background-color: var(--sar-primary) !important;
}

.icon-circle.bg-primary,
.icon-shape.bg-primary {
  background-color: var(--sar-primary) !important;
}

.sar-header .sar-account-btn:hover,
.sar-header .sar-account-btn:focus {
  background: var(--sar-primary) !important;
  border-color: var(--sar-primary) !important;
}

.sar-header .dropdown-item:hover,
.sar-header .dropdown-item:focus {
  background: var(--sar-bg-soft) !important;
  color: var(--sar-primary) !important;
}

.sar-footer {
  background: linear-gradient(135deg, #1f4f7c 0%, #275D90 55%, #2F5E95 100%) !important;
}

.sar-footer h1,
.sar-footer h2,
.sar-footer h3,
.sar-footer h4,
.sar-footer h5,
.sar-footer h6 {
  color: var(--sar-white) !important;
}

.sar-footer a:hover { color: #ffffff !important; }

::selection {
  background: rgba(39,93,144,.22);
  color: var(--sar-text);
}

/* Header breakpoint isolation: desktop dropdown stays compact; tablet/mobile use hamburger. */
@media (min-width: 1200px) {
  .sar-header .container { flex-wrap: nowrap !important; }
  .sar-header .navbar-collapse { display: flex !important; align-items: center !important; min-width: 0 !important; }
  .sar-header .navbar-nav { flex-wrap: nowrap !important; align-items: center !important; }
  .sar-header .nav-link { font-size: 16px !important; line-height: 1.2 !important; }
  .sar-header .sar-courses-dropdown { position: relative !important; }
  .sar-header .sar-courses-dropdown .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: auto !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    max-height: 520px !important;
    overflow-y: auto !important;
    padding: 8px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 16px 38px rgba(31,45,61,.14) !important;
    transform: none !important;
  }
  .sar-header .sar-courses-dropdown .dropdown-item {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 9px 10px !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }
  .sar-header .sar-courses-dropdown .dropdown-divider { margin: 5px 4px !important; }
  .sar-mobile-account-row { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .sar-header .container {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    flex-wrap: initial !important;
  }
  .sar-header .navbar-toggler { display: inline-flex !important; }
  .sar-header .navbar-collapse {
    grid-column: 1 / -1 !important;
    display: none !important;
    width: 100% !important;
  }
  .sar-header .navbar-collapse.show { display: block !important; }
  .sar-header .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .sar-header .nav-link { width: 100% !important; font-size: 16px !important; }
  .sar-header .sar-courses-dropdown .dropdown-menu {
    display: none !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 360px !important;
    overflow-y: auto !important;
    margin: 4px 0 8px !important;
    padding: 6px !important;
    box-shadow: none !important;
    background: #f7f9fc !important;
  }
  .sar-header .sar-courses-dropdown .dropdown-menu.show { display: block !important; }
  .sar-header .sar-courses-dropdown .dropdown-item {
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
}

/* Mobile header — compact, predictable and submenu-based on iPhone. */
@media (max-width: 767.98px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  .sar-header {
    min-height: 68px !important;
    position: relative !important;
    overflow: visible !important;
  }
  .sar-header .container {
    min-height: 68px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    flex-wrap: wrap !important;
    position: relative !important;
  }
  .sar-header .sar-brand-logo {
    width: 176px !important;
    max-width: calc(100vw - 100px) !important;
  }
  .sar-header .navbar-toggler {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin-left: auto !important;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1px solid rgba(39,93,144,.16) !important;
    box-shadow: 0 6px 16px rgba(33,50,91,.06) !important;
    position: relative !important;
    z-index: 1062 !important;
  }
  .sar-header .navbar-collapse {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100svh - 92px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.99) !important;
    border: 1px solid rgba(39,93,144,.10) !important;
    box-shadow: 0 24px 54px rgba(26,55,86,.18) !important;
    z-index: 1060 !important;
  }
  .sar-header .navbar-collapse:not(.show) { display: none !important; }
  .sar-header .navbar-collapse.show { display: block !important; }
  .sar-header .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 2px !important;
  }
  .sar-header .nav-item { width: 100% !important; }
  .sar-header .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }
  .sar-header .nav-link:hover,
  .sar-header .nav-link.active { background: #f3f7fb !important; }
  .sar-header .sar-courses-dropdown .dropdown-menu {
    display: none !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 4px 0 8px !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    background: #f7f9fc !important;
    transform: none !important;
  }
  .sar-header .sar-courses-dropdown .dropdown-menu.show { display: block !important; }
  .sar-header .dropdown-item { padding: 10px 12px !important; font-size: 14px !important; }
  .sar-header .navbar-collapse > .d-flex {
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid #e7edf3 !important;
  }
  .sar-header .sar-cart-link {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    background: #f3f7fb !important;
  }
  .sar-header .sar-account-btn {
    width: 100% !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
  }

  .sar-new-hero {
    min-height: 650px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
  }
  .sar-new-hero .sar-hero-container {
    min-height: 650px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    padding: 34px 24px !important;
  }
  .sar-new-hero .sar-hero-content {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    transform: translateY(46px) !important;
  }
  .sar-new-hero .sar-hero-signature { margin-top: 32px !important; }
}

@media (max-width: 430px) {
  .sar-new-hero { min-height: 620px !important; }
  .sar-new-hero .sar-hero-container {
    min-height: 620px !important;
    padding: 26px 24px !important;
  }
  .sar-new-hero .sar-hero-content {
    max-width: 342px !important;
    transform: translateY(64px) !important;
  }
  .sar-new-hero .sar-hero-signature { margin-top: 28px !important; }
}