/* 1. Import the RHMR-style Geometric Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');

:root {
    /* 2. The Core RHMR Colors */
    --rhmr-cyan: #00c6ff;
    --rhmr-blue: #0072ff;
    --rhmr-dark-slate: #1f2937;
    --rhmr-gray: #6b7280;
    
    /* 3. Override our existing SaaS variables */
    --md-sys-color-primary: #00c6ff; 
    --md-sys-color-surface: transparent; /* Makes backgrounds transparent to show the gradient */
}

/* 4. The Icy Blue Body & Font */
html, body {
    font-family: 'Poppins', sans-serif !important;
    background: linear-gradient(135deg, #ffffff 0%, #ecfeff 50%, #cffafe 100%);
    background-attachment: fixed; /* Keeps the gradient smooth when scrolling */
    color: var(--rhmr-gray);
    -webkit-tap-highlight-color: transparent; 
}

/* 5. Deep Navy Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--rhmr-dark-slate) !important;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* 6. The Signature Gradient Pill Buttons */
.btn-primary, .btn-native {
    background: linear-gradient(to right, var(--rhmr-cyan), var(--rhmr-blue)) !important;
    border: none !important;
    border-radius: 100px !important;
    color: white !important;
    font-weight: 600;
    padding: 10px 24px;
    box-shadow: 0 4px 15px rgba(0, 198, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover, .btn-native:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 198, 255, 0.4) !important;
}

/* Secondary Button (Like the "Schedule Consultation" button) */
.btn-outline-primary {
    background: white !important;
    border: 2px solid var(--rhmr-cyan) !important;
    color: var(--rhmr-blue) !important;
    border-radius: 100px !important;
    font-weight: 600;
}

/* 7. Soft Floating Cards */
.card, .master-card {
    background: rgba(255, 255, 255, 0.85) !important; /* Slight transparency */
    backdrop-filter: blur(10px); /* Glassmorphism effect */
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover, .card-hover-fx:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 45px rgba(0,0,0,0.08) !important;
}

/* 8. Make the Sidebar match the gradient blue theme */
.sidebar, #mobile-top-bar {
    background: linear-gradient(135deg, var(--rhmr-blue), var(--rhmr-cyan)) !important;
    border-right: none;
}