/* ISI site-wide layer for the public website: type, header, menus, footer, breadcrumb. Loaded on every front page. */
:root {
  --isi-ink: #0c1b33; --isi-navy: #1d304e; --isi-green: #009b3d; --isi-green-deep: #00602f; --isi-glow: #3cdc86;
  --isi-steel: #c9d1da; --isi-sans: "Archivo", "Helvetica Neue", Arial, sans-serif; --isi-serif: "Newsreader", Georgia, serif;
}

/* ---------- type ---------- */
body { font-family: var(--isi-sans); color: #22324a; }
h1, h2, h3, h4, h5, h6, .section-title, .section-summary, .breadcrumb-txt h1 { font-family: var(--isi-sans); letter-spacing: -0.01em; }
.breadcrumb-txt h1 { font-weight: 800; font-stretch: 112%; }
.breadcrumb-txt span { font-family: var(--isi-serif); font-style: italic; font-weight: 400; font-size: 1.2rem; text-transform: none; letter-spacing: 0; }
input, select, textarea, button { font-family: var(--isi-sans); }

/* ---------- header ---------- */
.support-bar-area { font-family: var(--isi-sans); font-size: .88rem; }
.header-navbar { border-bottom-color: rgba(201,209,218,.16) !important; }
.header-navbar .logo-wrapper { display: flex; align-items: center; min-height: 56px; }
.isi-logo-link { display: inline-flex; align-items: center; color: #fff !important; --isl-bg: var(--isi-ink); }
.isi-logo-anim, .isi-logo-anim svg { display: block; width: clamp(190px, 16vw, 240px); height: auto; color: #fff; }
.sticky-navbar { background-color: rgba(12,27,51,.92) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(60,220,134,.25), 0 14px 40px -18px rgba(0,0,0,.6); }
.sticky-navbar .isi-logo-anim, .sticky-navbar .isi-logo-anim svg { width: 175px; }
.main-menu li a, .main-menu .dropbtn, .isi-mega__btn { font-family: var(--isi-sans) !important; font-weight: 600 !important; font-size: .98rem !important; letter-spacing: 0 !important; text-transform: none !important; }
.main-menu > li > a { position: relative; }
.main-menu > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--isi-glow); transform: scaleX(0); transform-origin: left; transition: transform .25s; box-shadow: 0 0 12px var(--isi-glow); }
.main-menu > li:hover > a::after, .main-menu > li.active > a::after { transform: scaleX(1); }
.main-menu .dropdown-lists {
  background:
    repeating-linear-gradient(90deg, rgba(60, 220, 134, 0.03) 0 1px, transparent 1px 40px),
    linear-gradient(165deg, rgba(12, 27, 51, 0.98), rgba(7, 16, 32, 0.99)) !important;
  border: 1px solid rgba(60, 220, 134, 0.35) !important;
  border-top: 2px solid var(--isi-glow) !important;
  border-radius: 6px !important;
  box-shadow: 0 28px 65px -18px rgba(0, 0, 0, 0.85), 0 0 28px rgba(0, 155, 61, 0.18) !important;
  padding: 8px !important;
  min-width: 240px !important;
  backdrop-filter: blur(14px);
}
.main-menu .dropdown-lists li {
  border-bottom: 1px solid rgba(201, 209, 218, 0.08) !important;
}
.main-menu .dropdown-lists li:last-child {
  border-bottom: 0 !important;
}
.main-menu .dropdown-lists li a {
  color: #dfe5ec !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  padding: 10px 14px !important;
  border-left: 3px solid transparent !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}
.main-menu .dropdown-lists li a:hover {
  color: #fff !important;
  background: rgba(0, 155, 61, 0.22) !important;
  border-left-color: var(--isi-glow) !important;
  padding-left: 18px !important;
}

/* ---------- courses mega menu ---------- */
.isi-mega { position: static; }
.isi-mega__btn { color: #fff; display: inline-block; padding: 6px 0; }
.isi-mega__btn i { font-size: .8em; margin-left: 4px; transition: transform .2s; }
.isi-mega:hover .isi-mega__btn i, .isi-mega:focus-within .isi-mega__btn i { transform: rotate(180deg); }
.isi-mega__panel {
  position: absolute; left: 15px; right: 15px; top: calc(100% - 6px); z-index: 50;
  opacity: 0; visibility: hidden; transform: translateY(10px) perspective(1200px) rotateX(-6deg); transform-origin: top center;
  transition: opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility .22s;
  text-align: left;
}
.isi-mega:hover .isi-mega__panel, .isi-mega:focus-within .isi-mega__panel { opacity: 1; visibility: visible; transform: none; }
.isi-mega__grid {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 230px; gap: 0;
  background: rgba(10,22,42,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(60,220,134,.25); border-radius: 6px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.isi-mega__grid::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(120,255,190,.035) 0 1px, transparent 1px 48px); pointer-events: none; }
.isi-mega__col { position: relative; padding: 24px 20px 26px; border-right: 1px solid rgba(201,209,218,.1); }
.isi-mega__title { font-family: var(--isi-sans); font-weight: 800; font-stretch: 110%; font-size: 1rem; color: #fff; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--isi-green); }
.isi-mega__col ul { list-style: none; margin: 0; padding: 0; }
.isi-mega__col li { display: block !important; margin: 0 !important; }
.isi-mega__col li a { display: grid !important; gap: 2px; padding: 8px 10px !important; margin: 0 -10px; border-radius: 3px; color: #dfe5ec !important; text-decoration: none !important; font-size: .9rem !important; line-height: 1.3; font-weight: 500 !important; }
.isi-mega__col li a::after { display: none !important; }
.isi-mega__col li a:hover, .isi-mega__col li a:focus-visible { background: rgba(0,155,61,.16); color: #fff !important; }
.isi-mega__lvl { font-family: var(--isi-sans); font-weight: 700; font-size: .72rem; color: var(--isi-glow); }
.isi-mega__name { font-family: var(--isi-sans); }
.isi-mega__side { position: relative; padding: 24px 22px; background: linear-gradient(160deg, rgba(0,155,61,.25), rgba(0,96,47,.1)); display: flex; flex-direction: column; gap: 12px; }
.isi-mega__lede { font-family: var(--isi-serif); font-size: 1rem; line-height: 1.45; color: #dfe5ec; margin: 0 0 6px; }
.isi-mega__cta { display: block !important; text-align: center; padding: 11px 14px !important; border-radius: 3px; background: var(--isi-green); color: #fff !important; font-weight: 700 !important; font-size: .92rem !important; text-decoration: none !important; }
.isi-mega__cta::after { display: none !important; }
.isi-mega__cta:hover { background: #00b247; box-shadow: 0 0 24px rgba(0,210,106,.4); }
.isi-mega__cta--ghost { background: transparent; border: 1px solid rgba(201,209,218,.35); }
.isi-mega__cta--ghost:hover { background: rgba(255,255,255,.06); box-shadow: none; }

/* ---------- breadcrumb ---------- */
.breadcrumb-area { background-position: center 40%; }
.breadcrumb-area .breadcrumb-area-overlay { background: linear-gradient(90deg, #0c1b33 20%, rgba(12,27,51,.55)) !important; opacity: 1 !important; }

/* ---------- footer ---------- */
.footer-section { background: #08142a !important; font-family: var(--isi-sans); position: relative; }
.footer-section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--isi-glow), transparent); opacity: .6; }
.footer-section h4, .footer-section .footer-title { font-family: var(--isi-sans) !important; font-weight: 800 !important; color: #fff !important; }
.footer-section .footer-txt, .footer-section p { font-family: var(--isi-serif); font-size: 1.02rem; color: #b8c2cd !important; }
.footer-section .footer-links { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; list-style: none; padding: 0; margin: 0; }
.footer-section .footer-links li { margin: 0 !important; padding: 0 !important; }
.footer-section .footer-links a, .footer-section .footer-contact-info li { color: #c9d1da !important; font-size: .92rem; line-height: 1.35; }
.footer-section .footer-links a:hover { color: var(--isi-glow) !important; }
.footer-section .footer-logo-wrapper img { max-width: 230px; height: auto; }
.footer-section .footer-logo-wrapper .isi-logo-link { --isl-bg: #08142a; }
.footer-section .footer-logo-wrapper .isi-logo-anim,
.footer-section .footer-logo-wrapper .isi-logo-anim svg { width: 235px; }
.footer-section .copyright-section { border-top-color: rgba(201,209,218,.12) !important; }

/* buttons from the template */
.boxed-btn, .main-btn, .hero-boxed-btn { font-family: var(--isi-sans) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; border-radius: 3px !important; }

@media (prefers-reduced-motion: reduce) {
  .isi-mega__panel, .main-menu > li > a::after { transition: none; }
}

/* breadcrumb headline: keep long CMS subtitles to two or three lines */
.breadcrumb-txt h1 { font-size: clamp(2rem, 1.3rem + 1.8vw, 3rem) !important; line-height: 1.08 !important; max-width: 24ch; }
/* cookie consent bar in the site colours */
.js-cookie-consent, .cookie-consent { background: #08142a !important; border-top: 1px solid rgba(60,220,134,.3); font-family: var(--isi-sans); }

/* ---------- MOBILE & TABLET NAVIGATION & FOOTER (< 991px) ---------- */
@media (max-width: 991px) {
  .support-bar-area {
    padding: 6px 0 !important;
    font-size: 0.78rem !important;
  }
  .support-bar-area .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .support-bar-area .col-lg-6 {
    width: auto !important;
    flex: 0 1 auto !important;
    text-align: left !important;
  }
  .support-bar-area .support-contact-info span {
    font-size: 0.76rem !important;
  }
  .header-navbar {
    padding: 8px 0 !important;
  }
  .isi-logo-anim, .isi-logo-anim svg {
    width: clamp(148px, 38vw, 185px) !important;
  }
  /* SlickNav Mobile Drawer Sci-Fi Theme */
  #mobileMenu .slicknav_menu {
    background: transparent !important;
    padding: 0 !important;
  }
  #mobileMenu .slicknav_btn {
    background: rgba(0, 155, 61, 0.22) !important;
    border: 1px solid #3cdc86 !important;
    border-radius: 4px !important;
    padding: 8px 11px !important;
    margin: 4px 0 0 !important;
    box-shadow: 0 0 16px rgba(60, 220, 134, 0.28);
  }
  #mobileMenu .slicknav_icon-bar {
    background-color: #3cdc86 !important;
    height: 2px !important;
    width: 20px !important;
  }
  #mobileMenu .slicknav_nav {
    background: rgba(8, 20, 42, 0.98) !important;
    border: 1px solid rgba(60, 220, 134, 0.38) !important;
    border-radius: 6px !important;
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.9) !important;
    margin-top: 12px !important;
    padding: 10px 12px !important;
    max-height: 76vh;
    overflow-y: auto;
    text-align: left !important;
  }
  #mobileMenu .slicknav_nav li {
    border-bottom: 1px solid rgba(201, 209, 218, 0.1);
  }
  #mobileMenu .slicknav_nav li:last-child {
    border-bottom: 0;
  }
  #mobileMenu .slicknav_nav a,
  #mobileMenu .slicknav_nav .slicknav_row {
    font-family: var(--isi-sans) !important;
    font-weight: 700 !important;
    font-size: 0.94rem !important;
    color: #fff !important;
    padding: 10px 8px !important;
    margin: 0 !important;
    border-radius: 4px;
  }
  #mobileMenu .slicknav_nav a:hover,
  #mobileMenu .slicknav_nav .slicknav_row:hover {
    background: rgba(0, 155, 61, 0.2) !important;
    color: #3cdc86 !important;
  }
  /* Make Courses Mega-Menu stack cleanly inside mobile SlickNav */
  #mobileMenu .isi-mega__panel {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding: 4px 0 10px !important;
  }
  #mobileMenu .isi-mega__grid {
    grid-template-columns: 1fr !important;
    border: 1px solid rgba(60, 220, 134, 0.24) !important;
    box-shadow: none !important;
  }
  #mobileMenu .isi-mega__col {
    padding: 12px 14px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(201, 209, 218, 0.12);
  }
  #mobileMenu .isi-mega__side {
    padding: 14px !important;
  }
  .footer-section .top-footer-section .col-md-6,
  .footer-section .top-footer-section .col-md-12 {
    margin-bottom: 28px;
  }
}

@media (max-width: 575px) {
  .footer-section .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 12px;
  }
  .footer-section .footer-links a {
    font-size: 0.85rem;
  }
}
