html, body {
  height: 100%; }

h1 {
  letter-spacing: 4px; }

h2, h3, h4 {
  letter-spacing: 2px; }

.spacer {
  padding: 80px 0; }

.spacer-md {
  padding: 120px 0; }

.spacer-lg {
  padding: 180px 0; }

.blue-button {
  padding: 10px 25px;
  background-color: #000B3B;
  boder: 0 px solid;
  color: white; }

.blue-button:hover {
  padding: 10px 25px;
  background-color: #000B3B;
  boder: 0 px solid;
  color: #C9C5A2;
  text-dectoration: none; }

.brown-button {
  padding: 10px 25px;
  background-color: #C9C5A2;
  boder: 0 px solid;
  color: white; }

@media screen and (max-width: 332px){
  .brown-button {
    padding: 10px 10px;
  }
}

@media screen and (max-width: 302px){
  .brown-button {
    padding: 10px 5px;
  }
}

.brown-button:hover {
  padding: 10px 25px;
  background-color: #C9C5A2;
  boder: 0 px solid;
  color: #000B3B;
  text-decoration: none; }

.navbar {
  background-color: white; }

.navbar-brand {
  width: 25%; }
  @media screen and (max-width: 768px) {
    .navbar-brand {
      width: 55%; } }

.nav-item {
  padding: 0 15px;
  font-weight: 600; }

footer {
  background-color: #000B3B;
  min-height: 200px;
  color: white; }
  footer ul {
    margin-bottom: 25px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem; }
    footer ul li {
      padding: 0px 5px; }
      footer ul li a {
        color: white; }
      footer ul li a:hover {
        color: #C9C5A2;
        text-decoration: none; }
  footer .social-footer li svg {
    font-size: 22px; }

#hero {
  background: url("../img/hero.jpg") no-repeat center center;
  background-size: cover;
  height: 90%; }
  @media screen and (max-width: 768px) {
    #hero {
      background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url("../img/hero.jpg") no-repeat center center;
      background-size: cover;
      height: 40%;
      color: #000B3B; }
      #hero .col-md-10 {
        margin-top: 40px; }
        #hero .col-md-10 h1 {
          font-size: 32px; } }
  #hero .container-fluid, #hero .row, #hero .col-md-6 {
    height: 100%;
    padding: 0; }
    #hero .container-fluid .co-1, #hero .container-fluid .co-2, #hero .row .co-1, #hero .row .co-2, #hero .col-md-6 .co-1, #hero .col-md-6 .co-2 {
      height: 50%;
      color: white;
      padding: 60px 90px 20px 30px; }
      #hero .container-fluid .co-1 h1, #hero .container-fluid .co-2 h1, #hero .row .co-1 h1, #hero .row .co-2 h1, #hero .col-md-6 .co-1 h1, #hero .col-md-6 .co-2 h1 {
        margin-bottom: 15px; }
      #hero .container-fluid .co-1 p, #hero .container-fluid .co-2 p, #hero .row .co-1 p, #hero .row .co-2 p, #hero .col-md-6 .co-1 p, #hero .col-md-6 .co-2 p {
        margin-bottom: 25px; }
    #hero .container-fluid .co-1, #hero .row .co-1, #hero .col-md-6 .co-1 {
      background-color: rgba(0, 11, 59, 0.51); }
    #hero .container-fluid .co-2, #hero .row .co-2, #hero .col-md-6 .co-2 {
      background-color: rgba(201, 197, 162, 0.6); }

#def-statement p {
  font-size: 20px; }

#student-resources .resources-image {
  background: url("https://indianaacademyofmassage.com/wp-content/uploads/2021/01/StudentsFirst.jpeg") no-repeat center center;
  background-size: cover;
  min-height: 500px; }

#student-resources .resources-text {
  background-color: #eee;
  padding: 80px 90px 30px 30px; }
  #student-resources .resources-text ul {
    margin-bottom: 45px; }

#page-title {
  min-height: 120px;
  background-color: #C9C5A2;
  color: white;
  display: flex;
  align-items: center; }
  #page-title h1 {
    font-weight: 800;
    text-transform: uppercase; }

#content .sidebar h2, #content .sidebar h4 {
  color: #000B3B; }

#content .sidebar hr {
  border: 2px solid #C9C5A2;
  width: 65%; }

#content .sidebar ul {
  padding-left: 0px;
  list-style: none;
  margin-bottom: 35px; }
  #content .sidebar ul li {
    line-height: 35px; }
    #content .sidebar ul li a {
      color: #000B3B; }
    #content .sidebar ul li a:hover {
      color: #C9C5A2;
      text-decoration: none; }
.side-bar-image{
  margin-top:50px;
}
#content h5 {
  margin-bottom: 35px; }

#content #accordion .card {
  margin-bottom: 15px; }
  #content #accordion .card .card-header {
    background-color: white !important;
    border: 0px; }
    #content #accordion .card .card-header h5 button {
      color: #000B3B;
      font-weight: 800; }

#content .contact h5 {
  margin-bottom: 35px; }

#map {
  height: 445px; }
  #map iframe {
    width: 100%; }

#cta {
  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url("../img/cta.jpg") no-repeat center center;
  background-size: cover;
  color: #000B3B; }
  #cta h2 {
    font-size: 45px;
    margin-bottom: 25px; }