:root {
    --blue-primary: #1565C0;
    --blue-dark: #0D1247;
    --blue-accent: #1A237E; /* Added for gradient consistency */
    --red-accent: #3949AB;
    --text-dark: #0D0E2A;
    --text-muted: #3F4680;
    --gold: #FFE082; 
}

body {
    font-family: 'Manrope', sans-serif;
    color: var(--text-dark);
    overflow-x: hidden;
}

/* Custom Typography Classes */
.font-headline { font-family: 'Barlow Condensed', sans-serif; }
.font-body { font-family: 'Manrope', sans-serif; }
.brand-stylish-text {
    font-family: 'Cinzel', serif;
    letter-spacing: 1.5px;
    font-weight: 800;
}

/* Gradients & Colors */
.blue-gradient { background: linear-gradient(135deg, var(--blue-accent) 0%, var(--blue-dark) 100%) !important; }
.text-primary { color: var(--blue-primary) !important; }
.bg-primary { background-color: var(--blue-primary) !important; }

/* =============================================
   Navbar Setup (With Line Separator)
============================================= */
.custom-navbar {
    background: linear-gradient(135deg, var(--blue-accent) 0%, var(--blue-dark) 100%) !important;
    padding-top: 15px;
    padding-bottom: 15px;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Elegant separator line */
}
.custom-navbar.scrolled {
    background: var(--blue-dark) !important; /* Solid dark color when scrolled */
    box-shadow: 0 4px 24px rgba(13,71,161,0.18);
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-link {
    position: relative;
    font-size: 0.9rem;
    letter-spacing: 1px;
}
.hover-white:hover { color: white !important; }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 2px;
    background: white;
    transition: width 0.3s;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.hover-btn:hover { background-color: #E8EAF6; }

/* =============================================
   Hero Section (Perfect Color Match with Navbar)
============================================= */
.hero-section {
    /* NAYA COLOR: Exact same gradient as the Navbar */
    background: linear-gradient(135deg, var(--blue-accent) 0%, var(--blue-dark) 100%) !important; 
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Mobile Responsiveness */
@media (max-width: 991.98px) {
    .hero-section {
        min-height: auto; 
        padding-top: 100px; 
        padding-bottom: 60px;
    }
}

/* Components */
.red-line {
    height: 4px;
    width: 48px;
    background: var(--red-accent);
    margin-top: 10px;
    border-radius: 2px;
}
.section-padding { padding-top: 80px; padding-bottom: 80px; }

/* Animations & Cards */
.product-card { transition: all 0.3s ease; }
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(21,101,192,0.18) !important;
}
.product-img { transition: transform 0.5s ease; }
.product-card:hover .product-img { transform: scale(1.1); }

/* Hero Animations */
@keyframes chairRise {
    0%   { opacity:0; transform:translateY(60px) scale(0.93); }
    65%  { opacity:1; transform:translateY(-6px) scale(1.01); }
    100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes gentleFloat {
    0%,100% { transform:translateY(0px); }
    50%     { transform:translateY(-10px); }
}
@keyframes shadowBreath {
    0%,100% { opacity:0.4; transform:scaleX(1); }
    50%     { opacity:0.18; transform:scaleX(0.75); }
}
.hero-chair {
    animation: chairRise 1.1s cubic-bezier(0.22,1,0.36,1) 0.4s both,
               gentleFloat 4s ease-in-out 1.5s infinite;
}
.hero-chair-shadow { animation: shadowBreath 4s ease-in-out 1.5s infinite; }

/* =============================================
   Interactive Text Highlights
============================================= */
.interactive-para strong {
    cursor: crosshair;
    transition: all 0.3s ease-in-out;
}
.glow-gold { color: var(--gold); }
.glow-gold:hover {
    color: #ffffff;
    text-shadow: 0 0 10px var(--gold), 0 0 20px var(--gold);
    transform: scale(1.05);
    display: inline-block;
}
.glow-red { color: #ff8a80; }
.glow-red:hover {
    color: #ffffff;
    text-shadow: 0 0 10px #ff5252, 0 0 20px #ff5252;
    transform: scale(1.05);
    display: inline-block;
}
.glow-cyan { color: #84ffff; }
.glow-cyan:hover {
    color: #ffffff;
    text-shadow: 0 0 10px #00e5ff, 0 0 20px #00e5ff;
    transform: scale(1.05);
    display: inline-block;
}
.interactive-text-light strong {
    cursor: crosshair;
    transition: all 0.3s ease-in-out;
    color: var(--blue-dark); 
}
.pop-gold:hover {
    color: #F57F17;
    text-shadow: 0 4px 8px rgba(245, 127, 23, 0.2);
    transform: scale(1.05) translateY(-2px);
    display: inline-block;
}
.pop-red:hover {
    color: var(--red-accent);
    text-shadow: 0 4px 8px rgba(57, 73, 171, 0.2);
    transform: scale(1.05) translateY(-2px);
    display: inline-block;
}
.pop-blue:hover {
    color: var(--blue-primary);
    text-shadow: 0 4px 8px rgba(21, 101, 192, 0.2);
    transform: scale(1.05) translateY(-2px);
    display: inline-block;
}

/* =============================================
   FLOATING ACTION BUTTONS (WhatsApp & Call)
============================================= */
.floating-actions {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9999;
}
.fab-btn {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fab-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    color: white;
}
.fab-whatsapp { background-color: #25D366; }
.fab-call { background-color: var(--blue-primary); }
.fab-btn .material-symbols-outlined { font-size: 28px; }