/* Start of Nav Bar */
.navbar{
  background-color: transparent;  
}
.container a{
  font-size: 30px;
  margin-left: 1px;
}
.container li{
font-size: 30px;
margin-right: 15px;
}
#nav img{
  height: 60px;
  width: 60px;
  margin-right: 20px;
  /* background-color:aquamarine; */
}
/* End of Nav Bar */
body{
  background: #B06767;
background: linear-gradient(0deg, rgba(176, 103, 103, 1) 0%, rgba(247, 236, 210, 1) 100%);
}

/* Start of cards section */
#rowBody .card{
    /* height: 200px; */
    /* margin-bottom: 30px; */
    margin-top: 50px;
    font-size: 20px;
    color: #F4F1E8;
    overflow: hidden;
    cursor: pointer;
    background-color: rgb(176, 103, 103);
    img{
    overflow: hidden;
    }
    .card-body{
      overflow: hidden;
      height: 100px;
    }
}

#rowBody .modal-header{
    background: #B06767;
background: linear-gradient(0deg, rgba(176, 103, 103, 1) 0%, rgba(247, 236, 210, 1) 100%);
    font-size: 30px;
}
#rowBody .modal-footer{
    background: #B06767;
background: linear-gradient(0deg, rgba(176, 103, 103, 1) 0%, rgba(247, 236, 210, 1) 100%);

}
#rowBody .modal-body{
  margin: 20px;
}

#rowBody .modal-body p{
  font-size: 20px;
  color: rgb(43, 115, 43);
  margin-top: 15px;
}
#rowBody .modal-body i{
  font-size: 20px;
  color: rgb(54, 100, 54);
}
#rowBody img{
height: 200px;
object-fit: cover;
}


/* End of cards section */

/* Start of loading */
#loading{
background: #B06767;
background: linear-gradient(0deg, rgba(176, 103, 103, 1) 0%, rgba(247, 236, 210, 1) 100%);    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
 }
    .loader {
    
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 6rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .loader:before,
  .loader:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    animation: pulsOut 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
  }
  .loader:before {
    width: 100%;
    padding-bottom: 100%;
    box-shadow: inset 0 0 0 1rem #fff;
    animation-name: pulsIn;
  }
  .loader:after {
    width: calc(100% - 2rem);
    padding-bottom: calc(100% - 2rem);
    box-shadow: 0 0 0 0 #fff;
  }

  @keyframes pulsIn {
    0% {
      box-shadow: inset 0 0 0 1rem #fff;
      opacity: 1;
    }
    50%, 100% {
      box-shadow: inset 0 0 0 0 #fff;
      opacity: 0;
    }
  }

  @keyframes pulsOut {
    0%, 50% {
      box-shadow: 0 0 0 0 #fff;
      opacity: 0;
    }
    100% {
      box-shadow: 0 0 0 1rem #fff;
      opacity: 1;
    }
  }
      

/* End of loading */

footer{
  margin-top: 100px;
}