/* ==========================================================================
   1. CORE VARIABLES & GLOBAL STYLES
   ========================================================================== */
:root {
    --party-white: #FFFFFF;        
    --party-light-blue: #3B82F6;   /* Vibrant light/sky blue background */
    --party-blue-hover: #2563EB;   /* Darker light blue tone for active/hover layers */
    --party-border-blue: #60A5FA;  /* Accent blue separator lines */
    --party-dark: #1E3A8A;         /* For main content typography outside the menus */
    --party-muted: #E0F2FE;        /* Soft icy white-blue for inactive menu details */
}

body {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    background-color: var(--party-white);
    color: var(--party-dark);
    padding-top: 65px; 
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. APP NAVIGATION HEADER SYSTEM
   ========================================================================== */
.custom-navbar {
    background-color: var(--party-light-blue) !important;
    border-bottom: 1px solid var(--party-border-blue);
    height: 65px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

.brand-text-accent {
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.5px;
    color: var(--party-white); /* Crisp White Brand Text */
}

/* Desktop Header Links */
.nav-link-desktop {
    color: var(--party-muted); /* Soft white-blue */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.nav-link-desktop:hover, 
.nav-link-desktop.active {
    color: var(--party-white) !important;
    background-color: var(--party-blue-hover); /* Darker blue block accent */
}

/* Primary Navigation Buttons */
.btn-party-primary {
    background-color: var(--party-white);
    color: var(--party-light-blue) !important; /* Inverted look to pop against navbar */
    font-weight: 700;
    border: none;
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-party-primary:hover {
    background-color: #F8FAFC;
    transform: translateY(-1px);
}

/* ==========================================================================
   3. MOBILE APP SIZING & LOGO FRAMEWORK
   ========================================================================== */
.logo-image-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px; 
    width: auto;
    transition: all 0.2s ease-in-out;
}

.brand-logo-img {
    height: 100%;
    width: auto;
    object-fit: contain; /* Prevents squishing or distortion */
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.12));
}

.mobile-drawer-logo {
    height: 32px;
}

/* Responsive Navbar & Logo Adaptation Scales */
@media (min-width: 992px) {
    body { padding-top: 75px; }
    .custom-navbar { height: 75px; }
    .logo-image-wrapper {
        height: 44px; /* Gives the logo a slightly bolder look on wide screens */
    }
}

/* ==========================================================================
   4. APP-STYLE LEFT SIDE DRAWER DESIGN CONFIGURATION
   ========================================================================== */
.app-side-drawer {
    width: 290px !important;
    background-color: #4472bd !important; /* Swapped to match the corporate royal blue theme */
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important; /* Clean semi-transparent white separator border */
    box-shadow: 15px 0 30px rgba(0, 0, 0, 0.15) !important;
}

.drawer-group-label {
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--party-white);
    letter-spacing: 1px;
    padding-left: 12px;
    margin-bottom: 6px;
    opacity: 0.85; /* Bumped up readability against the solid blue */
}

.drawer-app-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: rgba(255, 255, 255, 0.8); /* Replaced slate-muted blue with crisp white-alpha links */
    text-decoration: none;
    border-radius: 10px;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
}

.drawer-app-link i {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.8);
    width: 20px;
    text-align: center;
}

.drawer-app-link:hover, 
.drawer-app-link.active {
    color: var(--party-white) !important;
    background-color: rgba(255, 255, 255, 0.15) !important; /* Elegant glass-tint active link block highlight */
}

.drawer-app-link.active i, 
.drawer-app-link:hover i {
    color: var(--party-white) !important;
}
/* ==========================================================================
   5. LIGHT BLUE THEME COMPLIANT FOOTER SYSTEM
   ========================================================================== */
.footer {
    background-color: #F0F6FF; /* Ultra-soft light theme accent background canvas layer */
    border-top: 1px solid var(--party-border-blue); /* Theme blue accent boundary separator lines */
    color: var(--party-dark); /* Keeps the typography perfectly linked to your primary theme tone */
}

.footer-brand-title,
.footer-heading {
    color: var(--party-dark); /* Enforces global theme dark navy for clear headings */
    font-weight: 700;
}

.footer-text {
    color: var(--party-dark);
    opacity: 0.85; /* Softens reading weight context cleanly */
    font-size: 0.95rem;
}

/* Theme Linked Link Interactions */
.footer-links a {
    color: var(--party-dark);
    opacity: 0.9;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
}

.footer-links a:hover {
    color: var(--party-blue-hover); /* Switches to your deeper blue configuration on hover action */
    opacity: 1;
    padding-left: 4px; /* Micro-motion interaction */
}

/* Divider & Small Text Utilities */
.footer-hr {
    border-color: var(--party-border-blue);
    opacity: 0.4;
}

.footer-copyright {
    font-size: 0.88rem;
    color: var(--party-dark);
    opacity: 0.75;
}

/* ==========================================================================
   6. #4472BD BLUE THEME INTERACTIVE HERO SLIDER STYLING ENGINE
   ========================================================================== */
.hero-slider-item {
    height: 85vh;
    min-height: 620px;
    background-color: #4472bd !important; /* Forces the exact corporate royal blue requested */
    overflow: hidden;
    position: relative;
}

/* Clear out dark/pale gradient masks to keep the #4472bd color perfectly flat and solid */
.hero-overlay-gradient,
.hero-overlay-pale-blue {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent !important; 
    z-index: 1;
}

.z-index-content {
    z-index: 5 !important;
}

/* HIGH ATTRACTION TYPOGRAPHY AND LAYERS */
.hero-main-title {
    color: #ffffff !important; /* Forces title text to white for absolute readability against the blue */
    font-size: calc(2.2rem + 1.6vw) !important;
    font-weight: 800 !important;
    line-height: 1.15;
    letter-spacing: -1px;
}

.hero-sub-motto {
    color: rgba(255, 255, 255, 0.85) !important; /* Soft white sub-text */
    font-size: 1.15rem !important;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* HIGH ATTRACTION BUTTON SYSTEM FOR #4472BD BACKGROUND */
.btn-slider-primary {
    background-color: var(--party-white) !important;
    color: #4472bd !important; /* Inverted look against the royal blue backdrop */
    border: 2px solid var(--party-white) !important;
    border-radius: 14px !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.25s ease-in-out !important;
}

.btn-slider-primary:hover {
    background-color: #f1f5f9 !important;
    border-color: #f1f5f9 !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2) !important;
}

.btn-slider-outline {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--party-white) !important;
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 14px !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.5px;
    backdrop-filter: blur(8px);
    transition: all 0.25s ease-in-out !important;
}

.btn-slider-outline:hover {
    background-color: var(--party-white) !important;
    color: #4472bd !important;
    border-color: var(--party-white) !important;
    transform: translateY(-2px);
}

/* Portrait Image Handling */
.slider-portrait-img {
    height: 95%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0px 20px 40px rgba(0, 0, 0, 0.3)); /* Premium drop shadow separating portrait from blue */
    align-self: flex-end;
    transform-origin: bottom center;
}

/* Mobile & Tablet Optimization Rules */
@media (max-width: 991.98px) {
    .hero-slider-item {
        height: auto;
        min-height: 90vh;
        padding-bottom: 0 !important;
    }
    .image-column {
        height: 420px !important;
        margin-top: 2.5rem;
    }
    .slider-portrait-img {
        height: 100%;
    }
}