@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
body { font-family: 'Space Grotesk', sans-serif; }

.service-card {
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(255, 120, 73, 0.2);
    border-color: rgba(255, 120, 73, 0.3);
}

.pulse-dot {
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.1); }
}

.radio-wave {
    animation: radio-wave 2s ease-in-out infinite;
}

@keyframes radio-wave {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.5; }
}

.gradient-bg {
    background: linear-gradient(135deg, #ff7849 0%, #ffab40 50%, #ffffff 100%);
}

.glass-nav {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.status-online { color: #10b981; }
.status-busy { color: #f59e0b; }
.status-offline { color: #6b7280; }

.floating-element {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

.progress-ring {
    transition: stroke-dasharray 0.3s ease;
}
.floating-animation {
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* Custom styles for footer icons */
/* Removed as new social icons have their own styling */

/* Dark Mode styles */
body.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0; /* Lighter text for dark mode */
}
.dark-mode .service-card {
    background: rgba(40, 40, 40, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.dark-mode .service-card:hover {
    box-shadow: 0 20px 40px rgba(255, 120, 73, 0.4);
    border-color: rgba(255, 120, 73, 0.5);
}
.dark-mode .bg-gray-100 {
    background-color: #333333;
}
.dark-mode .text-gray-600 {
    color: #b0b0b0;
}
.dark-mode .text-gray-800 {
    color: #e0e0e0;
}
.dark-mode .bg-gray-50 {
    background-color: #2a2a2a; /* Slightly cooler dark gray */
}
.dark-mode .bg-gradient-to-r.from-gray-100.to-gray-200 {
    background: linear-gradient(to right, #282828, #333333);
}
.dark-mode .bg-white {
    background-color: #0E121E; /* Slightly cooler dark gray */
}
.dark-mode .text-gray-900 {
    color: #e0e0e0;
}
.dark-mode .border-gray-700 {
    border-color: #444444;
}
.dark-mode .text-gray-400 {
    color: #a0a0a0;
}
.dark-mode .text-gray-300 {
    color: #c0c0c0;
}
.dark-mode .shop-filter.bg-gray-700 {
    background-color: #444444;
}
.dark-mode .shop-filter.bg-gray-700:hover {
    background-color: #555555;
}
.dark-mode .p-3.bg-gray-800.bg-opacity-50.rounded-lg {
    background-color: rgba(60, 60, 60, 0.5);
}
.dark-mode .bg-gradient-to-r.from-gray-700.to-gray-600 {
    background: linear-gradient(to right, #444444, #3a3a3a);
}
.dark-mode .bg-orange-50 {
    background-color: #fff7ed; /* Light orange for dark mode protip box */
    color: #1f2937; /* Dark text for dark mode protip box */
}