@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", sans-serif;
  /* overflow-x: hidden; */
  /* Manages edge-section overflow carefully */
}

/* Typography & Links */
.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(90deg, #ef4444, #9ca3af);
  /* primary to secondary */
}

.nav-link::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: white;
  /* Tailwind: bg-white */
  transition: width 0.3s;
}

.nav-link:hover::after {
  width: 100%;
}

/* Cards & Interactive Elements */
.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.service-icon {
  /* Used in "Who We Are" section */
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  /* Tailwind: rounded-xl or similar */
  margin-bottom: 1rem;
  /* Tailwind: mb-4 */
}

.glow {
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
  /* primary color glow */
}

.glow:hover {
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.8);
  /* primary color glow */
}

/* Hero Section & Parallax */
.hero-section {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&auto=format&fit=crop&w=1470&q=80");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* Creates parallax effect */
}

/* Decorative Elements & Animations */
.particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  /* Tailwind: rounded-full */
  pointer-events: none;
  z-index: -1;
  /* Behind most content */
}

.floating-shape {
  position: absolute;
  opacity: 0.1;
  z-index: 0;
  /* Behind main content but above particles if any overlap */
}

.floating-shape-1 {
  top: 10%;
  left: 5%;
  animation: float 8s ease-in-out infinite;
}

.floating-shape-2 {
  bottom: 15%;
  right: 5%;
  animation: float-reverse 10s ease-in-out infinite;
}

.floating-shape-3 {
  top: 50%;
  right: 10%;
  animation: float 12s ease-in-out infinite;
}

.floating-shape-4 {
  bottom: 20%;
  left: 10%;
  animation: float-reverse 9s ease-in-out infinite;
}

/* Keyframes for floating shapes and particles if not using Tailwind's animation utilities for these */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

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

  50% {
    transform: translateY(20px);
  }
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 50px;
  border: 2px solid white;
  /* Tailwind: border-2 border-white */
  border-radius: 15px;
  /* Tailwind: rounded-[15px] or similar */
}

.scroll-indicator::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: white;
  /* Tailwind: bg-white */
  border-radius: 50%;
  /* Tailwind: rounded-full */
  animation: scroll-animation 2s infinite;
}

@keyframes scroll-animation {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Form Elements */
.input-field:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5);
  /* primary color focus ring */
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 1rem;
  /* Tailwind: px-4 -> 1rem */
  top: 0.875rem;
  /* Tailwind: py-3 -> 0.75rem padding, so label sits mid-field */
  transition: 0.2s ease all;
  color: #9ca3af;
  /* Tailwind: text-gray-400 or secondary */
}

.input-field:focus ~ .floating-label,
.input-field:not(:placeholder-shown) ~ .floating-label,
.input-field:valid ~ .floating-label {
  /* :valid for select with non-empty value */
  top: -0.625rem;
  /* -10px */
  left: 0.625rem;
  /* 10px */
  font-size: 0.75rem;
  /* 12px, Tailwind: text-xs */
  background: #1f2937;
  /* Tailwind: bg-altogray (input field bg) */
  padding: 0 0.3125rem;
  /* 5px */
  color: #ef4444;
  /* Tailwind: text-primary */
}

/* Ensure select without placeholder also triggers label */
select.input-field:valid ~ .floating-label {
  top: -0.625rem;
  left: 0.625rem;
  font-size: 0.75rem;
  background: #1f2937;
  padding: 0 0.3125rem;
  color: #ef4444;
}

/* Tabs */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-button.active {
  background-color: #ef4444;
  /* Tailwind: bg-primary */
  color: white;
  /* Tailwind: text-white */
}

/* Stats Counter */
.stats-counter {
  font-size: 3rem;
  /* Tailwind: text-5xl or text-6xl */
  font-weight: 700;
  /* Tailwind: font-bold */
  background: linear-gradient(90deg, #ef4444, #9ca3af);
  /* primary to secondary */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Layout Helpers */
/* .edge-section {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
} */

select {
  /* Remove default OS arrow for custom one */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}

/* Mobile Menu Transitions */
.mobile-menu-transition {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#mobile-menu.hidden {
  /* Applied by JS */
  opacity: 0;
  visibility: hidden;
}

#mobile-menu:not(.hidden) {
  /* Default state when not hidden */
  opacity: 1;
  visibility: visible;
}

/* Z-index utility (if needed beyond Tailwind's z-index classes) */
.z-60 {
  z-index: 60;
}

/* For mobile menu, higher than nav's z-50 */
.product-image-carousel {
  position: relative; /* Already in Tailwind as `relative` */
}

.carousel-image {
  position: absolute; /* Already in Tailwind as `absolute` */
  top: 0;
  left: 0;
  width: 100%; /* Already in Tailwind as `w-full` */
  height: 100%; /* Ensures it fills the container, works with object-fit */
  object-fit: cover; /* Or 'contain', depending on desired image scaling */
  /* opacity: 0; by default, JS will handle first image */
  /* transition: opacity 1s ease-in-out; /* Tailwind: transition-opacity duration-1000 ease-in-out */
}

/* YouTube player styles moved to youtube-background.css */

/* In styles.css */

#bottom-video-blocker {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45px; /* STARTING POINT: Adjust this height as needed */
  /*
    Choose a background color that matches the darkest part of your video
    or the main background color of your hero section if the video is dark.
    Your #youtube-player has bg-altogray which is #1f2937
    Your body has bg-dark which is #111827
    Pick the one that blends best or is the intended true background.
  */
  background-color: #1f2937; /* Matches altogray. Change if needed. */
  /* background-color: red; */ /* TEMPORARY: Use red for easy visibility during adjustment */
  z-index: 2; /* Needs to be higher than the YouTube player's content (player is likely z-index 0 or 1 implicitly) */
  pointer-events: none; /* So it doesn't interfere with any mouse events, just in case */
}