/* Basic Reset and Body Styles (keep existing) */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #ffffff;
    color: #333;
}

ul {
    list-style-type: disc;
          list-style-position: inside;
}

/* --- Header Styles --- */
.main-header {
    background-color: #ffffff;
    color: #000000;
    padding: 0px 0px; /* Add some horizontal padding */
    padding-bottom: 20px;
}

.topbar{
    background-color: #10375D;
    height: 10px;
    margin-bottom: 20px;
}

.header-content {
    display: flex; /* Makes items arrange in a row */
    justify-content: space-between; /* Pushes items to the ends with space between */
    align-items: center; /* Vertically aligns items in the middle */
    max-width: 70%; /* Limit header width for better readability */
    margin: 0 auto; /* Center the header content */
     
}

/* Navigation Styles (left side) */
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0; /* Remove default margin */
}

.main-nav ul li {
    display: inline-block; /* Use inline-block for better vertical alignment than just inline */
    margin-right: 20px; /* Space between nav items */
    color: #10375D;

text-align: center;
font-family: Quicksand;
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: normal;
overflow: hidden;
}

.main-nav ul li:last-child {
    margin-right: 0; /* No margin on the last item */
}

.main-nav ul li a {
    color: #000000;
    text-decoration: none;
    font-weight: lighter;
    padding: 5px 0; /* Add some padding for better click area */
    transition: color 0.3s ease; /* Smooth hover effect */
}

.main-nav ul li a:hover {
    color: #007bff; /* Highlight on hover */
    text-decoration: none;
}

/* Logo Styles (middle) */
.logo img {
    max-height: 50px; /* Set max height for the logo */
    display: block; /* Remove extra space below image */
}

/* Contact Button Styles (right side) */
.contact-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s ease; /* Smooth hover effect */
    width: 336px;
height: 68px;
flex-shrink: 0;
background: #6DB8BB;
}

.contact-button:hover {
    background-color: #0056b3;
}


.active{
    font-weight: bold !important;
    color: #6DB8BB !important;
  
}

@media (max-width: 1600px) {
    .contact-button {
        width: 200px;
        height: 68px;
      
    }
    .logo img {
    max-height: 40px;
}

.header-content {
     scale: 0.8;
   
}

}



@media (max-width: 1000px) {
    .contact-button {
        width: 150px;
        height:50px;
        font-size: 15px;
        margin-left: auto;
        margin-right: auto;
    }
    .logo img {
    max-height: 40px; /* Set max height for the logo */
    display: block; /* Remove extra space below image */
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.header-content {
    display: grid; /* Makes items arrange in a row */
    justify-content:center; /* Pushes items to the ends with space between */
    align-items: center; /* Vertically aligns items in the middle */
    max-width: 80%; /* Limit header width for better readability */
    margin: 0 auto; /* Center the header content */
    font-size: 5px;
}

.header-actions{
    text-align: center;
    margin-top: 30px;
}
}





/* Main Content Styles (keep existing or adjust as needed) */
main {
    padding: 0px;
    max-width: 100%;
    margin: 0px auto;
    background-color: #fff;
   
}

/* --- Hero Section Styles --- */
.hero {
    background-color: #E0E2D5;; /* A slightly softer background for contrast */
    padding: 60px 20px; /* More vertical padding */
    text-align: center; /* Default center, but flex will override for content */
}

.hero-content {
    display: flex; /* Makes the text and image sections arrange in a row */
    justify-content: space-around; /* Distributes space around items */
    align-items: center; /* Vertically aligns items in the middle */
    max-width: 60%; /* Max width for the content inside hero */
    margin: 0 auto; /* Center the hero content */
    flex-wrap: wrap; /* Allows items to wrap onto the next line on smaller screens */
    overflow: hidden;
}

.hero-text {
    flex: 1; /* Allows text to grow and shrink, taking available space */
    min-width: 300px; /* Ensures text doesn't get too squished */
    max-width: 50%;
    text-align: left; /* Aligns text content to the left */
    padding-right: 20px; /* Space between text and image */
    color: #000;

font-family: Quicksand;
font-size: 36px;
font-style: normal;
font-weight: 100;
line-height: normal;
letter-spacing: 1.8px;
padding-bottom: 20px;
}

.hero-text h1 {
    font-size: 2vw; /* Larger heading */
    margin-bottom: 15px;
    color: #000000; /* A darker blue for the heading */
}

.hero-text p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    color: #495057;
}

/* Style for the new main action button */
.mainActionButton {
    background-color: #6DB8BB;; /* A vibrant green */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#mainActionButton:hover {
    background-color: #218838;
    transform: translateY(-2px); /* Slight lift effect */
}

.hero-image {
    flex: 1; /* Allows image to grow and shrink */
    min-width: 300px; /* Ensures image doesn't get too squished */
    max-width: 700px;
    display: flex; /* Use flex to center the image if it's smaller */
    justify-content: center; /* Center image horizontally */
    align-items: center; /* Center image vertically */
    padding-left: 20px; /* Space between image and text */
}

.hero-image img {
    max-width: 50%; /* Ensures image is responsive and fits within its container */
    height: auto; /* Maintains aspect ratio */
    border-radius: 8px; /* Slightly rounded corners for the image */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */



}

/* --- Responsive adjustments for hero --- */
@media (max-width: 768px) {

    .hero{
        padding: 0px;
    }

    .hero-content {
        flex-direction: column; /* Stack items vertically on smaller screens */
        text-align: center; /* Center text when stacked */
       width:80%;
        display: block; /* Makes the text and image sections arrange in a row */
    justify-content: space-around; /* Distributes space around items */
    align-items: center; /* Vertically aligns items in the middle */
    max-width: 80%; /* Max width for the content inside hero */
    margin: 0 auto; /* Center the hero content */
    flex-wrap: nowrap; /* Allows items to wrap onto the next line on smaller screens */
    overflow:visible;
    }

    .hero-text {
       flex: 0; /* Allows text to grow and shrink, taking available space */
       display: block;
       margin-left: auto;
       margin-right: auto;
    min-width: 300px; /* Ensures text doesn't get too squished */
    max-width: 50%;
    text-align: center; /* Aligns text content to the left */
    padding-right: 0px;
    }

    .hero-text h1 {
        font-size: 1rem; /* Adjust heading size for smaller screens */
        text-align: center ;
        width: 100%;
        margin-top: 20px;
    }

    .hero-image {
        padding-left: 0;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        display: block;

    }

    #mainActionButton{
        margin-left: auto;
        margin-right: auto;
    }

    .aboutdivp{
        margin: 0px !important;
        
    }
}

.treatmentareasdiv{
    width:60%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.3em;
    padding-bottom: 40px;
    text-align: left;
    list-style-type: circle !important;
}
@media (max-width: 768px) {
    .treatmentareasdiv{
         font-size: 1em;
         width:80%;
        
    }
    
}

/* --- Info Section Styles --- */
.info-section {
    display: flex; /* Make it a flex container */
     max-width: 60%;/* Limit its width */
    margin: 40px auto; /* Center it and add vertical spacing */
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Subtle shadow for the whole section */
    border-radius: 8px; /* Slightly rounded corners */
    overflow: hidden; /* Important to contain floated or positioned children with border-radius */
    padding: 20px; /* Add some padding inside the section */
    
}

.info-image-wrapper {
    flex: 0 0 20%; /* Don't grow, don't shrink, base width 20% */
    padding: 20px; /* Padding around the image */
    display: flex; /* Use flex to center the image within its wrapper */
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1; /* Ensure wrapper is above its pseudo-element */
    overflow: hidden;
}

.info-image-wrapper img {
    max-width: 100%; /* Ensure image scales down if too large */
    max-height: 100%; /* Maintain aspect ratio */
    height: auto;
  min-width: 200px;
    display: block; /* Remove extra space below image */
    border-radius: 8px; /* Match section corners */
     z-index: 2;
               
}

.info-image-wrapper::before {
    content: ''; /* Essential for pseudo-elements */
    display: block; /* Make it a block element to control its dimensions */
    position: absolute; /* Position it relative to its parent (.info-image-wrapper) */
    background-color: #6db8bb; /* The blue color of the square */
    border-radius: 20px; /* Match the image/wrapper border-radius */

    /* Positioning and Sizing of the blue square */
  
    top: 50%; /* Start at the vertical center of the wrapper */
    left: 50%; /* Start at the horizontal center of the wrapper */
    transform: translate(-50%, -50%); /* Precisely center it */

    transform: translate(-45%, -45%); /* Example: move up-left a bit */

    width: calc(100% - 20px); /* Slightly smaller than image, adjusted for wrapper padding */
    height: 30vw; /* Slightly smaller than image */
     /* Offset from top */
    left: 30px; /* Offset from left */
    z-index: 1; /* Make sure it's behind the image but above the wrapper's background */
    overflow: hidden;
}


.info-text-wrapper {
    flex: 1; /* Allows text section to take up remaining space (80%) */
    padding: 20px; /* Padding around the text */
    display: flex; /* Make it a flex container for paragraphs and divider */
    flex-direction: column; /* Stack paragraphs and divider vertically */
    justify-content: center; /* Center content vertically if space allows */
    padding-left:10%;
    padding-right: 10%;
    
}

.info-text-wrapper p {
    margin-bottom: 15px; /* Space between paragraphs */
    font-size: min(max(16px, 2vw), 22px);
    color: #555;
    text-align: justify; /* Justify text for a clean block look */
   
}

.blue-divider {
    width: 90%; /* Adjust width of the line */
    height: 3px; /* Thickness of the line */
    background-color: #6DB8BB; /* Blue color */
    margin: 20px auto; /* Center the line and add vertical spacing */
    border-radius: 5px; /* Slightly rounded ends for the line */
}

.boldtext{
    font-weight: bold;
}



/* --- Responsive Adjustments info --- */
@media (max-width: 768px) {
    .info-section {
        flex-direction: column; /* Stack image and text vertically on smaller screens */
        padding: 15px;
        margin-left: auto;
        margin-right: auto;
         max-width: 80%;
         text-align: center;
        
    }

    .info-image-wrapper {
        flex: none; /* Remove flex sizing */
        width: 100%; /* Make image wrapper full width */
        padding: 10px;
        margin-bottom: 20px; /* Space between image and text when stacked */
    }

    .info-image-wrapper img {
        max-width: 70%; /* Make image slightly smaller when stacked for better aesthetics */
        margin: 0 auto; /* Center image */
    }

    .info-text-wrapper {
       
        width: 100%; /* Make text wrapper full width */
        padding: 0px;
        text-align: center; /* Center text for stacked layout */
        margin-left: auto;
        margin-right: auto;
    }

    .info-text-wrapper p {
        text-align: center; /* Keep paragraphs left-aligned for readability */
        margin-bottom: 10px;
        margin-left: auto;
        margin-right:auto ;
    }

    .blue-divider {
        width: 60%; /* Adjust line width for smaller screens */
        margin: 15px auto;
    }
}



/* Footer Styles (keep existing) */
footer {
    text-align: center;
    padding: 1rem 0;
    background-color: #10375D;
    color: #fff;
    margin-top: 0px;
}


.services{
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color:#6DB8BB;
    color: white;
    margin-left: auto;
    margin-right: auto;
}

.servicediv{
    width:60%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.3em;
}

.titleline{
     width: 30%; /* Adjust line width for smaller screens */
        
        min-height: 2px;
        background-color: white;
}

/* --- Responsive Adjustments services--- */
@media (max-width: 768px) {

.servicediv{
    width:80%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1em;
}
.servicediv p {
    text-align: center;
}
}


/* --- Image Gallery Section --- */
.image-gallery-section {
    padding: 60px 20px;
    background-color: #fcfcfc;
    text-align: center;
    margin-top: 40px;
     overflow: visible;
     width: fit-content;
}

.image-gallery-section h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 40px;
}

.gallery-container {
    display: grid; /* Arrange items in a row */
    grid-auto-flow: column;
    flex-wrap: none; /* Allow items to wrap to the next line on smaller screens */
    justify-content: center; /* Center items horizontally */
    gap: 100px; /* Space between gallery items */
   
    margin: 0 auto; /* Center the gallery container */
    overflow: visible;
}

.gallery-item {
    flex: 0 0 calc(25% - 30px); /* Roughly 4 items per row, accounting for gap */
    /* Calculation: (100% / number_of_items) - gap_size_per_item */
    /* (100% / 4) = 25%. Then subtract half of the gap from each side of the item */
    /* Better: flex: 0 0 auto; min-width: 250px; max-width: 280px; will adapt better */
    min-width: 250px; /* Minimum width for items before they wrap */
    max-width: 280px; /* Maximum width to prevent items from becoming too large */
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Subtle shadow for each item */
    border-radius: 10px; /* Slightly rounded corners for the item card */
    background-color: #fff;
    padding-bottom: 20px; /* Padding below text */
}

.image-mask {
    width: 100%; /* Take full width of its parent (.gallery-item) */
    height: 200px; /* Fixed height for consistency, adjust as needed */
    overflow: hidden; /* Crucial: Clips content outside the mask's shape */
     border-radius: 50% 50% 0 0 / 50px 50px 0 0; /* Creates an arch shape at the bottom */
    /* Syntax: border-radius: top-left top-right bottom-right bottom-left /
                             top-left-y top-right-y bottom-right-y bottom-left-y; */
    /* This makes the bottom corners oval, creating an arch effect.
       The first set controls horizontal radius, second controls vertical.
       0 0 50% 50% means 0 radius at top, 50% at bottom (horizontally).
       / 0 0 50px 50px means 0 radius at top vertically, 50px at bottom vertically. */
    position: relative; /* For potential future enhancements */
    margin-bottom: 15px; /* Space between image and text */
}

.image-mask img {
    width: 100%; /* Make image fill the mask width */
    height: 100%; /* Make image fill the mask height */
    object-fit: cover; /* Important: Crops image to fit without distortion */
    display: block; /* Remove extra space below image */
}

.image-description {
    font-size: 1rem;
    color: #666;
    padding: 0 15px; /* Padding for the text */
    margin: 0; /* Remove default paragraph margin */
}

.buttons{
    width: fit-content;
    height: fit-content;
    
    margin-left: auto;
    margin-right: auto;
    scale: 2;
}

/* --- Responsive Adjustments for Gallery --- */
@media (max-width: 1024px) {
    .gallery-item {
        flex: 0 0 calc(33.33% - 30px); /* 3 items per row */
    }
}

@media (max-width: 768px) {
    .gallery-item {
        flex: 0 0 calc(50% - 30px); /* 2 items per row */
        max-width: none; /* Let them expand more */
    }
}

@media (max-width: 500px) {
    .gallery-item {
        flex: 0 0 90%; /* 1 item per row, nearly full width */
    }
    .image-gallery-section h2 {
        font-size: 2rem;
    }
}

.testimonials{
   
    padding: 40px;
    background-color:#869684;
    color:#ffffff;
}

.testimonialdiv{
    width:60%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.3em;
}

.quotediv{
    height: fit-content;
    margin-top: 100px;
    margin-bottom: 100px;
}

.testimonialdiv .blue-divider {
    width: 100%; /* Adjust width of the line */
    height: 3px; /* Thickness of the line */
    background-color: #ffffff; /* Blue color */
    margin: 50px auto; /* Center the line and add vertical spacing */
    border-radius: 5px; /* Slightly rounded ends for the line */
}

.testimonialdiv p{
    text-align: center;
    font-weight: lighter;
}
.testimonialdiv .name{
   font-weight: bolder;
}


@media (max-width: 768px) {
    .testimonialdiv{
    width:80%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.3em;
}

.quotediv{
    height: fit-content;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 4vw;
}
}



.getintouch{
    width: 100%;
    height: fit-content;
    padding: 40px;
    background-color:#fff;
    
}

.getintouchdiv{
    width:60%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.3em;
}


.getintouchdiv .titleline{
    background-color:#6DB8BB;
}

@media (max-width: 768px) {
.getintouchdiv{
    width:80%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1em;
    text-align: center;
}

}





/* --- Contact Form Section Styles --- */
.contact-form-section {
    padding: 40px 0px;
    background-color: #fff;
    text-align: center; /* To center the form block itself initially */
}


.contact-form {
    max-width: 60%; /* Limit the form's width */
    margin: 0 auto; /* Center the form horizontally */
    padding: 0px;
    background-color: #fff;
    border-radius: 8px;
    
}

/* Row for inline fields (First Name, Last Name) */
.form-row {
    display: flex; /* Makes children arrange in a row */
    gap: 50px; /* Space between first and last name fields */
    margin-bottom: 20px;
    overflow: visible;
    width: 100%;
}

.form-group-inline {
    flex: 1; /* Allows each inline group to take equal space */
    text-align: left; /* Aligns the label and input to the left within its column */
    overflow: visible;
}

/* Styles for all other form groups (Email, Tel, Message) */
.form-group {
    margin-bottom: 20px;
    display: block; /* Use flex to align label and input */
    flex-direction: column; /* Stack label and input vertically */
    align-items: flex-start; /* Aligns items (label and input) to the start (left) */
    width: 100%; /* Ensure form-group takes full width of its parent */
    overflow: visible;
}

.form-group label,
.form-group-inline label {
    display: block; /* Make label a block element for consistent spacing */
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
    font-size: 0.95rem;
}

.form-group input,
.form-group-inline input,
.form-group textarea {
    width: 98%; /* Full width minus padding for input fields */
    padding: 12px 10px;
    border: 1px solid #6DB8BB;
    background-color: #E0E2D5;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Quicksand', sans-serif; /* Apply your custom font */
}

.form-group input:focus,
.form-group-inline input:focus,
.form-group textarea:focus {
    border-color: #007bff; /* Highlight border on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.form-group textarea {
    resize: vertical; /* Allow vertical resizing only */
}

.submit-button {
    background-color: #6DB8BB;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 10px; /* Space above the button */
}

.submit-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

/* --- Responsive adjustments for smaller screens --- */
@media (max-width: 600px) {
    .contact-form {
        padding: 20px;
        max-width: 80%;
    }

    .form-row {
        flex-direction: column; /* Stack first/last name vertically on small screens */
        gap: 0; /* Remove gap when stacked */
    }

    .form-group-inline {
        margin-bottom: 20px; /* Add space between stacked inline groups */
    }

    .form-group-inline:last-child {
        margin-bottom: 0; /* No bottom margin on the very last stacked item */
    }
    
}







/* ----------------------------------ABOUT----------------------------- */


*{
    font-family: 'Quicksand', sans-serif; /* Apply your custom font */
    overflow-x: hidden;
}

.about{
    
    width: 100%;
    height: fit-content;
    background-color:#E0E2D5 ;
}

.aboutdiv{
   
    width:60%;
    margin-left: auto;
    margin-right: auto;
    padding: 50px;
}

.aboutdiv .subtitle {
text-align: center;
color: #333;
font-size: min(max(20px, 4vw), 30px);
}

.aboutdiv .titleline{
    background-color: #6DB8BB;
    margin-bottom: 50px;
    margin-right: auto;
 margin-left: auto;
 height: min(max(5px, 2vw), 22px);
}

.about-image img{
    max-width: 20%;
    min-width: 200px;
  
}

.about-image {
    margin-right: auto;
    margin-left: auto;
    align-items: center;
    text-align: center;
}

.about p {
    text-align: center;
    font-size: min(max(16px, 1vw), 22px);
    margin-top: 50px;
}

.aboutdivv br {
    display: none;
}


@media (max-width: 600px) {
    .aboutdiv{
    width:80%;
}
.aboutdivv br {
    display: block;
}
}





.services bold {
    font-weight: bolder;
}

.services ul{
    font-weight: light;
    
}

.Lecturing{
    width: 100%;
    height: fit-content;
    background-color: #E0E2D5;
    padding-top: 50px;
    padding-bottom: 50px;
}

.Lecturing .titleline {
    background-color: #6DB8BB ;
}


.awards{
    width: 100%;
    height: fit-content;
    padding-top: 50px;
    margin-bottom: 50px;
    padding-bottom: 50px;
    background-color:#869684;
    color: white;
}

.awarddiv{
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
    
}

.awarddiv .titleline{
     background-color: #ffffff ;
     margin-bottom: 50px;
} 




.container-flex {
  display: flex; /* Makes the container a flex container */
  align-items: center; /* Vertically centers the items in the middle */
  gap: 40px; /* Adds space between the text and image */
  padding-bottom: 20px;
 
  max-width: 100%; /* Optional: constrain width for better readability */
  margin: 0 auto; /* Optional: center the container on the page */
}

.text-content {
  flex: 1; /* Allows the text content to grow and take up available space */
  /* Optional: further styling for text */
  padding-right: 50px; /* Add a little internal padding */
}

.image-wrapper {

  /* Optional: if you want to control the image width precisely */
  width:200px; 
  max-height: 200px;
  overflow: hidden;
}

.image-wrapper img {
  max-width: 100%; /* Ensures the image is responsive and doesn't overflow */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Removes extra space below image */
}

/* Optional: Basic responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .container-flex {
    flex-direction: column; /* Stacks items vertically on small screens */
    text-align: center; /* Center text when stacked */
    gap:0px;
  }

  .text-content {
    padding-right: 0; /* Remove right padding when stacked */
  }
}







/* ------------------------------------------- contact -----------*/

.contactdiv .contact-form-section{
    background-color: #E0E2D5;
    width: 100%;
    height: fit-content;
}

.contactdiv .contact-form-section .contact-form{
    background-color: #E0E2D5;
}

.contactdiv .contact-form-section .contact-form input{
    background-color: #6DB8BB;
    max-width: 95%;
}

.contactdiv .contact-form-section .contact-form textarea{
    background-color: #869684;
    border-color: white;
}


.location{
    width: 100%;
    height: fit-content;
    background-color: #6db8bb;
    padding-top: 50px;
    padding-bottom: 50px;
    color: white;

}

.locationdiv{
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .locationdiv{
    width: 80%;
  
}
}

.container {
  display: flex; /* Enables Flexbox for the container */
  flex-direction: row; /* Arranges items in a row (default) */
  gap: 10px; /* Space between the text and the map */
  align-items: flex-start; /* Aligns items to the top of the container */
  max-width:100%; /* Limits the overall width of the layout */
  margin:0px auto; /* Centers the container on the page with some vertical margin */
  padding-top: 20px;
  color: white;
  
  border-radius: 8px;
  background-color: #6db8bb;
}

.text-content {
  flex: 1; /* Allows this section to grow and take up available space */
  padding-right: 15px; /* A bit more internal spacing */
}

.text-content h1 {
  
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 2.2em;
}

.text-content p {
  
  line-height: 1.6;
  margin-bottom: 20px;
  
}

.mini-header-section {
  margin-bottom: 25px; /* Space between mini-sections */
}

.mini-header-section h3 {
  
  margin-bottom: 8px;
  font-size: 1.4em;
  border-bottom: 1px solid #eee; /* Subtle separator */
  padding-bottom: 5px;
  max-width: 60%;
}

.mini-header-section p {
  font-size: min(max(16px, 4vw), 22px);
  
}

.map-content {
  flex-shrink: 0; /* Prevents the map from shrinking */
  width: 50%; /* Set a fixed width for the map on larger screens */
  overflow: hidden; /* Ensures the iframe doesn't break out */
  border-radius: 8px; /* Match container border-radius */
}

.map-content iframe {
  width: 100%; /* Make the iframe fill its parent */
  height: 450px; /* Keep consistent height */
  display: block; /* Remove any extra space below the iframe */
}

/* --- */
/* Responsive Adjustments */
/* --- */
@media (max-width: 1024px) {
  .container {
    flex-direction: column; /* Stack content vertically on smaller screens */
    align-items: center; /* Center items when stacked */
  }

  .text-content {
    padding-right: 0; /* Remove extra padding when stacked */
    text-align: center; /* Center text when stacked */
    margin-bottom: 30px; /* Space between text and map when stacked */
  }

  .mini-header-section {
    text-align: left; /* Keep mini-headers left-aligned */
    width: 100%; /* Allow sections to take full width */
    max-width: 600px; /* Keep them from being too wide if the text is centered */
    margin-left: auto;
    margin-right: auto;
  }

  .map-content {
    width: 100%; /* Make map full width on smaller screens */
    max-width: 600px; /* Prevent map from getting too wide on large phone screens */
  }

  .map-content iframe {
    height: 350px; /* Adjust map height for smaller screens */
  }
}

@media (max-width: 768px) {
  .container {
    padding: 15px;
    margin: 20px auto;
  }

  .text-content h1 {
    font-size: 1.8em;
  }

  .mini-header-section h3 {
    font-size: 1.2em;
  }

  .map-content iframe {
    height: 300px; /* Further reduce map height for very small screens */
  }
}


.fees{
    width: 100%;
    height: fit-content;
    background-color:#869684;
    color: white;
}

.feesdiv{
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
    
}

.feesdiv p {
    font-size: min(max(16px, 4vw), 22px);
}

@media (max-width: 768px) {
    .feesdiv{
    max-width: 80%;}
}