/* Global reset to force full-bleed dark background and remove white gutters */
html, body, #app, .page, main, article {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100%;
    background-color: #0b0f17 !important;
    color: #e6f1ff !important;
}

/* Make Bootstrap containers full width for landing pages to avoid side gutters */
.container, .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
}

/* Prevent horizontal scroll caused by accidental overflows */
html, body { overflow-x: hidden; }

/* Miyaami landing page styles */
:root {
    /* Brand palette updated */
    --brand-from: #0CA2E0; /* primary blue */
    --brand-to: #24D7E7;   /* light aqua */

    /* Core tokens */
    /* Vertical (top?bottom) gradient */
    --hero-bg: linear-gradient(180deg, var(--brand-from) 0%, var(--brand-to) 100%);
    --primary: var(--brand-from);
    --primary-dark: #0a8fc7;
    --primary-light: #E6F7FD;

    /* Neutral grayscale for BW theme */
    --bg: #0b0f17; /* changed to dark full-page background */
    --fg: #e6f1ff; /* near-white for foreground text */
    --muted: #6b7280; /* gray-500 */
    --line: #e5e7eb; /* gray-200 */
    --panel: #f8fafc; /* gray-50 */
}

html, body {
    margin: 0; /* remove default browser margin so dark background is full-bleed */
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--fg);
    background: var(--bg);
}

/* Remove default top spacing so hero sits directly under navbar */
.site-header { margin-bottom: 0; padding: 0; }

/* Hero */
.hero {
    min-height: 64vh; /* slightly reduced for compact layout */
    color: var(--fg);
    background: var(--panel); /* subtle background for hero area */
    padding: 2.25rem 0 1.5rem; /* reduce top padding */
    position: relative;
    overflow: visible; /* allow laptop base shadow to show */
}

/* Add styles for the small logo placed on the right side of the hero */
.hero-side-logo {
    position: absolute;
    right: 2.5rem; /* push inside the hero right area */
    top: 30%;
    width: 160px;
    height: auto;
    box-shadow: 0 18px 60px rgba(2,6,23,0.6);
    border-radius: 8px;
    background: rgba(0,0,0,0.35);
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.06);
    transform: translateY(-10%);
}

@media (max-width: 1200px) {
    .hero-side-logo { right: 1.25rem; width: 140px; top: 28%; }
}

@media (max-width: 992px) {
    .hero-side-logo { display: none; }
}

/* ensure hero is full-bleed when using container-fluid wrapper */
.hero .container-fluid { padding-left: 0; padding-right: 0; }

/* HERO LAPTOP FRAME */
.laptop-frame {
    width: 100%;
    max-width: 1100px; /* size similar to mock */
    margin: 0 auto 1.25rem;
    position: relative;
    transform: translateY(0%);
    z-index: 2;
}

/* the screen card sits inside the laptop frame */
.laptop-frame .hero-panel {
    border-radius: 8px;
    overflow: hidden;
}

/* laptop base (footplate) - thin rounded slab to emulate macbook base */
.laptop-base {
    position: absolute;
    left: 2.5%;
    right: 2.5%;
    bottom: -28px; /* hang under the screen */
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
    box-shadow: 0 22px 60px rgba(2,6,23,0.6);
    border: 1px solid rgba(255,255,255,0.04);
    z-index: 0;
}

/* subtle reflection separator plate under base */
.laptop-base::after{
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: -10px;
    height: 8px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

/* Hero panel that looks like a laptop screen */
.hero-panel {
    background: linear-gradient(180deg, rgba(12,17,21,0.96), rgba(7,10,14,0.98));
    box-shadow: 0 30px 80px rgba(2,6,23,0.6) inset, 0 30px 80px rgba(2,6,23,0.4);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.04);
}

/* Hero 3d image sizing */
.hero-3d {
    max-width: 420px;
    width: 100%;
    height: auto;
    box-shadow: 0 18px 60px rgba(2,6,23,0.6);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(2,6,23,0.6), rgba(0,0,0,0.25));
    padding: 18px;
}

/* Remove colored overlay */
.hero::before {
    display: none;
}

.hero .container {
    position: relative;
    z-index: 1;
}

/* Heading size adjustments for hero */
.hero .display-5,
.hero .section-title-lg {
    font-size: 2.5rem; /* decreased as requested */
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* Bigger badge */
.hero .badge-gov {
    font-size: 1.125rem; /* increased */
    padding: 0.65rem 1.25rem;
}

/* Subtitle with background chip */
.hero .lead,
.hero .section-subtitle {
    font-size: 1.25rem;
    font-weight: 500;
    opacity: 0.9;
    max-width: 760px;
    color: var(--muted);
    background: #ffffff;
    border: 1px solid var(--line);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    display: inline-block;
}

/* Sections */
.section {
    padding: 3rem 0; /* reduced vertical spacing for compact layout */
}

.section-alt {
    background: var(--panel);
}

/* Course Catalog */
.course-catalog h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.course-category {
    position: relative;
}

.category-line {
    height: 1px;
    background: var(--line);
}

.course-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: all 0.2s ease;
    overflow: hidden;
}

.course-card:hover {
    border-color: #d1d5db; /* gray-300 */
    box-shadow: 0 8px 28px rgba(2, 6, 23, 0.06);
    transform: translateY(-2px);
}

.course-card:focus-within,
.course-card:focus {
    outline: none;
    border-color: #94a3b8; /* gray-400 */
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.25);
}

.course-card .card-body {
    padding: 1.5rem;
}

.course-card h4 {
    font-weight: 600;
    line-height: 1.4;
}

.course-card .badge {
    font-weight: 500;
    padding: 0.5em 1em;
    border-radius: 999px;
}

/* Specific course badge ? grayscale */
.course-badge {
    color: var(--fg);
    background: #f1f5f9;
    border: 1px solid var(--line);
}

/* Course grid panels */
.course-grid .course-list-panel {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: .75rem;
    padding: 1.25rem 1.25rem 1rem;
    box-shadow: 0 2px 4px rgba(2, 6, 23, .04);
    transition: box-shadow .15s ease, border-color .15s ease;
}

.course-grid .course-list-panel:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(2, 6, 23, .08);
}

.course-grid h3 {
    color: var(--fg);
}

.course-grid .course-links li a:hover {
    text-decoration: underline;
    color: var(--fg);
}

.course-grid .course-links {
    columns: 1;
}

@media (min-width: 992px) {
    .course-grid .course-links {
        columns: 2; /* make list wrap into two columns inside panel on large screens */
    }
}

/* Cards refinement */
.card {
    border: 0;
    border-radius: .75rem;
    overflow: hidden;
}

.card-img-top {
    display: none;
}

.card-body ul {
    margin-bottom: 0;
}

/* Badge (grayscale) */
.badge-gov {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg);
    background: #f3f4f6;
    border: 1px solid var(--line);
    padding: 0.5rem 1rem;
    border-radius: 999px;
}

/* Brand chip highlight for company name */
.brand-chip {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--fg);
    background: #fff;
    border: 2px solid #111827; /* strong black highlight */
    padding: .5rem 1rem;
    border-radius: 999px;
}

/* Better brand chip alignment */
.brand-chip { display:inline-flex; align-items:center; gap:.5rem; }
.brand-chip picture, .brand-chip img { display:inline-block; line-height:0; }

/* Buttons */
/* Keep Bootstrap primary mapping to our blue for compatibility */
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
}

/* Blue only on buttons */
.filter-btn {
    border-radius: 999px;
}

.btn-sky {
    color: #fff;
    background-image: var(--hero-bg); /* vertical blue gradient */
    border: 1px solid transparent;
    box-shadow: 0 6px 14px rgba(12, 162, 224, 0.25);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-sky:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(12, 162, 224, 0.3);
    filter: brightness(1.02);
}

.btn-sky:focus {
    box-shadow: 0 0 0 4px rgba(12, 162, 224, 0.25);
}

/* Ghost button in grayscale, turns blue on hover */
.btn-sky-ghost {
    color: var(--fg);
    background: #fff;
    border: 1px solid #cbd5e1;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.btn-sky-ghost:hover {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(12, 162, 224, 0.25);
}

.btn-sky-ghost:focus {
    box-shadow: 0 0 0 4px rgba(148,163,184, 0.3);
}

.btn-outline-light {
    border-color: rgba(255, 255, 255, .5);
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, .15);
    border-color: #fff;
    color: #fff;
}

/* Search refinements */
.search-box .form-control {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 2px 4px rgba(2, 6, 23, 0.02);
}

.search-box .form-control:focus {
    border-color: #94a3b8; /* gray-400 */
    box-shadow: 0 0 0 4px rgba(2, 6, 23, 0.06);
}

/* Footer */
.footer {
    background: #0b1220;
    color: #94a3b8;
    padding: 2rem 0;
}

.footer a {
    color: #e2e8f0;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

/* Utilities */
.bg-sky-gradient {
    background-image: var(--hero-bg) !important;
}

.text-sky {
    color: var(--primary) !important;
}

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

.bg-sky-50 {
    background-color: var(--primary-light) !important;
}

/* Split hero layout helpers */
.hero-split {
    background: var(--panel);
}

.hero-illustration img.grayscale {
    filter: grayscale(100%);
    opacity: .9;
}

.cta-group .btn-sky-ghost {
    border-color: var(--line);
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .hero {
        padding: 1.75rem 0;
        min-height: auto;
        text-align: center;
    }

    .hero .lead {
        margin: 0 auto;
    }

    .hero .display-5,
    .hero .section-title-lg {
        font-size: 2.1rem;
    }

    .hero .badge-gov {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .hero {
        padding: 1.25rem 0;
        min-height: 56vh;
    }

    .course-grid .course-links {
        columns: 1;
    }
}

/* Header brand bar and logo */
.brand-bar {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.brand-logo .logo-img {
    height: 34px;
    width: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

.brand-text {
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: .2px;
    display: inline-flex;
    gap: .35rem;
    align-items: baseline;
}

.brand-text .brand-name {
    font-weight: 800;
    color: var(--fg);
}

.brand-text .brand-sub {
    font-weight: 600;
    color: #6b7280;
}

/* Wordmark color accent when desired */
.brand-text strong,
.brand-name strong {
    color: var(--primary);
}

.brand-chip img {
    height: 36px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    filter: drop-shadow(0 4px 12px rgba(12,162,224,.35));
}

.hero-illustration img {
    max-width: 340px;
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
    background:#000;
}

/* --- New dark UI additions --- */
/* Dark navbar */
.miyaami-navbar {
    background: #0b0f17;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 0.5rem 0; /* tighten vertical spacing */
}
/* Container uses flex to vertically center brand and nav */
.miyaami-navbar .container { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.miyaami-navbar .navbar-brand .logo-img { height: 30px; width: auto; }
.miyaami-navbar .brand-wordmark { color:#e6f1ff; font-family:'Poppins',system-ui; font-weight:700; letter-spacing:.2px; }
.miyaami-navbar .nav-link { color:#c1c9d6; }
.miyaami-navbar .nav-link.active, .miyaami-navbar .nav-link:hover { color:#ffffff; }

/* Ensure collapse area and nav items are aligned and right-justified */
.miyaami-navbar .navbar-collapse { display: flex !important; align-items: center; justify-content: flex-end; }
.miyaami-navbar .navbar-nav { display: flex; align-items: center; gap: 0.9rem; }
.miyaami-navbar .nav-item { display: flex; align-items: center; }
.miyaami-navbar .nav-link { display: inline-flex; align-items: center; padding: 0.45rem 0.6rem; }

/* Tweak toggler placement for small screens */
.miyaami-navbar .navbar-toggler { border: none; padding: 0.25rem 0.5rem; }

/* When collapsed on small screens, stack nav items below brand */
@media (max-width: 991.98px) {
    .miyaami-navbar .container { flex-wrap: wrap; }
    .miyaami-navbar .navbar-collapse { width: 100%; margin-top: 0.5rem; justify-content: center; }
    .miyaami-navbar .navbar-nav { justify-content: center; width: 100%; }
    .miyaami-navbar .nav-link { padding: 0.5rem 0.75rem; }
}

/* Dark hero */
.hero-dark {
    background: radial-gradient(1200px 600px at 20% -10%, rgba(12,162,224,.35), transparent 55%),
                radial-gradient(1000px 500px at 120% 10%, rgba(36,215,231,.25), transparent 55%),
                #0b0f17;
    color: #e6f1ff;
    padding: 5rem 0 4rem;
}
.hero-dark .brand-chip-dark {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: #e6f1ff;
    border-radius: 999px;
    padding: .5rem 1rem;
}
.hero-dark .brand-chip-dark img { height: 28px; width:auto; filter: drop-shadow(0 4px 12px rgba(12,162,224,.35)); }
.hero-dark .hero-logo { max-width: 360px; filter: drop-shadow(0 12px 28px rgba(12,162,224,.25)); }

/* Ghost button for dark bg */
.btn-sky-ghost-dark {
    color: #e6f1ff;
    background: transparent;
    border: 1px solid rgba(255,255,255,.24);
}
.btn-sky-ghost-dark:hover { color:#0b0f17; background:#e6f1ff; border-color:#e6f1ff; }

/* Section surface under hero (dark card grid) */
.section-surface {
    background: #141927;
    padding: 3rem 0 2.25rem;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.text-white-75 { color: rgba(255,255,255,.85) !important; }
.text-secondary-200 { color: #b8c2d3; }

.feature-card {
    background: #0e141f;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 1.25rem 1.25rem;
    color: #dfe7f6;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.feature-card:hover {
    transform: translateY(-2px);
    border-color: rgba(12,162,224,.45);
    box-shadow: 0 10px 30px rgba(12,162,224,.12);
}
.feature-icon { 
    width: 44px; height: 44px; border-radius: 12px; 
    display: inline-flex; align-items:center; justify-content:center; 
    background: linear-gradient(180deg, var(--brand-from), var(--brand-to));
    color:#fff; font-size: 1.25rem; margin-bottom:.75rem;
}



/* Dark theme helpers for course grid */
.theme-dark { background:#0b0f17; }
.theme-dark .form-control { background:#0e141f; color:#e6f1ff; border-color:rgba(255,255,255,.12); }
.theme-dark .form-control::placeholder{ color:#7d8aa5; }
.theme-dark .form-control:focus{ border-color:#2aaae2; box-shadow:0 0 0 4px rgba(12,162,224,.2); }

.course-card.dark { background:#0e141f; border:1px solid rgba(255,255,255,.08); }
.course-card.dark:hover { border-color: rgba(36,215,231,.45); box-shadow: 0 10px 26px rgba(12,162,224,.12); }
.badge.course-badge.dark { background: rgba(255,255,255,.06); color:#e6f1ff; border:1px solid rgba(255,255,255,.12); }

/* Quick contact chips in hero */
.hero .quick-contact .contact-chip {
    background: rgba(255,255,255,.06);
    color:#e6f1ff;
    padding:.4rem .9rem;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    font-weight:500;
    backdrop-filter: blur(4px);
    transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.hero .quick-contact .contact-chip:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); }
.hero .quick-contact .contact-chip.whatsapp { border-color:#25D366; }
.hero .quick-contact .contact-chip.whatsapp:hover { background:#25D366; color:#0b0f17; }
.hero .quick-contact .contact-chip.email { border-color:#0CA2E0; }
.hero .quick-contact .contact-chip.email:hover { background:#0CA2E0; color:#fff; }

/* Floating contact widget */
.floating-contact { position:fixed; bottom:1.25rem; right:1.25rem; display:flex; flex-direction:column; gap:.6rem; z-index:999; }
.floating-contact .fc-btn { width:46px; height:46px; border-radius:50%; background:#0e141f; color:#e6f1ff; display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:1.25rem; box-shadow:0 6px 18px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12); transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.floating-contact .fc-btn:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.5); }
.floating-contact .fc-btn.whatsapp { background:#25D366; color:#0b0f17; }
.floating-contact .fc-btn.whatsapp:hover { background:#1ebe57; }
.floating-contact .fc-btn.email { background:#0CA2E0; }
.floating-contact .fc-btn.email:hover { background:#078ac1; }
@media (max-width: 576px) { .floating-contact { right:.75rem; bottom:.75rem; } .floating-contact .fc-btn { width:42px; height:42px; font-size:1.1rem; } }

/* Detailed course list cards styles */
.course-details-list .detail-card { background:#0e141f; border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow:0 4px 18px rgba(0,0,0,.35); transition: border-color .15s ease, transform .15s ease; }
.course-details-list .detail-card:hover { border-color: rgba(12,162,224,.45); transform:translateY(-2px); }
.course-details-list h3 { font-weight:600; letter-spacing:-.5px; }
.course-details-list ul { padding-left:1.1rem; }
.course-details-list ul li { margin-bottom:.25rem; }
/* FAQ styles */
.faq-accordion .faq-item { border:1px solid rgba(255,255,255,.08); border-radius:10px; margin-bottom:.75rem; background:#0e141f; }
.faq-accordion .faq-q { width:100%; background:transparent; border:0; color:#e6f1ff; text-align:left; padding:.85rem 1rem; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.faq-accordion .faq-q:hover { background:rgba(255,255,255,.06); }
.faq-accordion .faq-a { padding:.5rem 1rem 1rem; font-size:.9rem; }
/* Testimonial styles */
.testimonial-card { background:#0e141f; border:1px solid rgba(255,255,255,.08); border-radius:14px;	box-shadow:0 4px 14px rgba(0,0,0,.35); }
.testimonial-card .quote { font-style:italic; color:#dfe7f6; }
/* Newsletter styles */
.newsletter-box { background:#0e141f; border:1px solid rgba(255,255,255,.08);	border-radius:14px; box-shadow:0 4px 14px rgba(0,0,0,.35); }



/* Enquiry form styles */
.enquiry-form { background:#0e141f; border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow:0 4px 16px rgba(0,0,0,.4); }
.enquiry-form .form-control, .enquiry-form .form-select { background:#1a2331; border:1px solid rgba(255,255,255,.14); color:#e6f1ff; }
.enquiry-form .form-control:focus, .enquiry-form .form-select:focus { border-color:#24D7E7; box-shadow:0 0 0 3px rgba(36,215,231,.25); }
.enquiry-form label { color:#b8c2d3; font-weight:600; }
.enquiry-form button[disabled] { opacity:.6; cursor:wait; }

/* Reordered contact/testimonials sections: responsive grid, cards */
.theme-dark.contact-section { /* fine-tune spacing */ }
.contact-grid { display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width: 992px){ .contact-grid { grid-template-columns: 1.15fr 0.85fr; } }
.contact-card { background:transparent; }
.contact-info-card { background:#0e141f; border:1px solid rgba(255,255,255,.08); box-shadow:0 4px 16px rgba(0,0,0,.4); border-radius:14px; display:flex; flex-direction:column; }
.contact-info-card h3 { letter-spacing:.5px; }
.contact-info-list i { color:#24D7E7; }
.testimonials-section { border-top:1px solid rgba(255,255,255,.06); }