/* @import url('http://example.com/example_style.css'); */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&display=swap');
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
@media only screen and (max-width: 768px) {
  #web-brick{
    padding: 30px 20px; !important;
  }
  #nav-brick{
    padding: 0px 0px; !important;
  }
  .mobile50{
    width:50% !important;
    float:left !important;
    justify-content: center !important;
  }
  .NavBar{
    width: 100% !important;
  }
  .navElement{
  justify-content: center;
  }
  .languagePick{
  justify-content: center;
  }
    .circleHolder{
  margin:15px 15px  !important;
  }
  .circle{
  margin: 10px 10px !important;
    width: 160px !important;
    float: left !important;
  }
    .signUp a{
border: solid 1px white;
  padding:5px 10px;
}

  
}
@media only screen and (max-width: 1024px){
  #web-brick{
    padding: 30px 20px; !important;
  }
  #nav-brick{
    padding: 0px 20px; !important;
  }
    .mobileHide{
    display:none !important;
  }
  .afNavElement{
  justify-content: center; 
  }
  .circle{
  min-height: 160px !important;
  }
}

@media only screen and (max-width: 1024px) and (min-width: 768px){
  .NavBar{
    width: 65% !important;
  }
}

@media only screen and (min-width: 1024px) {
  .FiveBlock{
  width:17.43% !important;
  }
  .navElement{
  justify-content: right;
  }
  .languagePick{
  justify-content: left;
  }
  .circleHolder{
  margin:25px 0px;
  }
  .afNavElement{
  justify-content: right; 
  }
  .circle{
  min-height: 240px !important;
  }
  .signUp a{
border: solid 1px white;
  padding:5px 10px;
}

}

/* 
.curvedBack { 
	background: url('data:image/svg+xml,<svg width="100%" height="80" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 80">\
  <path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" fill="black" />\
  Sorry, your browser does not support inline SVG.  \
</svg> ') 0 / auto 100%;
}
*/


.circle{
  border-radius:100%; 
  float:left; 
  display:flex !important;
}

.circle div{
  display:flex !important;
 align-items:center;
  justify-content:center;
  width:100%;
  text-align:center;
}

h1, h2, h3,  h4, h5{
 margin:0 !important;
}

.HelpFormButton{
  justify-content: right; 
}

 .HelpFormButton a{
  color:white !important; 
  font-family: 'Montserrat', sans-serif; 
  font-size:20px; 
  text-decoration:none; 
}
  #small-brick{
    padding: 30px 20px;
    max-width: 1080px; 
    margin:0 auto; 
    float: none;
  }
  #web-brick{
    padding: 60px 20px;
    max-width: 1080px; 
    margin:0 auto; 
    float: none;
  }
  #nav-brick{
    padding: 0px 0px;
    max-width: 1080px; 
    margin:0 auto; 
    float: none;
    min-height: auto;
  }

h1, h2, h3, h4, h5, label{
  font-family: 'Montserrat', sans-serif;
}

p, li, td, a{
  font-family: 'Montserrat', sans-serif;
}

.afghan h1, h2, h3, h4, h5, label{
  font-family: 'Noto Sans Arabic', sans-serif;
}

.afghan p, li, td, a{
  font-family: 'Noto Sans Arabic', sans-serif;
}

.afghan .collapsible{
justify-content:right;
}

.resources a {
  text-decoration:none !important;
}

.NavBar a{
  text-decoration:none !important;
  text-align:center;
  font-size:20px;
  color:white;
}

#nav-brick a{
  text-decoration:none !important;
  text-align:center;
  font-size:20px;
  color:white;
}

.flexBox80{
  display: flex !important;   
  align-items: center;   
  height: 80px;
}

.disabled .hs-button{
  background-color:grey !important;
  color:lightgrey !important;
}
.disabled .hs-button:hover{
  background-color:grey !important;
  color:lightgrey !important;
}

#light .hs-button{
  text-decoration: none;
  padding: 20px 0px;
  font-weight: bold;
  text-align: center;
  background-color: lightgray;
  color: black;
  display: block;
  border-radius: 10px;
  margin-top:10px;
}

#light .hs-button:hover{
   background-color: #003660;
  color: white;
}

#dark .hs-button{
  text-decoration: none;
  padding: 20px 0px;
  font-weight: bold;
  text-align: center;
  background-color: #003660;
  color: white;
  display: block;
  border-radius: 10px;
  margin-top:10px;
}

#dark .hs-button:hover{
   background-color: #f15a29;
}

.nav .hs-button{
  text-decoration: none;
  background-color: #003660;
  padding: 20px 0px;
  color: white;
  font-weight: bold;
  display: block;
  text-align: center;
}

input{
  border-radius: 5px;
  padding: 0 15px;
  min-height: 27px;
  background-color: #f5f8fa;
  border: 1px solid #cbd6e2;
  font-size: 16px;
  font-weight: normal;
  line-height: 22px;
  height: 40px;
  width: 100%;
}

textarea{
  border-radius: 5px;
  padding: 6px;
  min-height: 27px;
  background-color: #f5f8fa;
  border: 1px solid #cbd6e2;
  font-size: 16px;
  font-weight: normal;
  line-height: 22px;
    font-family: 'Open Sans', sans-serif;

}

.field {
    margin-bottom: 18px;
}

label{
      display: block;
    line-height: 20px;
    padding-top: 0;
    margin-bottom: 8px;
}

.slick-slider {
    margin-bottom: 0px;
}

fieldset{
  max-width: 1080px !important;
}
fieldset.form-columns-1 .hs-input{
 width:100% !important;
}

.submitted-message{
  font-family: 'Open Sans', sans-serif;
    text-align: center;
    margin-top: 40px;
    font-size: 1.17em;
}

form .input{
  display:flex;
}