/* Glass Effect Styles */

/* Light Theme Glass Effect */
.glass-effect-light {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}



/* Card Glass Effect - Light */
.card-glass-light {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}



/* Navbar Glass Effect - Light */
.navbar-glass-light {
    background: #0c134e !important; /* Exact match with hero background color */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(30, 185, 215, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}



/* Button Glass Effect - Light */
.btn-glass-light {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.btn-glass-light:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}



/* Apply glass effect to body backgrounds */
.body-glass-light {
    background-color: #ffffff;
    background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.8), rgba(249, 250, 251, 0.8));
}



/* Navbar for hero section - exact match with hero background */
.navbar-transparent {
    background: #0c134e !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(30, 185, 215, 0.05) !important;
    box-shadow: none !important;
}

.navbar-glass-light .text-gray-900 {
    color: white !important;
}

.navbar-glass-light .hover\:text-primary-600:hover {
    color: var(--primary-400) !important;
}

.navbar-glass-light .mobile-menu-button {
    color: white !important;
}

.navbar-transparent .text-gray-900 {
    color: white !important;
}

.navbar-transparent .hover\:text-primary-600:hover {
    color: var(--primary-400) !important;
}

.navbar-transparent .mobile-menu-button {
    color: white !important;
}

/* Preserve logo text color in transparent navbar */
.navbar-transparent .logo-text {
    color: var(--primary-600) !important;
}