/*==========================================================================
  1. BOOTSTRAP THEME VARIABLE OVERRIDES
  By mapping your custom palette to Bootstrap's native variables, your colors 
  automatically apply to components like .text-primary, .btn-primary, etc.
============================================================================*/
:root {
    /* Main Theme Palette */
    --bs-primary: #0B3D91;       /* Deep Cosmic Blue */
    --bs-secondary: #2563EB;     /* Vivid Blue */
    --bs-warning: #ff7b00;       /* Your exact orange mapped to warning */
    --bs-dark: #0f172a;          /* Slate Dark */
    --bs-light: #f8fafc;         /* Crisp Light Gray */
    --bs-body-bg: #ffffff;
    
    /* Typography & Custom Mutes */
    --custom-text-muted: #64748b;
    --bs-body-font-family: 'Inter', sans-serif;
    --bs-body-color: var(--bs-dark);
}

/* Global Smooth Transitions */
a, button, .nav-link, .social-icon {
    transition: all 0.3s ease-in-out;
}

/*==========================================================================
  2. HEADER & NAVIGATION (Topbar + Navbar)
============================================================================*/

/* Top Bar - Clean gradient using theme variables */
.topbar {
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-secondary));
    color: #fff;
    padding: 10px 0;
    font-size: 0.875rem; /* 14px equivalent */
}

/* Navbar Container Base */
.custom-navbar {
    margin-top: 42px;
    background: #fff;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

/* Sticky Class triggered via JavaScript */
.custom-navbar.scrolled {
    margin-top: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* Logo & Identity Branded Elements */
.navbar-brand {
    font-size: 1.875rem; /* 30px equivalent */
    font-weight: 800;
}

.logo-icon {
    width: 45px;
    height: 45px;
    background: var(--bs-secondary);
    color: #fff;
    border-radius: 12px;
}

/* Utility Elements (Search Circle) */
.search-btn {
    width: 42px;
    height: 42px;
    background: #f3f6fb;
    color: var(--bs-primary);
}
.search-btn:hover {
    background: var(--bs-primary);
    color: #fff;
}

/*==========================================================================
  3. COMPONENT & BUTTON CUSTOMIZATIONS
============================================================================*/

/* Custom Orange Button - Styled natively with Bootstrap's system structure */
.btn-orange {
    background-color: var(--bs-warning);
    color: #fff;
    padding: 12px 26px;
    border-radius: 50px;
    font-weight: 600;
    border: 1px solid transparent;
}
.btn-orange:hover, .btn-orange:focus {
    background-color: var(--bs-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(11, 61, 145, 0.2);
}

/* Back to Top Floating Button */
.back-top {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: var(--bs-secondary);
    color: #fff;
    display: none; /* Handled via JS toggle */
    z-index: 1030; /* Aligns with Bootstrap sticky layers */
}
.back-top:hover {
    background: var(--bs-warning);
    transform: translateY(-3px);
}

/*==========================================================================
  4. HERO BACKGROUND & INTERACTIVE PREMIUM EFFECTS
============================================================================*/
.hero-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #f8fbff, #eef5ff);
    overflow: hidden; /* Keeps glowing background mask inside container */
}

/* Ambient glow orb behind content */
.hero-bg {
    position: absolute;
    width: 700px;
    height: 700px;
    background: rgba(13, 110, 253, 0.13);
    border-radius: 50%;
    filter: blur(120px);
    top: -250px;
    right: -150px;
    z-index: 0;
}

/* UI Glassmorphism Architecture Card */
.glass-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 18px;
}
.glass-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

/* Smooth Floating Micro-animation */
.hero-image {
    animation: floatAnimation 6s ease-in-out infinite;
}

@keyframes floatAnimation {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
}

/*==========================================================================
  5. FOOTER DESIGN SYSTEM
============================================================================*/
.footer-section {
    background: #081B49; /* Custom rich deep navy */
    color: #fff;
    padding: 80px 0 30px;
}

.footer-logo {
    font-size: 2rem;
    font-weight: 800;
}

/* Animated footer links */
.footer-links a {
    color: #d6d6d6;
    text-decoration: none;
}
.footer-links a:hover {
    color: #fff;
    padding-left: 8px;
}

/* High contrast subtle social circular tokens */
.social-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #16377d;
    color: #fff;
    text-decoration: none;
}
.social-icon:hover {
    background: var(--bs-secondary);
    transform: translateY(-3px);
    color: #fff;
}