/* =========================================
   DhanOS - Premium "Rich Feel" Theme
   Updated: Rich Hover Menu, Centralized Control
   ========================================= */

:root {
    --primary-color: #0a2540; /* Deep Navy - Trust */
    --accent-color: #c5a059;  /* Gold - Premium/Finance */
    --light-bg: #f8f9fa;      /* Light Grey - Backgrounds */
    --text-dark: #2c3e50;     /* A richer, softer dark grey for text */
}

body {
    font-family: 'Open Sans', 'Segoe UI', Roboto, sans-serif;
    color: var(--text-dark);
    line-height: 1.7;
    overflow-x: hidden;
}

/* Use Montserrat for all headings for a strong, premium look */
h1, h2, h3, h4, h5, .navbar-brand, .btn {
    font-family: 'Montserrat', sans-serif;
}

/* =========================================
   1. PREMIUM NAVIGATION BAR & RICH MENU
   ========================================= */
.navbar {
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 15px 0;
    transition: all 0.3s ease;
    /* Ensure nav stays on top */
    z-index: 9999;
}
.navbar-brand {
    font-weight: 800;
    color: var(--primary-color) !important;
    font-size: 1.6rem; /* INCREASED SIZE (was 1.5rem) */
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;
}
.nav-link {
    color: var(--primary-color) !important;
    font-weight: 700;
    margin-left: 20px;
    font-size: 0.95rem; /* INCREASED SIZE (was 0.85rem) */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 5px;
}
/* Gold underline effect for main links */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0; height: 2px;
    bottom: 0; left: 0;
    background-color: var(--accent-color);
    transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-item.active .nav-link::after { width: 100%; }
.nav-link:hover { color: var(--accent-color) !important; }

/* Mobile Toggler Styling */
.navbar-toggler { border: none; padding: 0; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler .fa-bars { color: var(--primary-color); font-size: 1.8rem; }


/* --- NEW RICH HOVER DROPDOWN CSS --- */

/* 1. Make it appear on hover (Desktop only) */
@media (min-width: 992px) {
    .rich-dropdown:hover .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* 2. The Menu Container Styling */
.dropdown-menu {
    background-color: #ffffff;
    /* A very soft, spread-out shadow for a floating effect */
    box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
    border: 1px solid #eaecf0; /* A very subtle, clean border */
    border-radius: 8px; /* Slightly softer corners */
    padding: 8px 0;
}

.dropdown-item {
    /* FORCED a rich, deep grey-blue for visibility */
    color: #344054 !important; 
    font-weight: 600; /* Made slightly bolder */
    font-size: 0.95rem; /* INCREASED SIZE to match links */
    padding: 10px 20px;
    transition: all 0.2s ease-in-out;
}

.dropdown-item:hover {
    /* A very light, classy grey-blue background on hover */
    background-color: #f2f4f7;
    /* FORCED a slightly deeper shade on hover */
    color: #1d2939 !important; 
}

/* 3. The Menu Items Styling */
.dropdown-item {
    padding: 12px 25px;
    font-size: 0.95rem; /* Ensures consistency */
    /* White text on Navy background */
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.05); /* Subtle separators */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}
.dropdown-item:last-child { border-bottom: none; }

/* Icons in the menu */
.dropdown-item i {
    color: var(--accent-color); /* Gold icons */
    margin-right: 15px;
    font-size: 1.1rem;
    width: 25px; /* Fixed width for alignment */
    text-align: center;
    transition: transform 0.2s ease;
}

/* Hover state for menu items */
.dropdown-item:hover {
    background-color: rgba(197, 160, 89, 0.1); /* Subtle gold tint bg */
    color: white;
    padding-left: 35px; /* Subtle shift right */
}
.dropdown-item:hover i {
    transform: scale(1.2); /* Icon pop */
}

/* Navbar "Get Quote" Button */
.btn-nav {
    border: 2px solid var(--accent-color);
    color: var(--accent-color) !important;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.9rem; /* INCREASED SIZE (was 0.85rem) */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-decoration: none;
    margin-left: 20px;
}
.btn-nav:hover {
    background-color: var(--accent-color);
    color: var(--primary-color) !important;
    box-shadow: 0 5px 15px rgba(197, 160, 89, 0.4);
}


/* =========================================
   2. REST OF THE THEME (Hero, Cards, Footer)
   (Kept stable as per request, just ensuring consistency)
   ========================================= */

/* Hero Section (Home) */
.hero-section {
    background: linear-gradient(rgba(10, 37, 64, 0.92), rgba(10, 37, 64, 0.92)), url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1920&q=80');
background-size: cover; background-position: center; color: white; padding: 150px 0 100px; text-align: center;
}
/* Page Header (Others) */
.page-header {
    background-color: var(--primary-color); color: white; padding: 120px 0 60px; text-align: center; margin-bottom: 40px;
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)); /* Added depth */
}

/* Standard Buttons */
.btn-custom {
    background: linear-gradient(135deg, var(--accent-color), #b08d4d); color: white; padding: 12px 35px; border-radius: 6px; text-decoration: none; font-weight: 700; border: none; text-transform: uppercase; letter-spacing: 1px; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3);
}
.btn-custom:hover {
    background: linear-gradient(135deg, #b08d4d, var(--accent-color)); color: white; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(197, 160, 89, 0.5);
}

/* Services Cards & Links */
.service-card {
    background: white; padding: 35px 30px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); height: 100%; border-top: 4px solid var(--accent-color); display: flex; flex-direction: column; border: 1px solid rgba(0,0,0,0.03);
}
.service-card:hover {
    transform: translateY(-8px); box-shadow: 0 20px 50px rgba(10, 37, 64, 0.15); border-top-color: var(--primary-color);
}
.service-card h4 { min-height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-weight: 700; color: var(--primary-color); }
.icon-box { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 20px; transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }
.service-card:hover .icon-box { transform: scale(1.1); color: var(--accent-color); }

/* =========================================
   UNIVERSAL SERVICE CARD BUTTONS
   Style: Gold Outline -> Solid Gold Hover
   ========================================= */

/* Default State for ALL service card buttons */
.service-card .btn {
    background-color: transparent !important; /* Transparent background */
    border: 3px solid var(--accent-color) !important; /* Prominent GOLD border */
    color: var(--primary-color) !important; /* Navy text */
    
    /* Standard formatting */
    font-weight: 800 !important; /* Extra bold */
    letter-spacing: 1px;
    padding: 12px 25px;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-top: auto;
    border-radius: 6px; /* Keep consistent with card corners */
    transition: all 0.3s ease-in-out !important;
    box-shadow: none !important;
    position: relative;
    z-index: 1;
}

/* CRITICAL: Disable the old sliding "fill" effect pseudo-element */
.service-card .btn::before {
    display: none !important;
}

/* HOVER STATE: Solid Gold Fill */
.service-card .btn:hover {
    background-color: var(--accent-color) !important; /* Fills completely with GOLD */
    color: var(--primary-color) !important; /* Text stays NAVY for sharp contrast */
    border-color: var(--accent-color) !important; /* Ensures border matches fill */
    box-shadow: 0 10px 25px rgba(197, 160, 89, 0.5) !important; /* Gold glow */
    transform: translateY(-3px); /* Subtle lift */
}

/* Footer */
footer { background-color: var(--primary-color); color: rgba(255,255,255,0.8); padding: 60px 0; margin-top: 80px; }
footer h5 { color: white; font-weight: 700; margin-bottom: 25px; }
footer a { text-decoration: none; transition: 0.3s; }
footer a:hover { color: var(--accent-color) !important; }

/* Misc features */
.feature-box { display: flex; align-items: center; margin-bottom: 25px; padding: 20px; border-radius: 12px; transition: all 0.3s ease; border: 1px solid transparent; }
.feature-box:hover { background: white; box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-color: rgba(197, 160, 89, 0.3); transform: translateX(5px); }
.feature-icon-circle { width: 65px; height: 65px; background-color: #eef2f5; color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 25px; font-size: 1.6rem; flex-shrink: 0; transition: all 0.3s ease; box-shadow: inset 0 0 0 2px transparent; }
.feature-box:hover .feature-icon-circle { background-color: var(--accent-color); color: white; box-shadow: 0 5px 15px rgba(197, 160, 89, 0.4), inset 0 0 0 2px white; }
.img-cover { width: 100%; height: 100%; object-fit: cover; min-height: 450px; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
.dashboard-frame { background: #fff; padding: 12px; border-radius: 12px; border: 1px solid #eee; box-shadow: 0 30px 60px rgba(10, 37, 64, 0.12); overflow: hidden; transition: transform 0.3s ease; }
.dashboard-frame:hover { transform: translateY(-5px); }
.dashboard-frame iframe { width: 100%; border-radius: 8px; }

/* =========================================
   SPECIAL CFO HIGHLIGHT BUTTON
   ========================================= */
.btn-cfo-highlight {
    background: transparent !important; /* No background initially */
    border: 3px solid var(--accent-color) !important; /* Prominent Gold Outline */
    color: var(--primary-color) !important; /* Navy text initially */
    font-weight: 800 !important; /* Extra bold text */
    padding: 12px 25px;
    border-radius: 50px; /* Rounded for modern look, or stick to 6px for square */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease-in-out;
    box-shadow: none !important;
}

/* Remove any existing fill animation pseudo-elements */
.btn-cfo-highlight::before { display: none !important; }

/* HOVER STATE: Solid Gold Fill */
.btn-cfo-highlight:hover {
    background-color: var(--accent-color) !important; /* Fills with solid Gold */
    color: var(--primary-color) !important; /* Keep Navy text for sharp contrast, or use 'white' */
    box-shadow: 0 10px 25px rgba(197, 160, 89, 0.5) !important; /* Gold glow shadow */
    transform: translateY(-3px);
}