/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #C69EE4; /* Site body background color */
    color: #000; /* Default text color - adjust if needed */
}

/* Style resets and other styles... */

.header-container {
    position: fixed; /* Fix the header at the top of the viewport */
    top: 0; /* Align the top edge of the header with the top of the viewport */
    left: 0; /* Align the left edge of the header with the left of the viewport */
    width: 100%; /* Header spans the full width of the viewport */
    z-index: 1000; /* Ensure the header is above other content */
    background-color: #4D2E7E; /* Background color to match the site header */
}

.site-header {
    display: flex;
    justify-content: center; /* Center nav items on the page */
    background-color: #4D2E7E; /* Solid background color for nav */
    padding: 1em 0; /* Padding on top and bottom of the nav */
    align-items: center; /* Center align items vertically */
}

.logo-container {
    /* Adjust the size of the logo as needed */
}

.logo {
    position: fixed; /* Fix the logo at the top of the viewport */
    top: 10px; /* Adjust top position to fit your design */
    left: 10px; /* Adjust left position to fit your design */
    z-index: 1; /* Ensure the logo is above the header and nav */
    max-width: 150px; /* Adjust width as needed */
    height: auto;
}

@media (max-width: 768px) {
    .logo {
        max-width: 80px; /* Smaller logo on mobile devices */
    }

    .home-section, .meet-anita-section, .video-container, .services-section, .contact-section, .poetry-section { /* Replace with your actual text container class or ID */
        padding-left: 25%; /* This will push the text content to the right by 100px */
    }

}

.site-nav {
    margin-left: 200px; /* Push the nav to the right to make space for the logo */
    display: flex;
    justify-content: left; /* Align nav items in the center */
    width: 100%; /* Full width of header */
    position: relative; /* To stack the navigation above the logo */
    z-index: 1001; /* Ensure nav is below the logo's z-index */
    left: 150px;
}

    .site-nav .nav-link {
        background-color: #E2B3D3; /* Button color */
        color: #373435; /* Text color */
        text-decoration: none; /* Remove underline from links */
        padding: 0.5em 1em; /* Padding inside the buttons */
        margin: 0 10px; /* Margin between buttons */
        border-radius: 5px; /* Rounded corners for buttons */
        transition: background-color 0.3s; /* Smooth transition for hover effect */
        display: inline-block; /* Align buttons in a row */
    }

        .site-nav .nav-link:hover,
        .site-nav .nav-link:focus {
            background-color: #C99DBE; /* Slightly darker color on hover */
        }

.home-section {
    text-align: center;
    padding: 2em;
    /* Other styling */
}

/* Responsive styles */
@media (max-width: 768px) {
    .site-header {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .site-nav {
        justify-content: center; /* Center the navigation on smaller screens */
        padding-top: 0.5em; /* Add space between logo and nav */
    }

        .site-nav .nav-link {
            display: block; /* Stack the links vertically */
        }
}


/* Responsive Styles */
@media (max-width: 768px) {
    .site-nav {
        flex-direction: column; /* Stack nav items vertically on small screens */
        align-items: center;
    }

        .site-nav .nav-link {
            width: 100%; /* Full width buttons */
            text-align: center; /* Center text in buttons */
            margin-bottom: 0.5em; /* Add space between stacked buttons */
        }
}

/* Hamburger Menu Style */
.hamburger-menu {
    display: none;
    cursor: pointer;
    /* Additional styling as needed */
}

    .hamburger-menu .bar {
        width: 25px;
        height: 3px;
        background-color: #D1B0CC;
        margin: 5px 0;
        transition: 0.4s;
    }

/* Responsive Styles */
@media (max-width: 768px) {
    /* ... existing responsive styles ... */

    .hamburger-menu {
        display: block;
        position: absolute;
        top: 10px;
        right: 20px;
        z-index: 1002;
    }

    .site-nav {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-left: 0;
        /* Additional styling as needed */
    }

        .site-nav.active {
            display: flex;
        }
}

.fancy-font {
    font-family: 'Dancing Script', cursive; /* Use the fancy font-family */
    font-size: 1.5em; /* Example size, adjust as needed */
    font-weight: 700; /* Use a bolder weight if desired */
    color: #E861AE; /* Example color, adjust as needed */
}

.image-container {
    text-align: center; /* Centers inline or inline-block elements */
}

.centered-image {
    display: block; /* Makes the image a block-level element to allow margin auto to work */
    margin: 0 auto; /* Auto margins on the side center block-level elements */
    max-width: 100%; /* Makes the image responsive */
    height: auto; /* Maintains the aspect ratio */
}

.intro-box {
    width: 35%; /* Set the width of the box */
    margin: 0 auto; /* Center the box horizontally */
    padding: 1em; /* Add some padding inside the box */
    background-color: #C69EE4;
    text-align: center; /* Center-align the text */
}

@media (max-width: 768px) {
    .intro-box {
        width: 90%; /* Make the box wider on smaller screens for better readability */
    }
}

/* ... existing styles ... */

.meet-anita-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2em;
    background-color: #C69EE4;
}

.container {
    max-width: 1200px; /* or any max-width that fits your design */
    margin: 0 auto; /* This will center your container */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.video-container {
    flex: 1;
    padding: 1em;
}

    .video-container video {
        width: 100%; /* Responsive video width */
        max-width: 600px; /* Maximum video width */
        height: auto; /* Maintain aspect ratio */
    }

.bio-container {
    flex: 1;
    width: 35%; /* Set the width of the box */
    margin: 0 auto; /* Center the box horizontally */
    padding: 1em; /* Add some padding inside the box */
    background-color: #C69EE4;
    text-align: center; /* Center-align the text */

}

@media (max-width: 768px) {
    .meet-anita-section {
        flex-direction: column; /* Stack the video and bio on top of each other on small screens */
    }

    .container {
        flex-direction: column;
    }

    .video-container,
    .bio-container {
        width: 100%; /* Full width on small screens */
    }
}
.meet-anita-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2em;
}

.container {
    max-width: 1200px; /* or any max-width that fits your design */
    margin: 0 auto; /* This will center your container */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bio-container {
    flex: 1;
    padding: 1em;
    text-align: left; /* Align the bio text to the left */
}

    .bio-container p, h2 {
        text-align: center;
    }

.video-container {
    flex: 1;
    padding: 1em;
}

    .video-container video {
        width: 100%; /* Responsive video width */
        max-width: 600px; /* Maximum video width */
        height: auto; /* Maintain aspect ratio */
    }



----------------------------
.poetry-image-grid {
    display: grid;
    grid-template-columns: 1fr; /* One column grid */
    grid-template-rows: auto auto; /* Two rows, auto height */
    grid-gap: 10px; /* Space between grid items */
    max-width: 600px; /* Adjust as needed */
    margin: 0 auto; /* Center the grid */
}

.poetry-image-grid > div {
    border: 1px solid black; /* Just for demonstration */
}

.poetry-top-image {
    grid-column: 1 / -1; /* Span across all columns */
}

.poetry-bottom-images {
    display: flex; /* Use flexbox for the bottom images */
}

    .poetry-bottom-images > div {
        flex: 1; /* Both images take equal space */
    }

.poetry-img {
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove any default inline spacing */
}








@media (max-width: 768px) {
    .meet-anita-section,
    .container {
        flex-direction: column; /* Stack the bio and video on top of each other on small screens */
    }

    .video-container,
    .bio-container {
        width: 100%; /* Full width on small screens */
        padding: 0; /* Remove padding on small screens if desired */
    }
}

.video-container video {
    width: 50%; /* Adjust the width to make the video smaller */
    max-width: 600px; /* You can also adjust this value to limit how large it can get */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensures the video is treated as a block-level element */
    margin: 0 auto; /* Centers the video in its container */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .video-container video {
        width: 90%; /* Makes the video wider on smaller screens for better visibility */
    }
}

.services-section, .poetry-section {
    text-align: center; /* Center aligns the header */
    padding: 2em; /* Adds some padding around the section */
}

.services-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates two columns */
    column-gap: 10%; /* 20px Adds some space between the two columns */
    justify-content: center; /* Center aligns the list in the section */
    max-width: 50%; /* 800px Adjust based on your design preference */
    margin: 0 auto; /* Centers the grid in the section */
}

    .services-list ul {
        list-style-type: disc; /* Adds bullets to the list */
        text-align: left; /* Left aligns the list text */
        padding-left: 10%; /* 20px Adds some padding for the bullets */
    }

@media (max-width: 768px) {
    .services-list {
        grid-template-columns: 1fr; /* Stacks the list into a single column on smaller screens */
    }
}

.appointments-section {
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center children horizontally */
    padding: 2em; /* Add padding around the section */
    text-align: center; /* Center the text */
}

.calendar-container {
    width: 100%; /* Set the width of the container */
    max-width: 800px; /* Max width for the container */
    margin: 0 auto; /* Center the container on the page */
}

    .calendar-container iframe {
        width: 100%; /* Make the iframe responsive within the container */
        height: 600px; /* Set a fixed height for the iframe */
        border: none; /* Remove the border around the iframe */
    }

@media (max-width: 768px) {
    .calendar-container iframe {
        height: 400px; /* Adjust the height for smaller screens */
    }
}
/* ... existing styles ... */
.contact-section {
    background-color: #E2B3D3; /* Set this to your site's background color */
    padding: 2em;
    width: 100%;
}

.contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-row {
    display: flex;
    justify-content: space-between; /* This will space out the form groups */
    align-items: center; /* Aligns the elements vertically */
    flex-wrap: wrap; /* Wraps the elements to the next line if space runs out */
    gap: 0.5em; /* Add a gap between elements */
}

.form-group {
    display: flex;
    flex-wrap: wrap; /* Allows label and select to wrap if needed */
    align-items: center; /* Aligns the elements vertically */
}

    .form-group label {
        margin-right: 0.5em; /* Add a margin to the right of the label */
    }

.form-control {
    margin: 0.5em;
    flex-grow: 1; /* Allow input fields to fill available space */
}

.service-label {
    margin-right: 0.5em; /* Adds space between the label and the select list */
}

.form-select {
    flex-grow: 0; /* Prevents select from growing too large */
    width: auto; /* Adjust width as needed */
}

.form-submit {
    margin-top: 1em;
    background-color: #C69EE4;
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }

    .form-control,
    .form-select {
        margin: 0.5em;
        flex-grow: 1; /* Allows input and select to grow and fill available space */
    }

    .form-select,
    .form-submit {
        flex-basis: auto; /* Reset flex-basis on smaller screens */
    }
}

@media (max-width: 768px) {
    .form-group {
        flex-direction: column; /* Stacks label and input vertically on smaller screens */
        align-items: flex-start; /* Aligns items to the start of the container */
    }

    .home-section, .meet-anita-section, .video-container, .services-section, .contact-section, .poetry-section {
        padding-left: 25%; /* This will push the text content to the right by 100px */
    }

    .form-control,
    .form-select {
        width: 100%; /* Full width inputs and select on smaller screens */
    }

    .service-label {
        margin-right: 0; /* Removes right margin on smaller screens */
    }
}