body {
      font-family: "Sofia Sans", sans-serif !important;
    }
    
    .header-logo {
      color:white;
    }

    /* Hero Banner */
    .hero-banner {
      background-color: #2a3e96;
      padding: 51px 0;
      color: #fff;
      text-align: center;
      background-image: url("/base/images/sofia_4.png");
      background-size: cover;
      background-position: center top;
    }
    .groups-banner {
      background-color: #ffd962;
    }
    
    .hero-content {
      max-width: 800px;
      margin: 0 auto;
    }
    .hero-content h1 {
      font-size: 60px;
      text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
    }
    .hero-content h2 {
      margin-top:40px;
      font-size: 40px;
      text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
    }
    .org-logo {
      max-height: 100px;
      -webkit-filter: drop-shadow(5px 5px 5px #222);
      filter: drop-shadow(5px 5px 5px #222);
    }
    
    .search-field {
      margin-top: 40px;
    }
    
    .search-field .input-group {
      width: 100%;
    }
    
    .search-field input {
      height: 50px;
      font-size: 18px;
      border: none;
    }
    
    .search-field button {
      height: 50px;
      background: #0f3d6b;
      color: #fff;
      border: none;
    }
    .content {
      max-width: 800px;
      margin: 50px;
    }
    
    /* Main Content */
    .main-content {
      padding: 40px 0;
    }
    .media-grid, .module-grid {
      background-color: white!important;
    }
    
 
.masthead {
  background: #2a3e96!important;   
}

.main {
  background: white!important;   
}

.btn-primary {
  background:#45c75d!important;
}

.btn-primary:hover {
  background:#45c75d!important;
}

.groups {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  padding: 20px;
}

.group {
  width:150px;
  height: 150px;
  text-align: center;
  padding: 20px;
  color:black;
  border: 2px #000000 dotted;
  margin: 20px;
}

.group img {
  width: 50px;
}
.group-name {
  font-size: 20px;
  margin-bottom: 0;
}
.group-sets {
  font-size: 15px;
  font-weight: bold;
}