/* 
 * Light Hero Section Styling for Othala Solutions Website
 * Light grey background with adjusted text colors
 */

/* Override Hero Section Background */
.hero {
    position: relative;
    min-height: 100vh;
    padding: 8rem 0 6rem;
    background: linear-gradient(135deg, #e6f7ff 0%, #b3e0ff 100%);
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/images/shapes/circuit-pattern.svg') repeat;
    opacity: 0.05;
    z-index: -1;
    animation: moveBackground 30s linear infinite;
}

.hero-bg {
    display: none; /* Hide old background structure */
}

/* Hero overlay */
.hero .hero-overlay {
  background: linear-gradient(45deg, rgba(241, 241, 246, 0.8), rgba(241, 241, 246, 0.5));
}

/* Hero badge styling */
.hero .hero-badge {
  background: rgba(0, 71, 171, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(30, 30, 48, 0.1);
  color: var(--color-dark);
}

.hero .hero-badge span {
  color: var(--color-primary-dark);
}

/* Hero title */
.hero .container {
    position: relative;
    z-index: 2;
}

.hero .hero-title {
  color: var(--color-primary-dark);
}

/* Hero subtitle */
.hero .hero-subtitle {
  font-size: 1.2rem;
  color: var(--color-gray-dark);
  margin-bottom: 2.5rem;
  max-width: 600px;
}

/* Buttons for light hero */
.hero .btn-outline-white {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.hero .btn-outline-white:hover {
  background-color: var(--color-primary);
  color: white;
}

/* Stats adjustment */
.hero .stat-value {
  color: var(--color-primary-dark);
}

.hero .stat-label {
  color: var(--color-gray-dark);
}

/* Hero particles adjustment */
.hero .particle {
  background-color: rgba(45, 58, 242, 0.2);
  border-radius: 50%;
}

/* Bottom shape adjustments */
.hero .hero-shape svg path {
  fill: var(--bg-white);
}

/* Adjust text gradient for light background */
.hero .text-gradient {
  background-image: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Hero glow effect for light background */
.hero .hero-glow {
  background: radial-gradient(circle, rgba(45, 58, 242, 0.2) 0%, rgba(1, 179, 167, 0.1) 40%, transparent 70%);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

/* Header navbar adjustments for light hero */
.header-transparent .nav-link {
  color: var(--color-dark);
}

.header-transparent {
  background: transparent;
}


/* Button adjustments for light hero */
.hero .btn-gradient {
  box-shadow: 0 4px 14px rgba(45, 58, 242, 0.3);
}

.header-transparent .nav-toggle span {
  background: var(--color-dark);
}