* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
}

body {
    font-family: "Noto Sans Hebrew", sans-serif;
}



:root {
    --bg-color: #30434F;
    --bg-color2: #B8DBD9;
    --bg-color3: #F4F4F9;
    --text-color: #FFFFFF;
    --text-color2: #000000;
    --main-color: #B8DBD9;
    --main-color2: #F4F4F9;
}

@media (min-width: 1600px) {
    .logo-header {
        left: 1500px !important;
    }
    #header-img {
        margin-left: 60px !important;
    }
    }

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;  
    padding: 2rem 9%;
    background: rgba(184, 219, 217, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    height: 130px;
    direction: ltr !important;

}



#header-btn {
    margin-top: 7.3px;
    position: absolute;
    margin-left: -76%;
        display: inline-block;
        font-weight: 400;
        font-size: 27px;
        line-height: 150%;
        letter-spacing: 0%;
        color: var(--text-color2);
}
#btn-phone {
    width: 32px;
    height: 32px;
    position: absolute;
    left: -37px;
    top: 3.2px;
}
.header.sticky {
    border-bottom: .1rem solid rgba(0, 0, 0, .2);
}

.logo-header {

    left: 1273px;
    
    cursor: pointer;
position: absolute;
    margin-right: 46%;
    display: inline-block;
    padding: 1rem 2.8rem;
    border-radius: 4rem;
    letter-spacing: .1rem;
}


#header-img {
    background-image: url('./public/Logo\ TaiChi-Qigong_2.svg');
    width: 160px;
    height: 100px;
margin-left: 48px;
    background-size: cover;
    border-radius: 0 !important;
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    overflow: visible !important;
     
}

#header-btn-mobile {
    display: none;
}

.navbar {
    margin-right: -24px !important;
}

.navbar a {
    font-weight: 400;
    font-size: 25px;
    line-height: 150%;
   padding: 20px;
    letter-spacing: 0%;    
    color: var(--text-color);
}

.navbar a:hover,
.navbar a.active {
    color: var(--bg-color);
    bottom: -10px;
    text-decoration: underline;
    text-underline-offset: 10px;
}



#menu-icon {
    font-size: 3.6rem;
    color: var(--text-color);
    display: none;
}


.home {
    display: flex;
    justify-content: center;
    align-items: center;
}

.home {
    background-image: url("./public/BG3.png");
    background-size: cover;
    width: 100%;
    height: 2311px;
}


.home-content {
    z-index: 5;
    text-align: center;
    margin-left: 3.5px;
    display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-top: 100px;
}

.span-home1 {
    font-size: 50px;
    margin-top: 90px;
    text-align: center;
    color: var(--text-color);
}

.span-home2 {
    font-size: 30px;
    text-align: center;
    color: var(--text-color);
}
#join__image {
    margin-top: -161px;
}

.join__image {
    margin-top: 45px;
}

.video {
    gap: 42px;
    margin-top: 200px;
    margin-top: 200px;
}
#video {
    width: 800px;
height: 450px;

}


.section2 {
    background-image: url("./public/BG-IMG.svg");
height: 130vh;
top: 2311px;
background-size: cover;
}

.span-about {
    font-size: 25px;
}

.section2-div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.span-about {
    margin-left: 94px;
    margin-top: 460px;
    color: var(--text-color);
}

.btn-about {
    width: 443px;
    height: 93px;
    margin-left: 83px;
    cursor: pointer;
    margin-top: 100px;
    font-size: 25px;
    text-align: center;
    align-items: center;
    border-radius: 8px;
    background-color: var(--bg-color2);
}

.btn-about:hover {
    background-color: var(--bg-color);
    color: var(--text-color);
    }

.section3 {
    background: linear-gradient(to bottom, rgba(184, 219, 217, 1) 0%, rgba(244, 244, 249, 1) 100%);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    direction: rtl;
}



.section3-h1 {
font-size: 50px;
    color: rgba(48, 67, 79, 1);
    margin-top: 150px;
    font-weight: 900;
}

.section3-span {
    width: 1043px;
    height: 102px;
    margin-top: 110px;
    left: 234px;
    
    font-size: 25px;
}

.icon-title {
    display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-top: 100px;
}

#icons {
    margin-top: 160px;
}

.icon {
    width: 150px;
height: 148.5px;
margin-top: 8px;
left: 375px;

}

.font3 {
    font-size: 25px;
}

.section4 {
    display: flex;
    flex-direction: row;
    margin-top: 240px;
    gap: 313px;
}

.title4 {
    font-size: 50px;
    font-weight: 700;
    color: rgba(48, 67, 79, 1);
}

.a {
    display: flex;
        flex-direction: column;
        align-items: center;
}

.img-section4 {
height: 150px;
border-radius: 10px;
margin-top: 25px;
cursor: pointer;
}

.icon2 {
    width: 100px;
height: 99px;
top: 16px;
left: 342px;

}

.b {
    display: flex;
        flex-direction: column;
}

.b1 {
    display: flex;
        width: 442px;
        height: 131px;
        flex-direction: row;
align-items: center;
gap: 24px;
}

.font4 {
    text-align: right;
    font-size: 25px;
}

.section3-h2 {
font-weight: 900;
font-size: 50px;
text-align: center;
color: rgba(48, 67, 79, 1);


}

.section5 {
    background-image: url("./public/BG2.png");
    background-size: cover;
}

.title-section5 {
font-weight: 900;
font-size: 50px;
line-height: 100%;
margin-top: 155px;
text-align: center;
color: var(--text-color);
}

.text-title5 {

color: var(--text-color);
font-size: 25px;
text-align: center;
margin-top: 5px;
}

.section4-images {
    display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
}

.section4-images img:nth-child(5) {
    grid-column: 1 / -1; /* תופס את כל הרוחב של שתי העמודות */
    justify-self: center; /* ממרכז את התמונה עצמה */
  }
.c {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: -250px;
}

.text5 {
text-align: right;
font-size: 25px;
color: var(--text-color);
margin-top: 100px;
direction: rtl;
width: 616px;
height: 747px;
top: 537px;
left: 776px;

}

.img-section5 {
    width: 759px;
height: 1129px;
margin-top: 350px;
margin-left: -10px;
}

section.form-section {
    display: flex;
    justify-content: center;
    align-items: center;
height: 870px;
top: 7550px;
 flex-direction: column;
    min-height: 100vh;
    padding: 40px 20px;
    background-color: #c5eeee;
  }

  .form-container {
    width: 60%;
    direction: rtl;
    height: 290px;
    text-align: center;
    margin-top: 104px;
  }

  .form-container p {
    font-size: 25px;
    margin-bottom: 30px;
    line-height: 1.6;
  }

  .p-form {
height: 68px;
top: 204px;
left: 292px;
font-size: 25px;
text-align: center;
direction: rtl;
  }

  .form-container b {
    font-weight: bold;
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 20px;
  }

  input {
    padding: 14px;
    font-size: 25px;
    
    direction: rtl;
    height: 78px;
    border: 2px solid #2b3d47;
    border-radius: 10px;
    background-color: #c5eeee;
    box-sizing: border-box;
  }

.btn-form {
    width: 852;
    height: 78;
    gap: 20px;
    border-radius: 10px;
    padding-top: 24px;
    padding-right: 20px;
    padding-bottom: 24px;
    padding-left: 20px;
    background: var(--bg-color);
    color: var(--text-color);
    cursor: pointer; 
    font-size: 25px;
  }

  .btn-form:hover {
    background-color: var(--bg-color2);
    color: var(--text-color2);
  }

  .popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 60px 40px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 13.5px;
    width: 90%;
    max-width: 930px;
    font-size: 20px;
    z-index: 1000;
    text-align: center;
    line-height: 1.6;
}

.popup h2 {
margin-bottom: 20px; /* או מספר נמוך יותר לפי הצורך */
}
.close-btn {
    position: absolute;
    top: 4px;
    right: 31px;
    font-size: 56px;
    color: #333;
    cursor: pointer;
}
.overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}
.bold { font-weight: bold; }

.p-text {
  margin-top: 20px;
}

.underline {
    text-decoration: underline;
}

#NagishLiTrigger {
 
    top: 89%;
    bottom: 20px;
    border-radius: 8px;
    right: none;
    left: 1px;
    transform: scale(0.8, 0.8);
    overflow-y: hidden;
    margin-inline-start: auto;
}

.footer {
    direction: rtl;
    text-align: center;
    padding: 20px;
    color: var(--bg-color);
    font-size: 20px;
    font-weight: 500;
    margin-top: 80px;
    margin-left: 1px;
  }

#link {
    text-align: center;
    color: var(--bg-color);
    font-size: 20px;
    text-decoration: underline;
    font-weight: 500;
  }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .popup {
        width: 70% !important;
        padding: 40px !important;
        font-size: 15px;
    }
    .popup-content {
      font-size: 15px !important;
    }
    .navbar a {
        font-size: 20px;
        padding: 14px;
    }
    #header-btn {
        font-size: 20px;
    }
    #btn-phone {
        width: 27px;
        height: 27px;
        position: absolute;
        left: -30px;
        top: 0.5px;
    }
    .navbar {
        margin-right: -33px !important;
    }
    .header {
        height: 108px;
    }
    .logo-header {
        left: 820px;
    }

    #header-img {
        background-image: url("./public/Logo TaiChi-Qigong_2.svg");
        background-size: cover;
        width: 134px;
        height: 85px;
        margin-left: 0px;
        top: 8px;
        left: 861px;

    }
    .home {
height: 1750px;

}

#header-btn-mobile {
    display: none;
}

    .span-home1 {
        font-size: 40px;
        margin-top: -56px;
    }
      
    .span-home2 {
        font-size: 20px;
        margin-top: -41px;
    }

    #join__image {
        margin-top: -144px;
    }
    #video {
        width: 600px;
        height: 337.5px;
        
    }
    .join__image {
        margin-top: 31px;
    }
    .section2 {
        height: 700px;
    }
    .span-about {
        margin-left: 94px;
        margin-top: 308px;
        color: var(--text-color);
        font-size: 20px;
    }
    .btn-about {
        margin-left: 83px;
        width: 281px;
        height: 62.984127044677734px;
        top: 258.71px;
        left: 361.65px;
        border-radius: 5.42px;
        font-size: 20px;
        margin-top: 50px;
    }
    .section3-h1 {
        font-size: 40px;
        margin-top: 104px;
    }
    .section3-span {
        margin-top: 58px;
        font-size: 16px;
        width: 1000px;
    }
    #icons {
        margin-top: 38px;
    }
    .icon {
        width: 89px;
        height: 96px;
    }
    .font3 {
        font-size: 16px;
    }
    .icon-title {
        margin-top: 31px;
    }
    .title4 {
        font-size: 40px;
    }
    .section3-h2 {
        font-size: 40px;
    }
    .section4 {
        gap: 132px;
    }
    .img-section4 {
        height: 114px;
        margin-top: 17px;
    }
    .font4 {
        font-size: 16px;
    }
    .icon2 {
        width: 67px;
        height: 67px;
    }
    .b1 {
        display: flex;
        width: 299px;
        height: 94px;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        margin-top: 14px;
    }
    .title-section5 {
        font-size: 40px;
        margin-top: 104px;
    }
    .text-title5 {
        font-size: 20px;
    }
    .img-section5 {
        width: 513px;
        height: 764px;
        margin-top: 298px;
    }
    .text5 {
        width: 417px;
height: 483px;
font-size: 16px;
top: 378px;
left: 517px;

    }
    section.form-section {
        height: 626px !important;
        min-height: 0%;
    }
 .p-form {
    margin-top: 133px;
    font-size: 16px;
 }
 form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: -58px;
}
input {
    font-size: 16px;
    height: 51px;
}
.btn-form {
    height: 51px;
    font-size: 16px;
    padding-top: 16px;
}
    .close {
      font-size: 28px !important;
      top: 10px !important;
      right: 10px !important;
    }
    .footer {
        direction: rtl;
        text-align: center;
        padding: 20px;
        color: var(--bg-color);
        font-size: 20px;
        font-weight: 500;
        margin-top: 24px;
        margin-left: 1px;
    }
    #link {
        font-size: 20px;
    }
  }

  @media (max-width: 768px) {
    .header {
        position: sticky;
        height: 94px;
        background-color: var(--bg-color);
      }
    
      .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem 3%;
        background: var(--bg-color);
        text-align: center;
        border-top: .1rem solid rgba(0, 0, 0, .2);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
        display: none;
    }
    
    .navbar.active {
        display: block;
    }
    .navbar a {
        display: block;
        font-size: 22px;
        margin: 3rem 0;
        padding: 0px;
      }
      .navbar a:hover, .navbar a.active {
        color: var(--bg-color2);
      }

      .logo-header {
        left: 35px;
      }
      #header-btn{
        display: none;
      }

    #header-img {
        width: 133px;
        height: 87px;
        margin-left: 26.5%;
            background-image: url("./public/Logo TaiChi-Qigong_Mobile.svg");

      }
      #header-btn-mobile {
        display: block;
        margin-top: 7.3px;
        position: absolute;
        margin-left: -78%;
            display: inline-block;
            font-weight: 400;
            font-size: 27px;
            line-height: 150%;
            letter-spacing: 0%;
    }
    #menu-icon {
        display: block;
        margin-left: 323px;
        width: 36px;
        height: 36px;
        font-size: 42px;
        margin-top: -5px;
        color: var(--main-color);
      }
    #btn-phone {
        position: absolute;
        left: -25px;
        top: -21.8px;
        width: 40px;
        height: 40px;
    }

      .section4 {
        display: flex;
        flex-direction: column;
        margin-top: 250px;
      }
      .home {
        background-image: url("./public/BG2.png");
        background-position: center !important;
        height: 1167px;
      }
      .span-home1 {
        font-size: 28px;
        margin-top: -122px;
        text-align: center;
        margin-left: 3px;
        width: 355px;
      }
      .span-home2 {
        font-size: 20px;
        margin-top: -13px;
      }
      #video {
        width: 330px;
        height: 185px;
    }
    #join__image {
        margin-top: 72px;
    }
    .video {
        gap: 10px;
        margin-top: 200px;
        margin-top: 40px;
        margin-left: 16px;
    }
    .section2 {
        margin-left: -130px;
height: 454px !important;
left: 11px;
    }
    .span-about {
        margin-left: 28%;
        margin-top: 170px;
        font-size: 20px;
        color: var(--text-color2);
    }
    .btn-about {
        width: 300px;
        margin-left: 28.2%;
        height: 62px;
        margin-top: 30px;
        font-size: 16px;
        color: var(--text-color2) !important;
    }
    .section3-h1 {
        font-size: 30px;
        width: 246px;
        height: 82px;
        left: 74px;
        color: rgba(48, 67, 79, 1);
        margin-top: 91px;
    }
    .section3-span {
        width: 319px;
        height: 110px;
        margin-top: 20px;
        left: 234px;
        font-size: 16px;
    }
    .icon {
        width: 101px;
        height: 101px;
    }
    
    .font3 {
        font-size: 16px;
}

#icons {
    margin-top: 36px;
}
.icon-title {
    margin-top: 15px;
  }
  .title4 {
    font-size: 30px;
    margin-top: -130px;
}

#img1 {
    margin-top: 25px;
}

.img-section4 {

    height: 127px;
    border-radius: 5px;
    margin-top: 12px;
    cursor: pointer;
    margin-right: 31px;
}

.section4-images {
display: flex;
flex-direction: column;
}
.b {
    margin-top: -180px;
}
.section3-h2 {
    font-size: 30px; 
}
.b1 {
    display: flex;
    width: 361px;
    height: 164px;
    flex-direction: column;
    align-items: center;
    gap: 0px;
}

.font4 {
    text-align: center;
    font-size: 16px;
}
.title-section5 {
    font-size: 30px;
    margin-top: 80px;
}
.text-title5 {
    font-size: 20px;
    margin-top: 2px;
}

.section5 {
    background-position: center !important;
}

.img-section5 {
    width: 375px;
    height: 559px;
    margin-top: 50px;
}


.c {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    margin-top: -50px;
}

.img-section4 {
    margin-right: 11px !important;
}

.popup {
    width: 349px;
    padding: 33px !important;
    font-size: 14px;
}
.popup-content {
  font-size: 15px !important;
}

.close-btn {
    position: absolute;
    top: 5px;
    right: 14px;
    font-size: 30px;
    color: #333;
    cursor: pointer;
  }
  
.text5 {
    text-align: center;
    font-size: 16px;
    color: var(--text-color);
    margin-top: 93px;
    direction: rtl;
    width: 361px;
    height: 483px;
}

.p-form {
    height: 66px;
    margin-top: -20px;
    width: 273px;
    font-size: 16px;
}

.form-container {
    width: 319px;
    direction: rtl;
    height: 146px;
    text-align: center;
    margin-top: 49px;
}
input {
    font-size: 18px;
    height: 69px;
}

.btn-form {
    font-size: 18px;
}
.footer {
    direction: rtl;
    text-align: center;
    padding: 20px;
    color: var(--bg-color);
    font-size: 16px;
    font-weight: 500;
    margin-top: 198px;
    margin-left: 0px;
}
#link {
    font-size: 16px;
}
#popup5 {
    font-size: 12px;
}
}