/* style.css - All CSS styles consolidated */

/* Basic Reset */
body {
  margin: 0;
  padding: 0;
}

/* Hide scrollbar for all browsers */
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Input styling */
.hide_input_spin::-webkit-outer-spin-button,
.hide_input_spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hide_input_span[type=number] {
  -moz-appearance: textfield;
}

/* Logo Styling */
.logo {
  background: linear-gradient(135deg, #fc8b79 0%, #fc8b79 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.logo-Cxi {
  color: #fc8b79;
  font-weight: 600;
}

/* City Link Styling */
.city-link {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  padding: 2px 4px;
  border-radius: 4px;
}

.city-link:hover {
  background-color: #246D5F;
  color: white;
  transform: translateY(-1px);
}

/* Video Container Hover Effects */
.video-container {
  transition: transform 0.3s ease;
}

.video-container:hover {
  transform: scale(1.02);
}

/* Play Button Effects */
.play-button button {
  transition: all 0.3s ease;
}

.play-button button:hover {
  transform: scale(1.1);
}

/* Header transition effects */
#main-header {
  transition: all 0.3s ease;
}

/* Mobile menu animations */
#mobile-menu {
  transition: all 0.3s ease;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Additional utility classes */
.transition-colors {
  transition: color 0.3s ease;
}

.transition-transform {
  transition: transform 0.3s ease;
}

/* Mobile responsiveness helpers */
@media (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
}

@media (min-width: 768px) {
  .desktop-hidden {
    display: none;
  }
}