html {
  scroll-behavior: smooth;
}

.wf-loading * {
  /* first things first, we need to hide everything, but bear in mind that this will only take effect
    once the loading script has taken effect. here we're hiding all content within the <html> once it has the class "wf-loading" */
  opacity: 0;
}

.wf-active *,
.wf-inactive * {
  /* add some transitional effects to reintroduce the content gradually once fonts are loaded */
  -webkit-transition: opacity 0.1s ease-out;
  -moz-transition: opacity 0.1s ease-out;
  -o-transition: opacity 0.1s ease-out;
  transition: opacity 0.1s ease-out;
}

div#main-container .nav-tabs>li>a {
  border: none;
}

div#main-container .nav-tabs>li.active>a {
  font-weight: bold;
  color: #fff;
}

.content {
  padding: 50px 0 50px 0;
  min-height: 800px;
}

.site-logo h1 {
  font-size: 32px;
}

.site-logo img {
  margin-top: -41px;
}

.site-logo img.internal-page-logo {
  margin-top: -20px;
}

.dd-menu>li {
  font-family: "Inter",
  "Nunito",
  serif;
  font-size: 100%;
}

/* .dd-menu > li {
  color: #fff !important;
} */

.dd-menu-1 {
  margin-right: 20px;
}

.dd-menu-1>li {
  font-family: "Inter",
  "Nunito",
  serif;
  font-size: 100%;
  margin-top: 0px;
}

.dd-menu-1>li>a {
  font-weight: bold;
  text-transform: none;
  letter-spacing: 0px;
}

.panel-heading {
  font-weight: bold;
}

.list-group-item {
  background: #faf0e6;
  border: 0 !important;
  padding: 20px 15px 25px 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.list-group-item h4 {
  font-size: 24px;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0px;
}

.list-group-item a.pull-right {
  margin-top: 10px;
}

.list-group-item ul br {
  display: none;
}

.header-info-col {
  margin-top: 15px;
  margin-left: 20px;
}

.header-info-col a {
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 5px 10px;
  color: #fff;
  font-size: 1.3em;
}

.header-info-col a:hover {
  background: #fff;
  color: #066594;
}

.flex-caption-text h2 {
  font-weight: bold;
  letter-spacing: -1px;
}

.flex-caption-text p {
  font-family: "Inter", serif;
  font-size: 28px;
  line-height: 30px;
}

.flex-caption-text a {
  font-size: 16px;
}

.main-objective h2 {
  line-height: 1.1em;
  font-size: 30px;
  letter-spacing: -1px;
}

.main-objective h3 {
  line-height: 30px;
}

.main-objective p {
  font-size: 110%;
  font-weight: 400;
  letter-spacing: -0.5px;
}

#local-masjids .local-masjid-item {
  font-weight: 400;
}

.local-masjid-item {
  font-family: "Inter", "Nunito", serif;
  font-size: 17px;
}

.local-masjid-item img {
  margin-bottom: 5px;
}

.home-add-new-masjid-info-box h3 {
  margin-top: 10px;
}

#content-box-outline {
  font-size: 104%;
}

#content-box-outline h3 {
  padding-bottom: 10px;
}

.content-section ul br {
  display: none;
}

.content-section h2 {
  font-size: 2.1em;
}

.info-item-container {
  background: #faf0e6;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0px 0px 5px #c1a07e5e;
  border-radius: 16px;
  border: 1px solid #f5e7da;
}

.info-item-container p {
  margin-bottom: 0px;
}

.info-item-container a {
  text-decoration: none;
}

.info-item-meta-header {
  margin-bottom: 20px;
}

.info-item-meta-header .label {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding: 5px 20px;
  margin-top: 5px;
  margin-right: 10px;
  text-align: center;
  border-radius: 50px;
}

.info-item-meta-header li>a {
  font-size: 1.1em;
}

.info-item-meta-header li.active>a {
  font-weight: bold;
}

.volunteer-signup-info-box {
  background: #7a5292;
  border-radius: 16px;
  padding: 20px 40px;
  margin-bottom: 20px;
  margin-top: 40px;
}

.volunteer-signup-info-box h3 {
  color: #fff;
}

.key-points ul>li {
  list-style: none;
  font-family: "Inter", "Nunito", serif;
  font-size: 24px;
  line-height: 35px;
  padding: 30px;
  background: linear-gradient(135deg, #05951f 0%, #2b43d3 100%);
  color: #fff;
}

.members-list-item {
  /*background: #F7F7F7;*/
  padding: 20px;
  margin-bottom: 20px;
}

.members-list-left {
  text-align: right;
}

.footer_widget p {
  color: #fff;
}

.footer_widget h4 {
  color: #fff;
  text-transform: uppercase;
}

.footer_widget a {
  color: #fff !important;
}

.site-footer {
  padding-top: 40px;
  padding-bottom: 40px;
}

.site-footer h5 {
  color: #fff;
  letter-spacing: 1px;
}

.site-footer p {
  color: #fff;
  line-height: 20px;
  font-weight: 300;
  font-size: 0.9em;
  letter-spacing: 0pt;
}

.try-onemasjid-action-button {
  font-size: 1.3em;
  font-family: "Nunito", "Inter", sans-serif;
  text-transform: none;
  color: #fff;
  letter-spacing: 0px;
}

.new-masjid-tile {
  background: linear-gradient(135deg, #05951f 0%, #2b43d3 100%);
  border-radius: 5px;
  color: #fff;
  margin-top: 20px;
  padding: 10px 20px 20px;
  text-align: center;
}

.new-masjid-tile h3 {
  margin-top: 10px;
}

.new-masjid-tile p {
  margin: 0px;
}

.new-masjid-tile a {
  color: #f6e9a3;
}

.new-masjid-tile a:hover {
  color: #fff;
}

.new-masjid-tile hr {
  border-top: none;
  margin-top: 8px;
  margin-bottom: 8px;
}

.new-masjid-tile .row>div {
  margin-bottom: 0px;
}

.onboarded-masjid-panel {
  font-size: 16px;
}

.not-onboarded-masjid-panel {
  font-size: 16px;
}

.carousel-slide {
  margin-top: 100px;
  padding-top: 100px;
  padding-bottom: 50px;
}

@media only screen and (max-width: 480px) {
  .masjid-detail-container {
    padding: 5px 25px 20px;
  }

  .info-item-meta-header {
    text-align: center;
  }

  .info-item-meta-header span {
    display: block;
  }

  .try-onemasjid-action-button {
    font-family: "Nunito", "Inter", sans-serif;
    font-size: 0.9em;
    text-transform: none;
    color: #fff;
    letter-spacing: 0px;
  }

  .volunteer-signup-info-box {
    border-radius: 0px;
  }
}
