/* Footer styling */



footer {
  display: flex;
  justify-content: space-between; /* Space items horizontally */
  align-items: center; /* Align items vertically */
  padding: 50px;
  list-style-type: none; /* Remove list bullets */
}

/* Styling for text within the footer */
footer p {
  text-align: start; /* Text alignment */
  font-size: 12px; /* Font size */
}

/* Styling for Instagram icon */
.fa-instagram {
  color: rgba(94, 94, 94, 0.9); /* Icon color */
  transition: 1s;;
}

/* Styling for all icon elements within the footer */
footer .fa {
  padding: 20px 80px 20px 0; /* Padding around icons */
  font-size: 30px; /* Font size */
  text-align: center;
  text-decoration: none;
  margin: 5px 2px; /* Margin around icons */
  font-size: 2rem; /* Font size (again) */
}

/* Hover effect for icons */
.fa:hover {
  opacity: 0.7; /* Reduce opacity on hover */
  font-size: 40px;
}


.fa-chevron-right::before {
  content: '';
  height: 200px;
}


  /* Carousel section */
/* Carousel section */
.carousel {
  position: relative;
  background: rgba(191,156,137,0.5);
  width: 100%;
  max-width: 100%;
  max-height: 100vh;
  overflow: hidden;
  margin-top: 100px;
  margin-bottom: 100px;
}

@media (max-width: 900px) {
  .carousel {
    max-height: 1200px;

  }
}

.carousel-container {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease-in-out;
  height: 100%;
  
}

.carousel-slide {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  opacity: 0.8;
  transition: opacity 0.5s;
  min-width: 100%;
  max-width: 100%;
}

@media (min-width: 1000px) {
  .carousel-slide {
    border-top: 1px solid #4d4d4d48;
    border-bottom: 1px solid #4d4d4d48;
  padding-top: 50px;
  padding-bottom: 50px;
  }
}

@media (max-width: 900px) {
  .carousel-slide {
    opacity: 1;

  }
}

.carousel-slide:hover {
  opacity: 1;
}

.carousel li {
  list-style-type: none;;
}

.carousel-image {
  flex: 1; /* Image takes up half the slide */
}

.carousel-image img {
  max-width: 100%;
  height: 700px;
  object-fit: cover;
}

@media (max-width: 1000px) {
  .carousel-image img {
  height: 950px;

  }

  .workshop-left button {
    display: none;
  }
}

.carousel-text {
  flex: 1; /* Text takes up half the slide */
  padding: 40px; /* Add some spacing */
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: space-between;
  
}

.carousel-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  font-size: 20rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carousel-prev,
.carousel-next {
  cursor: pointer;
  font-size: 30px;
  background-color: rgba(245, 244, 244, 0.4);
  color: #4d4d4d;
}

.fa {
  font-size: 50px !important;

}

@media screen and (max-width: 1000px){
  .carousel-prev,
  .carousel-next {
    font-size: 70px;
  }


}


/* Hide arrows when not hovered */
.carousel-controls:hover .carousel-prev,
.carousel-controls:hover .carousel-next {
  background-color: rgba(245, 244, 244, 0.5);

}

/* Add hover effect on arrows */
.carousel-prev:hover,
.carousel-next:hover {
  background-color: #4d4d4d42;
  
}


@media (max-width: 1000px) {
  .carousel-slide {
    flex-direction: column; /* Stack image and text on small screens */
  }


}


#retreats-contact {
  width: 100%;
  padding: 50px;
  box-sizing: border-box;
  color: #4d4d4d;
}

#retreats-contact h2 {
  padding-left: 0px;
}

#contact-form {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#contact-form label {
  margin-bottom: 5px;
  
}

#contact-form input, #contact-form textarea {
  margin-bottom: 20px;
  padding: 10px;
  border-bottom: 1px solid #4d4d4d48;
  border-top: none;
  border-right: none;
  border-left: none;
  border-radius: 5px;
  background-color: none;

}

#contact-form button {
  padding: 10px 20px;
  background-color: #4d4d4d;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
}

#contact-form button:hover {
  background-color: rgba(191,156,137,0.8);
}