html,
body {
    height: 100%;
    margin: 0px auto;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    background: #f3f7f2;
    color: #2c3e30;
    box-sizing: border-box;
}

.topbar {
    background: #2f6b3c;
    color: #fff;
    padding: 6px 0px;
    font-size: 13px
}

.header_content {
    background: #e2f0e3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    max-width: auto;
    padding: 0px;
    margin: 0px auto;
}



.navwrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px;

}

.logo {

    height: 200px;
    width: 500px;
    display: flex;
}

.profile {

    height: 571px;
    width: 487px;
    display: block;
}


.menu {
    list-style: none;
    display: flex;
    gap: 22px;
    font-weight: 700
}

.menu>li {
    position: relative;

}

.submenu>li {
    position: relative;

}

.subsub>li {
    position: relative
}

.menu a {
    text-decoration: none;
    color: #2c3e30;

}

.menu li {
    text-decoration: none;
    color: #2c3e30;

}

.menu li:hover>a {
    color: #07a028;

}

.menu li:hover {
    color: #07a028;

}

.submenu li:hover>a {

    /* Your highlight color */
    color: #07a028;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0px;
    background: #ffffff;
    list-style: none;
    padding: 10px 0px;
    min-width: 200px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15)
}

.subsub {
    display: none;
    position: absolute;
    top: 0;
    /* Align with the top of the parent li */
    left: 100%;
    background: #ffffff;
    list-style: none;
    padding: 10px 0px;
    min-width: 200px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15)
}

/* Show 2nd level when hovering 1st level LI */
.menu>li:hover>.submenu {
    display: block;
}

.menu>li:hover {
    display: block;
}

/* Show 3rd level when hovering 2nd level LI */
.submenu>li:hover>.subsub {
    display: block;
}

.submenu li {
    padding: 8px 20px
}

.submenu li a {
    color: #2c3e30
}


.subsub li a {
    color: #2c3e30
}

.subsub li {
    padding: 8px 20px
}

.nav_link {
    color: rgba(227, 132, 23, 0.75);
    font-size: 15px;
    transition: all 0.4s;
    position: relative;
}

.nav_link:hover,
.nav_link:focus {
    color: rgba(255, 255, 255, 1);
}



.nav_link:hover::after {
    opacity: 1;
}

/* 1. Base state for the link */
.nav_link {
    color: rgba(227, 132, 23, 0.75);
    font-size: 15px;
    transition: all 0.4s;
    position: relative;
    text-decoration: none;
}

/* 2. Highlight when the PARENT LI is hovered */
/* This ensures the parent stays white even when you are hovering the sub-menu */
li:hover>.nav_link,
.nav_link:focus {
    color: rgba(255, 255, 255, 1);
}

/* 3. Handle the pseudo-element underline/decoration */
li:hover>.nav_link::after {
    opacity: 1;
}

.hero {
    padding: 100px 20px;
    text-align: center;
    background: linear-gradient(#cfe7d2, #eaf4ea)
}

.section {
    padding: 70px 20px;
    max-width: 1100px;
    margin: auto
}

.section.alt {
    background: #eaf4ea
}

.media {
    margin-top: 25px;
    border: 2px dashed #7aa889;
    padding: 70px;
    text-align: center
}




iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.image-placeholder {

    background-color: #ccc;
    height: 250px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    text-align: center;
}

/* MEDIA QUERIES */
@media (max-width: 650px) {
    .header_content {
        flex-direction: column;
        align-items: center;
        padding: 25px 10px;
        row-gap: 18px;
    }

    .menu {
        display: flex;
        /* Ensures items stay in a row/grid */
        flex-wrap: wrap;
        /* Allows items to move to a second line */
        justify-content: center;
        /* Centers the items on both lines */
        padding: 0;
        gap: 5px;
        position: relative;
        /* Adds space between the menu items */
    }



    .submenu li {
        width: 50%;
        /* Forces roughly 2 items per line */
        list-style: none;
        text-align: center;
        position: relative;
    }

    .nav_link {
        display: flex;
        flex-wrap: wrap;
        /* Allows submenu to wrap to a 2nd line */
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 10px 10px;
    }

    .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        /* Opens to the right */
        width: 100px;
        /* Set a specific width */
        display: none;
        /* Keep hidden until triggered  */
        z-index: 1000;
        background-color: #fff;
    }

    .menu.active .submenu .subsub {
        display: block;
    }

}

.container {

    max-width: 1200px;

    margin: 0px auto;
    background: #f3f7f2;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1,
h2,
h3 {
    color: #2c3e50;
    margin: 30px;
}

p {
    padding: 0px;
    margin: 1em 0;
}

.main-image-section {
    position: relative;
    margin-bottom: 0px;
}

.image-placeholder {

    background-color: #ccc;
    height: 250px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    text-align: center;
}

.overlay-text {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    font-weight: bold;
}

.managed-by {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border-radius: 50%;
    text-align: center;
    font-size: 0.8em;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.managed-by span {
    display: block;
}

.welcome-section {
    background-color: #FFEB3B;
    /* Yellow color */
    max-width: 1200px;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0px;
}

.content-section {
    display: flex;
    gap: 0px;
}

.text-content {
    flex: 2;
}

.side-image {
    flex: 1;
    /* Replace with your image */
    background-color: #ccc;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.healing-section {
    background-color: #B71C1C;
    /* Dark red color */
    color: white;
    padding: 10px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
}

.footer-content {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 0px;
}

.footer-text {
    flex: 1;
}

.footer-image {
    /* Replace with your image */
    background-color: #ccc;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}



.card-container {
    display: flex;
    /* Allows items to wrap onto multiple lines if container is too narrow */
    flex-wrap: wrap;
    /* Adds space between items (modern alternative to margins) */
    gap: 20px;
    /* Optional: centers items within the container */
    justify-content: center
}

.card {
    flex: 1 1 calc(33% - 20px);
    min-width: 100px;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Adds a subtle shadow for depth */
    transition: transform 0.3s ease;
    /* Smooth hover effect */
    height: auto;
    width: 250px;

    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Stacks everything vertically */
    align-items: center;
    /* Centers everything horizontally */
    text-align: left;
    /* Ensures cards adjust to their content height */
}


.card:hover {
    transform: translateY(-5px);
    /* Lifts the card slightly on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* Deeper shadow on hover */
}

.card h2 {
    margin-top: 0;
    color: #333;
}

.card p {
    color: #666;
}

.circle-pic {
    /* Required: Make the image a square first */
    width: 150px;
    height: 150px;

    /* Required: Turn the square into a circle */
    border-radius: 50%;

    /* Optional: Ensure the image covers the area nicely without distortion */
    object-fit: cover;

    /* Optional: Add a small border around the circle */
    border: 3px solid #185e03;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Optional: Additional media query for very small screens if needed */
@media (max-width: 480px) {
    .card-container {
        grid-template-columns: 1fr;
        /* Stack cards vertically on small screens */
        padding: 10px;
    }
}

.content {
    margin: 20px auto;
    padding: 20px 0px;

}

.rules-list {
    margin: 0;
    padding: 0;
    list-style: decimal;
    margin-left: 18px;
    color: var(--green-900)
}

.schedule.card {
    max-width: 1200px;
    margin: 0px auto;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    width: 1000px;
}

/* The 2-Column Grid for the whole list */
.timeline {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* Create 4 equal columns */
    gap: 10px;
    margin-top: 0px;
}

/* Individual item: Flex layout to put time/details side-by-side */
.item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Keeps time aligned with the top of the text */
    padding: 0px 0px;
    background: #fcfcfc;
    border-top: 4px solid #4CAF50;
    border-radius: 6px;
    transition: transform 0.2s;
    height: 100%;
}

.item:hover {
    background: #f5fbf5;
    transform: translateX(5px);
}

/* Fixed width for time so details have maximum room */
.time {
    flex: 0 0 100px;
    /* Adjust this width based on your longest time string */
    font-weight: 700;
    color: #2c3e50;
    font-size: 0.95rem;
}

.details {
    flex: 1;
    /* Takes up all remaining horizontal space */
    font-size: 0.92rem;
    color: #444;
    line-height: 1.5;
    /* Good breathing room for 2-3 lines of text */
}

/* Responsive: Stacks to 1 column on smaller screens */
@media (max-width: 992px) {
    .timeline {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .item {
        flex-direction: column;
        /* Stacks time on top for mobile only */
    }

    .time {
        margin-bottom: 5px;
    }
}

.flex-container {
    display: flex;
    gap: 20px;
    /* Space between divs */
}

.flex-child {
    flex: 1;
    /* Both divs take up equal width */
    padding: 15px;
    background: #f0f0f0;
}

.table-container {
    /* Ensures the table fits nicely within a layout */
    max-width: 800px;
    margin: 20px auto;
    overflow-x: auto;
    /* Adds horizontal scrolling on small screens */
    background-color: #fff;
    /* White background for the table card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

table {
    width: 100%;
    border-collapse: collapse;
    /* Removes the default spacing between table cells */
    margin: 0;
}

/* Header Styling (The Green Part) */
thead {
    /* A pleasant light green for the header */
    background-color: #4CAF50;
    color: white;
}

th {
    padding: 15px;
    text-align: center;
    font-weight: 600;
    /* Rounds only the top corners of the header */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Body Cell Styling */
td {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    /* Light separator line */
    color: #333;
    /* Darker text for readability */
}

/* Zebra Striping (Alternating row colors) */
tbody tr:nth-of-type(even) {
    background-color: #f9f9f9;
    /* Very light grey for contrast */
}

/* Hover Effect for Rows */
tbody tr:hover {
    background-color: #e8f5e9;
    /* A slightly darker green highlight on hover */
}

/* Styling for the first column (ACCOMMODATIONS) to make it stand out */
tbody tr td:first-child {
    font-weight: bold;
    text-align: left;
    /* Aligns description text left */
    color: #000;
}

/* Styling the "NA" and "PER HEAD" text slightly smaller */
tbody tr td br+*,
tbody tr td:contains("NA") {
    font-size: 0.9em;
    color: #666;
}

/* Optional: Ensures the bottom corners of the *last* row look nice if there's no overall container border */
.table-container table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

.table-container table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

.contact-section {
    /*background: #fffae6;*/
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.contact-text {
    font-size: 1em;
    color: #2c3e50;

}

.footer-note {
    font-size: 0.9em;
    color: #555;
    margin-top: 20px;
}

.footer-offices {
    display: flex;
    justify-content: space-between;
    /* Pushes one left, one right */
    align-items: flex-start;
    /* Ensures both start at the exact same top level */
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.office-block {
    width: 45%;
    /* Ensures they don't crash into each other in the middle */
}

.centered-block {
    margin: 0 auto;
    /* Centers the block horizontally */
    text-align: center;
    /* Centers the text inside the block */
}

.text-right {
    text-align: right;
}

.heading {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 8px;
    color: #2c3e50;
    display: block;
}

address {
    font-style: normal;
    line-height: 1.5;
    color: #555;
}

.map-responsive {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.video-container {
    width: 100%;
    max-width: 1200px;
    /* Limits size on desktop */
    margin: 0 auto;
    /* Centers the video */
}



.video-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Automatically calculates height based on 100% width */
    height: auto;
    /* Overrides default fixed heights */
    display: block;
}

/* Gallery Container */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Responsive grid */
    gap: 20px;
    /* Spacing between items */
    padding: 20px;
}

/* Individual Gallery Item */
.gallery-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* Keeps content within rounded corners */
    transition: transform 0.3s ease;
    cursor: pointer;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Optional: Add Play Button Overlay */
.gallery-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Add a play icon (SVG or Font Awesome) */
    /* background-image: url('play-icon.png'); */
    /* width: 50px; height: 50px; */
}

/* Info Section */
.item-info {
    padding: 15px;
    text-align: center;
}

.item-info h3 {
    margin: 0;
    font-size: 1.1em;
    color: #333;
}

/* Image Styling */
/*.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}*/

.gallery-item img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    /* Crops the image to fill the container without stretching */
    object-position: center;
    /* Ensures the middle of the image stays visible */
}