/* General Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #21202f;
  background-color: #f2f2f2;
}

h2 {
  color: #c7bb51;
}

p {
  color: #959e39;
  font-size: 1.1em;
}

/* Header Section */
#header {
  position: relative; /* Allows precise positioning of child elements */
  height: 100vh; /* Full height of the viewport */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex; /* Use flexbox to center content */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

#header img {
  max-width: 200px; /* Adjust the size of the logo as needed */
  height: auto; /* Maintains the aspect ratio */
}

/* About Section */
#about {
  background-color: #f2f2f2;
  padding: 50px 20px;
  text-align: center; /* Center the content within the about section */
}

#about img {
  border-radius: 50%; /* Make the profile picture circular */
  /* border: 5px solid #dcdcaa; Removed the border */
  margin-bottom: 20px; /* Add some space below the image */
}

/* Gallery Section (Carousels) */
#gallery {
  background-color: #f9f9f9; /* Slightly different background for visual separation */
  padding: 50px 20px;
}

#carouselContainer {
  /* Styles for the container of all carousels if needed */
}

.carousel {
  background-color: #fff; /* Give each carousel a white background */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px; /* Space between carousels */
  overflow: hidden; /* Hide overflow for rounded corners */
}

.carousel-inner {
  /* No specific styling needed unless you want to constrain height */
}

.carousel-item img {
  width: 100%;
  height: auto;
  border-radius: 0; /* Remove border-radius from images within the carousel */
  object-fit: cover; /* Maintain aspect ratio and cover the container */
  /*max-height: 500px; /* Adjust as needed */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #21202f;
  border-radius: 50%; /* Make the control icons circular */
  padding: 10px;
}

.carousel-caption {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 15px;
  border-radius: 0 0 8px 8px; /* Match carousel bottom corners */
  bottom: 0; /* Stick caption to the bottom */
  left: 0;
  right: 0;
  text-align: center;
}

.carousel-caption h5 {
  color: #c7bb51; /* Use your primary color for the title */
  margin-bottom: 5px;
}

.carousel-caption p {
  color: #959e39; /* Use your secondary color for the description */
  font-size: 1em;
}

/* Contact Section */
#contact {
  background-color: #f2f2f2;
  padding: 50px 20px;
}

#contact h2 {
  text-align: center; /* Center the contact heading */
}

#contact .form-label {
  color: #21202f; /* Label color */
}

#contact .form-control {
  border: 1px solid #dcdcaa;
  background-color: #fff; /* Use white for form input background */
  color: #21202f;
  border-radius: 5px;
  padding: 10px;
}

#contact .btn-primary {
  background-color: #c7bb51;
  border-color: #959e39;
  color: #21202f;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

#contact .btn-primary:hover {
  background-color: #959e39;
  border-color: #c7bb51;
  color: #f2f2f2;
}