/* Banner Section */
.page-title {
 text-align: center;
 font-size: 48px !important;
 color: #322f33;
 text-transform: uppercase;
 font-weight: 900;
 margin-bottom: 10px;
 padding-bottom: 5px;
 display: block;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle text shadow */
 border-bottom: 2px solid #99c7c6; /* Teal line */
 position: relative;
 line-height: 1.2;
 letter-spacing: 2px;
}

.page-title::after {
 content: "";
 display: block;
 width: 100%;
 height: 2px;
 background: linear-gradient(to right, #b87c9e, #99c7c6);
 margin: 10px auto 0; /* Add spacing above the line */
}

.page-title-background {
 background-color: #e7e4de;
 padding: 40px 40px;
 border-radius: 8px;
 text-align: center;
}

/* Subheading Styling */
.header-title {
 font-size: 20px;
 color: #322f33;
 font-weight: normal;
 margin-top: 10px;
 line-height: 1.4;
}

/* Header Title Styling */
.header-title {
 font-size: 18px; /* Slightly smaller for distinction */
 font-weight: normal; /* To differentiate from the main title */
 color: #322f33;
 margin-top: 10px; /* Adds space between the title and subheading */
 text-align: center;
 line-height: 1.4;
 padding: 0 20px; /* Add padding for better spacing in smaller screens */
}

/* Logo Container Styling */
.logo-container {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center-align items */
  margin: 0;
}

.as-they-grow-img {
  max-width: 150px;
  height: auto;
}

.logo-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 40px auto;
}

.logo-divider .line {
  flex: 1;
  height: 2px;
  background-color: #99c7c6; /* Teal */
}

.logo-container strong {
  margin-top: 10px; /* Add spacing between the image and text */
  font-size: 14px; /* Adjust font size */
  color: #322f33; /* Match text color with page theme */
  text-align: center;
}




/* Section Divider */
.section-divider {
 width: 80%;
 max-width: 800px;
 margin: 30px auto;
 border-top: 2px solid #e7e4de; /* Light tan */
 border-radius: 1px;
 height: 2px;
}

/* General Section Styling */
section {
 margin-bottom: 40px;
}

/* Availability Section */
.availability-section {
 padding: 40px 20px;
 text-align: center;
 margin-bottom: 40px;
 border-radius: 8px;
 background-color: #e7e4de; /* Tan background */
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.availability-section h2 {
 font-size: 32px;
 color: #322f33;
 font-weight: 700;
 margin-bottom: 10px;
}

.availability-section .section-divider {
 width: 60px;
 height: 2px;
 background-color: #99c7c6; /* Teal */
 margin: 10px auto 20px; /* Spacing around the divider */
}

.availability-section p {
 color: #322f33;
 text-align: center;
 margin-bottom: 30px;
 font-size: 18px;
 line-height: 1.5;
 font-weight: 400;
}

.availability-action {
 text-align: center;
 margin-top: 20px;
}

/* Button Styles */
.btn-primary {
 background-color: #f26741 !important; /* Orange */
 color: #ffffff !important; /* Light tan */
 padding: 12px 24px;
 border: none;
 border-radius: 8px;
 text-decoration: none !important;
 font-size: 18px;
 font-weight: 600;
 display: inline-block;
 text-align: center;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
 transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary:hover {
 background-color: #99c7c6 !important; /* Teal on hover */
 transform: translateY(-3px);
}


/* Program Details & How It Works */
.program-details, .how-it-works {
 /*background-color: #e7e4de; */
 padding: 40px 20px;
 margin-bottom: 40px;
 border-radius: 8px;
}

.content-title {
 font-size: 28px;
 font-weight: bold;
 color: #322f33;
 text-align: center;
 margin-bottom: 20px;
}

.content-body {
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
 align-items: center;
}

.info-text {
 flex: 1;
 color: #322f33;
 line-height: 1.6;
}

.info-image {
 flex: 1;
 text-align: center;
}

.info-image img {
 max-width: 100%;
 border-radius: 8px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.content-block {
 max-width: 800px;
 margin: 0 auto;
 text-align: left;
}

.content-title {
 font-size: 28px;
 font-weight: bold;
 color: #322f33;
 text-align: center;
 margin-bottom: 20px;
}

/* FAQ Section */
.faq-section {
 background-color: #e7e4de; /* Light tan background */
 padding: 40px 20px;
 margin-bottom: 40px;
 border-radius: 8px;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.faq-title {
 text-align: center;
 font-size: 28px;
 font-weight: bold;
 color: #322f33;
 margin-bottom: 20px;
}

.faq-item {
 margin-bottom: 15px;
 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.faq-question {
 font-weight: bold;
 cursor: pointer;
 padding: 15px;
 background-color: #e7e4de; /* Match section background */
 color: #322f33; /* Dark color for question text */
 border: none;
 width: 100%;
 text-align: left;
 border-radius: 8px;
 transition: background-color 0.3s ease, transform 0.2s ease;
}

.faq-question:hover {
 background-color: #f26741; /* Orange for hover */
 color: #ffffff; /* White text on hover */
}

.faq-answer {
 display: none;
 padding: 15px;
 color: #555;
 background-color: #ffffff; /* White for contrast */
 border-left: 4px solid #99c7c6; /* Teal accent for answers */
 border-radius: 4px;
 margin-top: 10px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.faq-answer p {
 margin: 0;
 color: #322f33;
 font-size: 16px;
 line-height: 1.5;
}

/* Active/Expanded State */
.faq-question.active {
 background-color: #99c7c6; /* Teal for active state */
 color: #ffffff; /* White text */
}

.faq-question.active + .faq-answer {
 display: block; /* Reveal answer */
 animation: slideDown 0.3s ease;
}

/* Smooth Slide Down Animation */
@keyframes slideDown {
 from {
 opacity: 0;
 transform: translateY(-10px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}


/* MEDIA QUERIES */
@media (max-width: 768px) {
 .page-title {
 font-size: 36px;
 }
 .img-responsive {
 max-width: 120px; /* Adjust logo size for smaller screens */
 }
}

/* Media Queries for Content Sections */

/* General adjustments for smaller screens */
@media (max-width: 768px) {

 /* Availability Section */
 .availability-section {
 padding: 20px 15px; /* Reduce padding for smaller screens */
 }

 .availability-section .content-title {
 font-size: 24px; /* Scale down the title font size */
 margin-bottom: 10px;
 }

 .availability-section p {
 font-size: 16px; /* Smaller font for paragraph */
 line-height: 1.4;
 text-align: center; /* Center-align the text */
 }

 .availability-action .btn-primary {
 width: 100%; /* Make button full-width */
 font-size: 16px;
 padding: 12px;
 }

 /* Program Details Section */
 .program-details {
 padding: 20px 15px; /* Reduce padding for smaller screens */
 }

 .program-details .content-body {
 display: block; /* Stack the image and text vertically */
 }

 .program-details .info-text {
 margin-bottom: 15px; /* Add spacing below the text block */
 }

 .program-details .info-image img {
 max-width: 100%; /* Ensure images are responsive */
 height: auto;
 border-radius: 8px;
 }

 /* How It Works Section */
 .how-it-works {
 padding: 20px 15px; /* Reduce padding for smaller screens */
 }

 .how-it-works .content-body {
 display: block; /* Stack the image and text vertically */
 }

 .how-it-works .info-text {
 margin-bottom: 15px; /* Add spacing below the text block */
 }

 .how-it-works .info-image img {
 max-width: 100%; /* Ensure images are responsive */
 height: auto;
 border-radius: 8px;
 }

 /* FAQ Section */
 .faq-section {
 padding: 20px 15px; /* Reduce padding */
 }

 .faq-title {
 font-size: 24px; /* Reduce title size */
 margin-bottom: 15px;
 text-align: center; /* Center-align the title */
 }

 .faq-item {
 margin-bottom: 15px; /* Adjust spacing between items */
 }

 .faq-question {
 font-size: 18px; /* Adjust font size for questions */
 padding: 10px; /* Adjust padding for better fit */
 }

 .faq-answer {
 padding: 10px; /* Reduce padding inside the answer */
 font-size: 16px;
 }

}