:root{
  --dark: #33333F;
  --dark-grey: #3F3F4A;
  --disabled: ;
  --white: #ffffff;
  --light: #EFF5F7;
  --primary: #43A1DB;
  --primary-light: #A1D5EB;
  --primary-dark: #416eb6;
  --bg-light: #fafafa;
  --footer-bg: #F5F5F5;
  --grey: #707070;
}

/* Common */
*{
  font-family: 'Raleway', sans-serif;
}

.default-font{
  color: var(--dark);
}

.primary-font{
  color: var(--primary-dark);
}

.primary-light-font{
  color: var(--primary);
}

.light-font{
  color: var(--light);
}

.section-container{
  padding: 6rem 2rem;
}

.section-shadow{
  box-shadow: 0px 1px 6px rgba(0, 0, 0, .16);
}

p{
  text-align: justify;
}

.link{
  text-decoration: none;
  color: var(--grey);
}

.link:hover{
  color: var(--primary);
  text-decoration: none;
}

.jumbotron{
  background-color: var(--bg-light);
  padding: 6rem 2rem;
}

.lead{
  text-align: justify;
  font-size: 1.1em;
}

.text-highlight{
  font-weight: 600;
  font-size: .85em;
  text-align: justify;
}

.primary-btn{
  color: var(--white);
  border-radius: 28px;
  background-color: var(--primary);
}

.primary-btn:hover{
  color: var(--white);
  background-color: var(--primary-dark);
}

/* Team Section */
.profile-pic{
  background-size: cover;
  height: 200px;
  background-position: center;
  border-radius: 10px;
}

.designation{
  color: var(--grey);
  font-size: .75em;
  font-weight: 600;
}

.primary-h4{
  color: var(--primary-dark);
  font-size: 1.25em !important;
  font-weight: 400;
}

.team-para{
  font-size: .875em;
  font-weight: 400;
  text-align: justify;
}

/* headings */
.lg-font{
  font-family: 'Fira Sans', sans-serif;
  font-weight: 600;
  font-size: 3.2em;
}

.md-font{
  /* font-family: 'Fira Sans', sans-serif; */
  font-weight: 600;
  font-size: 2em;
  line-height: 1.3em;
}

.sm-head{
  font-weight: 700;
  font-size: 1em;
}

.xs-head{
  font-weight: 800;
  font-size: 0.725em;
}

/* navbar */
.nav-bg{
  z-index: 999;
  background-color: var(--white);
}

.navbar-light .navbar-nav .nav-link{
  color: var(--dark);
  font-size: .875em;
}

.navbar-light .navbar-nav .nav-link:hover{
  color: var(--primary);
}

.active{
  color: var(--primary-dark) !important;
  font-weight: 700;
}

/* faq */
.accordion {
  background-color:var(--primary-dark);
  color: var(--white);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  transition: 0.4s;
  font-weight: bold;
}

.faq-active, .accordion:hover {
  background-color: var(--primary-dark);
}

.accordion:focus{
  outline: none;
}

.accordion:after {
  content: '\002B';
  color: var(--white);
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.faq-active:after {
  content: "\2212";
}

.panel {
  /* padding: 0 18px; */
  background-color: var(--light);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* footer */
.footer{
  padding: 4rem 2rem;
  background-color: var(--footer-bg);
  color: var(--grey);
}

@media screen and (min-width: 200px) and (max-width: 500px){

  .lg-font{
    font-size: 2em;
  }

  .md-font{
    font-size: 1.8em;
    line-height: 1.3em;
  }

  .jumbotron{
    padding: 3rem 1rem;
  }

  .section-container{
    padding: 3rem 1rem;
  }

  .footer{
    padding: 2rem 1rem;
  }

}