:root{
  --dark: #33333F;
  --disabled: ;
  --white: #ffffff;
  --light: #EFF5F7;
  --primary: #D53D3D;
  --primary-dark: #AF1D1D;
  --background: #003049;
  --panel-bg: #FCF0D5;
}

/* Common */
*{
  font-family: 'Raleway', sans-serif;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
}
 
body{
  color: var(--white);
  background-color: var(--background);
}

body > .skiptranslate {
    display: none;
}

.h-82{
  height: 82vh;
}

.w-100{
  width: 100%;
  max-width: 250px;
}

.jumbo-70{
  width: 100%;
  max-width: 300px;
}

.store-btn{
  height: 82px;
}

.vertical-center{
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

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

.text-highlight{
  color: var(--primary);
}

.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(--light);
}

.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 */
.xl-font{
  font-size: 4.5em;
  font-weight: 300;
  line-height: 1.2;
}

.lg-font{
  font-family: 'Fira Sans', sans-serif;
  font-weight: 600;
  font-size: 3.2em;
  color: var(--primary);
}

.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 */
.navbar-container{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  transition: all 0.5s;
  z-index: 1000;
}

.header-bg{
  /* z-index: 999; */
  background-color: var(--background);
  border-bottom: 2px solid;
  border-color: var(--primary);
}

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

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

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

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

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

.accordion:focus{
  outline: none;
}

.accordion:first-child{
  border-radius: 10px 10px 0 0;
}

.accordion:nth-last-child(2){
  border-radius: 0px 0px 10px 10px;
}

.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(--panel-bg);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  color: var(--background);
}

.panel:last-child{
  border-radius: 0px 0px 10px 10px;
}

.hide-faq{
  display: none;
}

.category{
  background-color: var(--panel-bg);
  color: var(--white);
}

.category:hover{
  color: var(--primary);
}

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

.category-header{
  color: var(--white);
  font-weight: 700;
  font-size: 1em;
}

.btn-secondary{
  width: 100%;
  background-color: var(--panel-bg);
  color: var(--background);
}

#category-label{
  float: left;
  width: 95%;
}

.faq-link{
  text-decoration: none;
  color: var(--primary);
  font-weight: 700;
}

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

.hide-alert{
  display: none;
}

.jumbo-bg{
  background: var(--panel-bg);
  color: var(--background);
}

/* footer */
.footer{
  padding: 4rem 2rem;
  background-color: var(--background);
  color: var(--light);
  border-top: 2px solid;
  border-color: var(--primary);
}

.footer-fixed{
  padding: 4rem 2rem;
  background-color: var(--background);
  color: var(--light);
  border-top: 2px solid;
  border-color: var(--primary);
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;
}

.lang-switcher, .top-lang-switcher, .faq-lang-switcher{
  position: fixed;
  right: -2px;
  padding: 4px 8px;
  border-radius: 0 0 4px 4px;
  z-index: 999;
  background-color: var(--panel-bg) !important;
  box-shadow: rgba(189, 187, 187, 0.1) 0px 4px 12px;
}

.top-lang-switcher{
  top: 0px;
  }

.lang-switcher{
    top: 92px;
  }

.faq-lang-switcher{
  top: 106px;
} 

@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;
  }

  .footer-fixed{
    position: unset;
    top: unset;
    left: unset;
  }

  .xl-font{
    font-size: 3.2em;
  }

  .jumbo-70{
    width: 100%;
    max-width: 200px;
  }

  .lang-switcher, .top-lang-switcher, .faq-lang-switcher{
    position: fixed;
    top: unset;
    right: unset;
    bottom: 0px;
    left: 15px;
    border-radius: 4px 4px 0 0;
  }

}

@media (min-height: 640px) and (max-height: 900px){

  .jumbotron{
    padding: 2em;
  }

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

  .md-font{
    font-size: 1.4em;
  }

  .jumbo-70{
    width: 100%;
    max-width: 200px;
  }

}

@media (min-height: 300px) and (max-height: 640px){

  
  .jumbotron{
    padding: 2em;
  }

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

  .md-font{
    font-size: 1.2em;
  }

  .jumbo-70{
    width: 100%;
    max-width: 100px;
  }

  .store-btn{
    height: 70px;
  }

  .lang-switcher, .top-lang-switcher, .faq-lang-switcher{
    position: fixed;
    top: unset;
    right: unset;
    bottom: 0px;
    left: 15px;
    border-radius: 4px 4px 0 0;
  }

}