/* ============================================================
   MicUp Website — Site-wide UI Overrides
   Loaded AFTER templatemo-edu-meeting.css to override theme rules.

   SCOPE (intentionally narrow now):
     1. Hero banner polish (height + overlay text)
     2. Sub-header (blue notice bar) hides on scroll
     3. Sticky white navigation polish
     4. Services carousel overlaps into next section
     (Section background images are LEFT ALONE — keep the brand bg.)
   ============================================================ */

/* ---------- Body / global ---------- */
body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
    background: #ffffff;
    color: #3a3b45;
}

/* ---------- Sub-header (top blue notice bar) ---------- */
.sub-header {
    transition: transform .35s ease, opacity .25s ease;
    will-change: transform;
}

.sub-header.hidden-on-scroll {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* When the sub-header is hidden, snap the nav to top */
body.subheader-hidden header.header-area {
    top: 0 !important;
}

/* ---------- Header / navigation ---------- */
.header-area {
    transition: background-color .35s ease, top .35s ease, height .35s ease, box-shadow .35s ease;
}

/* Sticky white background-header (triggered by JS adding .background-header) */
.background-header {
    background-color: #ffffff !important;
    height: 80px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0; right: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid #eef0f6;
}

.background-header .main-nav .logo {
    line-height: 80px;
}

.background-header .main-nav .nav li a,
.background-header .logo {
    color: #1e1e1e !important;
}

.background-header .main-nav .nav li:hover a,
.background-header .nav li a.active {
    color: #6fc9c9 !important;
}

/* Sub-menu dropdowns under sticky white nav */
.background-header .main-nav .nav li.has-sub ul.sub-menu li a {
    color: #1e1e1e !important;
}
.background-header .main-nav .nav li.has-sub ul.sub-menu {
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    border-radius: 8px;
    overflow: hidden;
}

/* ---------- Main hero banner ---------- */
.main-banner {
    position: relative;
    height: 620px;
    max-height: 72vh;
    overflow: hidden;
    margin-bottom: 0 !important;
}

.main-banner > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

/* Dark gradient overlay for text legibility */
.main-banner .video-overlay {
    position: absolute !important;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 18, 35, .25) 0%, rgba(15, 18, 35, .55) 60%, rgba(15, 18, 35, .80) 100%);
    display: flex;
    align-items: center;          /* vertical center */
    justify-content: center;
    padding-top: 60px;             /* push content slightly below center */
}

.main-banner .video-overlay .container,
.main-banner .video-overlay .row,
.main-banner .video-overlay .col-lg-12 { height: auto; }

.main-banner .caption {
    position: static !important;
    transform: none !important;
    text-align: center;
    color: #ffffff;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px;
}

.main-banner .caption .hero-eyebrow {
    display: inline-block;
    background: rgba(255,255,255,.12);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    margin-bottom: 18px;
}

.main-banner .caption h1.hero-title {
    font-size: 56px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: .5px;
    margin: 0 0 10px;
    line-height: 1.05;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.main-banner .caption .hero-subtitle {
    font-size: 18px;
    color: rgba(255,255,255,.92);
    font-weight: 400;
    margin: 0 0 28px;
    line-height: 1.45;
}

.main-banner .caption .hero-ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.main-banner .caption .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 15px 34px;
    border-radius: 10px;
    text-decoration: none;
    transition: all .25s ease;
    position: relative;
    border: 2px solid transparent;
}

.main-banner .caption .hero-cta::after {
    content: '\2192';                  /* → arrow */
    font-size: 16px;
    transition: transform .25s ease;
    line-height: 1;
}

.main-banner .caption .hero-cta:hover::after {
    transform: translateX(4px);
}

.main-banner .caption .hero-cta.primary {
    background: #fb5849;
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(251, 88, 73, .45);
}

.main-banner .caption .hero-cta.primary:hover {
    background: #ff6a5c;
    box-shadow: 0 12px 28px rgba(251, 88, 73, .55);
    transform: translateY(-2px);
}

.main-banner .caption .hero-cta.secondary {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
    border-color: rgba(255, 255, 255, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.main-banner .caption .hero-cta.secondary:hover {
    background: rgba(255, 255, 255, .18);
    border-color: #ffffff;
    transform: translateY(-2px);
}

.main-banner .caption .hero-cta:hover {
    color: #ffffff;
    text-decoration: none;
}

@media (max-width: 991px) {
    .main-banner { height: 500px; max-height: 65vh; }
    .main-banner .video-overlay { padding-top: 40px; }
    .main-banner .caption h1.hero-title { font-size: 42px; }
    .main-banner .caption .hero-subtitle { font-size: 16px; }
}

@media (max-width: 575px) {
    .main-banner { height: 420px; max-height: 58vh; }
    .main-banner .video-overlay { padding-top: 30px; }
    .main-banner .caption h1.hero-title { font-size: 32px; }
    .main-banner .caption .hero-subtitle { font-size: 14px; margin-bottom: 22px; }
    .main-banner .caption .hero-cta { padding: 11px 22px; font-size: 13px; }
}

/* ---------- Services carousel — overlap into next section ----------
   The carousel sits at the bottom of .services (which is white).
   We pull it DOWN into the next section so the cards span the boundary
   between the white services area and the brand-image section below.
   ------------------------------------------------------------------ */
section.services {
    position: relative;
    z-index: 3;
    padding: 40px 0 !important;       /* identical top + bottom */
    margin-bottom: 0;
    background: linear-gradient(135deg, #1f2747 0%, #2a3458 45%, #4e54c8 100%);
    display: flex;                     /* center the carousel vertically */
    align-items: center;
}

section.services > .container { width: 100%; }

@media (max-width: 991px) {
    section.services { padding: 30px 0 !important; }
}

/* Subtle bokeh-style highlights so the gradient doesn't feel flat */
section.services::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 18% 25%, rgba(111,201,201,.18) 0%, transparent 45%),
      radial-gradient(circle at 82% 80%, rgba(255,90,92,.14) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
}

section.services > .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    section.services { margin-bottom: -100px; }
}

@media (max-width: 575px) {
    section.services { margin-bottom: -70px; }
}

/* The carousel item white cards already exist — add shadow + rounded edges */
.owl-service-item .item {
    background: #ffffff;
    border-radius: 14px;
    padding: 22px 26px;
    box-shadow: 0 10px 36px rgba(58, 59, 69, .14);
    position: relative;
    z-index: 4;
}

.owl-service-item .item .row {
    display: flex !important;
    align-items: center !important;
}
.owl-service-item .item p,
.owl-service-item .item li { font-size: 14px; line-height: 1.45; }
.owl-service-item .item h4 { font-size: 17px; margin-bottom: 8px; }
.owl-service-item .item ul { margin-bottom: 0; }

/* Stop owl from forcing 100% height on items (which can mess with centering) */
.owl-service-item .owl-stage { display: flex; align-items: center; }
.owl-service-item .owl-item { display: flex; align-items: center; }
.owl-service-item .owl-item .item { width: 100%; }

.owl-service-item .item h4 {
    color: #1f2747;
    font-weight: 700;
}

.owl-service-item .icon img {
    border-radius: 10px;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Owl nav arrows */
.owl-service-item .owl-nav button.owl-prev,
.owl-service-item .owl-nav button.owl-next {
    background: #ffffff !important;
    color: #4e54c8 !important;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    font-size: 18px !important;
}

/* ---------- The empty <section.upcoming-meetings> ----------
   The HTML for this section on the home page is an empty placeholder
   (just a <br>). Collapse it visually so it doesn't produce an
   awkward brand-image stripe between the slides section and apply-now.
   ----------------------------------------------------------- */
section.upcoming-meetings {
    display: none !important;
}

/* ---------- Print mode ---------- */
@media print {
    .sub-header, header.header-area { display: none !important; }
    .main-banner { height: 220px !important; }
    section.services { margin-bottom: 0 !important; }
    section.upcoming-meetings { padding-top: 40px !important; }
}