.site-wrapper {
    width: 90%; /* Or 90% */
    margin: 0 auto; /* Centers the wrapper */
    background-color: #fff; /* Gives the "page" a white background */
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

/* =================================== */
/* INNER PAGE HEADER STYLES (DESKTOP)  */
/* =================================== */
body {
    font-family: "Roboto", sans-serif;
}

.header-inner {
    background-color: #ffffff; /* White background for the top row */
    padding-bottom: 0; /* Remove padding from the bottom of the header */
}

.header-inner .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0 0 0; /* Adjust padding as needed */
    border-bottom: 1px solid #eee; /* Subtle separator line below top bar */
}

.header-inner .logo img {
    height: 50px; /* Adjust logo size */
    padding-left: 50px;
}

.header-inner .header-contact {
    display: flex; /* Keeps icon and text together */
    align-items: center;
    gap: 8px; /* Space between icon and text */
    font-size: 1.5em;
    font-weight: 500;
    color: #1976d2; /* Blue phone number */
    padding-right: 40px;
}

/* Main Navigation Bar for Inner Pages (below the top row) */
.main-nav-inner {
    background-color: #0d47a1; /* Dark blue background */
    font-size: 1.2em;
    height: 50px;
}

.main-nav-inner .container {
    padding: 0; /* Remove container padding so the blue bar extends edge-to-edge */
}

.main-nav-inner ul {
    display: flex;
    justify-content:left; /* Center the navigation links */
    list-style: none;
    margin: 0;
    padding: 0 15%;
}

.main-nav-inner li a {
    display: block;
    padding: 15px 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    transition: background-color 0.3s ease;
    font-size: 17px;
    font-family: "Roboto", sans-serif;
}

.main-nav-inner li a:hover {
    background-color: #1565c0; /* Slightly darker blue on hover */
}

/* Style for the currently active page link */
.main-nav-inner li.active a {
    background-color: #1976d2; /* Lighter blue for active state */
    height: 20px;
}

/* =================================== */
/* HAMBURGER ICON VISUAL STYLES        */
/* =================================== */

.header-inner .hamburger {
    display: none; /* Hidden on desktop by default */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
    order: 3; /* Keep it to the right on mobile */
}

.hamburger-bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #0d47a1; /* The color of the lines (dark blue) */
    transition: all 0.3s ease-in-out;
}

/* Animation for the 'X' shape when active */
.hamburger.active .hamburger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger.active .hamburger-bar:nth-child(2) {
    opacity: 0;
}
.hamburger.active .hamburger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* =================================== */
/* UPDATED FOOTER STYLES               */
/* =================================== */

.main-footer {
    
    background-color: #012c5f;
    color: #e3f2fd;
    padding-top: 40px; /* Reduced top padding */
    font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: 16px;
	color: #FFFFFF;
	font-style: normal;
	font-variation-settings: "wdth" 100;
    line-height: 1.5;
    
}

.footer-content {
    display: flex;
    justify-content: center;
    gap: 200px; /* <-- CHANGED from 60px to remove space between columns */
    padding-bottom: 40px;
    flex-wrap: wrap;
    /* text-align: center; This line can be removed */
    
    
}

.footer-column {
    flex: 0 0 auto; /* Keeps the column from growing or shrinking */
    width: 280px;   /* Sets a fixed width for ALL columns */
    text-align: left;
    padding: 0 15px; 
    border-left: 1px solid #fff;
    
    /* ADD THIS LINE to force long text to wrap */
    overflow-wrap: break-word;
}



/* Style for the new icons */
.footer-icon {
    margin-bottom: 0px;
}

/* This new rule styles the image itself */
.footer-icon img {
    height: 40px; /* You can adjust this value to make the icon bigger or smaller */
    width: auto;
}

.footer-column h4 {
    color: #fff;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1em; /* Reduced font size */
}

.footer-column p,
.footer-column a {
    font-size: 0.9em; /* Reduced font size */
    color: #e3f2fd;
    line-height: 1.2;
}

.footer-column ul {
    list-style: none;
    padding-left: 5px;
    margin-bottom: 0px;
    line-height: 1.2;
}

.footer-column li {
    
    margin-bottom: 5px; /* Reduced space between links */
    padding-left: 0px;
    margin-bottom: 0px;
}

.footer-column a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-bottom {
    background-color: #4381fc; 
    padding: 15px 0;
    text-align: center; 
    border-top: none;
}

.footer-bottom p {
    margin: 0;
    color: #fff;
    padding: 0 20px;
}



/* ============================ */
/* RESPONSIVE ADJUSTMENTS START */
/* ============================ */
@media (max-width: 1545px) {
    .header-contact{
        display: none;
    }

    .footer-content {
        
        gap: 100px; /* <-- CHANGED from 60px to remove space between columns */
        padding-bottom: 0px;
        flex-wrap: nowrap;
        
    }
    .footer-column {
        width: 200px;   /* Sets a fixed width for ALL columns */
        margin-bottom: 40px;
    }

}


@media (max-width: 992px) {
    
    /* Footer */
    .footer-content {
        display: flex;
        flex-direction: column; /* Stack columns on mobile */
        align-items: center;
        padding-bottom: 0px;
        gap: 50px;
        margin-bottom: 40px;
        flex-wrap: nowrap;
        justify-content: center;
        padding-top: 40px;
        padding: 0 20px;
    }
    .main-footer {
        max-width: 100%;
        margin: 0 auto;
        font-family: "Roboto", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        font-style: normal;
        font-variation-settings: "wdth" 100;
        line-height: 1.5;
        padding-top: 40px;
    }
    .footer-column {
        width: 90%;
        margin-bottom: 1px;
        
    }
    .footer-column:last-child {
        margin-bottom: 0;
    }
    .footer-bottom p {
        text-align: center;
        font-family: "Roboto", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400px;
        font-size: 14px;
        font-style: normal;
        font-variation-settings: "wdth" 100;
        line-height: 1.5;
        margin-bottom: 5px;
    }
}


/* =================================== */
/* INNER HEADER - RESPONSIVE STYLES    */
/* =================================== */

@media (max-width: 1080px) {
    .header-inner .header-top {
        flex-wrap: wrap; /* Allow items to wrap on smaller screens */
        justify-content: space-between;
        padding: 10px 15px; /* Adjust padding for mobile */
    }

    .header-inner .logo {
        order: 1; /* Logo first */
        flex-grow: 1; /* Allow logo to take up space */
    }

    .header-inner .header-contact {
        order: 2; /* Phone number second */
        flex-grow: 1; /* Allow contact to take up space */
        justify-content: flex-end; /* Push to the right */
        font-size: 1em;
    }

    /* Override hamburger bar color for mobile if header-top is white */
    .header-inner .hamburger-bar {
        background-color: #0d47a1; /* Hamburger lines match phone number color */
    }

    .header-inner .hamburger {
        display: block; /* Show the hamburger */
        order: 3; /* Hamburger button last */
        margin-left: auto; /* Push hamburger to the far right */
    }

    /* 1. Hide the desktop navigation bar */
    .main-nav-inner {
        display: none;
        width: 100%; /* Take full width below the header-top */
    }

    /* 2. Styles for the dropdown mobile menu when it's active */
    .main-nav-inner.nav-active {
        display: block;
        position: absolute; /* Changed to fixed for full screen overlay */
        top: 80px; /* Adjust based on the actual height of your header-top */
        left: 0;
        right: 0;
        height: calc(100vh - 80px); /* Fill remaining viewport height */
        overflow-y: auto; /* Enable scrolling if menu is long */
        background-color: #0d47a1; /* Dark blue background */
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 999; /* Ensure it's above other content but below hamburger */
    }

    .main-nav-inner.nav-active ul {
        flex-direction: column; /* Stack the links vertically */
        align-items: center;
        padding: 10px 0;
    }

    .main-nav-inner.nav-active li {
        width: 100%;
        text-align: center;
    }

    .main-nav-inner.nav-active li a {
        padding: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-nav-inner.nav-active li:last-child a {
        border-bottom: none;
    }

    .header-inner .header-contact {
        display: none; /* This hides the contact info on small screens */
        order: 2; 
        flex-grow: 1; 
        justify-content: flex-end; 
        font-size: 1em;
    }
}

/* =================================================================== */
/* ABOUT US PAGE STYLES (Scoped to .page-about)                      */
/* =================================================================== */

.page-about .about-page-wrapper {
    display: flex;
    
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0px;
    padding-bottom: 60px;
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 10px;
}

/* --- Left Column (Main Content) --- */
.page-about .about-main-col {
    
    flex: 2.5;
    border-right: 1px solid #ddd;
    padding-right: 40px;
}

.page-about  h1 {
    text-align: left;
    font-size: 46px;
    font-weight: 300;
    font-variation-settings: "wdth" 100;
    color: #012c5f;
    margin-bottom: 10px;
    padding-left: 15%;
    padding-bottom: 15px;
}



/* Banner specific to the About page */
.page-about .about-hero-banner {
    background: url('../images/AboutUSBanner.jpg') no-repeat center center/cover;
    position: relative; /* REQUIRED: Parent must be relative for absolute positioning */
    color: #fff;
    min-height: 200px; /* Adjust as needed */
    border-radius: 8px;
    margin-bottom: 40px;
    overflow: hidden; /* Keep this to contain rounded corners if needed */
    
    
}

.page-about .about-hero-banner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    z-index: 1;
}

.page-about .about-hero-banner .banner-content {
    position: absolute; /* Take it out of normal flow */
    top: 0;             /* Stretch to the top edge */
    bottom: 0;          /* Stretch to the bottom edge */
    right: 5%;          /* Position 5% from the right edge */
    width: 65%;         /* Set desired width (adjust as needed) */
    z-index: 2;         /* Ensure it's above the overlay */

    /* --- STYLING --- */
    border-left: 1px solid #fff;
    padding-left: 20px; /* Space between border and text */
    
    /* Vertically align text inside using Flexbox (optional, remove if you want text at the top) */
    display: flex; 
    align-items: center; /* Vertically centers the text */
    /* If you want text at the top, remove display:flex and align-items:center, and add padding-top: 20px; padding-bottom: 20px; */

    /* --- TEXT STYLES --- */
    font-size: clamp(1rem, 1rem + 1vw, 1.3rem);
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    color: #fff; /* Ensure text is white */
    
    
}

/* Text content below the banner */
.page-about .about-text-content p {
    font-family: "Roboto", sans-serif;
    
    margin-top: 0;
    padding-left: 15%;
    padding-right: 10%;
    
}

.page-about .about-text-content p strong {
     /* Style the bolded text */
    font-weight: 900;
    color: #1b67fa;
}

.page-about .content-image img {
    width: 85%; /* Makes the image fill the width of the column */
    height: auto; /* Maintains the image's aspect ratio */
    display: block; /* Removes any extra space below the image */
    border-radius: 8px; /* Adds consistent rounded corners */
    padding-left: 15%;
    padding-right: 1px;
}

/* --- Right Column (Sidebar) --- */
.page-about .about-sidebar-col {
    flex: 1; /* Make this column narrower */
    min-width: 300px;
    margin-bottom: 20px;
    
}

.page-about .sidebar-box {
    background-color: #e2e8f0;
    color: #002c5f;
    padding: 30px;
    border-radius: 8px;
    max-width: auto;
    margin-left: auto;
    margin-right: 0;
}

.page-about .sidebar-box h3 {
    color: #002c5f;
    
    margin-top: 0;
    margin-bottom: 20px;
    text-align: left; /* Changed to left-align */
}

.page-about .sidebar-box ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.page-about .sidebar-box ul li {
    
    margin-bottom: 25px;
}

.page-about .sidebar-box ul li::before {
    content: '•';
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
   
}

/* Style the button in the sidebar */
.page-about .sidebar-box .button-primary {
    display: block;
    width: 80%;
    padding: 12px 20px;
    background-color: #1976d2;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    
    transition: background-color 0.3s ease;
    margin-left: auto;
    margin-right: auto;
}

.page-about .sidebar-box .button-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* --- Responsive for About Us Layout --- */
@media (max-width: 1150px) {
    .page-about h1{
        margin-bottom: 0px;
        padding-bottom: 0px;
    }
    .page-about .about-page-wrapper {
        padding-bottom: 0;
        
    }
    .page-about .about-hero-banner {
        margin-top: 0px;
        padding-top: 0px;
        background: url('../images/AboutUSBanner.jpg') no-repeat left;
    }
    .page-about .content-image img {
        margin-bottom: 20px;
    }
}

/* --- Responsive for About Us Layout --- */
@media (max-width: 992px) {
    
    .page-about .about-page-wrapper {
        flex-direction: column;
    }

    .page-about .about-main-col {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #ddd;
        padding-bottom: 30px;
    }

    .page-about .about-hero-banner {
        display: none;
    }
    .page-about .sidebar-box{
        width: 80%;
    }
    .page-about .about-text-content p {
        margin-top: 0;
        padding-left: 0%;
        padding-right: 0%;
        
    }
    .page-about .content-image img {
        margin-top: 0;
        padding-left: 0%;
        padding-right: 0%;
        object-fit: cover;
        margin-left: auto;
        margin-right: auto;
    }
    .page-about .sidebar-box {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

}




/* =================================================================== */
/* "WHAT WE DO" PAGE STYLES (Scoped to .page-what-we-do)             */
/* =================================================================== */

.page-what-we-do .page-container {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0px;
    padding-bottom: 60px;
}

.page-what-we-do .page-container > h1 {
    text-align: left;
    font-size: 64px;
    font-weight: 300;
    font-variation-settings: "wdth" 100;
    color: #012c5f;
    margin-bottom: 10px;
    padding-left: 10%;
    font-size: 46px;
    padding-bottom: 15px;
}

.page-what-we-do .two-column-wrapper {
    display: flex;
    gap: 40px;
}

.page-what-we-do .main-column {
    flex: 2.5;
    border-right: 1px solid #ddd;
    padding-right: 40px;
}

.page-what-we-do .page-hero-banner {
    background: url('../images/what-we-do-banner.jpg');
    position: relative; /* REQUIRED: Parent must be relative for absolute positioning */
    color: #fff;
    min-height: 200px; /* Adjust as needed */
    border-radius: 8px;
    margin-bottom: 40px;
    overflow: hidden; /* Keep this to contain rounded corners if needed */
}

.page-what-we-do .page-hero-banner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    z-index: 1;
}

.page-what-we-do .page-hero-banner .banner-content {
    position: absolute; /* Take it out of normal flow */
    top: 0;             /* Stretch to the top edge */
    bottom: 0;          /* Stretch to the bottom edge */
    right: 5%;          /* Position 5% from the right edge */
    width: 65%;         /* Set desired width (adjust as needed) */
    z-index: 2;         /* Ensure it's above the overlay */

    /* --- STYLING --- */
    border-left: 1px solid #fff;
    padding-left: 20px; /* Space between border and text */
    
    /* Vertically align text inside using Flexbox (optional, remove if you want text at the top) */
    display: flex; 
    align-items: center; /* Vertically centers the text */
    /* If you want text at the top, remove display:flex and align-items:center, and add padding-top: 20px; padding-bottom: 20px; */

    /* --- TEXT STYLES --- */
    font-size: clamp(1rem, 1rem + 1vw, 1.3rem);
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    color: #fff; /* Ensure text is white */
    

    
}

.page-what-we-do .services-list .service-item {
    margin-bottom: 35px;
    padding-left: 15%;
    padding-right: 10%;
}

.page-what-we-do .service-item h3 {
    font-family: "Roboto", sans-serif;
    
    color: #0d47a1;
    margin-top: 0;
    margin-bottom: 0;
}

.page-what-we-do .service-item p {
    font-family: "Roboto", sans-serif;
    
    
    margin-top: 0;
}

.page-what-we-do .service-item ul {
    list-style-type: disc;
    margin-top: 16px;
}

.page-what-we-do .service-item ul li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 8px;
}

.page-what-we-do .service-item ul li::before {
    position: absolute;
    left: 0;
    top: 0;
    color: #0d47a1;
}

.page-what-we-do .service-item .note {
    font-size: 0.9em;
    font-style: italic;
    color: #555;
    margin-top: 15px;
}

.page-what-we-do .content-image img {
    width: 85%; /* Makes the image fill the width of the column */
    height: auto; /* Maintains the image's aspect ratio */
    display: block; /* Removes any extra space below the image */
    border-radius: 8px; /* Adds consistent rounded corners */
    padding-left: 15%;
    padding-right: 1px;
   
}

.page-what-we-do .sidebar-column {
    flex: 1;
}

.page-what-we-do .sidebar-box {
    background-color: #e2e8f0;
    color: #002c5f;
    padding: 30px;
    border-radius: 8px;
    max-width: auto;
    margin-left: auto;
    margin-right: auto;
}

.page-what-we-do .sidebar-box p {
    margin-bottom: 25px;
}

.page-what-we-do .sidebar-box .button-primary {
    display: block;
    width: 80%;
    padding: 12px 20px;
    background-color: #1976d2;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    
    transition: background-color 0.3s ease;
    margin-left: auto;
    margin-right: auto;
}

.page-what-we-do .sidebar-box .button-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

@media (max-width: 992px) {
    .page-what-we-do .page-hero-banner{
        display: none;
    }
    .page-what-we-do .two-column-wrapper {
        flex-direction: column;
    }

    .page-what-we-do .service-item ul li {
        padding-bottom: 0px;
        
    }

    .page-what-we-do .main-column {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #ddd;
        padding-bottom: 20x;
    }

    .page-what-we-do .content-image img {
        margin-bottom: 40px;
    }

}


/* =================================================================== */
/* "WHY CHOOSE ALPHA ASC" PAGE STYLES (Scoped to .page-why-choose)    */
/* Based on "What We Do" layout and new image.                         */
/* =================================================================== */

.page-why-choose .page-container {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0px;
    padding-bottom: 60px;
}

.page-why-choose .page-container > h1 {
    text-align: left; /* Aligned to left as per image */
    font-size: 64px; /* Large font as per image and 'What We Do' */
    font-weight: 300;
    font-variation-settings: "wdth" 100;
    color: #012c5f;
    margin-bottom: 10px;
    padding-left: 10%; /* Matches 'What We Do' indentation */
    font-size: 46px;
    padding-bottom: 15px;
}

.page-why-choose .two-column-wrapper {
    display: flex;
    gap: 40px; /* Space between the two columns */
}

/* --- Left Column (Main Content) --- */
.page-why-choose .main-column {
    flex: 2.5; /* Wider column for content */
    border-right: 1px solid #ddd; /* Divider line */
    padding-right: 40px; /* Space from divider */
}

/* Banner specific to the "Why Choose" page */
.page-why-choose .page-hero-banner {
    background: url('../images/whyChoose.jpg') no-repeat center center/cover; /* The background image */
    
    position: relative; /* REQUIRED: Parent must be relative for absolute positioning */
    color: #fff;
    min-height: 200px; /* Adjust as needed */
    border-radius: 8px;
    margin-bottom: 40px;
    overflow: hidden; /* Keep this to contain rounded corners if needed */
}

.page-why-choose .page-hero-banner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    z-index: 1;
}

.page-why-choose .page-hero-banner .banner-content {
    position: absolute; /* Take it out of normal flow */
    top: 0;             /* Stretch to the top edge */
    bottom: 0;          /* Stretch to the bottom edge */
    right: 5%;          /* Position 5% from the right edge */
    width: 65%;         /* Set desired width (adjust as needed) */
    z-index: 2;         /* Ensure it's above the overlay */

    /* --- STYLING --- */
    border-left: 1px solid #fff;
    padding-left: 20px; /* Space between border and text */
    
    /* Vertically align text inside using Flexbox (optional, remove if you want text at the top) */
    display: flex; 
    align-items: center; /* Vertically centers the text */
    /* If you want text at the top, remove display:flex and align-items:center, and add padding-top: 20px; padding-bottom: 20px; */

    /* --- TEXT STYLES --- */
    font-size: clamp(1rem, 1rem + 1vw, 1.3rem);
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    color: #fff; /* Ensure text is white */
}



/* Styles for the lists below the banner */
.page-why-choose .page-text-content {
    /* No additional padding needed here if content is within main-column */
    margin-bottom: 35px;
    padding-left: 15%;
    padding-right: 10%;
}

.page-why-choose h2 {
    font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-size: 46px;
	color: #002c5f;
  font-style: normal;
    
    margin-top: 40px; /* Space above "Your Visit" */
    margin-bottom: 25px;
    text-align: left;
}

.page-why-choose .feature-list {
    list-style: none; /* Remove default bullets */
    padding-left: 0;
    margin-bottom: 30px;
}

.page-why-choose .feature-list li {
    position: relative;
    padding-left: 25px; /* Space for custom bullet */
    
    line-height: 1.6;
    color: #333;
}

.page-why-choose .feature-list li strong {
    color: #0d47a1; /* Bold text color */
    font-weight: 600;
}

.page-why-choose .feature-list li::before {
    content: '•'; /* Custom bullet point */
    color: #1976d2; /* Blue bullet color */
    position: absolute;
    left: 0;
    top: 0;
    
    line-height: 1; /* Align with text */
}

.page-why-choose .content-image img {
    width: 85%; /* Makes the image fill the width of the column */
    height: auto; /* Maintains the image's aspect ratio */
    display: block; /* Removes any extra space below the image */
    border-radius: 8px; /* Adds consistent rounded corners */
    padding-left: 15%;
    padding-right: 1px;
    
}

/* --- Right Column (Sidebar) --- */
.page-why-choose .sidebar-column {
    flex: 1; /* Narrower column for sidebar */
    
}

.page-why-choose .sidebar-box {
    background-color: #e2e8f0;
    color: #002c5f;
    
    border-radius: 8px;
    max-width: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
}

.page-why-choose .sidebar-box h3 {
    color: #002c5f;
    
    margin-top: 0;
    margin-bottom: 20px;
    text-align: left;
}

.page-why-choose .sidebar-box ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.page-why-choose .sidebar-box ul li {
    
    line-height: 1.5;
    margin-bottom: 25px;
}

.page-why-choose .sidebar-box ul li::before {
    
    margin-bottom: 25px;
}

.page-why-choose .sidebar-box .button-primary {
    display: block;
    width: 80%;
    padding: 12px 20px;
    background-color: #1976d2;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    border-radius: 5px;
    
    transition: background-color 0.3s ease;
    
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.page-why-choose .sidebar-box .button-primary:hover {
    
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    
}

/* --- Responsive for Why Choose Layout --- */
@media (max-width: 992px) {
    .page-why-choose .page-hero-banner{
        display: none;
    }
    .page-why-choose .two-column-wrapper {
        flex-direction: column;
    }

    .page-why-choose .main-column {
        border-right: none; /* Remove vertical divider */
        padding-right: 0;
        border-bottom: 1px solid #ddd; /* Add horizontal divider */
    }
    .page-why-choose .content-image img {
        margin-bottom: 40px;
    }
}

/* =================================================================== */
/* "FACILITIES & TECHNOLOGY" PAGE STYLES (Scoped to .page-facilities) */
/* =================================================================== */

.page-facilities .page-container > h1 {
    display: none; /* Hide the h1 in the container, as it's now inside the column */
    font-size: 46px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0px;
}

.page-facilities .two-column-wrapper {
    display: flex;
    gap: 40px;
    padding: 40px 0;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0px;
}

/* --- Left Column --- */
.page-facilities .main-column {
    flex: 2.5; /* Wider column for content */
    border-right: 1px solid #ddd; /* The vertical dividing line */
    padding-right: 40px; /* Space between the content and the line */
}

.page-facilities .main-column h1 {
    text-align: left;
    font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-size: 46px;
	color: #002c5f;
  font-style: normal;
    margin-bottom: 30px;
    padding-left: 10%;
}

/* --- Right Column (Blank) --- */
.page-facilities .sidebar-column {
    flex: 1; /* Narrower, empty column */
}

/* --- Gallery Styles --- */
.page-facilities .image-gallery-slider {
    position: relative;
    max-width: 900px;
    margin: 0 auto 10px auto;
    overflow: hidden; /* This is crucial for hiding other slides */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    
    
}

.page-facilities .gallery-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    align-items: flex-start; /* Keeps items aligned to the top */
}

.page-facilities .gallery-track .slide {
    flex-basis: 100%; /* Tell the flex item its ideal size is 100% of the parent */
    flex-shrink: 0;
    line-height: 0;
}

.page-facilities .gallery-track img {
    width: 100%; 
    height: auto; 
    display: block; 
    object-fit: contain; /* Or cover, whichever you preferred */
}

.page-facilities .gallery-dots {
    display: flex;
    gap: 12px; /* Slightly more space between bigger dots */
    justify-content: center;
    margin-top: 5px; /* INCREASED margin to place them below the shadow */
    margin-bottom: 40px; /* Add some space below the dots as well */
}

.page-facilities .gallery-dots .dot {
    width: 20px; /* Increased size */
    height: 20px; /* Increased size */
    border-radius: 50%;
    background-color: #ccc; /* Lighter grey for inactive */
    border: 1px solid #999; /* Darker border */
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.page-facilities .gallery-dots .dot.active {
    background-color: #0d47a1; /* Active dot is dark blue */
    border-color: #0d47a1; /* Active dot border matches */
}

/* --- Text Content Styles --- */
.page-facilities .page-text-content p {
    
    margin-bottom: 20px;
    text-align: left;
}

.page-facilities .page-text-content h2 {
    font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-size: 46px;
	color: #002c5f;
  font-style: normal;
    margin-top: 40px;
    margin-bottom: 25px;
    text-align: left;
}

.page-facilities .feature-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 30px;
}

.page-facilities .feature-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    line-height: 1.6;
    color: #333;
    text-align: left;
}

.page-facilities .feature-list li::before {
    content: '•';
    color: #1976d2;
    position: absolute;
    left: 0;
    
    line-height: 0.9;
}

/* --- Responsive for Facilities Layout --- */
@media (max-width: 992px) {
    
    .page-facilities .two-column-wrapper {
        flex-direction: column;
    }

    .page-facilities .main-column {
        border-right: none; /* Remove the vertical line on mobile */
        padding-right: 0;
    }
    
    .page-facilities .sidebar-column {
        display: none; /* Hide the empty sidebar completely on mobile */
    }
    .page-facilities .gallery-track {
        /* Change from flex row to default block layout */
        display: block; 
        transform: none !important; /* Prevent JS from moving the track */
    }

    .page-facilities .gallery-track .slide {
        /* Each slide stacks */
        margin-bottom: 20px; 
        flex-basis: auto; /* Reset flex basis */
        min-width: auto; /* Reset min-width */
    }

    .page-facilities .gallery-track img {
        /* Image size for stacked view */
        width: 100%;
        height: auto;
    }
    .page-facilities .gallery-dots {
        display: none; /* Hide dots on smaller screens */
    }
}

/* =================================================================== */
/* "FAQs" PAGE STYLES (Scoped to .page-faqs)                         */
/* =================================================================== */

.page-faqs .two-column-wrapper {
    display: flex;
    gap: 40px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0px;
    padding-bottom: 60px;
}

/* --- Left Column --- */
.page-faqs .main-column {
    flex: 2.5; /* Wider column for content */
    border-right: 1px solid #ddd; /* The vertical dividing line */
    padding-right: 40px; /* Space between the content and the line */
}

.page-faqs h1 {
    text-align: left;
    font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-size: 46px;
	color: #002c5f;
  font-style: normal;
    
    padding-left: 15%;
    padding-bottom: 0px;

}

/* --- Right Column --- */
.page-faqs .sidebar-column {
    flex: 1; /* Narrower column for sidebar */
    min-width: 280px;
    
}

/* Banner specific to the "FAQs" page */
.page-faqs .faq-banner {
    background: url('../images/FAQs.jpg') no-repeat center center/cover; /* Background image for the banner */
    background-size:auto;
    background-repeat: no-repeat;
    background-position: center;
    
    position: relative;
    color: #fff;
    min-height: 200px;
    left: 0;
    display: flex;
    border-radius: 8px;
    margin-bottom: 40px;
    justify-content: flex-end;
    align-items: center;
    padding: 0px 8%;
}

.page-faqs .faq-banner img {
    height: 60px;
    width: auto;
    flex-shrink: 0;
}

.page-faqs .faq-banner .banner-content {
    position: relative;
    z-index: 2;
    font-size: clamp(.2rem, .2rem + 1.3vw, 1.3rem);
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    max-width: 70%;
    
    border-radius: 8px;
    margin-right: 5%;
}

/* Styles for the Q&A list */
.page-faqs .faq-list .faq-item {
    margin-bottom: 35px;
    padding-left: 15%;
    padding-right: 10%;
}

.page-faqs .faq-item h3 {
    color: #1976d2; /* Lighter blue for questions */
    
    margin-bottom: 0.5em;
    text-align: left;
}

.page-faqs .faq-item p {
    color: #333;
    
    text-align: left;
    margin: 0;
}

/* Styles for the "Compliance Notice" at the bottom */
.page-faqs .compliance-notice h3 {
    
    color: #1976d2; /* Lighter blue for questions */
    ; /* Darker blue */
    font-weight: 700;
}

.page-faqs .content-image img {
    width: 85%; /* Makes the image fill the width of the column */
    height: auto; /* Maintains the image's aspect ratio */
    display: block; /* Removes any extra space below the image */
    border-radius: 8px; /* Adds consistent rounded corners */
    padding-left: 15%;
    padding-right: 1px;
    
}

/* Styles for the sidebar on this page */
.page-faqs .sidebar-box {
    background-color: #e2e8f0; /* Light blue-grey background */
    color: #002c5f;
    padding: 30px;
    border-radius: 8px;
}

.page-faqs .sidebar-box p {
    
    margin-bottom: 25px;
}

.page-faqs .sidebar-box .button-primary {
    display: block;
    width: 80%;
    padding: 12px 20px;
    background-color: #1976d2;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    
    transition: background-color 0.3s ease;
    margin-left: auto;
    margin-right: auto;
}

.page-faqs .sidebar-box .button-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* --- Responsive for FAQs Layout --- */
@media (max-width: 992px) {
    .page-faqs .faq-banner{
        display: none;
    }
    .page-faqs .two-column-wrapper {
        flex-direction: column;
    }

    .page-faqs .main-column {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #ddd;
        padding-bottom: 40px;
        
    }
    .page-faqs .content-image img {
        margin-bottom: 40x;
    }
}

/* =================================================================== */
/* "CONTACT US" PAGE STYLES (Scoped to .page-contact)                 */
/* =================================================================== */
.page-contact .page-container {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0px;
    
}

.page-contact .page-container > h1 {
    text-align: left; /* Aligned to left as per image */
    font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-size: 46px;
	color: #002c5f;
  font-style: normal;
    margin-bottom: 10px;
    padding-left: 10%; /* Matches 'What We Do' indentation */
    padding-bottom: 15px;
}

.page-contact .two-column-wrapper {
    display: flex;
    gap: 40px;
}

/* --- Left Column --- */
.page-contact .main-column {
    flex: 2.5; /* Wider column for content */
    border-right: 1px solid #ddd; /* The vertical dividing line */
    padding-right: 40px; /* Space between the content and the line */
}

/* --- Right Column --- */
.page-contact .sidebar-column {
    flex: 1; /* Narrower column for sidebar */
    min-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

/* Banner specific to the "Contact Us" page */
.page-contact .contact-banner {
    background: url('../images/contact.jpg') no-repeat center center/cover; /* Background image for the banner */
    position: relative; /* REQUIRED: Parent must be relative for absolute positioning */
    color: #fff;
    min-height: 200px; /* Adjust as needed */
    border-radius: 8px;
    margin-bottom: 40px;
    overflow: hidden; /* Keep this to contain rounded corners if needed */
}

.page-contact .contact-banner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    z-index: 1;
}

.page-contact .contact-banner .banner-content {
    position: absolute; /* Take it out of normal flow */
    top: 0;             /* Stretch to the top edge */
    bottom: 0;          /* Stretch to the bottom edge */
    right: 5%;          /* Position 5% from the right edge */
    width: 65%;         /* Set desired width (adjust as needed) */
    z-index: 2;         /* Ensure it's above the overlay */

    /* --- STYLING --- */
    border-left: 1px solid #fff;
    padding-left: 20px; /* Space between border and text */
    
    /* Vertically align text inside using Flexbox (optional, remove if you want text at the top) */
    display: flex; 
    align-items: center; /* Vertically centers the text */
    /* If you want text at the top, remove display:flex and align-items:center, and add padding-top: 20px; padding-bottom: 20px; */

    /* --- TEXT STYLES --- */
    font-size: clamp(1rem, 1rem + 1vw, 1.3rem);
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    color: #fff; /* Ensure text is white */
}

.page-contact .contact-banner .banner-content span {
    display: block;
    font-size: 0.7em;
    font-weight: 300;
}

/* --- Contact Form Styles --- */
.page-contact .contact-form-section {
    margin-bottom: 35px;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 40px;
    padding-bottom: 40px;
    position: relative;
}
.formbackground {
 background-color: #c0ccda;
 margin: 15%;
 margin-top: 10px;

}
.page-contact .contact-form-section h2 {
    color: #0d47a1;
    font-size: 1.8em;
    font-weight: 500;
    margin-bottom: 25px;
    text-align: left;
}

.page-contact .contact-form-section .form-group {
    margin-bottom: 20px;
    background-color: #c0ccda;
}

.page-contact .contact-form-section label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 0.95em;
}

.page-contact .contact-form-section input[type="text"],
.page-contact .contact-form-section input[type="email"],
.page-contact .contact-form-section input[type="tel"],
.page-contact .contact-form-section textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box; /* Include padding in width */
    transition: border-color 0.3s ease;
    font-family: "Roboto", sans-serif;
}

.page-contact .contact-form-section input:focus,
.page-contact .contact-form-section textarea:focus {
    border-color: #1976d2;
    outline: none;
}

.page-contact .contact-form-section textarea {
    resize: vertical; /* Allow vertical resizing only */
}

/* Styling for the new consent checkbox */
.page-contact .form-group-checkbox {
    display: flex;
    align-items: flex-start; /* Aligns checkbox with the top of the text */
    gap: 10px;
}

.page-contact .form-group-checkbox input[type="checkbox"] {
    margin-top: 5px; /* Adjust vertical alignment */
    flex-shrink: 0;
}

.page-contact .form-group-checkbox label {
    font-size: 0.9em;
    font-weight: 400;
    color: #555;
    line-height: 1.4;
    cursor: pointer;
}

.page-contact .form-group-checkbox label a {
    color: #1976d2;
    text-decoration: underline;
}

/* Style for the disabled button state */
.page-contact .button-primary:disabled {
    background-color: #aaa;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.page-contact .contact-form-section .button-primary {
    display: inline-block;
    padding: 12px 30px;
    background-color: #1976d2;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    margin-right: auto;
    margin-left: auto;
    
}

.page-contact .contact-form-section .button-primary:hover {
    background-color: #1565c0;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.page-contact .submitbutton {
    width: 30%;
    margin-left: auto;  /* These two lines will center the button */
    margin-right: auto; /* within its container */
}

.page-contact .form-message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    font-weight: 600;
    display: none; /* Hidden by default, shown by JS */
}

.page-contact .form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #badbcc;
}

.page-contact .form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}


/* --- Sidebar Map & Info Styles --- */
.page-contact .sidebar-column {
    flex: 1.5; 
    min-width: 320px;
    /* Remove flexbox centering if it was added here */
    /* display: flex; REMOVE */
    /* flex-direction: column; REMOVE */
    /* align-items: center; REMOVE */
    padding-left: 20px; /* Add some padding to the left of the sidebar content */
    text-align: center; /* Center text within the blue box */
    margin-top: 0px;
    padding-top: 0px;
}

/* Style for the HOURS section */
.page-contact .contact-hours h3 {
    
    
    font-weight: 500;
    margin-bottom: 5px;
    margin-top: 0px;
    padding-top: 0px;
    
}

.page-contact .contact-hours p {
    
    line-height: 1.6;
    color: #555;
    margin-bottom: 10px; /* Space below hours */
    
}

/* Map styles */
.page-contact .sidebar-map {
    margin-bottom: 0; 
    border: 1px solid #ddd;
    border-bottom: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto; 
}

.page-contact .sidebar-map iframe {
    width: 100%;
    height: 300px;
    display: block;
    border: none;
    margin-left: auto;
    margin-right: auto; 
}

/* Blue address box */
.page-contact .address-box {
    
    padding-top: 10px;
    text-align: center; /* Center text within the blue box */
    
    line-height: 1.6;
    margin-bottom: 10px;
}

.page-contact .address-box p {
    margin: 0;
    
}

/* Style for the GETTING HERE section */
.page-contact .contact-directions h3 {
    
    font-weight: 500;
    margin-bottom: 5px;
    text-align: center; /* Ensure left alignment */
}

.page-contact .contact-directions p {
    
    line-height: 1.6;
    color: #555;
    margin-bottom: 10px;
    text-align: center; /* Ensure left alignment */
    
}

.page-contact .loader {
    /* Make it bigger */
    width: 100px; 
    height: 100px;
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #1976d2; /* Blue */
    border-radius: 50%;
    
    /* Positioning for centering */
    position: absolute; 
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%); /* Center trick */
    z-index: 10; /* Ensure it's above form fields */

    /* Keep animation */
    animation: spin 1s linear infinite;
    
    /* Remove properties related to inline display */
    /* display: inline-block; REMOVE */
    /* margin-left: 10px; REMOVE */
    /* vertical-align: middle; REMOVE */
    
    /* Start hidden (handled by JS, but good default) */
    display: none;
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
  


@media (max-width: 1150px) {
    .formbackground {
        background-color: #c0ccda;
        margin: 0%;
        margin-top: 10px;
       }

}


/* --- Responsive for Contact Layout --- */
@media (max-width: 992px) {
    .page-contact .page-container {
        margin-left: auto;
        margin-right: auto;
    }

    .page-contact .contact-banner{
        display: none;
    }
    .page-contact .two-column-wrapper {
        flex-direction: column;
        gap: 10px;
        margin: 0px;
    }

    .page-contact .main-column {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #ddd;
        padding-bottom: 40px;
        margin-bottom: 40px;
    }
    .page-contact .loader {
        /* Make it bigger */
        width: 80px; 
        height: 80px;
        
        
        /* Positioning for centering */
        position: absolute; 
        top: 50%;
        left: 50%;
    }

    .page-contact .contact-directions p {
    
        line-height: 1.6;
        color: #555;
        margin-bottom: 10px;
        text-align: center; /* Ensure left alignment */
        padding-right: 10px;
    }
}

@media (max-width: 500px) {
    .page-contact .sidebar-column {
        
        /* Remove flexbox centering if it was added here */
        /* display: flex; REMOVE */
        /* flex-direction: column; REMOVE */
        /* align-items: center; REMOVE */
        
        padding-left: 0px;
        text-align: center; /* Center text within the blue box */
        margin-top: 0px;
        padding-top: 0px;
        margin-left: auto;
        margin-right: auto;
        
        
        min-width: 0px;
    }    
    .page-contact .sidebar-map iframe {
        width: 100%;
        height: 300px;
        display: block;
        border: none;
    }
    .page-contact .contact-hours h3 {
    
    
        font-weight: 500;
        margin-bottom: 5px;
        margin-top: 0px;
        padding-top: 0px;
        
    }
    
    .page-contact .contact-hours p {
        
        line-height: 1.6;
        color: #555;
        margin-bottom: 10px; /* Space below hours */
        
    }
    
    /* Map styles */
    .page-contact .sidebar-map {
        width: 95%;
        margin-bottom: 0; 
        border: 1px solid #ddd;
        border-bottom: none;
        
    }
    
    
    
    
}