/* -----------  Hero Section ------------- */
:root {
  --recruiter-50: #f0f9ff;
  --recruiter-100: #e0f2fe;
  --recruiter-200: #bae6fd;
  --recruiter-300: #7dd3fc;
  --recruiter-500: #0ea5e9;
  --recruiter-600: #0284c7;
  --recruiter-700: #0369a1;
  --recruiter-800: #075985;
}

/* Hero Section Base Styles */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 5rem;
  overflow: hidden;
}

/* Hero Background Effects */
#hero .bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--recruiter-50), white);
  z-index: 0;
}

.text-recruiter-600 {
  color: rgb(12 135 232 / var(--tw-bg-opacity, 1)) !important;
}

.bg-recruiter-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(0 114 214 / var(--tw-bg-opacity, 1));
}

#hero .bg-recruiter-100 {
  background-color: rgb(224 239 254 / var(--tw-bg-opacity, 1));
}
.text-recruiter-800 {
  --tw-text-opacity: 1;
  color: rgb(3 74 143 / var(--tw-text-opacity, 1));
}

.bg-recruiter-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(12 135 232 / var(--tw-bg-opacity, 1));
}

.bg-recruiter-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 247 255 / var(--tw-bg-opacity, 1));
}

#hero .rotate-6 {
  transform: rotate(6deg) !important;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rounded-full {
  border-radius: 9999px;
}

.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}

.from-blue-50 {
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

#hero .bg-blob {
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 9999px;
  mix-blend-mode: multiply;
  filter: blur(48px);
  opacity: 0.7;
}

#hero .bg-blob-top {
  top: 25%;
  right: -16rem;
  background-color: var(--recruiter-100);
}

#hero .bg-blob-bottom {
  bottom: 25%;
  left: -16rem;
  background-color: var(--recruiter-200);
}

/* Hero Content Container */
.container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Hero Content Layout */
#hero .content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

/* Hero Text Content */
#hero .text-content {
  width: 100%;
  max-width: 50%;
}

#hero .tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin-bottom: 1.5rem;
  border-radius: 9999px;
  background-color: var(--recruiter-100);
  color: var(--recruiter-800);
  font-size: 0.875rem;
  font-weight: 500;
}

/* #hero h1 {
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #111827;
    display: inline-block;
} */

#hero h1 {
  font-size: 3.5rem;
}

#hero h1 span {
  color: var(--recruiter-600);
}

#hero p {
  font-size: 1.25rem;
  color: #374151;
  margin-bottom: 2rem;
  max-width: 32rem;
}

/* Hero Buttons */
#hero .button-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#hero .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-weight: 500;
  transition: all 0.2s;
}

#hero .button-primary {
  background-color: var(--recruiter-600);
  color: white;
}

#hero .button-primary:hover {
  background-color: var(--recruiter-700);
  box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.2);
}

#hero .button-secondary {
  background-color: white;
  color: #1f2937;
  border: 1px solid #e5e7eb;
}

#hero .button-secondary:hover {
  background-color: #f9fafb;
}

/* Hero Visual Elements */
#hero .visual-content {
  width: 100%;
  max-width: 50%;
  position: relative;
}

.-rotate-6 {
  transform: rotate(-6deg) !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.bg-recruiter-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 239 254 / var(--tw-bg-opacity, 1));
}

.bg-recruiter-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(124 197 251 / var(--tw-bg-opacity, 1));
}

.card-glass {
  border-radius: 1rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  animation-duration: 300ms;
  border-width: 1px;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-border-opacity: 0.2;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.1;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
    var(--tw-backdrop-sepia);
  /* backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); */
}

/* Animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes stagger {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.delay-700 {
  animation-delay: 700ms;
}

.stagger-animation {
  animation: stagger 0.5s ease-out forwards;
  opacity: 0;
}

/* Parallax Effect */
.parallax {
  will-change: transform;
}

/* Responsive Design */
@media (max-width: 1024px) {
  #hero .text-content,
  #hero .visual-content {
    max-width: 100%;
  }

  #hero .content-wrapper {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  #hero .container {
    padding: 0 1rem;
  }

  #hero h1 {
    font-size: 2rem;
  }

  #hero .button-group {
    flex-direction: column;
  }
}