/* css/style.css */
/* Custom animations & utilities */
@keyframes fadeIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulseSoft { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes spinLoader { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
.loader-spinner { width:44px;height:44px;border:4px solid #e2e8f0;border-top-color:#2563eb;border-radius:50%;animation:spinLoader 0.7s linear infinite; }
.reveal { opacity:0;transform:translateY(30px);transition:all 0.6s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity:1;transform:translateY(0); }
.btn-primary { background:linear-gradient(135deg,#2563eb,#0284c7);display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer; }
.btn-primary:hover { background:linear-gradient(135deg,#1d4ed8,#0369a1);transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,99,235,0.35); }
.card-hover:hover { transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,0.1); }
.nav-link.active { color:#2563eb;background:#f0f9ff;font-weight:600; }
#navbar.scrolled { background:rgba(255,255,255,0.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 2px 24px rgba(0,0,0,0.08); }
#navbar.scrolled #logo-text { color:#1e3a5f;text-shadow:none; }
#navbar.scrolled .nav-link { color:#4b5563; }
#navbar.scrolled .nav-link:hover { color:#2563eb; }
.hero-dot.active { background:#fff;width:32px;border-radius:999px; }
#mobile-menu.open { transform:translateX(0); }

#mobile-menu,
#mobile-menu-2,
#mobile-menu-3,
#mobile-menu-4,
#mobile-menu-5,
#mobile-menu-6,
#mobile-menu-7,
#mobile-menu-8 {
    z-index: 10001; /* Ensure mobile menu overlays navbar and page content */
    transform: translateX(100%);
    transition: transform .4s ease;
}

#mobile-menu.open,
#mobile-menu-2.open,
#mobile-menu-3.open,
#mobile-menu-4.open,
#mobile-menu-5.open,
#mobile-menu-6.open,
#mobile-menu-7.open,
#mobile-menu-8.open {
    transform: translateX(0);
}

#navbar.scrolled{
    background:#fff;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
}

#navbar.scrolled [id^="logo-text"]{
    color:#1e3a5f;
}

#navbar.scrolled [id^="menu-icon"],
#navbar.scrolled [id^="menu-icon"] svg {
    color:#1e3a5f;
}

#navbar.scrolled button[id^="mobile-menu-btn"]{
    background:#f3f4f6;
}

#back-to-top.visible { opacity:1;visibility:visible; }
#toast-container .toast { background:#1e3a5f;color:#fff;padding:12px 20px;border-radius:12px;font-size:14px;font-family:'Inter',sans-serif;box-shadow:0 8px 24px rgba(0,0,0,0.2);animation:slideUp 0.4s ease-out; }
::-webkit-scrollbar { width:8px; } ::-webkit-scrollbar-track { background:#f1f5f9; } ::-webkit-scrollbar-thumb { background:#94a3b8;border-radius:999px; } ::-webkit-scrollbar-thumb:hover { background:#64748b; }
html { scroll-behavior:smooth; }



/* =========================
   Navbar Fixed Height
========================= */

#navbar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    z-index: 9999;
    transition:
        background .3s ease,
        box-shadow .3s ease;
}

#navbar .max-w-7xl{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* Don't change navbar height on scroll */
#navbar.scrolled{
    height:72px;
}