*{
    box-sizing: border-box;
}

html{
  margin:0;
}

body{
    background: #F6E3BA ;
    direction: rtl;
    margin: 0;
}

.container{
    max-width: 1300px;
  }
  
  header{
    background: #cfb284e1;
    min-height: 80px;
    background: ;
    position: sticky;
    top: 0;
    z-index: 100;
    height: 100px;
  }
  

  li a{
    text-decoration: none;
    color:#817158;
    font-size: 1.5em;
    transform: 1s;
  }
  
  header .nav a:hover{
    color: #FFFDE7;
  }

  nav a::after{
    content: "";
    display: block;
    height: 2px;
    width: 0%;
    background:  #817158;
    transition: 1s;
    margin-left: 0;
    margin: 0 auto;
    
}

nav a:hover::after{
    width: 100%;
}

nav a::before{
    content: "";
    display: block;
    height: 2px;
    width: 0%;
    background:  #817158;
    transition: 1s;
    margin: 0 auto;
}

nav a:hover::before{
    width: 100%;
}

footer{
  background: #cfb2847b;
  padding: 15px;
  margin-top: 20px;
  margin-bottom: 0;
}

.box{
  height: 100px;
}

.icon{
  font-size: 2.5em;
  transition: 0.5s;
  color: #817158;
}

.icon:hover{
  color: #FFFDE7;
  font-size: 3.5em;
}

.course a{
  color:#817158;
  font-size: 1.5em;
  text-decoration: none;
}

.course a:hover{
  color:#473e2f;
  font-weight: bolder;
}
.logo a{
  color:#473e2f;
  text-decoration: none;
  text-align: left;
  font-family: "Beau Rivage", cursive;
  font-size: 7em;
  font-weight: bolder;
}

.f2{
  border: #473e2f solid 2px;
  border-radius: 25px;
  background: #FFFDE7;
}


aside a{
  color: #473e2f;
  text-decoration: none;
  transform: 1s;
}

aside a:hover{
  font-size: 2.5em;
}


.strip{
    height: 450px;
    margin-top: 100px;
}
  
.bg_pic{
    height: 450px;
    background-position: center;
    background-size: cover;
  }

  .carousel-item .carousel-caption{
    background: #f6e3bab8;
    max-width: 650px;
    margin:0 auto;
  }

  .bt{
    border-radius: 20px;
    padding: 10px;
    border: none;
    color: #FFFDE7;
    background: #817158;
  }

  .carousel-item .carousel-caption h5{
    color: #473e2f;
}

.carousel-item .carousel-caption p{
    color: #473e2f;
    font-weight: bold;
}

.a1{
  color:#FFFDE7;
}

.a1:hover{
  font-size: 2.5em;
  color:#F6E3BA
}

.box1{
    margin-bottom: 150px;
}

.in-box{
    border: #473e2f solid 5px;
    border-radius: 25px;
    background: #817158;
    color: #FFFDE7;
    font-family: tahoma ;
}

main a{
    text-decoration: none;
    color: #473e2f;
}

main a:hover{
    color: #817158 ;
}

main a::after{
    content: "";
    display: block;
    height: 2px;
    width: 0%;
    background:  #817158;
    transition: 1s; 
    margin: 0 auto;
}

main a:hover::after{
    width: 100%;
}

main a::before{
    content: "";
    display: block;
    height: 2px;
    width: 0%;
    background:  #817158;
    transition: 1s;
    margin: 0 auto;
}

main a:hover::before{
    width: 100%;
}



.in-box p{
    font-weight: bold;
    font-size: 2em;
    font-weight: bold;
}

.color1{
    color: #473e2f;
}

.vert{
    background-size: cover;
    background-position: center center;
    height: 100vh;
    border-radius: 100px;
    opacity: 0.2;
}

.name{
    border-top: #817158 solid 1px;
}

.color2{
    color: #675b46;
}


.small-pic{
    margin-top: 100px;
    background-size: cover;
    height: 450px;
    width: 100%;
    align-items: end;
}

.small-pic h3{
    background: #f6e3bab8;
    color:#FFFDE7;
    text-align: center;
    padding: 5px;
    
}

.yt-w{
  width: 50%;
}

  /* גודל מסך 992 פיקסלים רוחב ומטה */
  @media (max-width:992px){
    header .row nav {
      display: none;
      position: absolute;
        background: #cfb284f8;
      color:#817158;
      width:60%;
      right:0;
      top: 75px;

    }
  
    header .row nav ul {
      display: block;
      text-align: center;
    }
  
    header .row nav ul li{
      padding:8px;
      border-bottom: 2px solid #7a6a4f;
    }
  

  
    header .row .burger i{
      /* מגדיל את האייקון של הבורגר */
      font-size: 2.5em;
    }

.small-pic{
    width: 100%;
    background-position: right;
}


  }
  
  @media (max-width:768px) {

    header {
      min-height: 50px;
    }
    header .logo{
      width:80%;
    }
    .vert{
      background-size: cover;
      background-position: center center;
      height: 50vh;
      width: 100%;
      border-radius: 20px;
      opacity: 0.2;
    }
    .vert-text{
      display: block;
      width: 100%;
    }

    footer img{
      width: 100%;
    }
    footer .box3{
      width: 100%;
      text-align: center;
      margin: 5px auto;
    }

  }
  
  /* עוד מדיה למסך קטן יותר אפילו */
  /* מה יקרה שהמסך קטן מ390 פיקסלים */
  @media (max-width:390px){

    header .row nav {
      top:80px;
    }
    
    header {
      min-height: 50px;
    }
  
    header .logo{
      width:80%;
    }
    
    header .row .burger i{
      /* מגדיל את האייקון של הבורגר */
      font-size: 1.5em;
    }
  
    header .row nav .search input{
      max-width:100px;
      /* width:50%; */
    }

    footer .container{
      display: block;
    }
  }