/*! ******************************************************
*
*	Theme Name:     Astra Child
*   Author:         web3d
*   Author URI:     http://www.onthegosystems.com/
*   Description:    Simple, clear and modern Bootstrap 3-based theme. Perfect base for developing all kinds of responsive sites with Toolsets, including the Layouts plugin (no extra integration needed, you activate Layouts and the drag and drop facilities work out of the box). Uses WordPress theme customizer and supports Font Awesome Icons. Supports WooCommerce integration by styles unification.
*   Version:        1.1
*   License:        GNU General Public License v2 or later
*   License URI:    http://www.gnu.org/licenses/gpl-2.0.html
*   Template:       astra
*
*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/




/*-------General Settings-----------*/
#wpadminbar{
  opacity: .5;
}
html {
  scroll-behavior: smooth;
}

@font-face {
    font-family: 'fbkarlibachhebengbold';
    src: url('https://inter.israelelwyn.org.il/wp-content/themes/astra-child/fonts/fbkarlibachhebeng-bold.woff2') format('woff2'),
         url('https://inter.israelelwyn.org.il/wp-content/themes/astra-child/fonts/fbkarlibachhebeng-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'fbkarlibachhebenglight';
    src: url('https://inter.israelelwyn.org.il/wp-content/themes/astra-child/fonts/fbkarlibachhebeng-light.woff2') format('woff2'),
         url('https://inter.israelelwyn.org.il/wp-content/themes/astra-child/fonts/fbkarlibachhebeng-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fbkarlibachhebengregular';
    src: url('https://inter.israelelwyn.org.il/wp-content/themes/astra-child/fonts/fbkarlibachhebeng-regular.woff2') format('woff2'),
         url('https://inter.israelelwyn.org.il/wp-content/themes/astra-child/fonts/fbkarlibachhebeng-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.jo_btn{
  display: inline-flex;
  width: auto;
  padding: 10px 32px 8px;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  cursor: pointer;
  background: #004891;
  border: 1px solid #004891;
  color: #fff !important;
  font-weight: 400;
  border-radius: 8px;
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
}
.jo_btn::after{
    background-color: #fff;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-100%, 0) rotate(10deg);
    transform-origin: top left;
    transition: .2s transform ease-out;
    will-change: transform;
    z-index: -1;
    border-radius: 8px;
}
.jo_btn:hover::after {
  transform: translate(0, 0);
}
.jo_btn:hover{
  background: none;
  color: #004891 !important;
  will-change: transform;
}

.align_content_center{
  align-content: center;
}
.title{
  letter-spacing: 2px;
}
.title::after{
  content: "";
  width: 64px;
  height: 6px;
  display: block;
  background: var(--color--main);
  margin: 15px 0 25px;
}

/*--Layout--*/
.jo_container{
  max-width: 1430px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

@media (min-width: 770px){
	.jo_row{
	  display: flex;
	  flex-wrap: wrap;
	}
	.jo_col_12{
	  flex: 0 0 100%;
	  max-width: 100%;
	}
	.jo_col_11{
	  flex: 0 0 91.666667%;
	  max-width: 91.666667%;
	}
	.jo_col_10{
	  flex: 0 0 83.333333%;
	  max-width: 83.333333%;
	}
	.jo_col_9{
	  flex: 0 0 75%;
	  max-width: 75%;
	}
	.jo_col_8{
	  flex: 0 0 66.666667%;
	  max-width: 66.666667%;
	}
	.jo_col_7{
	  flex: 0 0 58.333333%;
	  max-width: 58.333333%;
	}
	.jo_col_6{
	  flex: 0 0 50%;
	  max-width: 50%;
	}
	.jo_col_5{
	  flex: 0 0 41.666667%;
	  max-width: 41.666667%;
	}
	.jo_col_4{
	  flex: 0 0 33.333333%;
	  max-width: 33.333333%;
	}
	.jo_col_3{
	  flex: 0 0 25%;
	  max-width: 25%;
	}
	.jo_col_2 {
	  flex: 0 0 16.666667%;
	  max-width: 16.666667%;
	}
	.jo_col_1 {
	  flex: 0 0 8.333333%;
	  max-width: 8.333333%;
	}


	/*--Grid--*/
	.ps-grid{display: grid;}
	.ps-grid-2{grid-template-columns: repeat(2, 1fr);}
	.ps-grid-3{grid-template-columns: repeat(3, 1fr);}
	.ps-grid-4{grid-template-columns: repeat(4, 1fr);}
	.ps-grid-5{grid-template-columns: repeat(5, 1fr);}
	.ps-grid-6{grid-template-columns: repeat(6, 1fr);}
	.ps-grid-gap10{gap:15px;}
	.ps-grid-gap15{gap:15px;}
	.ps-grid-gap20{gap:20px;}
	.ps-grid-gap30{gap:30px;}
	.ps-grid-gap50{gap:50px;}
	.ps-grid-gap40{gap:40px;}
	.ps-grid-gap60{gap:60px;}
	.ps-grid-gap70{gap:70px;}
}

#hero{
  padding: 65px 0;
}
#hero img{
  margin: 0 0 0 auto;
  display: block;
  border-radius: 20px;
  box-shadow: 0 0 15px 6px rgba(0, 0, 0, 0.10);
  height: 490px;
  object-fit: cover;
}
#hero h1{
  color: #fff;
  line-height: 1;
  letter-spacing: 4px;
}
#hero h3{
  color: #000;
  font-size: 30px;
  line-height: 1.3;
  font-family: 'fbkarlibachhebengregular';
  font-weight: 400;
  margin: 30px 0;
}
#hero .jo_col_4{
  align-content: center;
}

#s2{
  padding: 90px 0;
}
#s2 img{
  margin: 0 0 0 auto;
  display: block;
  border-radius: 20px;
  height: 480px;
  object-fit: cover;
}
#s2 .jo_col_7{
  padding-right: 100px;
}

#s3{
  padding: 90px 0;
}
#s3 h2{
  color: #fff;
  text-align: center;
  margin-bottom: 70px;
}
.item_voice_of_change{
  border-radius: 0 0 50px 0;
  background: #C7F2FF;
  overflow: hidden;
}
.item_voice_of_change_header{
  color: #00346F;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 32.5px;
  padding: 40px 50px 0 85px;
  height: 220px;
}
.footer_voice_of_change{
  background: var(--color--main);
  color: #fff;
  display: flex;
  padding: 15px 65px;
  align-items: center;
  gap: 16px;
}
.footer_letter{
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #A7BE2C;
}

#gallery{
  padding: 90px 0;
}
#gallery h2{}
#gallery p{
  margin: 10px 0 60px;
}
.gallery_item{
  border-radius: 30px;
  overflow:hidden;
}
.gallery_item img{
  border-radius: 30px;
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: all 3s ease;
}
.gallery_item:hover img{
  transform: scale(1.05);
}


#s5{
  padding: 90px 0;
  background: #F2F2F2;
}
#s5 h2{
  text-align: center;
}
#s5 p{
  margin: 10px 0 40px;
  text-align: center;
}
.accordion_content {
  display: none;
}
.accordion_item.active .accordion_content {
  display: block;
}
.accordion_title {
  width: 100%;
  text-align: right;
  cursor: pointer;
}

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