/* Custom Properties (Variables) */
:root {
    --bg-light: #F8FAFC;
    --text-light: #0F172A;
    --glass-bg-light: rgba(255, 255, 255, 0.85);
    --glass-border-light: rgba(203, 213, 225, 0.6);
    --shadow-light: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
}

.dark {
    --bg-dark: #0B0F19;
    --text-dark: #F3F4F6;
    --glass-bg-dark: rgba(17, 24, 39, 0.75);
    --glass-border-dark: rgba(255, 255, 255, 0.08);
    --shadow-dark: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
}

/* Base Body Classes */
.bg-light-bg { 
    background-color: var(--bg-light); 
}
.text-light-text { 
    color: var(--text-light); 
}

.dark .bg-dark-bg { 
    background-color: var(--bg-dark); 
}
.dark .text-dark-text { 
    color: var(--text-dark); 
}

/* Glassmorphism Card Effect */
.glass-card {
    background-color: var(--glass-bg-light);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border-light);
    box-shadow: var(--shadow-light);
}

.dark .glass-card {
    background-color: var(--glass-bg-dark);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border-dark);
    box-shadow: var(--shadow-dark);
}

/* Gradient Text Effect */
.gradient-text {
    background: linear-gradient(135deg, #1D4ED8 0%, #6D28D9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dark .gradient-text {
    background: linear-gradient(135deg, #60A5FA 0%, #A78BFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Gradient Background Effect */
.gradient-bg {
    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
}

/* Custom Card Hover Animation Effect */
div.service-card,
#why-us div.glass-card {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
    position: relative !important;
    will-change: transform, box-shadow;
}

/* Hover bo'lganda ko'tarilish va soya */
div.service-card:hover,
#why-us div.glass-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 35px -10px rgba(59, 130, 246, 0.3) !important;
}

/* Dark mode uchun hover soyasi */
.dark div.service-card:hover,
.dark #why-us div.glass-card:hover {
    box-shadow: 0 20px 35px -10px rgba(59, 130, 246, 0.4), 
                0 0 20px rgba(59, 130, 246, 0.2) !important;
}

/* Card ichidagi ikonka animatsiyasi */
div.service-card .w-14,
#why-us div.glass-card .w-12 {
    transition: transform 0.3s ease !important;
}

div.service-card:hover .w-14,
#why-us div.glass-card:hover .w-12 {
    transform: scale(1.15) rotate(4deg) !important;
}

/* Dynamic Nav Indicator Styles */
.nav-container {
    position: relative;
}

.nav-link {
    position: relative;
    transition: color 0.3s ease !important;
}

.nav-link.active {
    color: #2563EB !important; /* Light mode active rang */
    font-weight: 700 !important;
}

.dark .nav-link.active {
    color: #60A5FA !important; /* Dark mode active rang */
}

#nav-indicator {
    pointer-events: none;
}

/* --- Custom Scrollbar Styling --- */

/* Scrollbar kengligi va balandligi */
textarea::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Scrollbar yo'li (fon qismi) */
textarea::-webkit-scrollbar-track {
    background: transparent;
}

/* Scrollbar surgich qismi (Thumb) */
textarea::-webkit-scrollbar-thumb {
    background: #475569; /* Slate-600 rang */
    border-radius: 10px;
}

/* Sichqoncha ustiga kelganda */
textarea::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* Slate-500 rang */
}

/* Firefox uchun qo'llab-quvvatlash */
textarea {
    scrollbar-width: thin;
    scrollbar-color: #475569 transparent;
}