.body {
  color: #42032c;
}


.navbar {
  background-color: white !important;
  box-shadow: rgba(0, 0, 0, 0.45) 0px 15px 10px -20px;
}

.navbar-brand {
  color: #42032c;
}
.logo-span {
  border-bottom: 1px solid #9c5d23;
  color: #9c5d23;
}
.navbar li a {
  font-size: 18px;
  color: #42032c !important;
}
.navbar li a:hover {
  color: #9c5d23 !important;
}
.navbar-nav li {
  margin-right: 1rem;
}
.btn {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.1) 0px 4px 4px, rgba(0, 0, 0, 0.1) 0px 8px 8px,
    rgba(0, 0, 0, 0.1) 0px 16px 16px;
 
}

.hero {
  display: flex;
  flex-direction: row;
  padding-left:2rem;
  justify-content: center;
  align-items: center;
}
.content {
  padding: 20px;
  justify-content: center;
}
.content button {
  background-color: #9c5d23;

  color: white;
  /* margin-left: 30%; */
}
.content h2 {
  color: #9c5d23;
  margin-bottom: 20px;
}
.content p {
  width: 90%;
}
.hero img {
  padding: auto;
  margin: 20px;
  width: 90%;
}

.card{
  justify-content: center;
  align-items: center;
  height: max-content;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.1) 0px 4px 4px, rgba(0, 0, 0, 0.1) 0px 8px 8px,
    rgba(0, 0, 0, 0.1) 0px 16px 16px;
 
}

.card-container{
  height: auto;
}

.card-container .card h4{

  border-bottom: 1px solid  #9c5d23;
  margin: auto;
  width: fit-content;
  padding-bottom: 0.3rem;
  margin-bottom: 0rem;
}

.card img{
  height: 15rem;
}
.card .btn{
  background-color: #9c5d23;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.1) 0px 4px 4px, rgba(0, 0, 0, 0.1) 0px 8px 8px,
    rgba(0, 0, 0, 0.1) 0px 16px 16px; 
    color: white;
}

#about button{
   background-color: #9c5d23;
   color: white;
  margin-right: 43%;
  margin-left: 43%;
  width: max-content;
   margin-bottom: 3rem;
   
}

.about-content{
  width: 100%;
  margin: auto;
  justify-content: center;
  align-items: center;
}

.form-container{
  margin: auto;
  color: #9c5d23;
}
.form-container button{
  background-color: #9c5d23;
   color: white;
   margin-top: 2rem;
}
.form-control{
  border: 1px solid #9c5d23;
}

.footer a{
  color: white;
}

@media screen and (max-width: 780px) {
  .hero {
    display: flex;
    flex-direction: column-reverse;
  }
 
}