main{
    padding : 0rem;
}   
/* Color Variables */
:root {
  --primary-green: #0a885b;
  --light-pill-border: #9ee0ca;
  --text-dark: #1a1a1a;
  --text-muted: #666666;
  --hero-bg: #f5f9fc;
}

/* Outer Hero Container */
.hero-container {
  position: relative;
  background-color: var(--hero-bg);
  padding: 2rem 4rem 4rem 4rem;
  overflow: hidden;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 1. Floating Top Search Bar */
.search-bar-wrapper {
  display: flex ;
  justify-content: center ;
  align-items: center ;
  width: 100% ;
  margin-bottom: 3.5rem;
  z-index: 10;
}

.hero-search-bar {
  display: flex ;
  flex-direction: row ;  /* Forces horizontal row */
  flex-wrap: nowrap ;     /* Prevents items from stacking */
  align-items: center ;
  gap: 0.75rem;
  background: #ffffff;
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  width: max-content;              
  margin: 0 auto ;        /* Guarantees horizontal centering */
}

/* Pill Input Container */
.pill-input {
  display: flex;
  align-items: center;
  position: relative;

  input, 
  select {
    border: 1.5px solid var(--light-pill-border);
    border-radius: 20px;
    padding: 0.45rem 1.2rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    outline: none;
    background: transparent;
    width: 125px;
    font-family: inherit;
    box-sizing: border-box;
  }

  input::placeholder {
    color: #b0b0b0;
  }
}

/* Custom Select Dropdowns with Image Chevron */
.select-pill {
  select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 2.2rem;
  }

  .chevron-icon {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.65rem;
    height: auto;
    pointer-events: none;
  }
}

/* Vertical Search Bar Divider Line */
.search-divider {
  width: 1px;
  height: 24px;
  background-color: #e0e0e0;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

/* Search Submit Button */
.search-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;

  .search-btn-icon {
    width: 1.1rem;
    height: auto;
  }
}

/* 2. Hero Content Layout & Text */
.hero-body {
  position: static;            /* Allows .hero-illustration to anchor directly to 100% screen width container */
  display: flex;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.hero-text-content {
  position: relative;
  z-index: 2;                  /* Higher layer so text renders crisp on top of background image */
  max-width: 580px;

  h1 {
    font-size: 3.25rem;
    line-height: 1.15;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 1.25rem;

    .green-text {
      color: var(--primary-green);
    }
  }

  .hero-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 2rem;
  }
}

/* 3. Action Buttons & Badges */
.hero-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.75rem;

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.4rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;

    .btn-icon {
      width: 1.8rem;
      height: auto;
      object-fit: contain;
      flex-shrink: 0;
    }
  }

  .btn-solid {
    background-color: var(--primary-green);
    color: #ffffff;
    border: 1.5px solid var(--primary-green);

    &:hover {
      background-color: #086e49;
    }
  }

  .btn-outline {
    background-color: #ffffff;
    color: var(--primary-green);
    border: 1.5px solid var(--light-pill-border);

    &:hover {
      border-color: var(--primary-green);
      background-color: #f0fdf8;
    }
  }
}

/* Trust Badge Below Buttons */
.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  .stars {
    color: var(--primary-green);
    font-size: 0.85rem;
    letter-spacing: 1px;
  }

  .trust-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-green);
  }
}

/* 4. Background Illustration (Glued to Far Right Screen Edge) */
.hero-illustration {
  position: absolute;          /* Anchors directly to .hero-container */
  right: 0;                    /* Glued directly to the far right edge of the screen */
  bottom: 0;                   /* Glued directly to the bottom */
  max-width: 900px;            /* Prevents image from blowing up on huge monitors */
  min-width: 480px;            /* Keeps image visible on smaller laptop screens */
  z-index: 1;                  /* Positioned behind text */
  pointer-events: none;        /* Allows clicking links/text over the illustration */
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;

  img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: right bottom;
  }
}