body {
    margin: 0;
    width: 100%;
    }
    
    /* General Styles for Navigation */
    nav {
        background-color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        position: sticky;
        top: 0;
        z-index: 1000;
}
    
/* Logo styles */
.logo a.logo-content {
    font-family: 'Times New Roman', serif; /* Substitute for jsmath-cmti10 */
    font-style: italic;
    font-size: 24px;
    text-decoration: none;
    color: black; /* Dark grey color for better readability */
    display: block; /* Ensures that the <a> tag behaves like a block element */
}
    
.logo-png {
    width: 200px;
}

/* General styles, outside media query */
.hamburger {
    display: none; /* Hide hamburger button on larger screens */
    cursor: pointer;
    background: none;
    border: none;
    font-size: 30px; /* Increased size for better visibility */
    position: fixed; /* Fixed position to keep it on top */
    top: 10px; /* Position near the top */
    right: 10px; /* Position near the right edge */
    z-index: 1001; /* Higher z-index than the nav-links */
    color: black; /* Color for visibility */
}

.nav-links {
    display: flex; /* Ensure links are inline on desktop */
}

/* Navigation link styles */
.nav-link {
    font-family: 'Imprima', sans-serif;
    font-size: 18px;
    color:black;
    text-decoration: none;
    margin-left: 15px; /* Space between the navigation links */
}

.nav-link:hover {
    color: #087289; /* Darker grey on hover for visual feedback */
}

.banner {
    display: flex; /* Use flexbox for positioning children */
    justify-content: center; /* Horizontally center the child */
    align-items: center; /* Vertically center the child */
    height: 100%; /* Optional: Adjust depending on your layout needs */
    position: relative; /* Needed for absolute positioning of overlays */
    margin-top: 50px;
}


.main-banner {
    background-image: url('./images/banner1.png');
    background-size: cover;
    background-position: center;
    text-align: center;
    padding-top: 5vh;
    padding-bottom: 5vh;
    position: relative;
    width: 100%;
    height: 400px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    }
    
    .main-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity (last value) to make it darker or lighter */
    }
    
    .main-banner > * {
    position: relative; /* Ensures that the content is on top of the overlay */
    z-index: 1;
    }

.main-banner strong,
.main-banner p,
.main-banner button {
    font-family: 'Imprima', sans-serif;
}

.main-banner p, .main-banner strong {
    color: white;
    font-size: 20px;
}

.main-banner p {
    margin-bottom: 0; /* Removes bottom margin */
    margin-top: 0; /* Removes top margin, add this if you want to remove all vertical margins */
}


/* Existing styles for .banner-overlay */
.banner-overlay {
    position: absolute;
    color: black;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 40px;
    font-family: 'Kalam', cursive;
}

.banner-overlay.top-left {
    margin-bottom: 30%;
    left: 10px; /* Position from the left of the parent */
    text-align: right;
}

.banner-overlay.bottom-right {
    margin-top: 30%;
    right: 10px; /* Position from the right of the parent */
    text-align: left;
}

p, li {
    font-family: 'Imprima', sans-serif;
}

.text-panel {
    background-color: #2D5B65;
    margin-top: 5%;
    padding: 5%;
}

.white-font {
    color: white;
}

h3 {
    font-family: 'Imprima', sans-serif;
    text-align: center;
    margin-bottom: 5vh;
    font-size: 40px;
}

h4 {
    font-family: 'Imprima', sans-serif;
    text-align: center;
}

.card h4 {
    font-weight: bold;
    color: white;
    background-color: rgba(8, 114, 137, 0.9); /* Adjusted to 50% opacity */
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
    padding-left: 0.5vh;
    padding-right: 0.5vh;
    border-radius: 10px;
    width: 18vw;
}

.specialties {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5%;
    margin-bottom: 10%;
}

.card-holder {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 75vw;
    gap: 5vw; /* Adds space between cards */
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 calc(33.33% - 10vw); /* Adjusts the card width */
    max-width: 100%; /* Ensures the card does not exceed the container width */
    margin: 10px; /* Adds some margin for better spacing */
}


.card-image {
    height: 30vh; /* Set the height of the image to 50 pixels */
    width: auto; /* Maintain the aspect ratio */
}

footer {
    padding-top: 3vh;
    padding-bottom: 1vh;
    background: #087289;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Ensure alignment is centered for all child elements */
}

.footer-content {
    display: flex;
    justify-content: center;
    width: 100%; /* Ensure it spans the full width of the footer for even spacing */
}

.footer-contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 1.5vw;
    margin-left: 1.5vw;
}

.footer-button-section {
    text-align: center; /* Center the text and button */
    width: 100%; /* Full width to center align easily */
}

.logo-black {
    width: 150px;
}

footer a {
    font-family: 'Imprima', sans-serif;
    padding: 0;
    margin: 0;
    color: white; /* Ensure links are white in the footer */
    text-decoration: none;
    font-size: 17.5px;
}

.footer-button-section p {
    margin-top: 2.5vh;
    font-size: 14px;
}

footer h5 {
    font-family: 'Imprima', sans-serif;
    color: white;
    font-size: 13px;
}

footer p {
    text-align: center;
}

footer a.logo-content {
    font-family: 'Times New Roman', serif; /* Substitute for jsmath-cmti10 */
    font-style: italic;
    font-size: 24px;
    text-decoration: none;
    color: white; /* Dark grey color for better readability */
    display: block; /* Ensures that the <a> tag behaves like a block element */
    margin-right: 1.5vw;
    margin-left: 1.5vw;

}

.dark-button {
    margin-top: 20px; /* Optional: adds space above the button */
    width: 25vw; /* Adjust width as per design requirement */
    padding: 10px 20px; /* Adjust padding as needed */
    font-size: 16px;
    border-radius: 25px;
    background-color: rgba(0, 0, 0, 0.1);
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}
    
.dark-button:hover {
    background-color: rgba(0, 0, 0, 0.4); /* Black background with 30% transparency on hover */
}

.light-button {
    margin-top: 20px; /* Optional: adds space above the button */
    margin-right: 2px;
    margin-left: 2px;
    width: 25vw; /* Adjust width as per design requirement */
    padding: 10px 20px; /* Adjust padding as needed */
    font-size: 16px;
    border-radius: 25px;
    background-color: rgba(0, 0, 0, 0.1);
    color: black;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}
    

/* Existing button styles */
.light-button, .dark-button {
    margin-top: 20px;
    width: 25vw; /* Adjust width as per design requirement */
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 25px;
    background-color: rgba(0, 0, 0, 0.1);
    color: black; /* for light-button */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dark-button {
    color: white;
    background-color: rgba(0, 0, 0, 0.4); /* initial color for dark button */
}

.toggles {
    display: flex;
    flex-direction: column;
    align-items: left;  /* This aligns children horizontally in the center */
    justify-content: center;  /* This aligns children vertically in the center */
    font-family: 'Imprima', sans-serif;
    text-align: left; /* Ensures that the text inside each child div is centered */
    width: 90vw; /* Ensures the flex container takes full width */
    margin-bottom: 5vh;
    margin-left: 5vh;
    margin-right: 5vh;



}

.toggles .button-set{
    display: flex;
    justify-content: center;
}

.about-columns {
    display: flex;
}

.about-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 2vh;
    padding-bottom: 2vh;

}

.about-columns p {
    margin-right: 5vw;
    margin-left: 5vw;
    margin-top: 0vw;
    margin-bottom: 0vw;
    font-size: large;
}

.about-photo-container {
    display: flex;
    flex-direction: column;
}

.about-photo-container p {
    margin-top: 15px;
    margin-bottom: 20px;
}

.about-columns ul {
    font-family: 'Imprima', sans-serif;
    margin-right: 7.55vw;
    margin-left: 7.5vw;
    margin-top: 2.5vw;
    margin-bottom: 2.5vw;
}

.about-image {
    height: 40vh; /* Set the height of the image to 50 pixels */
    width: auto; /* Maintain the aspect ratio */
    margin-left: 6vw;
    margin-top: 5vw;
}

.about-overlay {
    position: absolute; /* Positioning outside the normal flow */
    color: black; /* Text color */
    padding: 5px 10px; /* Padding around the text */
    border-radius: 5px; /* Rounded corners for aesthetic */
    font-size: 40px;
    font-family: 'Kalam', cursive;
    left: 10px; /* Position from the left of the parent */
    text-align: left;
}

.cpca-logo {
    width: 10vw;
    height: auto;
    margin-left: 10vw;
}

@media (max-width: 1000px) {
    .cpca-logo {
        width: 15vw;
        height: auto;
        margin-left: 15vw;
    }
}

h2 {
    color: black;
    font-size: 40px;
    font-family: 'Kalam', cursive;
    text-align: center;
}

.medium-banner-container {
    display: flex;
    justify-content: center;
}

.banner-medium {
    width: 70vw;
    height: auto;
    margin-bottom: 10vh;
}

.fees-container {
    padding: 5vw;
}

iframe {
    width: 70vw;
    margin-bottom: 10vh;
}

h6, label {
    color: #087289;
    font-size: 20px;
    font-family: 'Kalam', cursive;
    text-align: left;
    margin: 0;
}

.fees-container .button-set{
    display: flex;
    justify-content: center;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8vh;
    width: 98.3vw;
}
label {
    width: 10vw;
}

input, .text-area {
    width: 60vw;
    margin: 5px;
    border-radius: 5px;
    border-color:2px grey;
}

form div {
    width: 70vw;
    display: flex;
    margin: 2.5px;
}

.submit {
    display: flex;
    justify-content: center;
}

.toggles h6 {
    cursor: pointer;
    user-select: none;
    font-size: 25px;
}
    
/* Media Query for screens smaller than 1171px */
@media (max-width: 1000px) {
    /* Increase font size in the main banner for better readability on mobile */
    .main-banner {
        height: 35vh;
    }
    
    .main-banner p, .main-banner strong {
        font-size: 20px; /* Larger font size for better readability */
        color: white; /* Ensures text color is white for visibility */
    }

    /* Increase the hamburger menu size for easier interaction */
    .hamburger {
        display: block; /* Ensures the hamburger is visible on small screens */
        font-size: 50px; /* Larger icon size */
        padding: 10px; /* Larger clickable area */
        color: black; /* Set a visible color for the hamburger icon */
    }

    /* Adjust footer font sizes for better visibility on mobile */
    footer a, footer p, footer h5, footer .white-font{
        font-size: 18px; /* Larger text for readability */
        color: white; /* Maintain white text in the footer for contrast */
    }

    .footer-button-section .white-font {
        margin-top: 0px;
        margin-bottom: 2vh;
    }

    /* Adjusting the footer layout to ensure it is responsive and elements are well-spaced */
    footer {
        padding-top: 20px;
        padding-bottom: 20px;
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center-align the content */
    }

    /* Ensuring navigation links are properly formatted and easy to tap */
    .nav-links {
        display: none; /* Hide links initially */
        flex-direction: column; /* Stack them vertically when shown */
        position: fixed; /* Changed from absolute to fixed */
        background-color: white; /* Ensure background is white */
        width: 100%; /* Full width */
        height: 100vh; /* Full height of the viewport */
        top: 0; /* Position at the top */
        left: 0; /* Position to cover the whole screen */
        z-index: 999; /* Ensure it's on top */
        align-items: center; /* Center links horizontally */
        justify-content: center; /* Center links vertically */
        margin-top: 10vh; /* Ensure margin clears the hamburger icon */
    }

    .nav-link {
        padding: 20px; /* Larger padding for easier tap targets */
        width: 100%; /* Make links full width */
        text-align: center; /* Center align links */
        border-bottom: 1px solid gray; /* Optional separator */
        color: black; /* Ensure text color is visible */
        display: block; /* Ensure links are block level */
        font-size: 25px;
    }

    .about-overlay {
        font-size: 25px;
    }

    /* Image responsiveness adjustments */
    .logo-png, .logo-black, .about-image {
        width: 35vw; /* Responsive width for logos and images */
        height: auto; /* Maintain aspect ratio */
    }

    /* Form and input adjustments for better accessibility */
    form > div {
        display: flex;
        flex-direction: column; /* Stack the children (label and input) vertically */
        width: 80vw; /* Use full width for each form element */
        padding-left: 10vw;
        padding-right: 10vw;
    }

    input[type="text"], input[type="email"], textarea {
        width: 100%; /* Make all inputs and textarea full width */
        margin: 10px 0; /* Add some vertical spacing */
        box-sizing: border-box; /* Include padding and borders in the width calculation */
        padding: 8px; /* Standard padding for better text alignment */
        border: 1px solid #ccc; /* Optional: adds a subtle border */
    }

    iframe {
        height: 30vh;
        width: 80vw
    }

    label {
        width: 100%; /* Full width to align with inputs */
        margin-bottom: 5px; /* Space between the label and input */
        font-size: 30px;
    }

    .dark-button, .light-button {
        width: 40vw;
        height: 40px;
        font-size: 2.8vw;
        margin-bottom: 40px;
    }

    .toggles {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 92vw;
        margin: 0
    }

    h4 {
        font-size: 24px;
    }

    .logo-black {
        width: 25vw;
    }

    .modality {
        display: flex;
        flex-direction: column;
        width: 80vw;
        height: auto;
        padding-left: 20vw;
    }

    h6 {
        font-size: 24px;
    } 
    
    li {
        font-size: 20px;
    }

    .about-columns {
        display: flex;
        flex-direction: column;
    }

    .specialties {
        margin-top: 10%;
        margin-bottom: 15%;
    }

    .card-holder {
        width: 90vw; /* Adjusts the container width on mobile */
        gap: 3vw; /* Reduces gap between cards on mobile */
    }

    .card {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1 1 100%; /* Makes each card take full width on mobile */
        margin-right: 0;
        margin-left: 0;
        text-align: center; /* Centers the text inside the cards */
    }

    .card img {
        margin: 0 auto; /* Centers the images inside the cards */
    }

    .card h4 {
        font-weight: bold;
        background-color: rgba(8, 114, 137, 0.9);; /* Adjusted to 50% opacity */
        width: 45vw;
    }
}
    
embed {
    width: 100vw;
    height: 100vh;
}

.steps-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px 0;
}

.step {
    font-family: 'Imprima', sans-serif;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    margin: 10px;
    flex: 1;
    color: black; /* Set text color to black */
}

.step-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.step-number {
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    color: #000;
    font-size: 1.5em;
    font-weight: bold;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.step-title {
    font-size: 1.2em;
    font-weight: bold;
    color: black; /* Set title color to black */
}

.step1 {
    background-color: rgba(255, 107, 107, 0.4); /* Red background with 20% opacity */
}

.step2 {
    background-color: rgba(77, 166, 255, 0.4); /* Blue background with 20% opacity */
}

.step3 {
    background-color: rgba(255, 166, 77, 0.4); /* Orange background with 20% opacity */
}

.step4 {
    background-color: rgba(179, 107, 255, 0.4); /* Purple background with 20% opacity */
}

h3, p {
    color: black; /* Ensure all text is black for readability */
}


/* Desktop/Larger Screens */
.office-images {
    display: flex;
    justify-content: space-around;
    background-color: #2aa198; /* blue-green */
    padding: 20px;
}

.office-images img {
    width: 200px;
    height: 200px;
    border-radius: 10px;
}

/* Mobile: Scrollable overflow */
@media (max-width: 1000px) {
    .office-images {
        display: flex;
        justify-content: flex-start; /* Align items to start for better scrolling */
        overflow-x: auto; /* Enable horizontal scroll */
        white-space: nowrap; /* Prevent images from wrapping to the next line */
    }

    .office-images img {
        width: 150px; /* Slightly smaller images on mobile for better fit */
        margin-right: 10px; /* Add some space between images */
    }

    .office-images::-webkit-scrollbar {
        display: none; /* Hide scrollbar on Webkit browsers for cleaner UI */
    }
}

.insurance-logos {
    display: flex;
    flex-direction: column;
    background-color: black; /* blue-green */

}

/* Desktop/Larger Screens */
.insurance-logos-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: black; /* blue-green */
    padding: 5px;
    min-height: 12vh;
}

.insurance-logos-link {
    display: flex;
    justify-content: end;
    padding: 1.5vh;
}

.insurance-logos-container img {
    width: 120px;
    height: auto;
    max-height: 10vh;
    object-fit: contain;
    border-radius: 10px;
}

.insurance-link {
    color: white;
    text-decoration: none;
    font-family: 'Imprima', sans-serif;
    font-size: 12px;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    .insurance-logos-container {
        flex-direction: column;
        height: auto;
        padding: 10px;
    }

    .insurance-logos-container img {
        width: 100px; /* Smaller width for mobile */
        height: auto;
        margin: 5px 0;
    }

    .insurance-logos-link {
        justify-content: end;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .insurance-logos-container img {
        width: 80px; /* Even smaller width for extra-small screens */
        height: auto;
    }

    .insurance-link {
        font-size: 10px; /* Adjust font size for better readability */
    }
}

    
    
.modality-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px 0;
}
    
@media (max-width: 1000px) {
    .modality-container {
        flex-direction: column;
        align-items: center;
    }
    .modality {
        max-width: 90%;
    }

    .steps-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .step {
        width: 90vw;
    }

    .step-title {
        font-size: 35px;
    }
}