/* -------------------------------------------------background color to the entire website------------------------------------------------------------- */

/* Apply background color to the entire website */
html,
body {
  /* Dark background color */

  background-color: white;
  color: #fec536; /* Text color for better contrast */
  font-family: "Roboto", sans-serif; /* Default font */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  height: 100%; /* Ensure the background color covers full height */
  box-sizing: border-box; /* Ensure padding and border are included in width and height */
}

/* Apply the Lora font to the entire section */
.container {
  font-family: "Roboto", sans-serif;
}

/* Specific styling for headings and paragraphs */
.container h1,
.container h3,
.container p {
  font-family: "Graphik", sans-serif;
}

/* --------------------------------------------------------- banner (Laptop mobile view)----------------------------------------------------------------------- */

/* Inquiry Banner Section */
.inquiry-banner {
  width: 100%;
  height: 500px; /* Adjust height as per your requirement */
  background-image: url(../../../images/newimage/gallery/gallerybg.webp); /* Set your background image */
  background-size: cover;
  background-position: center;
  position: relative;
}


.banner-content {
  /* position: absolute; */
  bottom: 10px;
  left: 20px;
  z-index: 2;
}

.banner-title {
  color: white; /* Title text color */
  font-size: 60px; /* Adjust title size */
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  margin: 0px 0px 100px 35px; /* Default margin */
}

/* Mobile View */
@media (max-width: 768px) {
  .inquiry-banner {
    height: 200px; /* Adjust height for mobile view */
  }

  .banner-title {
    font-size: 30px; /* Adjust title size for mobile view */
    /* position: absolute; */
    top: 50%; /* Vertically center the title */
    left: 50%; /* Horizontally center the title */
    transform: translate(
      -50%,
      -160%
    ); /* Adjust positioning to truly center the title */
    margin: 0; /* Remove existing margin */
    text-align: center; /* Ensure the text is centered */
  }

  .banner-content {
    left: 50%; /* Horizontally center the banner content */
    transform: translateX(-50%); /* Adjust position to ensure it is centered */
  }
}

/* --------------------------------------------------- main image --------------------------------------------------------------- */

/* Gallery Section */
.gallery-img-1 {
  text-align: center;
  padding: 50px 10%;
}

/* Gallery Titles */
.gallery-title {
  margin-bottom: 10px;
  display: flex;
  align-items: center; /* Align image and title in one row */
  justify-content: center;
}

.main-title {
  font-size: 20px;
  color: #1b8836;
  font-family: "Roboto", sans-serif;
  margin-left: 10px; /* Space between image and title */
  margin-bottom: 0; /* Remove bottom margin for better alignment */
}

.sub-title {
  font-size: 30px;
  font-weight: 600;
  color: #2c5730;
  font-family: "Roboto", sans-serif;
  margin-bottom: 40px; /* Space between title and subtitle */
}

/* Title Icon Styling */
.title-icon {
  width: 25px; /* Size of the image */
  height: auto;
}

/* Gallery Images */
.gallery-images {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.gallery-img {
  width: 75%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 30px;
}

/* Additional Titles */
.extra-titles {
  margin-top: 20px; /* Add space between image and new titles */
}

.extra-title {
  font-size: 30px;
  font-weight: 600;
  color: #1b8836;
  font-family: "Roboto", sans-serif;
  margin-bottom: 10px;
}

.extra-subtitle {
  font-size: 18px;
  font-weight: 500;
  color: #2c5730;
  font-family: "Roboto", sans-serif;
}

/* Mobile View */
@media (max-width: 768px) {
  .main-title {
    font-size: 20px;
  }

  .sub-title {
    font-size: 20px;
  }

  .gallery-img {
    width: 110%; /* 2 images per row on mobile */
    margin-bottom: 20px;
  }

  .extra-title {
    font-size: 20px;
  }

  .extra-subtitle {
    font-size: 15px;
  }
}

/* ------------------------------------ set of 3 image ----------------------------------------------- */

/* Gallery Section */
.image-gallery-3 {
  text-align: center;
  padding: 50px 10%;
}

/* Gallery Images */
.gallery-images-3 {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.image-item-3 {
  text-align: center;
  width: 30%;
  transition: transform 0.3s, box-shadow 0.3s;
}

.gallery-img-3 {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.image-titles-3 {
  margin-top: 10px;
}

.image-title-3 {
  font-size: 30px;
  font-weight: 600;
  color: #1b8836;
  font-family: "Roboto", sans-serif;
  margin-bottom: 10px;
}

.image-subtitle-3 {
  font-size: 16px;
  color: #666;
}

/* Mobile View */
@media (max-width: 768px) {
  .gallery-images-3 {
    flex-direction: column;
    align-items: center;
  }

  .image-item-3 {
    width: 100%; /* 1 image per row on mobile */
    margin-bottom: 30px;
  }

  .image-title-3 {
    font-size: 20px;
    padding: 0px 10px;
  }

  .image-subtitle-3 {
    font-size: 15px;
  }
}

/* ------------------------------------ set of 2 image ----------------------------------------------- */

/* Gallery Section */
.image-gallery-4 {
  text-align: center;
  padding: 50px 10%;
}

/* Gallery Images */
.gallery-images-4 {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.image-item-4 {
  text-align: center;
  width: 30%;
  transition: transform 0.3s, box-shadow 0.3s;
}

.gallery-img-4 {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.image-titles-4 {
  margin-top: 10px;
}

.image-title-4 {
  font-size: 30px;
  font-weight: 600;
  color: #1b8836;
  font-family: "Roboto", sans-serif;
  padding: 0px 40px;
  margin-bottom: 10px;
}

.image-subtitle-4 {
  font-size: 16px;
  color: #666;
}

/* Mobile View */
@media (max-width: 768px) {
  .gallery-images-4 {
    flex-direction: column;
    align-items: center;
  }

  .image-item-4 {
    width: 105%; /* 1 image per row on mobile */
    margin-bottom: 30px;
  }

  .image-title-4 {
    font-size: 20px;
  }

  .image-subtitle-4 {
    font-size: 15px;
  }
}