/*
PhotoVault - Professional Photo Management Platform
Copyright (c) 2025 Calmic Sdn Bhd. All rights reserved.

This software is proprietary and confidential. Unauthorized copying, distribution,
modification, or use of this software is strictly prohibited.

Website: https://www.calmic.com.my
Email: support@calmic.com.my

CALMIC SDN BHD - "Committed to Excellence"
*/

/* ============================================
   MODERN BEAUTIFUL DESIGN SYSTEM
   ============================================ */

/* Typography - Modern and Clean */
html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #ffffff;
    background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
    background-attachment: fixed;
    font-weight: 400;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "navbar"
        "main"
        "footer";
}

/* Headings on dark background */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
}

/* Paragraphs on dark background */
p {
    color: #ffffff;
}

/* Links on dark background */
a {
    color: #a0c4ff;
}

a:hover {
    color: #7dabff;
}

/* Labels and form text on dark background */
label, .form-text {
    color: #ffffff !important;
}

/* Modern Dark Blue Color Palette */
:root {
    --primary-gradient: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
    --secondary-gradient: linear-gradient(135deg, #2c5f8d 0%, #1e3a5f 100%);
    --success-gradient: linear-gradient(135deg, #1e5f4f 0%, #0d3a2a 100%);
    --info-gradient: linear-gradient(135deg, #2c5f8d 0%, #1a4d7a 100%);
    --warning-gradient: linear-gradient(135deg, #5f4a1e 0%, #3a2a0d 100%);
    --danger-gradient: linear-gradient(135deg, #5f1e1e 0%, #3a0d0d 100%);
    
    --primary-color: #1e3a5f;
    --secondary-color: #2c5f8d;
    --success-color: #1e5f4f;
    --info-color: #2c5f8d;
    --warning-color: #5f4a1e;
    --danger-color: #5f1e1e;
    
    --light-bg: #f7fafc;
    --lighter-bg: #ffffff;
    --border-color: #e2e8f0;
    --text-muted: #718096;
    --text-dark: #2d3748;
    
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-md: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-lg: 0 20px 25px rgba(0,0,0,0.15);
    --shadow-xl: 0 25px 50px rgba(0,0,0,0.25);
}

/* Company Branding - Modern Style */
.navbar-brand {
    font-weight: 600;
    font-size: 1.4rem;
    padding: 0.5rem 0;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.navbar-brand:hover {
    transform: translateY(-2px);
}

.navbar-brand img {
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.navbar-brand:hover img {
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.brand-text {
    line-height: 1.3;
}

.brand-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: -2px;
    letter-spacing: -0.5px;
}

.company-name {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Navigation - Modern Glassmorphism Design */
.navbar-dark {
    background: rgba(45, 55, 72, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding-top: 1rem;
    padding-bottom: 1rem;
    position: relative;
    z-index: 1030;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,0.9) !important;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.7rem 1.2rem;
    border-radius: 8px;
    margin: 0 0.2rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.navbar-dark .navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

.navbar-dark .navbar-nav .nav-link:hover::before {
    width: 80%;
}

.navbar-dark .navbar-nav .nav-link.active {
    color: #ffffff !important;
    background: rgba(255,255,255,0.15);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Dropdown triggers need higher z-index to stay clickable */
.navbar-dark .navbar-nav .dropdown > .nav-link {
    z-index: 10;
}

/* Sign Up Button - Stunning CTA Style */
.nav-signup-btn {
    background: linear-gradient(135deg, #2c5f8d 0%, #1e3a5f 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 0.7rem 1.8rem !important;
    margin-left: 1rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(30, 58, 95, 0.4);
}

.nav-signup-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.6);
}

/* Mobile responsive styling for signup button */
@media (max-width: 991.98px) {
    .nav-signup-btn {
        margin-left: 0 !important;
        margin-top: 0.5rem !important;
    }
    .navbar-dark .navbar-nav .nav-link {
        margin: 0.2rem 0;
    }
}

/* Dropdown Menus - Modern Style */
.dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    font-size: 0.9rem;
    background-color: var(--lighter-bg);
    padding: 0.5rem;
    animation: dropdownSlide 0.3s ease;
    z-index: 1040;
    min-width: 200px;
    max-height: none !important;
}

/* Ensure navbar and containers don't clip dropdowns */
.navbar {
    overflow: visible !important;
}

.navbar-collapse {
    overflow: visible !important;
}

.navbar-nav {
    overflow: visible !important;
}

.nav-item.dropdown {
    overflow: visible !important;
    position: relative;
    z-index: 1050;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    padding: 0.6rem 1rem;
    color: var(--text-dark);
    transition: all 0.2s ease;
    border-radius: 8px;
    margin-bottom: 0.2rem;
}

.dropdown-item:hover {
    background: var(--primary-gradient);
    color: #ffffff;
    transform: translateX(5px);
}

.dropdown-header {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Badge Styling - Modern and Vibrant */
.badge {
    font-size: 0.7em;
    font-weight: 600;
    padding: 0.35em 0.65em;
    border-radius: 12px;
    letter-spacing: 0.3px;
}

.badge.bg-danger {
    background: var(--danger-gradient) !important;
}

.badge.bg-warning {
    background: var(--warning-gradient) !important;
    color: #ffffff !important;
}

.badge.bg-success {
    background: var(--success-gradient) !important;
}

.badge.bg-info {
    background: var(--info-gradient) !important;
}

/* Cards - Beautiful Modern Design with Depth */
.card {
    border: none;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    background-color: var(--lighter-bg);
    overflow: hidden;
}

/* Fix text visibility in cards - ensure dark text on white background */
.card,
.card .card-body,
.card .card-title,
.card .list-unstyled li {
    color: var(--text-dark) !important;
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6 {
    color: var(--text-dark) !important;
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}

.card-header {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-dark);
    padding: 1rem 1.5rem;
    font-size: 1rem;
}

.card-title {
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 1.1rem;
}

.card-body {
    padding: 1.5rem;
}

/* Keep text dark inside cards and white panels */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.card p, .card label, .card .form-text {
    color: var(--text-dark) !important;
}

.content-wrapper h1, .content-wrapper h2, .content-wrapper h3, 
.content-wrapper h4, .content-wrapper h5, .content-wrapper h6,
.content-wrapper p, .content-wrapper label, .content-wrapper .form-text {
    color: var(--text-dark) !important;
}

.page-shell h1, .page-shell h2, .page-shell h3, 
.page-shell h4, .page-shell h5, .page-shell h6,
.page-shell p, .page-shell label, .page-shell .form-text {
    color: var(--text-dark) !important;
}

.frosted-panel h1, .frosted-panel h2, .frosted-panel h3, 
.frosted-panel h4, .frosted-panel h5, .frosted-panel h6,
.frosted-panel p, .frosted-panel label, .frosted-panel .form-text {
    color: var(--text-dark) !important;
}

/* Buttons - Beautiful Gradients and 3D Effects */
.btn {
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.65rem 1.5rem;
    transition: all 0.3s ease;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: all 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: var(--primary-gradient);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(30, 58, 95, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.6);
}

.btn-secondary {
    background: var(--secondary-gradient);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(44, 95, 141, 0.4);
}

.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(44, 95, 141, 0.6);
}

.btn-success {
    background: var(--success-gradient);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(30, 95, 79, 0.4);
}

.btn-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(30, 95, 79, 0.6);
}

.btn-info {
    background: var(--info-gradient);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(44, 95, 141, 0.4);
}

.btn-info:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(44, 95, 141, 0.6);
}

.btn-warning {
    background: var(--warning-gradient);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(95, 74, 30, 0.4);
}

.btn-warning:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(95, 74, 30, 0.6);
}

.btn-danger {
    background: var(--danger-gradient);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(95, 30, 30, 0.4);
}

.btn-danger:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(95, 30, 30, 0.6);
}

.btn-outline-primary {
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--primary-gradient);
    border-color: transparent;
    color: #ffffff;
}

.btn-outline-secondary {
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
    background: transparent;
}

.btn-outline-secondary:hover {
    background: var(--secondary-gradient);
    border-color: transparent;
    color: #ffffff;
}

.btn-outline-success {
    color: var(--success-color);
    border: 2px solid var(--success-color);
    background: transparent;
}

.btn-outline-success:hover {
    background: var(--success-gradient);
    border-color: transparent;
    color: #ffffff;
}

.btn-outline-info {
    color: var(--info-color);
    border: 2px solid var(--info-color);
    background: transparent;
}

.btn-outline-info:hover {
    background: var(--info-gradient);
    border-color: transparent;
    color: #ffffff;
}

.btn-outline-warning {
    color: var(--warning-color);
    border: 2px solid var(--warning-color);
    background: transparent;
}

.btn-outline-warning:hover {
    background: var(--warning-gradient);
    border-color: transparent;
    color: #ffffff;
}

.btn-outline-danger {
    color: var(--danger-color);
    border: 2px solid var(--danger-color);
    background: transparent;
}

.btn-outline-danger:hover {
    background: var(--danger-gradient);
    border-color: transparent;
    color: #ffffff;
}

/* Statistics Cards - Stunning Gradient Cards */
.stats-card {
    border-radius: 12px;
    padding: 1.2rem;
    text-align: center;
    color: #ffffff;
    border: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.stats-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: statsShine 3s linear infinite;
}

@keyframes statsShine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.stats-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl);
}

.stats-card.bg-primary {
    background: var(--primary-gradient);
    box-shadow: 0 10px 30px rgba(45, 55, 72, 0.3);
    color: #ffffff;
}

.stats-card.bg-success {
    background: var(--success-gradient);
    box-shadow: 0 10px 30px rgba(203, 213, 224, 0.3);
    color: #2d3748;
}

.stats-card.bg-info {
    background: var(--info-gradient);
    box-shadow: 0 10px 30px rgba(237, 242, 247, 0.3);
    color: #2d3748;
}

.stats-card.bg-warning {
    background: var(--warning-gradient);
    box-shadow: 0 10px 30px rgba(113, 128, 150, 0.3);
    color: #ffffff;
}

.stats-card.bg-secondary {
    background: var(--secondary-gradient);
    box-shadow: 0 10px 30px rgba(74, 85, 104, 0.3);
    color: #ffffff;
}

.stats-number {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.stats-label {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.95;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Content Wrapper - Dedicated class for glassmorphic panels */
.content-wrapper, .page-shell, .frosted-panel {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
}

/* Main Content Area */
main {
    grid-area: main;
    padding: 2rem 0;
    position: relative;
    z-index: 1;
}

/* Preserve Bootstrap container defaults - Don't override globally */
.container, .container-fluid {
    /* Keep Bootstrap defaults intact */
}

/* Hero Section - Stunning Design */
.hero-section {
    background: var(--primary-gradient);
    color: #ffffff;
    padding: 5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,138.7C960,139,1056,117,1152,101.3C1248,85,1344,75,1392,69.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
    background-size: cover;
}

.hero-section h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.hero-section .lead {
    font-size: 1.3rem;
    font-weight: 400;
    opacity: 0.95;
}

/* Photo Grid - Modern Masonry Style */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.photo-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    background: #fff;
}

.photo-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.photo-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
}

.photo-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.photo-item:hover .photo-media img {
    transform: scale(1.1);
}

.photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    padding: 1rem;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.photo-item:hover .photo-overlay {
    opacity: 1;
}

.photo-overlay h6 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.photo-overlay small {
    font-size: 0.75rem;
    opacity: 0.9;
}

.photo-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* Forms - Modern Input Design */
.form-control, .form-select {
    border-radius: 10px;
    border: 2px solid var(--border-color);
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.form-label {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Progress Bars - Gradient Style */
.progress {
    height: 12px;
    border-radius: 10px;
    background-color: #e2e8f0;
    overflow: hidden;
}

.progress-bar {
    background: var(--primary-gradient);
    border-radius: 10px;
    transition: width 0.6s ease;
    position: relative;
    overflow: hidden;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: progressShine 2s linear infinite;
}

@keyframes progressShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Alerts - Modern Design */
.alert {
    border-radius: 12px;
    border: none;
    padding: 1rem 1.5rem;
    box-shadow: var(--shadow-md);
}

.alert-success {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
    color: #2c5282;
    border-left: 4px solid var(--success-color);
}

.alert-danger {
    background: linear-gradient(135deg, rgba(248, 87, 166, 0.1) 0%, rgba(255, 88, 88, 0.1) 100%);
    color: #742a2a;
    border-left: 4px solid var(--danger-color);
}

.alert-warning {
    background: linear-gradient(135deg, rgba(250, 112, 154, 0.1) 0%, rgba(254, 225, 64, 0.1) 100%);
    color: #744210;
    border-left: 4px solid var(--warning-color);
}

.alert-info {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.1) 0%, rgba(56, 249, 215, 0.1) 100%);
    color: #2c5282;
    border-left: 4px solid var(--info-color);
}

/* Modal - Beautiful Overlay */
.modal-content {
    border: none;
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.modal-header {
    background: var(--primary-gradient);
    color: #ffffff;
    border-bottom: none;
    padding: 1.5rem;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

.modal-body {
    padding: 2rem;
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 1rem 2rem;
}

/* Tables - Modern Style */
.table {
    border-radius: 12px;
    overflow: hidden;
}

.table thead {
    background: var(--primary-gradient);
    color: #ffffff;
}

.table thead th {
    border: none;
    padding: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.table tbody tr {
    transition: all 0.2s ease;
}

.table tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.05);
    transform: scale(1.01);
}

.table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

/* Footer - Clean Design */
footer {
    grid-area: footer;
    background: rgba(45, 55, 72, 0.95);
    backdrop-filter: blur(10px);
    color: rgba(255,255,255,0.8);
    padding: 2rem 0;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
}

footer a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    transition: all 0.3s ease;
}

footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease;
}

/* Loading Spinner - Beautiful Design */
.spinner-border {
    border-width: 3px;
    border-right-color: transparent;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Apply custom spacing only to dedicated wrapper classes, not Bootstrap containers */
    .content-wrapper, .page-shell, .frosted-panel {
        padding: 1rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    
    .photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }
    
    .stats-number {
        font-size: 2rem;
    }
    
    .hero-section h1 {
        font-size: 2rem;
    }
}

/* Utility Classes */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.gradient-text {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-glow {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}

/* Fix text visibility in ALL light-background sections */
.features-section,
.feature-card,
.feature-card h1,
.feature-card h2,
.feature-card h3,
.feature-card h4,
.feature-card h5,
.feature-card h6,
.feature-card p,
.feature-card .feature-title,
.feature-card .feature-description,
.section-title,
.section-subtitle {
    color: #2d3748 !important;
}

/* Ensure any element with white/light background has dark text */
[style*="background: white"],
[style*="background-color: white"],
[style*="background: #fff"],
[style*="background-color: #fff"],
[style*="background: #f8f9fa"],
.bg-white,
.bg-light {
    color: #2d3748 !important;
}

/* Override for all children of light backgrounds */
.features-section *,
.feature-card *,
.bg-white *,
.bg-light * {
    color: #2d3748 !important;
}

/* Special exception for feature icons which need white text */
.feature-icon,
.feature-icon * {
    color: white !important;
}

/* Fix Bootstrap .text-muted to be visible */
.card .text-muted,
.container .text-muted,
.content-wrapper .text-muted {
    color: #6c757d !important;
}

/* Ensure all headings in containers with light backgrounds are dark */
.container h1,
.container h2,
.container h3,
.container h4,
.container h5,
.container h6 {
    color: #2d3748 !important;
}

/* Exception: headings in dark sections should stay white */
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section h4,
.hero-section h5,
.hero-section h6,
.hero-section p,
.hero-section .lead {
    color: #ffffff !important;
}