/* main */
#main {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; 
  width: 100%;
  gap: 30px;
  padding-top: 100px;
  /* background-color: rgb(248, 252, 255); */
  /* background-color: rgb(255, 247, 219); */
  background-image: linear-gradient(to top, white, rgb(255, 247, 219));
}

#main::after {
  margin-top: 30px;
  margin-bottom: 30px;
  content: "";
  position: absolute;
  bottom: -150px;
  left: 0;
  width: 100%;
  height: 5px;
  /* background: inherit; */
  background-color: white;
  transform: skewY(-2deg); /* הזווית של האלכסון */
  transform-origin: top left;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* הצל האלכסוני */
}

@media (max-width: 1500px) {
    #main {
       flex-direction: column-reverse;
       gap: 10px;
     }
  }

  @media (max-width: 1500px) {
    #main::after {
       bottom: -80px;
     }
  }

#mainImg {
    width: 1000px;
  }


@media (max-width: 1000px) {
    #mainImg {
       width: 100vw;
     }
  }

/* headers */
#headers {
  box-sizing: border-box;
  border-radius: 10px;
  font-family: 'Assistant', sans-serif;
  text-align: center;
  font-size: clamp(20px, 3vw, 26px);
  max-width: 50%;
  padding: 40px;
   /* background-color: rgba(5, 60, 111, 0.5); */
}

@media (max-width: 1300px) {
    #headers {
       max-width: 100%;
       padding: 10px 40px;
     }
  }

#headers h1 {
  font-weight: 800;
  color: rgb(0, 27, 44);
  font-size: clamp(32px, 5vw, 60px);
}

#headers h2 {
  font-weight: 700;
  color: rgb(0, 27, 44);
  font-size: clamp(30px, 5vw, 36px);
}

/* כפתור */
#btnHeader {
  display: inline-block;
  text-align: center;
  border: none;
  border-radius: 10px;
  padding: clamp(14px, 2vw, 18px) 40px;
  font-size: clamp(16px, 3vw, 18px);
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
  width: 50%;
  margin-top: 30px;
  cursor: pointer;
  color: rgb(228, 184, 63);
  background-image: linear-gradient(to right, rgb(0, 27, 44), rgb(0, 72, 118));
}

#btnHeader:hover {
  background-image: linear-gradient(to right, rgb(0, 27, 44), rgb(0, 27, 44));
}

@media (max-width: 1300px) {
    #btnHeader {
       width: 70%;
     }
  }

#counter {
  color: rgb(228, 184, 63);
  font-weight: 800;
  font-family: 'Assistant', sans-serif;
  font-size: clamp(50px, 8vw, 100px);
}