/*
  SSR Learning & Development — Brand Theme
  =========================================
  SSR logo palette:
    Blue       #1e8fe7
    Green      #3fbf0d
    Orange     #ec7208
    Deep blue  #0544b8
    Navy       #071f66
    Cyan       #3bd8fa
    Lime       #9af10c
    Yellow     #f6e230
    Forest     #117215
    Olive      #3b4b34
*/

/* ── Brand Variables ─────────────────────────────────────── */
:root {
  --ssr-black:    #071f66;
  --ssr-dark:     #0b2d78;
  --ssr-dark-2:   #103783;
  --ssr-dark-3:   #174a95;
  --ssr-white:    #f8fbff;
  --ssr-grey:     #c3d0e4;
  --ssr-grey-dim: #91a6c4;
  --ssr-yellow:   #f6e230;
  --ssr-green:    #3fbf0d;
  --ssr-cyan:     #3bd8fa;
  --ssr-blue:     #1e8fe7;
  --ssr-deep-blue:#0544b8;
  --ssr-lime:     #9af10c;
  --ssr-orange:   #ec7208;
  --ssr-forest:   #117215;
  --ssr-olive:    #3b4b34;

  --ssr-brand-gradient: linear-gradient(100deg, #1e8fe7 0%, #3fbf0d 55%, #ec7208 100%);
}

/* ── Global ──────────────────────────────────────────────── */
html, body {
  background-color: var(--ssr-black) !important;
  color: var(--ssr-grey);
}

a       { color: var(--ssr-cyan); }
a:hover { color: var(--ssr-orange); }

::selection      { background: var(--ssr-blue); color: #fff; }
::-moz-selection { background: var(--ssr-blue); color: #fff; }

p { color: var(--ssr-grey); }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--ssr-black); }
::-webkit-scrollbar-thumb {
  background: var(--ssr-brand-gradient);
  border-radius: 3px;
}

/* ── Sub-header ──────────────────────────────────────────── */
.sub-header {
  background-color: var(--ssr-black) !important;
  border-bottom: 1px solid rgba(195, 208, 228, 0.18);
}

.sub-header .left-content p { color: var(--ssr-grey); font-size: 12px; }

.sub-header .left-content p em {
  font-style: normal;
  background: var(--ssr-brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.sub-header .right-icons ul li a       { color: var(--ssr-grey); }
.sub-header .right-icons ul li a:hover { color: var(--ssr-cyan); }

/* ── Header ──────────────────────────────────────────────── */
.header-area {
  background-color: rgba(7, 31, 102, 0.78) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* Logo image */
.header-area .main-nav .logo {
  line-height: 100px;
  display: inline-block;
  float: left;
  padding: 0;
}

.header-area .main-nav .logo img {
  width: 150px;
  height: auto;
  display: block;
  margin-top: 20px;
}

.background-header .main-nav .logo img {
  margin-top: 15px;
}

/* Scrolled header */
.background-header {
  background-color: rgba(7, 31, 102, 0.98) !important;
  box-shadow: 0 2px 30px rgba(0,0,0,0.6) !important;
  border-bottom: 1px solid rgba(195, 208, 228, 0.18) !important;
}

.background-header .main-nav .nav li a       { color: var(--ssr-white) !important; }
.background-header .main-nav .nav li:hover a { color: var(--ssr-cyan) !important; }
.background-header .nav li a.active          { color: var(--ssr-cyan) !important; }
.background-header .main-nav .nav li.has-sub:after { color: var(--ssr-white); }

/* Nav links */
.header-area .main-nav .nav li a { color: var(--ssr-white); }

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active,
.header-area.header-sticky .nav li a.active {
  color: var(--ssr-cyan) !important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: var(--ssr-cyan) !important;
}

/* Dropdown */
.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  background: var(--ssr-dark-2) !important;
  color: var(--ssr-white) !important;
  border-bottom: 1px solid rgba(195, 208, 228, 0.14);
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: var(--ssr-dark-3) !important;
  color: var(--ssr-lime) !important;
  padding-left: 25px;
}

/* Mobile */
@media (max-width: 767px) {
  .header-area {
    background-color: var(--ssr-black) !important;
  }
  .header-area .main-nav .nav li {
    background: var(--ssr-dark) !important;
    border-bottom: 1px solid rgba(195, 208, 228, 0.14) !important;
  }
  .header-area .main-nav .nav li a {
    background: var(--ssr-dark) !important;
    color: var(--ssr-white) !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: var(--ssr-dark-2) !important;
    color: var(--ssr-lime) !important;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: var(--ssr-lime) !important;
  }
}

/* ── Buttons ─────────────────────────────────────────────── */
/* Primary action uses the logo blue. */
.main-button-red a {
  background-color: var(--ssr-blue) !important;
  color: var(--ssr-white) !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  transition: background-color 0.3s, transform 0.2s !important;
  border: none !important;
}

.main-button-red a:hover {
  background-color: var(--ssr-deep-blue) !important;
  opacity: 1 !important;
  transform: translateY(-2px);
  color: var(--ssr-white) !important;
}

/* Secondary action uses the logo green. */
.main-button-yellow a {
  background-color: var(--ssr-green) !important;
  color: var(--ssr-black) !important;
  border: 2px solid var(--ssr-green) !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  transition: all 0.3s !important;
}

.main-button-yellow a:hover {
  background-color: var(--ssr-lime) !important;
  color: var(--ssr-black) !important;
  border-color: var(--ssr-lime) !important;
  opacity: 1 !important;
}

/* ── Logo-color divider utility ───────────────────────────── */
.ssr-brand-bar {
  height: 3px;
  background: var(--ssr-brand-gradient);
  border-radius: 2px;
  margin: 20px 0;
}

/* ── Section headings ────────────────────────────────────── */
.section-heading h2 {
  color: var(--ssr-white) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 20px !important;
  position: relative;
}

.section-heading h2::after {
  content: '';
  display: block;
  height: 3px;
  width: 60px;
  background: var(--ssr-brand-gradient);
  margin: 12px auto 30px;
  border-radius: 2px;
}

/* ── Hero banner ─────────────────────────────────────────── */
.video-overlay {
  background: linear-gradient(
    135deg,
    rgba(7,31,102,0.91) 0%,
    rgba(7,31,102,0.76) 100%
  ) !important;
}

.main-banner .caption h6 {
  color: var(--ssr-cyan) !important;
  letter-spacing: 4px;
  font-size: 13px;
}

.main-banner .caption h2 {
  color: var(--ssr-white) !important;
  font-size: 38px;
}

.main-banner .caption h2 em {
  font-style: normal;
  background: var(--ssr-brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.main-banner .caption p { color: var(--ssr-grey) !important; }

/* ── Services carousel ───────────────────────────────────── */
.services .item {
  background-image: none !important;
  background-color: var(--ssr-dark-2) !important;
  border: 1px solid rgba(195, 208, 228, 0.18);
  border-radius: 8px !important;
  transition: transform 0.3s, border-color 0.3s;
  position: relative;
  overflow: hidden;
}

/* Service cards cycle through the logo's blue, green and orange accents. */
.services .item:nth-child(1) { border-top: 3px solid var(--ssr-blue); }
.services .item:nth-child(2) { border-top: 3px solid var(--ssr-green); }
.services .item:nth-child(3) { border-top: 3px solid var(--ssr-orange); }
.services .item:nth-child(4) { border-top: 3px solid var(--ssr-cyan); }
.services .item:nth-child(5) { border-top: 3px solid var(--ssr-yellow); }

.services .item:hover { transform: translateY(-5px); }

.services .item h4 { color: var(--ssr-white) !important; }
.services .item p  { color: var(--ssr-grey) !important; }

/* ── Upcoming meetings / dark sections ───────────────────── */
section.upcoming-meetings {
  background-image: none !important;
  background-color: var(--ssr-dark) !important;
}

/* ── Apply-now sections ──────────────────────────────────── */
section.apply-now {
  background-image: none !important;
  background-color: var(--ssr-black) !important;
}

section.apply-now .item {
  background-color: var(--ssr-dark-2) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(195, 208, 228, 0.18);
  border-left: 4px solid var(--ssr-green);
}

section.apply-now .item h3 { color: var(--ssr-white) !important; }
section.apply-now .item p  { color: var(--ssr-grey) !important; }

/* ── Accordions ──────────────────────────────────────────── */
.accordions {
  background-color: var(--ssr-dark-2) !important;
  border: 1px solid rgba(195, 208, 228, 0.18);
  border-radius: 8px !important;
  margin-left: 0 !important;
}

.accordions .accordion { border-bottom: 1px solid rgba(195, 208, 228, 0.18) !important; }

.accordion-head {
  color: var(--ssr-white) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.accordion-head.is-open { color: var(--ssr-lime) !important; }

.accordion-body > .content p { color: var(--ssr-grey) !important; }

/* ── Courses section ─────────────────────────────────────── */
section.our-courses {
  background-image: none !important;
  background-color: var(--ssr-dark) !important;
}

.our-courses .item .down-content {
  background-color: var(--ssr-dark-2) !important;
  border: 1px solid rgba(195, 208, 228, 0.18);
  border-top: none;
}

.our-courses .item .down-content h4 {
  color: var(--ssr-white) !important;
  border-bottom: 1px solid rgba(195, 208, 228, 0.18) !important;
}

.our-courses .item .down-content p { color: var(--ssr-grey) !important; }

/* ── Facts / stats section ───────────────────────────────── */
section.our-facts {
  background-image: none !important;
  background-color: var(--ssr-black) !important;
}

section.our-facts h2 { color: var(--ssr-white) !important; }

/* Each stat card gets a different logo color */
.count-area-content {
  background-color: var(--ssr-dark-2) !important;
  border: 1px solid rgba(195, 208, 228, 0.18);
  border-radius: 8px !important;
  border-top: 3px solid var(--ssr-blue);
}

.count-area-content:nth-child(1) { border-top-color: var(--ssr-blue); }
.count-area-content:nth-child(2) { border-top-color: var(--ssr-green); }
.count-area-content:nth-child(3) { border-top-color: var(--ssr-orange); }
.count-area-content:nth-child(4) { border-top-color: var(--ssr-cyan); }
.count-area-content:nth-child(5) { border-top-color: var(--ssr-yellow); }
.count-area-content:nth-child(6) { border-top-color: var(--ssr-lime); }

.count-digit {
  background: var(--ssr-brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800 !important;
}

.count-title { color: var(--ssr-white) !important; }

/* ── Contact section ─────────────────────────────────────── */
section.contact-us {
  background-image: none !important;
  background-color: var(--ssr-dark) !important;
}

section.contact-us #contact {
  background-color: var(--ssr-dark-2) !important;
  border: 1px solid rgba(195, 208, 228, 0.18);
  border-radius: 8px !important;
}

section.contact-us #contact h2 {
  color: var(--ssr-white) !important;
  border-bottom: 1px solid rgba(195, 208, 228, 0.18) !important;
}

section.contact-us #contact p { color: var(--ssr-grey) !important; }

section.contact-us #contact input,
section.contact-us #contact textarea {
  background-color: var(--ssr-black) !important;
  color: var(--ssr-white) !important;
  border: 1px solid rgba(195, 208, 228, 0.24) !important;
  border-radius: 4px !important;
}

section.contact-us #contact input:focus,
section.contact-us #contact textarea:focus {
  border-color: var(--ssr-green) !important;
  outline: none;
}

section.contact-us #contact input::placeholder,
section.contact-us #contact textarea::placeholder { color: var(--ssr-grey-dim) !important; }

section.contact-us #contact button {
  background-color: var(--ssr-blue) !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

section.contact-us #contact button:hover {
  background-color: var(--ssr-deep-blue) !important;
  opacity: 1 !important;
}

section.contact-us .right-info {
  background: linear-gradient(145deg, var(--ssr-deep-blue), var(--ssr-forest), var(--ssr-olive)) !important;
  border: 1px solid rgba(195, 208, 228, 0.2);
  border-radius: 8px !important;
}

section.contact-us .right-info ul li { border-bottom-color: rgba(195, 208, 228, 0.2) !important; }
section.contact-us .right-info ul li h6 { color: var(--ssr-cyan) !important; }
section.contact-us .right-info ul li span { color: var(--ssr-white) !important; font-size: 14px !important; }

/* ── Inner page hero ─────────────────────────────────────── */
section.heading-page {
  background-image: none !important;
  background-color: var(--ssr-black) !important;
  position: relative;
  overflow: hidden;
}

/* Logo-colored top bar */
section.heading-page::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--ssr-brand-gradient);
}

/* Subtle colored glow behind heading */
section.heading-page::after {
  content: '';
  display: block;
  position: absolute;
  top: 30%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(30,143,231,0.2) 0%, transparent 70%);
  pointer-events: none;
}

section.heading-page h6 {
  color: var(--ssr-cyan) !important;
  letter-spacing: 4px;
}

section.heading-page h2 {
  color: var(--ssr-white) !important;
  position: relative;
  z-index: 1;
}

/* ── Meeting items ───────────────────────────────────────── */
.meeting-item .down-content {
  background-color: var(--ssr-dark-2) !important;
  border: 1px solid rgba(195, 208, 228, 0.18);
  border-top: none;
}

.meeting-item .down-content h4    { color: var(--ssr-white) !important; }
.meeting-item .down-content p     { color: var(--ssr-grey) !important; }
.meeting-item .down-content .date h6 { color: var(--ssr-orange) !important; }

/* ── Meetings page ───────────────────────────────────────── */
section.meetings-page {
  background-image: none !important;
  background-color: var(--ssr-dark) !important;
}

section.meetings-page .filters li {
  background-color: var(--ssr-dark-2) !important;
  color: var(--ssr-cyan) !important;
  border: 1px solid rgba(195, 208, 228, 0.18);
  border-radius: 4px !important;
}

section.meetings-page .filters ul li.active,
section.meetings-page .filters ul li:hover {
  background-color: var(--ssr-blue) !important;
  color: var(--ssr-white) !important;
}

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  background-color: var(--ssr-black) !important;
  border-top: 1px solid rgba(195, 208, 228, 0.18) !important;
  margin-top: 0 !important;
}

.footer p     { color: var(--ssr-grey) !important; }
.footer a     { color: var(--ssr-cyan) !important; }
.footer a:hover { color: var(--ssr-white) !important; }