/* Custom container for our slide content */
.slide-content-container {
  width: 50%; /* Default width: half of normal */
  margin: 0 auto; /* Center it */
  padding: 20px;
  box-sizing: border-box; /* Make sure padding is included in the width */
}

/* Adjust width for medium screens (e.g., tablets) */
@media (max-width: 992px) {
  .slide-content-container {
    width: 70%;
  }
}

/* Adjust width for small screens (e.g., mobile devices) */
@media (max-width: 768px) {
  .slide-content-container {
    width: 90%;
  }
}

/* Slide Container (for overall component styling) */
.slide-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Link styling */
.slide-container a.more-link {
  color: #007bff;
  cursor: pointer;
  font-size: 16px;
  text-decoration: none;
}

.slide-container a.more-link:hover {
  text-decoration: underline;
}

/* First Hidden Content styling */
.slide-container .learn-more-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
  margin-top: 15px;
  width: 100%;
  box-sizing: border-box;
}

/* When first content is revealed */
.slide-container .learn-more-content.show {
  max-height: 3000px;
  opacity: 1;
}

/* Arrow Container styling */
.arrow-container {
  margin-top: 20px;
}

.arrow-container a {
  color: #007bff;
  cursor: pointer;
  font-size: 16px;
  text-decoration: none;
}

.arrow-container a:hover {
  text-decoration: underline;
}

/* Second Content styling using transitions */
.second-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
  margin-top: 20px;
  width: 100%;
}

/* When second content is revealed */
.second-content.show {
  max-height: 3000px;
  opacity: 1;
}

/* Third Content styling */
.third-content {
  display: none;
  margin-top: 20px;
  width: 100%;
}

/* When third content is revealed */
.third-content.show {
  display: block;
}

/* Optional padding for paragraphs */
.slide-container .learn-more-content p,
.second-content p,
.third-content p {
  margin: 0;
  padding: 10px 0 15px 0;
}

/* FAQ Container */
.faq-item {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

/* The question row with arrow icon on the right */
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 10px 20px;
  font-weight: 500;
  transition: background-color 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

/* Highlight background when open */
.faq-item.open .faq-question {
  background-color: #e3ecff;
}

/* FAQ Answer styling with transition */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  margin-bottom: 0;
  padding: 0px 20px;
  width: 100%;
  box-sizing: border-box;
}

/* When FAQ item is open */
.faq-item.open .faq-answer {
  max-height: 1000px;
  opacity: 1;
}

.faq-answer p {
  margin: 0;
  padding: 10px 0 15px 0;
}

/* Arrow Icon sizing */
.arrow-icon {
  font-size: 1.2rem;
}

/* FAQ section container tweaks */
.faq-container {
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
}

/* Responsive FAQ tweaks */
@media (max-width: 768px) {
  .faq-item {
    padding: 10px 15px;
  }
  .faq-question {
    font-size: 14px;
  }
}

/* Additional FAQ container using transitions */
/* Use !important to override any inline display:none */
#additional-faq {
  display: block !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}

#additional-faq.show {
  max-height: 2000px; /* Adjust as needed */
  opacity: 1;
}

/* Tutup button container styling using transitions */
/* Use !important to override any inline display:none */
#close-btn-wrapper {
  display: block !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
}

#close-btn-wrapper.show {
  max-height: 100px; /* Adjust value if needed */
  opacity: 1;
}

/* Remove extra margin and padding for buttons */
#more-link,
#close-btn {
  margin-top: 0;
  margin-bottom: 0;
}

/* Responsive adjustments for Additional FAQ */
@media (max-width: 768px) {
  #additional-faq,
  #close-btn-wrapper {
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* Set a fixed height on the section */
#section-contact {
  height: 400px; /* Fixed overall height */
  min-width: 320px; /* Minimum width to keep content readable */
  overflow: hidden; /* Hide any overflow if needed */
}

/* Ensure the row and its children fill the container height */
#section-contact .row,
#section-contact .h-100 {
  height: 100%;
}

/* Limit the map container's width */
#section-contact .col-lg-8 {
  max-width: 600px;
  margin: 0 auto; /* Center the map if desired */
}

/* Optional: for better responsiveness, stack columns on very small screens */
@media (max-width: 768px) {
  #section-contact {
    height: auto !important; /* biarkan tinggi menyesuaikan dengan konten */
    margin-bottom: 60px; /* sesuaikan nilai ini agar footer tidak menutupi */
  }
  #section-contact .row {
    flex-direction: column;
  }
  /* Adjust heights if necessary when stacking vertically */
  #section-contact .col-lg-8,
  #section-contact .col-lg-4 {
    height: auto;
  }
}

/* New CSS for the Contact Information Column */
.contact-info {
  /* Allow the column to use the full width provided by the grid */
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.contact-info-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-title {
  margin-bottom: 20px;
  font-size: 24px; /* Adjust as needed */
}

.contact-details {
  font-size: 16px;
  line-height: 1.7;
}

/* Ensure that any wrapping container (if used) has the same max-width as the map section */
/* For example, if both columns are inside a container with max-width: 900px: */
#section-contact .container {
  max-width: 900px;
  margin: 0 auto;
}

.page-section {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}