body {
  background-color: #f5f5f5;
}

/* nav bar styles */

nav {
  position: fixed;
  z-index: 10;
}

.fixed-nav {
  position: fixed;
  width: 100vw;
}

.nav-container {
  padding-right: 6rem;
  padding-left: 6rem;
}

.mobile-view{
  display: none;
}

@media (max-width: 992px) {
  .nav-container {
    padding-right: 2rem;
    padding-left: 2rem;
  }

  .mobile-view{
    display: block;
  }

  .desktop-view{
    display: none;
  }
}

.main-navbar {
  justify-content: flex-end;
}

.bg-green {
  background-color: #008066;
}

.nav-style {
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
}

.main-navbar .nav-style .nav-link {
  color: white;
}

.main-navbar .nav-style .nav-link:hover {
  color: wheat;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
  color: white;
  font-weight: 700;
}

.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-brand img {
  height: 4rem;
}

.fixed-nav {
  top: 0;
}

/* .logo-title{
  font-size: 1rem;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: white;
  display: inline-block;
} */

/*Home page slider styles */

.slider-height {
  height: 30rem;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 767.98px) {
  .slider-height {
    height: 50vh;
    width: 100%;
    object-fit: cover;
  }
}

.owl-carousel .item{
  position: relative;
}

.item-content{
  position: absolute;
  bottom: 25%;
  left: 10%;
}

.item-content h2{
  color: white;
  font-size: 1.5rem;
}

.item-content button{
  background: #008066;
  color: white;
  width: 100%;
}

.item-content button:hover{
  background: #008066;
  color: wheat;
  width: 100%;
}

.item-content button a:hover{
  background: #008066;
  color: wheat;
  width: 100%;
}


@media (max-width: 767.98px) {
  .item-content h2{
    font-size: 1rem;
  }
}

/* General styles */

section {
  margin-top: 2rem;
}

.first-section {
  margin-top: 2rem;
}

h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #555555;
}

h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 2.25rem;
  color: #555555;
  text-align: center;
  margin-bottom: 1.5rem;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #555555;
}

h5 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #555555;
}

hr {
  height: 0.25rem !important;
  width: 8rem;
  color: #008066;
  opacity: 100%;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

p {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  color: #555555;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-top: 1rem;
}

.row {
  margin: 0;
}

h6 {
  color: #008066;
}

h6:hover {
  color: #008066;
}

@media (max-width: 992px) {
  h4 {
    font-size: 1rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h5 {
    font-size: 1rem;
  }
  
  p {
    font-size: 0.75rem;
  }
}

/* Home page About Section styles */

.about-section .row {
  align-items: center;
  margin-left: 6rem;
  margin-right: 0;
}

.about-img-container{
  text-align: center;
}

.about-img {
  width: 80%;
}

.mobile-img {
  display: none;
}

@media (max-width: 992px) {
  section {
    margin-top: 4rem;
  }
  .about-section .row {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .about-section img {
    width: 90%;
  }

  .about-section .mobile-img {
    display: block;
    width: 60%;
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: center;
  }

  .mobile-img {
    display: block;
    width: 60%;
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: center;
  }

  .desktop-img {
    display: none;
  }
}

/* Home page activity section styles */

.activity-section .row {
  align-items: center;
  margin: 0;
}

.activity-section .col-card {
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
  margin-left: 2rem;
  background-color: white;
  border-radius: 0.5rem;
  text-align: center;
  height: 17.5rem;
}

.activity-section .col-card img {
  text-align: center;
  padding-top: 1rem;
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.activity-section .col-card h4 {
  margin-top: 1rem;
}

.activity-slider .item {
  background: white;
  margin-left: 3%;
  border-radius: 0.5rem;
  text-align: center;
  /* margin-right: 3%; */
  width: 90%;
  height: 16rem;
}

.activity-section .owl-carousel .owl-item img {
  width: 80% !important;
  text-align: center;
  height: 70%;
  object-fit: contain;
  margin-left: 10%;
  padding-top: 10%;
}

.activity-slider .item h4 {
  margin-top: 5%;
  font-size: 1.25rem;
  color: #444444;
}

.col-arrow {
  width: 1%;
  margin: 0 3rem;
}

@media (max-width: 767.98px) {
  .activity-section .col-card {
    margin: 1rem;
    width: 10rem;
    height: 10rem;
  }

  .col-arrow {
    display: none;
  }

  .activity-section .col-card img {
    text-align: center;
    padding-top: 0.5rem;
    width: 7rem;
    height: 7rem;
    object-fit: contain;
  }

  .activity-section .col-card h4 {
    margin-top: 0.5rem;
    font-size: 0.75rem;
  }
}

/* Home page workshop section styles */

.workshop-section {
  background-color: #008066;
  padding-top: 3rem;
}

.workshop-section .row {
  align-items: center;
}

.workshop-img {
  text-align: center;
}

.workshop-section h2 {
  color: white;
}

.workshop-section h4 {
  color: white;
}

.workshop-section hr {
  color: white;
}

.workshop-section p {
  color: white;
}

.workshop-content {
  padding-right: 6rem;
}

.workshop-section button {
  background-color: white;
  color: #008066;
  width: 100%;
}

.workshop-section button a:hover {
  color: #555555;
}

@media (max-width: 992px) {
  .workshop-content {
    margin-top: 2rem;
    padding-right: 2rem;
    padding-left: 2rem;
    padding-bottom: 2rem;
  }

  .workshop-img{
    display: none;
  }
}

/* Home page artist section styles */

.artist-section .row {
  justify-content: center;
}

.artist-section .card {
  margin: 0 1rem;
  position: relative;
  width: 20rem;
  margin-top: 1rem;
}

.artist-section .card img {
  height: 19rem;
  object-fit: cover;
  margin-top: 0.75rem;
}

.artist-section .name {
  position: absolute;
  padding: 0.5rem 0;
  background-color: #008066;
  top: 18.2rem;
  left: 10%;
  width: 80%;
  height: 3rem;
  text-align: center;
  border-radius: 0.5rem;
}

.artist-section .card .card-body {
  margin-top: 2rem;
}

.artist-section .card .card-body p {
  font-weight: 300;
  font-size: 0.75rem;
}

.artist-section .name h2 {
  color: white;
  font-size: 1.5rem;
}

@media (max-width: 767.98px) {
  .artist-section .card {
    margin: 1rem 1rem;
  }
}

.green-btn {
  background: #008066;
  color: white;
  width: 10rem;
  height: 2.5rem;
  margin-top: 3rem;
}

.green-btn:hover{
  color: wheat;
}

.green-btn p {
  color: white;
}

/* footer section styles */

footer {
  background-color: #171717;
  margin-top: 7rem;
  padding-top: 3rem;
}

footer h4 {
  color: white;
  font-weight: 700;
  margin-bottom: 2rem;
  font-size: 1.2rem;
}

footer p {
  color: white;
  font-size: 1rem;
  font-weight: 300;
}

footer a {
  color: white;
  font-size: 1rem;
  font-weight: 300;
}

footer a:hover {
  color: #008066;
}
.footer-logo{
  width: 50%;
  margin-bottom: 2rem;
}

.socialmedia{
  width: 2.5rem;
}

.last-line{
  margin-bottom: 3rem;
}

.download-app{
  width: 100%;
  padding-left: 0;
}
/* sign in & sign up page styles */

.sign-in-img {
  height: 100vh;
  width: 100%;
  object-fit: cover;
}

.sign-row {
  align-items: center;
}

.form-signin {
  padding: 0 2.5rem;
}

/* .sign-row img{
    margin-bottom: 2.5rem;
} */

.form-floating {
  margin-top: 1.5rem;
}

.passline {
  margin-top: 0.75rem;
  margin-bottom: 2rem;
  text-align: left;
}

.sign-btn {
  background-color: #008066;
  margin-bottom: 0 !important;
}

.sign-btn:hover {
  background-color: #005847;
}

.passline a:hover {
  color: #008066;
}

.align-left {
  text-align: left;
}

.sign-row .form-check{
  margin-top: 0.25rem;
}

.form-check-label {
  color: #555555;
  font-size: 0.9rem;
}

.sign-up-btn {
  background-color: #008066;
  margin-top: 2rem;
}

.sign-up-btn:hover {
  background-color: #005847;
}

.sign-up-btn a:hover {
  color: white;
}

/* about us page styles */

.mek-section .row {
  align-items: center;
  margin-left: 6rem;
  margin-right: 6rem;
}

.mek-full-section{
  margin-top: 4rem;
}

.section-bg{
  text-align: center;
  /* background-color: rgba(0, 128, 102, 0.3);
  background-image: url(../imgs/mek-img.jpg); */
  background:linear-gradient(to top, rgba(0,128,102,0.7), rgba(0,128,102,0.7)), url("../imgs/mek-img.jpg") left 60% top 50%/cover no-repeat;
  padding: 8rem 2rem;
}

.section-bg h4{
  color: white;
}

.section-bg h2{
  color: white;
}

.section-bg p{
  color: white;
}

.section-bg button{
  background: white;
  color: #008066;
}

@media (max-width: 767.98px) {
  .mek-section .row {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .mek-section img {
    width: 80%;
    margin: 2.5rem 0;
    text-align: center;
  }
}

/* Library page styles */

/* library page library section */

.library-section .row {
  /* margin-left: 6rem;
  margin-right: 6rem; */
  align-items: center;
}

.library-img {
  width: 100%;
}

/* library page activity section */

.activity-section .activity-card {
  height: 23.5rem;
  margin-top: 2rem;
}

.activity-section .activity-card img {
  height: 80%;
  width: 80%;
}

/* library page post section */

.post-img {
  border-radius: 50%;
  height: 6rem;
  width: 6rem;
  object-fit: cover;
}

.post-img-container {
  height: 6rem;
  width: 6rem;
}

.post-name p {
  margin-bottom: 0;
}

.post-title {
  text-align: center;
}

.post-content {
  text-align: center;
}

.post-title h4 {
  font-weight: 700;
}

.post-container {
  margin-top: 2.5rem;
}

.post-col {
  background-color: white;
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.post-date {
  margin-left: 2.5rem;
}

.post-date p {
  text-align: end;
}

.full-btn {
  width: 100%;
  background-color: #008066;
  color: white;
}

.full-btn:hover {
  color: wheat;
}

.post-container {
  align-items: center;
}

.post-send button {
  margin-top: 1rem;
}

@media (max-width: 767.98px) {
  .library-section .row {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .library-section img {
    width: 90%;
  }

  .activity-section .activity-card {
    height: 10rem;
    margin-top: 1rem;
  }

  .activity-section .activity-card img {
    height: 7rem;
    width: 7rem;
  }

  .post-container .row {
    justify-content: center;
    text-align: center;
    margin-top: 1rem;
  }

  .post-date {
    margin-left: 0;
  }

  .post-date p {
    text-align: center;
  }
}

/* artists page styles */

.artist-section .card-artist {
  margin: 0 1rem 1rem 0;
}

.artist-section .card-artist .card-img-top {
  height: 14rem;
}

.artist-section .card-artist .card-body {
  margin-top: 1rem;
}

.artist-section .card-artist .name {
  top: 13rem;
  left: 10%;
  width: 80%;
  height: 2.5rem;
}

.artist-section .card-artist .name h2 {
  font-size: 1rem;
  margin-top: 0.3rem;
}

.pagination-nav {
  position: static;
  z-index: 2;
}

.page-link {
  color: #008066;
}

.page-link:hover {
  color: #005847;
}

.filter {
  background-color: white;
  padding-left: 2rem;
  padding-right: 6rem;
  padding-bottom: 1rem;
  border-radius: 0 0 0 0.5rem;
  padding-top: 8rem;
  /* box-shadow: -2px 2px 2px 2px rgba(0, 0, 0, 0.1); */
  border: rgba(0, 0, 0, 0.1) solid 1px;
}

#slider-div {
  display: flex;
  flex-direction: row;
  margin-top: 30px;
}

#slider-div > div {
  margin: 8px;
}

.slider-label {
  position: absolute;
  background-color: #eee;
  padding: 4px;
  font-size: 0.75rem;
}

#slider-max-label {
  top: 340px !important;
}

#slider-min-label {
  top: 340px !important;
}

.no-margin-section {
  margin-top: 0;
  padding-top: 0;
}

.no-margin-section .container {
  margin-right: 0;
  padding-right: 0;
}

.no-margin-section .col-lg-9 {
  padding-top: 8rem;
}

.no-margin-section .col-lg-8 {
  padding-top: 8rem;
}

.filter-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.filter-subtitle {
  font-weight: 700;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.filter button {
  background-color: #008066;
  color: white;
  width: 100%;
  margin: 2rem auto;
}

.filter button:hover {
  color: wheat;
}

.filter button a:hover {
  color: wheat;
}

.age-input {
  display: none;
}

.form-check-inline{
  margin: 0;
}

@media (max-width: 767.98px) {
  #slider-outer-div {
    display: none;
  }

  .card-artist {
    width: 90% !important;
  }

  .filter {
    padding-top: 1rem;
    box-shadow: none;
    border-radius: 0;
    margin: 1rem 0;
  }

  .no-margin-section .container {
    padding: 0;
  }

  .age-input {
    display: flex;
  }

  .age-input input {
    width: 4rem;
  }
}

/* workshop page styles */

.workshop-banner {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}

.workshop-banner img {
  text-align: center;
  width: 95%;
}

.workshop-banner-text {
  position: absolute;
  top: 70%;
  left: 10%;
}

.workshop-banner-text h4 {
  color: white;
}

.workshop-banner-text button {
  background-color: white;
  color: #008066;
  width: 15rem;
}

@media (max-width: 767.98px) {
  .workshop-banner {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    height: 15rem;
  }

  .workshop-banner img {
    text-align: center;
    width: 95%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
  }

  .workshop-banner-text {
    position: absolute;
    top: 60%;
    left: 15%;
  }
}

.festival-banner-text {
  position: absolute;
  top: 70%;
  left: 55%;
}

.festival-banner-text h4 {
  color: white;
}

.filter .fa-calendar-alt {
  color: #008066;
  cursor: pointer;
  font-size: 1rem;
}

@media (max-width:1200px) and (min-width: 993px) {
  .festival-banner-text {
    position: absolute;
    top: 65%;
    left: 50%;
  }
}

@media (max-width: 767.98px) and (min-width: 525px) {
  .festival-banner-text {
    position: absolute;
    top: 60%;
    left: 42%;
  }
}

@media (max-width: 524px) {
  .festival-banner-text {
    position: absolute;
    top: 60%;
    left: 16%;
  }
}

.festival-banner-text button {
  background-color: white;
  color: #008066;
  width: 15rem;
}

.from-date-picker p{
  margin-bottom: 0.5rem;
}

.to-date-picker p{
  margin-bottom: 0.5rem;
}

.from-date-picker{
  padding-left: 0;
}

.to-date-picker{
  padding-left: 0;
}

.reservation-section {
  margin-left: 3rem;
  margin-right: 3rem;
}

.reservation-section .col-lg-6 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.reservation-section img {
  width: 100%;
  height: 50%;
  border-radius: 1rem;
  object-fit: cover;
}

.reservation-section button {
  width: 100%;
}

.reservation-section button a {
  color: white;
}

.reservation-section button a:hover {
  color: wheat;
}

@media (max-width: 767.98px) {
  .reservation-section {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .reservation-section .col-lg-6 {
    padding-left: 0rem;
    padding-right: 0rem;
    margin-bottom: 3rem;
  }
}

.library-card {
  padding: 1rem;
  margin-bottom: 1rem;
}

.library-card h4 {
  font-weight: 700;
  font-size: 1.5rem;
}

.library-card-btn {
  text-align: end;
}

.library-card-btn button {
  border: none;
  text-decoration: none;
  background-color: #008066;
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
}

.library-card-btn button a:hover {
  color: wheat;
}

.card-calendar p {
  margin-bottom: 0.5rem;
}

.card-activity {
  margin-top: 1rem;
}

.card-activity p {
  margin-bottom: 0.5rem;
}

.card-activity strong {
  color: #008066;
}

.card-date {
  text-align: end;
}

.location-btn {
  width: 100%;
  color: white;
}

.location-btn:hover {
  width: 100%;
  color: wheat;
  background-color: #005847;
}

.input-label {
  font-family: "Montserrat", sans-serif;
  margin-bottom: 0.5rem;
}

.form-control {
  height: 3rem;
  margin-bottom: 1rem;
}

.form-group textarea {
  height: 10rem;
}

.form-btn {
  width: 20rem;
  height: 3rem;
  text-align: center;
  float: right;
  font-family: "Montserrat", sans-serif;
  background-color: #008066;
  border-color: #008066;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.form-btn:hover {
  background-color: #005847;
  border-color: #005847;
}

.festival-banner-image {
  width: 100%;
  height: 20rem;
  object-fit: cover;
}

.festival-banner {
  position: relative;
}

.festival-banner-title {
  position: absolute;
  padding: 0.5rem 0;
  background-color: #008066;
  top: 93%;
  left: 10%;
  width: 80%;
  height: 3rem;
  text-align: center;
  border-radius: 0.5rem;
}

.festival-banner-title h2 {
  color: white;
  font-size: 1.5rem;
  padding-top: 0.25rem;
}

.festival-calendar {
  position: relative;
  padding: 0;
}

.calendar-data {
  position: absolute;
  top: 10%;
  left: 22%;
}

.calendar-data p {
  text-align: center;
  color: white;
}

.calendar-data p strong {
  color: #008066;
  font-size: 2rem;
  margin-top: 0.2rem;
}

.festival-date h4 {
  font-size: 1.2rem;
}

.event-section {
  margin-top: 5rem;
}

.event-section i {
  color: #008066;
  margin-right: 1rem;
}
.festival-calendar-container {
  align-items: center;
  margin-bottom: 2rem;
}

.icon-text {
  font-size: 3rem;
}

.event-btn {
  background-color: #008066;
  color: white;
  width: 100%;
}

.event-btn:hover {
  background-color: #005847;
  color: white;
  width: 100%;
}

@media (min-width: 992px) {
  .right-col {
    width: 30%;
  }
}

.right-col {
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin-bottom: 1rem;
  margin-right: 1rem;
}

.event-section .col-lg-8 {
  padding: 0;
}

.event-section .col-lg-6 {
  padding: 0 1rem;
}

.event-section .col-lg-6 img {
  margin-bottom: 1rem;
}

.event-text {
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
  padding: 1rem;
}

.event-section img {
  border-radius: 10px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.artist-page {
  margin-top: 0;
}

.artist-banner-image {
  width: 100%;
  height: 18rem;
  object-fit: cover;
}

.artist-details {
  background: white;
  position: relative;
  padding-top: 8rem;
  padding-left: 2rem;
  border-radius: 0 0 2rem 0;
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1);
}

.artist-details h4 {
  text-align: center;
  color: #008066;
  font-size: 2rem;
  font-weight: 700;
}

.artist-img {
  width: 14rem;
  height: 14rem;
  position: absolute;
  top: -24%;
  left: 22%;
}

.artist-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: white solid 3px;
}

.artist-content {
  text-align: center;
}

.artist-details i {
  color: #008066;
  margin-right: 1rem;
}

.artist-details .icon-text {
  text-align: center;
}

.art-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.art-img {
  height: 16rem;
  text-align: center;
  margin: 1rem 0;
  position: relative;
}

.art-img h4 {
  position: absolute;
  margin: 0;
  padding: 0;
  padding-top: 8%;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1)
  );
  width: 94%;
  height: 30%;
  bottom: 0;
  left: 3%;
  border-radius: 0 0 1rem 1rem;
  font-weight: 700;
  color: white;
}

.section-img {
  width: 94%;
  margin-bottom: 1rem;
}

.fairytale-section .card-artist .card-img-top {
  height: 23rem;
}

.fairytale-section .card-artist .name {
  top: 22.5rem;
}

@media (max-width: 767.98px) {
  .suggest-section {
    margin-top: 8rem;
  }
}

.profile-section {
  background: white;
  border-radius: 1rem;
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.profile-section .card-artist .card-img-top {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.profile-section {
  background: white;
  border-radius: 1rem;
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.profile-section .card-artist {
  padding: 0;
  margin: 0 1rem 2rem 0;
}

.profile-section .card-artist .name {
  top: 90%;
}

.owl-carousel .nav-btn {
  height: 50px;
  position: absolute;
  width: 50px;
  cursor: pointer;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled {
  pointer-events: none;
  opacity: 0.2;
}
.owl-carousel .prev-slide {
  left: 30px;
}
.owl-carousel .next-slide {
  right: 30px;
}
.owl-carousel .prev-slide:hover {
  background-position: 0px -53px;
}
.owl-carousel .next-slide:hover {
  background-position: -24px -53px;
}
.owl-carousel.activity-slider .owl-nav.disabled {
  display: block !important;
}
.owl-carousel.activity-slider .prev-slide {
  left: -50px;
  top: 102px;
}
.owl-carousel.activity-slider .next-slide {
  right: -50px;
  top: 102px;
}

.slider.slider-horizontal {
  max-width: 100%;
}

.simplepicker-wrapper.active {
  z-index: 3;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.simplepicker-date-section {
  text-align: center;
  background-color: #008066;
  color: #fff;
}

.simplepicker-calender tbody .active:after,
.simplepicker-calender tbody td:active:after {
  background-color: #008066;
}

.simplepicker-day-header {
  background-color: #005847;
}

.simplepicker-btn {
  border-color: #008066;
  color: #008066;
}

.simplepicker-btn:active,
.simplepicker-btn:hover {
  color: #fff;
  background-color: #008066;
}

.simplepicker-btn:active,
.simplepicker-btn:hover {
  color: #fff;
  background-color: #008066;
}

/* start Calendar table styles */
#calendar > div.jcalendar-container > div > div.jcalendar-table > table {
  border-radius: 20px !important;
  color: #008066;
  width: 350px !important;
}
#calendar
  > div.jcalendar-container
  > div
  > div.jcalendar-table
  > table
  > tbody
  > tr:nth-child(n)
  > td.jcalendar-set-day.jcalendar-selected {
  font-weight: bold;
  background-color: #008066;
  color: #fff;
  border-radius: 5px;
}
#calendar
  > div.jcalendar-container
  > div
  > div.jcalendar-table
  > table
  > tbody
  > tr:nth-child(n)
  > td:nth-child(n) {
  width: 50px !important;
}
.time-div{
  background: white;
  margin-right: 3.5rem;
  height: 32%;
  border-radius: 1rem;
  padding-top: 1.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.time-div label {
  color: #008066;
  font-weight: 400;
}
.time-div input[type="time"] {
  color: white;
  font-weight: 500;
}
.time-div input[type="time"]::-webkit-calendar-picker-indicator{
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    color: white;
}
.time-col input{
  height: 3rem;
  border: #008066 solid 1px;
  border-radius: 2.5rem;
  font-size: 1rem;
  background-color: #008066;
  color: white;
}
.time-col input:focus-visible{
  outline: wheat solid 2px;
}


/* End Calendar table style */

.reserve-option {
  height: 7rem;
  position: relative;
  cursor: pointer;
}

.reserve-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.reserve-option img:active {
  border: 2px solid #ff0000;
}

.reserve-option img:hover {
  border: 2px solid #008066;
}

.reserve-option img:focus {
  border: 2px solid #008066;
}

.checked-border {
  border: 2px solid #008066;
}

.reserve-title {
  position: absolute;
  width: 50%;
  left: 25%;
  height: 40%;
  top: 30%;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  vertical-align: middle;
  border-radius: 5px;
}

.reserve-title label {
  font-weight: 700;
  margin-top: 0.5rem;
  color: #008066;
  cursor: pointer;
}

#radio-toolbar input[type="radio"] {
  display: none;
}

.input-info {
  padding: 2.5rem;
  margin-top: 1rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.reserve-subtitle {
  font-weight: 500;
  margin: 2.5rem 0 0 1rem;
}

.payment-info {
  margin-top: 1rem;
}

.payment-info-Credit {
  padding: 2.5rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.payment-info .form-check {
  background: #008066;
  border-radius: 5px;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  padding: 1rem 4rem;
}

.payment-info .form-check .form-check-label {
  color: white;
}

.form-check-input:checked {
  background-color: #008066;
  border-color: white;
}

.payment-info .btn {
  width: 100%;
  color: white;
  font-weight: 500;
  margin-top: 1rem;
}

.payment-info .btn:hover{
  color: wheat;
}

.reserve-confirm {
  height: 24rem;
  background: #008066;
  border-radius: 10px;
  padding: 0;
  margin-right: 1.5rem;
}

.reserve-confirm img {
  height: 13rem;
  width: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.reserve-confirm h2 {
  color: white;
  margin-top: 1rem;
  margin-bottom: 2rem;
  margin-left: 1rem;
  font-size: 1.5rem;
}

.reserve-confirm p {
  color: white;
}

.reserve-confirm h4 {
  color: #ebcd37;
  font-weight: 600;
}

.reserve-confirm .col {
  margin-left: 1rem;
  margin-right: 1rem;
}

.reserve-confirm-date {
  text-align: end;
}

.data-card .row {
  padding-left: 0;
}

.data-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin-bottom: 1rem;
}

.reserve-btns .btn {
  width: 100%;
  margin-top: 0;
  margin-right: 1rem;
  color: white;
}

.reserve-btns .btn {
  color: wheat;
}

.bk-btn {
  background: #555555;
}

@media (min-width: 768px) {
  .reserve-confirm {
    width: 48%;
  }
}

.reserve-subtitle-content {
  font-weight: 500;
  margin: 2.5rem 0 1rem 1rem;
}

.search-container {
  padding: 1rem;
}

.search-container .form-control {
  width: 75%;
  display: inline-block;
  margin-bottom: 0;
}

.search-container .btn-outline-success {
  padding: 0.75rem;
  vertical-align: initial;
}

/* footer .row {
  padding-bottom: 4rem;
} */

footer .row .col-lg-6 {
  padding-bottom: 2.5rem;
}

footer .row .col-lg-3 {
  padding-bottom: 2.5rem;
}

.profile-img {
  top: -10%;
}

@media (max-width: 767.98px) {
  .profile-img {
    top: -25%;
    width: 50%;
    height: 50%;
    left: 25%;
  }
}

.contact-section i {
  color: #008066;
  margin-right: 1rem;
}

.contact-section p {
  font-size: 1rem;
  margin-top: 2rem;
  font-weight: 300;
}