html, body {
    height: 100%; /* Make sure both html and body elements are 100% height */
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column; /* Ensure the body is a flex container with column direction */
    min-height: 100vh; /* Full viewport height */
    background-color: #eddcca;
}

/* Global main styles */
main {
    flex: 1; /* Allow main content to grow and take up the remaining space */
    /* Removed the centering styles so it doesn't affect other pages */
}

/* Home page specific centering */
.home-main {
    display: flex; /* Use flexbox */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    flex: 1; /* Grow and take up remaining space */
}

p {
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
    color: #eddcca;
    text-decoration: none;
    text-align: center;
    margin-top: 0px; /* between q and a */
    margin-bottom: 0px; /* between q and a */
    
}


/* Hide the menu toggle (checkbox) on all screen sizes */
.menu-toggle {
    display: none;
}

/* ------------ HEADER ------------ */

/* Header adjustments */
header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #eddcca;
    width: 100%;
}

/* Logo - Responsive image */
.logo {
    display: block;
    max-width: 100%;
    height: auto;
    width: 100%;
    max-width: 700px;
}

/* Nav Bar - Adjusted for full width (on larger screens) */
.menu { 
    width: 700px;
    background-color: #646750;
    text-align: center;
    margin: 0 auto;
    padding-top: 2px;
    padding-bottom: 2px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav li {
    display: inline-block;
}

nav li a {
    display: inline-block;
    color: #eddcca;
    padding: 4px 25px;
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
    font-size: 1em;
    text-decoration: none;
}

nav li a:hover:not(.active) {
    color: #d5c6b5;
}

/* MOBILE STYLES */
@media (max-width: 720px) {
    /* Green bar (menu bar) for smaller screens only */
    .menu-bar {
        width: 100%;
        background-color: #646750; /* Green bar */
        height: 40px; /* Adjust height of the green bar */
        position: relative;
        z-index: 10; /* Set a high value to keep it above other elements */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Hamburger icon */
    .menu-icon {
        display: flex;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        padding: 5px;
    }

    /* Hamburger lines (spans) */
    .menu-icon span {
        background-color: #eddcca;
        width: 20px;
        height: 2px; /* Adjust the height of the lines */
        margin: 3px 0; /* Adjust space between the lines */
        transition: all 0.3s ease; /* Smooth transition for the lines */
    }

    /* When the menu toggle is checked (Hamburger menu clicked) */
    .menu-toggle:checked + .menu-icon span:nth-child(1) {
        transform: rotate(-45deg) translate(-3px, 8.5px); /* Rotate and translate to form top part of X */
    }

    .menu-toggle:checked + .menu-icon span:nth-child(2) {
        opacity: 0; /* Hide the middle line */
    }

    .menu-toggle:checked + .menu-icon span:nth-child(3) {
        transform: rotate(45deg) translate(-3px, -8.5px); /* Rotate and translate to form bottom part of X */
    }

    /* Hide the menu by default */
    .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #646750;
        position: absolute;
        top: 40px; /* Start the menu right below the smaller green bar */
        left: 0;
    }

    /* When the menu toggle is checked (Hamburger menu clicked) */
    .menu-toggle:checked + .menu-icon + .menu {
        display: flex;
    }

    /* Centering the vertical menu */
    .menu ul {
        flex-direction: column;
    }

    .menu li {
        margin: 10px 0;
        text-align: center;
    }

    .menu li a {
        padding: 10px;
        width: 100%;
        display: block;
    }
}




/* ------ HOME PAGE: MAIN BODY ON CREAM BACKGROUND -----*/

.homeQuote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 100px;
    padding-bottom: 150px;
}

h1 {
    margin-bottom: 30px; /* Space between the quote and button */
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.75em;
    color: #646750;
    text-align: center;
}

.button {
    text-decoration: none;
    background-color: #ac6e36;
    border: none;
    color: #eddcca;
    width: 225px;
    height: 40px;
    padding: 4px;
    border-radius: 30px;
    cursor: pointer;
    text-align: center;
    font-size: 1.5em;
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
}

.button:hover {
    background-color: #8c5113;
}


/* ----------------------SERVICES PAGE------------------ */
/* General styling for the services page */
.services-page {
    display: block; /* Ensure Flexbox doesn't affect this page globally */
}

.eo {
    width: 100%;
}

h2 {
    padding: 20px;
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.3em;
    color: #646750;
    text-decoration: none;
    text-align: center;
}

/* Flex container for each service */
.service-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping of items */
    justify-content: space-between;
    align-items: flex-start;
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    /* border: 1px solid #646750;  Optional: Add a border for clarity */
}

/* Title container */
.service-title {
    flex: 100%; /* Make the title take full width */
    text-align: left;
    margin-bottom: 10px;
}

.scripty {
    max-width: 100%; /* Allows the image to fill the available width */
}


/* Price box container */
.priceBox {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-right: 20px; /* Space between price and button */

}

/* Each entry in the price box (time + price) */
.entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    position: relative;
}

.serviceText {
    flex: 1;
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1em;
    color: #646750;
    text-decoration: none;
    text-align: left;
    margin-top: 0px; /* between q and a */
}

/* Time text on the left */
.time {
    flex: 1;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1em;
    color: #646750;
    text-decoration: none;
    text-align: left;
    margin-top: 0px; /* between q and a */
}

/* Dotted leaders after the time */
.time::after {
    content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    position: absolute;
    left: 100%;
    transform: translateX(-100%);
    white-space: nowrap;
}

/* Price on the right, aligned to the edge */
.price {
    flex-shrink: 0; /* Prevents the price from shrinking */
    text-align: right;
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1em;
    color: #646750;
    text-decoration: none;
    text-align: left;
    margin-top: 0px; /* between q and a */
}

/* Button container */
.service-button {
    flex: 1;
    text-align: right;
}

.service-button a {
    text-decoration: none;
}

.button {
    background-color: #ac6e36;
    border: none;
    color: #eddcca;
    width: 225px;
    height: 40px;
    padding: 4px;
    border-radius: 30px;
    cursor: pointer;
    text-align: center;
    font-size: 1.5em;
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
}

.button:hover {
    background-color: #8c5113;
}

/* Responsive layout for smaller screens */
@media (max-width: 720px) {
    .service-container {
        flex-direction: column; /* Stack everything vertically */
        justify-content: center; /* Center vertically */
        align-items: center; /* Center horizontally */
        text-align: center;
        margin-left: auto; /* Ensure it's centered horizontally */
        margin-right: auto; /* Ensure it's centered horizontally */
    }

    .EO {
        margin-left: auto; /* Ensure it's centered horizontally */
        margin-right: auto; /* Ensure it's centered horizontally */
        max-width: 350px;
    }
    .service-title {
        text-align: center; /* Center the title */
    }

    .service-button {
        text-align: center; /* Center the button on small screens */
        margin-top: 20px;
    }

    /* Center the priceBox container */
    .priceBox {
        margin: 0 auto; /* Center the entire box */
        text-align: left; /* Keep text aligned left inside the priceBox */
        max-width: 239px; /* Set a maximum width for the priceBox */
        width: 100%; /* Make sure it doesn’t exceed 100% of the viewport width */
    }
}



/* -------------- FAQ PAGE --------------*/

.faqBody {
    padding-top: 30px;
    padding-bottom: 70px;
    margin-left: auto;
    margin-right: auto;
    max-width: 550px;
}

/* Add padding for smaller screens */
@media (max-width: 720px) {
    .faqBody {
        padding-left: 30px; /* Add padding on the left */
        padding-right: 30px; /* Add padding on the right */
    }
}

.q {
    font-family: "ramaraja", sans-serif;
    font-weight:500;
    font-size: 1.4em;
    color: #ac6e36;
    text-decoration: none;
    text-align: left;
    line-height: 18px;   /* within paragraph */
    margin-top: 22px; /* between q and a */
    margin-bottom: 0px; /* between q and a */
}

.a {
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1em;
    color: #646750;
    text-decoration: none;
    text-align: left;
    margin-top: 0px; /* between q and a */
}

.note {
    font-family: "ramaraja", sans-serif;
    font-weight:500;
    font-size: 1.3em;
    color: #ac6e36;
    text-decoration: none;
    text-align: left;
    line-height: 18px;   /* within paragraph */
}


/* -------------- CONTACT PAGE --------------*/

.contactBody {
    padding-top: 70px;
    padding-bottom: 70px;
    margin-left: auto;
    margin-right: auto;
    max-width: 460px;
}

/* Add padding for smaller screens */
@media (max-width: 720px) {
    .contactBody {
        padding-left: 50px; /* Add padding on the left */
        padding-right: 50px; /* Add padding on the right */
    }
}
.contactText {
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1em;
    color: #646750;
    text-decoration: none;
    text-align: left;
    margin-top: 0px; /* between q and a */
}

.contactLink {
    font-family: "ramaraja", sans-serif;
    font-weight: 500;
    font-size: 1.4em;
    color: #ac6e36;
    text-decoration: none;
    line-height: 18px;
    margin-top: 22px;
    margin-bottom: 0px;
}

/* Visited state */
.contactLink:visited {
    color: #ac6e36; /* You can change this to a different color for visited links */
}

/* Hover state */
.contactLink:hover {
    color: #8c5113; /* Change to a different color when hovering */
    text-decoration: underline; /* Optional: add underline on hover */
}

/* Active state */
.contactLink:active {
    color: #8c5113; /* Color when the link is clicked */
}


/* -------------- DIRECTIONS PAGE --------------*/

.directionsBody {
    padding-top: 70px;
    padding-bottom: 70px;
    margin-left: auto;
    margin-right: auto;
    max-width: 550px;
}

.directionsText {
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1em;
    color: #646750;
    text-decoration: none;
    text-align: left;
    margin-top: 0px;
}

.directionsImage {
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center the image horizontally */
    margin: 0 auto; /* Ensure the container is centered */
    padding-bottom: 70px;
}

.directionsImage img {
    display: block;
    width: 100%; /* Ensure responsiveness */
    max-width: 650px; /* Limit max width to avoid stretching */
    height: auto; /* Maintain aspect ratio */
}

/* Add padding for smaller screens */
@media (max-width: 720px) {
    .directionsBody {
        padding-left: 20px;
        padding-right: 20px;
    }

    .directionsImage {
        padding-left: 20px;
        padding-right: 20px;
    }

    .directionsImage img {
        width: 100%; /* Ensure the image fits within the viewport */
        max-width: 100%; /* Don’t exceed the screen size */
    }
}



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

.aboutBody {
    padding-top: 70px;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
}

/* Add padding for smaller screens */
@media (max-width: 720px) {
    .aboutBody {
        padding-left: 30px; /* Add padding on the left */
        padding-right: 30px; /* Add padding on the right */
    }
}

.aboutFlex {  
    display: flex; 
    flex-wrap: wrap; /* Stack left on right for smaller screens */
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto; 
    max-width: 700px;
}


/* Box for pictures inside flex contaier */
.about-picBox { 
    flex: 1; 
    display: flex;
    flex-direction: column;
    margin: 0px 25px 50px 25px;
    max-width: 300px;
}

/* Box for text inside flex container -- used for both sections of text */
.about-textBox { 
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0px 25px 0px 25px;
    min-width: 300px;
}

.about-fullBox {
     flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0px 25px 50px 25px;
    min-width: 300px;
}

.aboutText {
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1em;
    color: #646750;
    text-decoration: none;
    text-align: left;
    margin-top: 0px; /* between q and a */
}

/* ------------- FOOTER ----origirally from YouTube tutorial (https://www.youtube.com/watch?v=jZ2XYDWKENs&list=PL3pyLl-dgiqBSBsC5O5AQHN1UsUk-60nc&index=8) __________________ */

.footerPic {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 700px;
}

/* .footer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
    background: #646750;
    color: #eddcca;
    height: 100px;
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1em;
    line-height: .4em;
    color: #eddcca;
    text-decoration: none;
    text-align: center;
} */

.footer {
    background: #646750;
    color: #eddcca;
    max-width: 700px;
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 400;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    margin-top: auto; /* This makes the footer stick to the bottom */
    margin-left: auto;
    margin-right: auto;
}

.footer-content { /* container to hold the three sections of information */ 
    display: flex;
    align-items: flex-start; 
    justify-content: space-between; /* Space items evenly */
    height: 100%; /* Occupy full height of footer */
    padding-top: 15px;
    padding-bottom: 10px;

}

.footer-sectionCopyright {
    flex: 1;
    padding: 0 25px;
}

.footer-sectionAddress {
    flex: 1;
    padding: 0 25px;
}

.footer-sectionLogo {
    flex: 1;
    padding: 0 25px;
}

.amta_logo {
    max-width: 50px;
}

/* For screens smaller than 768px */
@media (max-width: 720px) {
    .footer {
        height: auto; /* Adjust height automatically based on content */
        position: relative; /* Change position to relative for proper stacking */
    }
    
    .footer-content {
        flex-direction: column; /* Stack items vertically */
        justify-content: space-between; /* Add space between items */
        padding: 20px; /* Add padding to footer content */
    }

    .footer-sectionCopyright,
    .footer-sectionAddress,
    .footer-sectionLogo {
        flex: none; /* Reset flex to default */
        width: 100%; /* Set width to full for smaller screens */
        text-align: center; /* Center align text */
        padding: 10px 0; /* Add padding to separate sections */
    }
    

    /* Center align text inside .footer-sectionContact */
    .footer-sectionAddress p,
    .footer-sectionAddress p {
        text-align: center;
    }      
}