#hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    min-height: 100vh;
    background-image: url("../images/bg_main.webp");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

   @media (max-width: 768px) {
    #hero {
    background-image: url("../images/bg_main_small.webp");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
     }
   }

#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}
@media (max-width: 768px) {
      #hero::before {
        background-color: rgba(0, 0, 0, 0.5);
     }
}

#hero > * {
  position: relative;
  z-index: 2;
}

#headers {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: "Fredoka", sans-serif;
    width: 100%;
    padding: 0px 50px;
    margin-bottom: 30px;
}

#headers h1 {
  font-size: clamp(40px, 5vw, 80px);
  font-weight: 700;
  /* צבעים צבאיים */
  background: linear-gradient(90deg, #2f4b2c, #6a7b45, #b08a3a);
  -webkit-background-clip: text;
  background-clip: text;  
  -webkit-text-fill-color: transparent;

  /* קווי מתאר */
  -webkit-text-stroke: 1px #ffe8cd;

  /* עומק */
  text-shadow:
    0 6px 12px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.05);
}

.shoot-title {
  display: inline-block;
  font-size: 3rem;
  font-weight: bold;
  opacity: 0;
  animation: shootInSoft 0.8s cubic-bezier(0.25, 1.1, 0.3, 1) forwards;
}

/* הנפשת ירייה עם נחיתה רכה */
@keyframes shootInSoft {
  0% {
    transform: translateX(-600px) scale(0.8) rotate(-5deg);
    filter: blur(6px);
    opacity: 0;
  }
  70% {
    transform: translateX(20px) scale(1.05) rotate(2deg);
    filter: blur(0);
    opacity: 1;
  }
  85% {
    transform: translateX(-10px) scale(0.98) rotate(-1deg);
  }
  100% {
    transform: translateX(0) scale(1) rotate(0);
    opacity: 1;
  }
}

#headers h2 {
    margin-top: 0;
    font-size: clamp(28px, 5vw, 50px);
    font-weight: 700;
    color: rgb(255, 106, 106);
      text-shadow:
    1px 0 0 #090909,
   -1px 0 0 #000000,
    0 1px 0 #000000,
    0 -1px 0 #000000;
}

#ctaA {
    display: block;
    text-align: center;
    border: none;
    border-radius: 50px;
    padding: 20px 150px;
    font-size: clamp(18px, 3vw, 22px);
    font-weight: 700;
    cursor: pointer;
    color: white;
    margin-top: 20px;
    background-image: linear-gradient(to right, rgb(159, 0, 0), rgb(255, 58, 58));
    transition: transform 0.6s ease, box-shadow 0.6s ease;
}

#ctaA:hover {
    background-image: linear-gradient(to right, rgb(159, 0, 0), rgb(159, 0, 0));
    transform: scale(1.07) translateY(-2px);
}

@media (max-width: 768px) {
      #ctaA {
        padding: 20px 20px;
        width: 70%;
     }
}