/* Style for the HTML and body to ensure full height and proper layout */
html, body {
    height: 100%; /* Ensure the body takes up the full height of the viewport */
    margin: 0; /* Remove default margin */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack elements vertically */
    font-family: 'Nunito Sans', sans-serif;  /* Set font family */
    background-color: #fafafa; /* Set background color */
}

/* Apply Nunito Sans font to the entire body */
body {
    font-family: 'Nunito Sans', sans-serif; /* Apply Nunito Sans font */
    font-size: 1rem; /* Set a default font size */
    color: #333; /* Set a default text color */
    line-height: 1.6; /* Improve readability */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensure content and footer are spaced properly */
}


/* Exclude headers that already use Corinthia or Comfortaa */
h1, h2, h3, h4, h5, h6 {
    font-family: inherit; /* Keep the font family as defined for headers */
}

/* Ensure specific elements like buttons, inputs, and links inherit Nunito Sans */
button, input, textarea, select, a {
    font-family: 'Nunito Sans', sans-serif; /* Apply Nunito Sans font */
}

/* Banner Section */
/* Banner Section */
.banner {
    position: relative; /* Set relative positioning for the container */
    width: 100%; /* Full width */
    height: 400px; /* Set a fixed height for the banner */
    background-color: #000; /* Optional: Add a fallback background color */
    z-index: 1; /* Set a low z-index to ensure it appears below the navbar */

}

/* Banner Image */
.banner img {
    width: 100%; /* Ensure the image spans the full width */
    height: 100%; /* Make the image fill the banner */
    object-fit: cover; /* Ensure the image scales properly without distortion */
    display: block; /* Ensure the image is treated as a block element */
}

/* Banner Heading Overlay */
.banner-heading {
    position: absolute; /* Position the heading absolutely within the banner */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for perfect centering */
    text-align: center; /* Center the text */
    background: radial-gradient(circle, rgba(53, 39, 59, 0.8) 50%, rgba(53, 39, 59, 0) 100%); /* Darker in the center, fading to transparent */
    color: white; /* White text color */
    padding: 20px; /* Add padding for spacing */
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Optional: Add a subtle shadow */
    z-index: 2; /* Ensure it appears above the image */
    width: 90%; /* Keep the same width */
    height: auto; /* Allow height to adjust dynamically */
}

/* Main Heading */
.banner-heading h1 {
    font-size: 3rem; /* Adjust font size for the main heading */
    margin: 0; /* Remove default margin */
    line-height: 1.2; /* Adjust line height */
    font-family: 'Corinthia', cursive; /* Apply the Corinthia font */
}

/* Subheading */
.banner-heading h2 {
    font-size: 1.5rem; /* Adjust font size for the subheading */
    margin: 0; /* Remove default margin */
    font-weight: normal; /* Optional: Make the subheading lighter */
    font-family: 'Nunito Sans', sans-serif; /* Apply Nunito Sans font */
}

/* Hide the login text by default */
.login-text {
    display: none;
}

/* Show the login image by default */
.login-image {
    display: inline-block;
    width: 24px;
    height: 24px;
}

/* Default Navbar Styles */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    background-color: #8a5c9e; /* Darker purple */
    color: #fff;
    box-shadow: 0 0px 10px black;
    padding: 20px;
    border-radius: 2px;
    z-index: 1000; /* Set a high z-index to ensure it appears above other elements */
}

/* Style for navigation bar links */
.nav-links {
    display: flex; /* Default: visible on larger screens */
    list-style-type: none;
    margin: 0;
    padding: 0;
    gap: 20px;
    z-index: 1100; /* Set a higher z-index than the navbar */
}


/* Style for each link */
.nav-links a {
display: inline-block; /* Ensure the underline is only under the text */
    color: #f0f0f0; /* Slightly darker white */
    text-decoration: none;
    font-size: 25px;
    margin-right: 50px;
    padding: 5px 0; /* Add padding for better spacing */
}

/* Style for active link in the navbar */
.nav-links a.active {
    border-bottom: 2px solid #cba25a; /* Same underline style as the full-page navbar */
    padding-bottom: 4px; /* Add some spacing between the text and the underline */
}

/* Style for the menu button (hidden by default) */
.menu-toggle {
    display: none;
    background-color: #cba25a;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2rem;
}

/* Responsive Navbar for Smaller Screens */
@media (max-width: 1152px) {
    .menu-toggle {
        display: block; /* Show the menu button */
    }

    .nav-links {
        display: flex; /* Ensure the dropdown is hidden initially */
        flex-direction: column;
        gap: 10px;
        position: absolute;
        top: 66px;
        right: 2px;
        background-color: #8a5c9e;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        border: 2px solid #cba25a;
        opacity: 0; /* Start fully hidden */
        transform: translateY(-20px); /* Start slightly above the button */
        transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth animation */
        pointer-events: none; /* Prevent interaction when hidden */
    }

    .nav-links.active {
        opacity: 1; /* Fully visible */
        transform: translateY(0); /* Slide into position */
        pointer-events: auto; /* Allow interaction */
    }

    .nav-links a {
        display: inline; /* Ensure the underline is only under the text */
        padding: 0; /* Remove padding from the link itself */
        font-size: 18px;
        text-align: center; /* Center the text */
        margin-right: 0; /* Remove extra margin */
        color: #fff; /* Keep the text color white */
        text-decoration: none; /* Remove underline by default */
    }

    .nav-links a:hover,
    .nav-links a.active {
        text-decoration: none;
    }

    .nav-links li {
        padding: 5px 10px; /* Add padding to the list item instead of the link */
        width: 100%; /* Keep the clickable area consistent */
        text-align: center; /* Center the text */
    }

    .login-image {
        display: none; /* Hide the login image */
    }

    .login-text {
        display: inline-block; /* Show the login text */
    }
}

/* Style for the main logo image */
.logo img {
    height: 70px; /* Adjust the height */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Ensure the image is displayed as a block element */
    border: 2px solid #cba25a; /* Add a border with a specific color */
    border-radius: 50%; /* Make the border circular */
    margin-left: 10px; /* Add margin to move the logo to the right */
}

/* Logo Styling */
.logo a {
    font-family: 'Corinthia', cursive; /* Apply the Corinthia font */
    font-size: 2.5rem; /* Adjust font size for visibility */
    color: #ffffff; /* MM Project's purple */
    text-decoration: none; /* Remove underline */
    font-weight: 700; /* Make the font bold */
    margin-left: 20px; /* Add margin to move the logo to the right */
}

/* Main content container */
.content-container {
    display: flex;
    align-items: stretch; /* Ensures both items stretch to the same height */
    gap: 20px; /* Add spacing between the boxes */
    flex: 1; /* Allow the main content to grow and take up available space */
}


/* Style for the home photo box */
.home-photo-box {
    flex: 1; /* Allow both boxes to grow equally */
    display: flex;
    flex-direction: column; /* Ensure content inside stacks vertically */
    max-width: 33%; /* Ensure it doesn't exceed 1/3 of the container */
    margin: 20px; /* Add margin to indent the box from the edges */
    box-shadow: 0 0px 10px #000000; /* Add shadow effect */
    border-radius: 15px; /* Add rounded corners to the box */
    overflow: hidden; /* Prevent content from overflowing the box */
    max-height: 450px;
    border: #cba25a 2px solid; /* Add a gold border */
}

/* Style for the image inside the home photo box */
.home-photo-box img {
    width: 100%; /* Make the image fill the width of the box */
    height: 100%; /* Make the image fill the height of the box */
    object-fit: contain; /* Scale the image to fit within the box without cropping */
    border-radius: 10px; /* Optional: Add rounded corners */
    display: block; /* Ensure the image is treated as a block element */
    box-sizing: border-box; /* Include padding and border in the image's dimensions */
    background-color: black;
}

/* Style for the About Me text box */
.about-me-text-box {
    flex: 1; /* Allow both boxes to grow equally */
    display: flex;
    flex-direction: column; /* Ensure content inside stacks vertically */
    flex: 2; /* Take up the remaining 2/3 of the width */
    padding: 10px; /* Add padding inside the box */
    margin: 20px; /* Add margin to indent the box from the edges */
    border: 2px solid #cba25a; /* Add a border */
    border-radius: 15px; /* Add rounded corners */
    text-align: center; /* Center the content inside the box */
    box-shadow: 0 0px 10px #000000; /* Add shadow effect */
    background-color: #fff; /* Set background color */
}

.about-me-text-box h1 {
    font-size: 2.9rem; /* Adjust heading size */
    margin: 0 auto 20px; /* Center the heading and add spacing below */
    border-bottom: 2px solid #cba25a; /* Add a gold underline */
    padding-bottom: 10px; /* Add space below the underline */
    display: inline-block; /* Restrict underline to the text width */
    font-family: 'Corinthia', cursive; /* Apply the Corinthia font */
    color: #333; /* Optional: Set a dark color for the header */
    text-align: center; /* Center the text */
    line-height: 1.2; /* Adjust line height */
    max-height: 450px;
    height: 2.4rem; /* Reserve space for the heading */
    overflow: hidden; /* Prevent content overflow */
}

/* Style for the About Me paragraph */
.about-me-text-box p {
    font-size: 1rem; /* Adjust paragraph size */
    line-height: 1.5; /* Improve readability */
    text-align: center; /* Center the text */
}

/* Style for the full-width tutor box */
.tutor-box {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space out the photo, text, and button */
    align-items: center; /* Align items vertically */
    width: calc(100% - 40px); /* Reduce width to account for left and right margins */
    padding: 20px; /* Add padding inside the box */
    margin: 20px; /* Add margin to indent the box from all edges */
    border: 2px solid #cba25a; /* Add a gold border */
    border-radius: 15px; /* Add rounded corners */
    background-color: #fff; /* Set background color */
    box-sizing: border-box; /* Include padding in width/height */
    box-shadow: 0 0px 10px #000000; /* Add shadow effect */

}

/* Style for the photo in the tutor box */
.tutor-box-photo {
    flex: 1; /* Take up 1/3 of the width */
    max-width: 33%; /* Ensure it doesn't exceed 1/3 of the container */
    max-height: 500px; /* Set a maximum height */
}

/* Style for the image inside the tutor box photo */
.tutor-box-photo img {
    width: auto; /* Allow the width to adjust automatically */
    height: auto; /* Allow the height to adjust automatically */
    max-width: 100%; /* Ensure the image does not exceed the container's width */
    max-height: 500px; /* Set a maximum height */
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    display: block; /* Ensure the image is treated as a block element */
    box-sizing: border-box; /* Include padding and border in the image's dimensions */
    object-fit: contain; /* Maintain aspect ratio and fit within the container */
    margin: 0 auto; /* Center the image horizontally */
}

/* Style for the Tutoring header */
.tutor-box h1 {
    order: 1; /* Ensure the heading appears first */
    font-size: 2.5rem; /* Default font size for larger screens */
    margin-bottom: 10px; /* Add spacing below the heading */
    border-bottom: #cba25a 2px solid; /* Add a gold underline */
    padding-bottom: 10px; /* Add space below the underline */
    display: inline-block; /* Restrict underline to the text width */
    font-family: 'Corinthia', cursive; /* Apply the Corinthia font */
    color: #333; /* Optional: Set a dark color for the header */
    text-align: center; /* Center the text */
    line-height: 1.2; /* Adjust line height for readability */
    word-wrap: break-word; /* Ensure long words break to the next line */
    overflow-wrap: break-word; /* Ensure long words wrap properly */
}


/* Style for the text in the tutor box */
.tutor-box-text {
    margin-top: -10px; /* Move the text up slightly */
    flex: 2; /* Take up the middle space */
    text-align: center; /* Center the text */
    padding: 0 30px; /* Add horizontal padding */
    font-size: 1rem; /* Adjust font size */
    line-height: 1.5; /* Improve readability */
}

/* Tutor Box Button */
.tutor-box-button {
    text-align: center; /* Center the button inside the container */
    margin-top: 20px; /* Add spacing above the button */
     text-decoration: none; /* Remove underline */
     height: 50px; /* Reserve space for the button */
     display: flex;
     align-items: center;
     justify-content: center;
}

.tutor-box-link {
    display: inline-block; /* Make the link behave like a button */
    background-color: #8a5c9e; /* MM Project's purple */
    color: #fff; /* White text color */
    text-decoration: none; /* Remove underline */
    padding: 20px 30px; /* Add padding for button-like appearance */
    border-radius: 5px; /* Rounded corners */
    font-size: 1rem; /* Adjust font size */
    font-weight: bold; /* Make the text bold */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.tutor-box-link:hover {
    background-color: #a57cae; /* Darker purple on hover */
    border-radius: 5px; /* Rounded corners */
}

/* Performances container */
.performances-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 10px; /* Add padding inside the container */
    margin: 0 20px; /* Add margin to indent the container from the edges of the screen */
    margin-bottom:  10px;
    margin-top: 10px;
    background-color: #f9f9f9;
    border: 1px solid #cba25a;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.performances-container .performances-title {
    font-size: 2.9rem; /* Match the font size of .about-me-text-box h1 */
    margin-bottom: 20px; /* Add spacing below the title */
    text-align: center; /* Center the text */
    font-family: 'Corinthia', cursive; /* Match the font family */
    color: #333; /* Match the color */
    padding-bottom: 10px; /* Add space below the underline */
    display: inline-block; /* Restrict underline to the text width */
    width: 100%; /* Ensure it spans the container */
}

/* Individual performance item */
.performance-item {
    width: 300px;
    background-color: #fff;
    border: 1px solid #cba25a;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack content vertically */
    justify-content: space-between; /* Space out content evenly */
    height: 450px; /* Set a fixed height for consistency */
}

/* Performance details */
.performance-details {
    flex-grow: 1; /* Allow the details to take up available space */
    margin-bottom: 10px; /* Add spacing below the details */
}

.performance-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid #cba25a;
    border-radius: 10px; /* Add rounded corners to the image */

}

.performance-details h2 {
    font-size: 1.5rem;
    margin: 10px;
}

.performance-details p {
    margin: 5px 0;
    color: black;
}

/* Change cursor to pointer for clickable performance images */
.performance-img {
    cursor: pointer; /* Change the cursor to a pointer to indicate clickability */
}

/* Center the Admin Performances title */
.performances-title {
    text-align: center; /* Center the text */
    font-size: 2rem; /* Adjust font size */
    margin-bottom: 20px; /* Add space below the title */
    font-weight: bold; /* Make the title bold */
    color: black; /* Optional: Set a text color */
}

/* Lightbox container */
.lightbox {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Black background with transparency */
    justify-content: center;
    align-items: center;
}

/* Lightbox content (image) */
.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    border: 2px solid #cba25a;
    border-radius: 10px;
}

/* Close button */
.lightbox .close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001; /* Ensure it appears above the lightbox content */
}

/* Style for the login section */
.login-section {
    background: url('Images/login_background.jpg') no-repeat center center/cover; /* Set background image */
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    height: 100vh; /* Full viewport height */
    width: 99.2vw; /* Full viewport width */

}

/* Style for the login container */
.login-container {
    border: 3px solid #cba25a; /* Add a border */
    box-shadow: 0 0px 10px #000000; /* Add shadow effect */
    border-radius: 15px; /* Add rounded corners */
    padding: 40px; /* Add padding */
    text-align: center; /* Center the text */
    width: 300px; /* Set width */
    overflow: hidden; /* Hide overflow content */
    background-color: #8a5c9e; /* Set background color */
  
}

/* Style for the login container header */
.login-container h2 {
    font-size: 2rem; /* Set font size */
    color: #000000; /* Set text color */
    margin-bottom: 20px; /* Add space below the header */
}

/* Style for the labels in the login container */
.login-container label {
    display: block; /* Display as block element */
    font-size: 1.2rem; /* Set font size */
    color: #000000; /* Set text color */
    margin-bottom: 10px; /* Add space below the label */
    text-align: left; /* Align text to the left */
}

/* Style for the input and select elements in the login container */
.login-container input,
.login-container select {
    width: 100%; /* Full width */
    padding: 10px; /* Add padding */
    margin-bottom: 20px; /* Add space below the element */
    border: 2px solid #cba25a; /* Add a border */
    border-radius: 5px; /* Add rounded corners */
    box-sizing: border-box; /* Include padding in width/height */
}

/* Style for the button in the login container */
.login-container button {
    background-color: #cba25a; /* Set background color */
    color: black; /* Set text color */
    padding: 10px 20px; /* Add padding */
    border: none; /* Remove border */
    border-radius: 5px; /* Add rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    font-size: 1.2rem; /* Set font size */
}

/* Style for the button hover effect in the login container */
.login-container button:hover {
    background-color: #413d3d; /* Change background color on hover */
    color: white; /* Change text color on hover */
}

/* Style for the About Me admin form */
.admin-about-me {
    width: 80%; /* Set the width to 80% of the screen */
    max-width: none; /* Remove any maximum width restriction */
    margin: 20px auto; /* Center the form and add vertical spacing */
    padding: 20px; /* Add padding inside the form */
    border: 2px solid #cba25a; /* Add a gold border */
    border-radius: 10px; /* Add rounded corners */
    background-color: #f9f9f9; /* Light background color */
    box-sizing: border-box; /* Include padding and border in the width */
    text-align: center; /* Center the content inside the form */
}

.admin-about-me label {
    display: block; /* Make labels block elements */
    margin-bottom: 10px; /* Add space below labels */
    font-weight: bold; /* Make labels bold */
    text-align: center; /* Center the label text */
}

.admin-about-me input,
.admin-about-me textarea {
    width: 80%; /* Set the width of inputs and textareas */
    margin: 0 auto 20px; /* Center the inputs and add space below */
    padding: 10px; /* Add padding inside elements */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Add rounded corners */
    font-size: 1rem; /* Set font size */
    display: block; /* Ensure the inputs are block elements */
}

.admin-about-me button {
    background-color: #8a5c9e; /* Set button background color */
    color: white; /* White text color */
    border: none; /* Remove border */
    border-radius: 10px; /* Add rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    padding: 10px 20px; /* Add padding to the button */
    margin: 0 auto; /* Center the button */
    display: block; /* Ensure the button is a block element */
    width: 50%; /* Set the button width to 50% of the form */
    max-width: 200px; /* Optional: Set a maximum width */
}

.admin-about-me button:hover {
    background-color: #cba25a; /* Change button background color on hover */
}

/* Style for the About Me admin form header */
.admin-about-me h1 {
    text-align: center; /* Center the text */
    font-size: 1.5rem; /* Adjust font size if needed */
    margin-bottom: 20px; /* Add space below the header */
    font-weight: bold; /* Make the header bold */
}

/* Style for the Tutoring admin form */
.admin-tutoring {
    width: 80%; /* Set the width to 80% of the screen */
    max-width: none; /* Remove any maximum width restriction */
    margin: 20px auto; /* Center the form and add vertical spacing */
    padding: 20px; /* Add padding inside the form */
    border: 2px solid #cba25a; /* Add a gold border */
    border-radius: 10px; /* Add rounded corners */
    background-color: #f9f9f9; /* Light background color */
    box-sizing: border-box; /* Include padding and border in the width */
    text-align: center; /* Center the content inside the form */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

.admin-tutoring label {
    display: block; /* Make labels block elements */
    margin-bottom: 10px; /* Add space below labels */
    font-weight: bold; /* Make labels bold */
    text-align: center; /* Center the label text */
}

.admin-tutoring input,
.admin-tutoring textarea {
    width: 80%; /* Set the width of inputs and textareas */
    margin: 0 auto 20px; /* Center the inputs and add space below */
    padding: 10px; /* Add padding inside elements */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Add rounded corners */
    font-size: 1rem; /* Set font size */
    display: block; /* Ensure the inputs are block elements */
}

.admin-tutoring button {
    background-color: #8a5c9e; /* Set button background color */
    color: white; /* White text color */
    border: none; /* Remove border */
    border-radius: 10px; /* Add rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    padding: 10px 20px; /* Add padding to the button */
    margin: 0 auto; /* Center the button */
    display: block; /* Ensure the button is a block element */
    width: 50%; /* Set the button width to 50% of the form */
    max-width: 200px; /* Optional: Set a maximum width */
}

.admin-tutoring button:hover {
    background-color: #cba25a; /* Change button background color on hover */
}

/* Style for the Tutoring admin form header */
.admin-tutoring h1 {
    text-align: center; /* Center the text */
    font-size: 1.5rem; /* Adjust font size if needed */
    margin-bottom: 20px; /* Add space below the header */
    font-weight: bold; /* Make the header bold */
}

/* Style for the admin performance form */
.admin-performance-form {
    max-width: 600px; /* Set a maximum width for the form */
    margin: 20px auto; /* Center the form horizontally */
    padding: 20px; /* Add padding inside the form */
    border: 2px solid #cba25a; /* Add a border */
    border-radius: 10px; /* Add rounded corners */
    background-color: #f9f9f9; /* Set background color */
    text-align: center; /* Center the content inside the form */
    box-sizing: border-box; /* Include padding and border in the width */
}

.admin-performance-form label {
    display: block; /* Ensure the label is above the input */
    font-weight: bold; /* Make the text bold */
    margin-bottom: 5px; /* Add some space below the label */
    text-align: left; /* Align the text to the left */
    margin-left: 5%; /* Align the label with the left edge of the input */
    width: 90%; /* Match the width of the input fields */
}

/* Style for input, textarea, and button elements in the admin performance form */
.admin-performance-form input,
.admin-performance-form textarea,
.admin-performance-form button {
    width: 90%; /* Reduce width to leave space on the sides */
    max-width: 500px; /* Set a maximum width */
    margin: 0 auto 20px; /* Center the elements and add space below */
    padding: 10px; /* Add padding inside elements */
    border: 1px solid #ccc; /* Add a light gray border */
    border-radius: 5px; /* Add rounded corners */
    font-size: 1rem; /* Set font size */
    display: block; /* Ensure the elements are block-level */
    box-sizing: border-box; /* Include padding and border in the width */
}

/* Style for the submit button */
.admin-performance-form button {
    background-color: #8a5c9e; /* Set button background color */
    color: white; /* Set text color */
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor to pointer on hover */
    width: 50%; /* Set the button width to 50% of the form */
    max-width: 200px; /* Optional: Set a maximum width */
    margin: 0 auto; /* Center the button */
    display: block; /* Ensure the button is a block element */
}

.admin-performance-form button:hover {
    background-color: #cba25a; /* Change button background color on hover */
}

/* Center the admin performance form header */
.admin-performance-form-header {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-weight: bold;
    color: #8a5c9e;
}

/* Shared styles for input and textarea elements in admin forms */
.admin-about-me input,
.admin-about-me textarea,
.admin-tutoring input,
.admin-tutoring textarea {
    width: 90%; /* Reduce width to leave space on the sides */
    margin: 0 auto 20px; /* Center the inputs and add space below */
    padding: 10px; /* Add padding inside elements */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Add rounded corners */
    font-size: 1rem; /* Set font size */
    font-family: Arial, Helvetica, sans-serif; /* Ensure consistent font family */
    box-sizing: border-box; /* Include padding and border in the width */
    display: block; /* Ensure the inputs are block elements */
}

/* Center text inside input boxes for both admin forms */
.admin-about-me input,
.admin-tutoring input {
    text-align: center; /* Center the text inside the input box */
}

/* Shared styles for buttons in admin forms */
.admin-about-me button,
.admin-tutoring button {
    background-color: #8a5c9e; /* Set button background color */
    color: white; /* White text color */
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor to pointer on hover */
    padding: 10px 20px; /* Add padding to the button */
    margin: 0 auto; /* Center the button */
    display: block; /* Ensure the button is a block element */
    font-size: 1rem; /* Set font size */
    font-family: Arial, Helvetica, sans-serif; /* Ensure consistent font family */
    width: 50%; /* Set the button width to 50% of the form */
    max-width: 200px; /* Optional: Set a maximum width */
}

.admin-about-me button:hover,
.admin-tutoring button:hover {
    background-color: #cba25a; /* Change button background color on hover */
}

/* Style for the delete button */
.admin-performance-delete-button {
    width: 100%; /* Make the button span the full width */
    background-color: #e74c3c; /* Red for delete button */
    color: #fff;
    border: none;
    padding: 10px 0; /* Adjust padding for a consistent look */
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border-radius: 10px 10px 0 0; /* Rounded corners at the top */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    margin: 0; /* Remove any margin */
    top: 0; /* Align it to the top of the box */
    left: 0; /* Align it to the left edge */
}

/* Hover effect for the delete button */
.admin-performance-delete-button:hover {
    background-color: #c0392b; /* Darker red on hover */
}

/* Footer Styles */
.footer {
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    background-color: #8a5c9e; /* Set background color */
    color: #fff; /* Set text color */
    text-align: center; /* Ensure text is centered */
    padding: 10px; /* Add padding */
    width: 100vw; /* Full viewport width */
    font-size: 1rem; /* Set font size */
    margin-top: auto; /* Push the footer to the bottom */
    box-sizing: border-box; /* Include padding in the width */
    position: relative; /* Ensure it stays within the flow of the page */
}

/* Lightbox container */
.lightbox {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Black background with transparency */
    justify-content: center;
    align-items: center;
}

/* Lightbox content (image) */
.lightbox-content {
    width: 80%;
    max-width: 700px;
}

/* Lightbox caption */
#lightboxCaption {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    font-size: 1.7rem;
    font-weight: bold;
}

/* Close button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Previous and next buttons */
.prev,
.next {
    position: absolute;
    top: 50%;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    user-select: none;
}

.next {
    right: 0;
}

.prev {
    left: 0;
}

.prev:hover,
.next:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
}

/* Style for character limit warning */
.char-warning {
    font-size: 0.9rem;
    color: red;
    display: block;
    margin-top: 5px;
}

/* Gallery Container */
.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    padding-bottom: 40px;
    border: 2px solid #cba25a; /* Gold border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add shadow effect */
    border-radius: 10px;
    margin: 20px 20px; /* Add gap from the edges of the screen */
    background-color: #fff; /* Keep white background */
}

/* Gallery Item */
.gallery-item {
    display: inline-block;
    width: 345px; /* Adjust as needed for your layout */
    margin-bottom: 20px; /* Space below each item */
    text-align: center;
    height: auto; /* Adjust height for content */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add shadow effect */
    border: 2px solid #cba25a; /* Optional: Add a border for better visibility */
    background-color: #f9f9f9; /* Optional: Background color for the container */
    padding: 15px;
    border-radius: 10px;
}

/* Gallery Item Image */
.gallery-item img {
    width: 100%; /* Maintain full width of the container */
    height: 220px; /* Set a fixed height for the images */
    object-fit: cover; /* Cover the area without distortion */
    border-radius: 10px 10px 0 0;
}

/* Gallery Item Title */
.gallery-item h3 {
    margin: 10px 0;
    font-size: 1rem;
    color: #333;
}

/* Gallery Item Description */
.gallery-item p {
    margin: 5px 0;
    text-align: center;
    color: #333;
}

/* Folder Item */
.folder-item {
    cursor: pointer;
    text-align: center;
    width: 345px;
    height: 280px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border: 1px solid #cba25a; /* MM Project's gold */
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.folder-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

.folder-title {
    padding: 10px;
    font-size: 1rem;
    color: #333;
    background-color: #f9f9f9;
    border-radius: 0 0 10px 10px;
}

/* Folder Content */
.folder-content {
    display: none;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 20px 0;
}

.folder-content.active {
    display: flex;
}

/* Gallery Item */
.gallery-item {
    text-align: center;
    width: 345px;
    height: 280px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

.gallery-item p {
    padding: 10px;
    font-size: 0.9rem;
    color: #333;
}

/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    width: 80%;
    max-width: 700px;
}

#lightboxCaption {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    font-size: 1.7rem;
    font-weight: bold;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.prev,
.next {
    position: absolute;
    top: 50%;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    user-select: none;
}

.next {
    right: 0;
}

.prev {
    left: 0;
}

.prev:hover,
.next:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
}

/* Media Queries */
@media (max-width: 880px) {
    .gallery-title {
        font-size: 1.8rem;
    }

    .gallery-container {
        width: 500px;
    }

    .gallery-item h3,
    .gallery-item p {
        font-size: 0.8rem;
    }
}

@media (max-width: 600px) {
    .gallery-title {
        font-size: 1.6rem;
    }

    .gallery-container {
        width: 300px;
    }

    .gallery-item {
        max-width: 300px;
    }

    .gallery-item h3,
    .gallery-item p {
        font-size: 0.7rem;
    }
}

/* Style for character limit warning */
.char-warning {
    font-size: 0.9rem;
    color: red;
    display: block;
    margin-top: 5px;
}

/* Gallery Container */
.gallery-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Center the items horizontally */
    gap: 20px; /* Add spacing between items */
    padding: 20px; /* Add padding inside the container */
    border: 2px solid #cba25a; /* Optional: Add a gold border */
    border-radius: 10px; /* Optional: Add rounded corners */
    background-color: #fff; /* Optional: Set a white background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
    margin: 20px auto; /* Center the container horizontally */
    width: 90%; /* Ensure the container takes up 90% of the screen width */
    box-sizing: border-box; /* Include padding and border in the width */
}

/* Gallery Item */
.gallery-item {
    width: 100%;
    margin: 10px 0;
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Folder Item */
.folder-item {
    width: 300px;
    background-color: #fff;
    border: 2px solid #cba25a; /* MM Project's gold */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 15px;
}

.folder-item {
    width: 300px;
    background-color: #fff;
    border: 2px solid #cba25a;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 15px;
}

/* Admin Upload Container */
.admin-upload-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 2px solid #cba25a; /* MM Project's gold */
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.admin-upload-container h2 {
    text-align: center;
    font-size: 1.5rem;
    color: #8a5c9e; /* MM Project's purple */
    margin-bottom: 20px;
}

.admin-upload-container label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: #333;
     margin-left: 50px; /* Move the labels slightly to the right */
}

.admin-upload-container input,
.admin-upload-container textarea {
    width: 80%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.admin-upload-container button {
    display: block; /* Ensure the button is treated as a block element */
    margin: 0 auto; /* Center the button horizontally */
    background-color: #8a5c9e; /* MM Project's purple */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    text-align: center; /* Center the text inside the button */
}

.admin-upload-container button:hover {
    background-color: #a57cae;
}

/* Admin Gallery Container */
.admingallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    padding-bottom: 40px;
    border: 2px solid #cba25a; /* MM Project's gold */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add shadow effect */
    border-radius: 10px;
    margin: 20px auto; /* Center the container horizontally */
    background-color: #fff; /* Keep white background */
    width: 90%; /* Ensure the container takes up 90% of the screen width */
    box-sizing: border-box; /* Include padding and border in the width */
}

/* Admin Gallery Item Image */
.admingallery-item img {
    width: 100%; /* Maintain full width of the container */
    height: 220px; /* Set a fixed height for the images */
    object-fit: cover; /* Cover the area without distortion */
    border-radius: 10px 10px 0 0;
}

/* Admin Gallery Item Title */
.admingallery-item h3 {
    margin: 10px 0;
    font-size: 1rem;
    color: #333;
}

/* Admin Gallery Item Description */
.admingallery-item p {
    margin: 5px 0;
    text-align: center;
    color: #333;
}

/* Admin Folder Item */
.adminfolder-item {
    cursor: pointer;
    position: relative;
    text-align: center;
    color: white;
    margin-bottom: 20px;
    width: 345px;
    height: 400px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border: 1px solid #cba25a;
    background-color: #fff;
    overflow: hidden; /* Prevent content overflow */
    border-radius: 10px;
}

/* Style for folder images on the Admin Gallery page */
.adminfolder-item img {
    width: 100%; /* Set a fixed width */
    height: 200px; /* Set a fixed height */
    object-fit: cover; /* Ensure the image covers the area without distortion */
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Add a subtle shadow */
    border: 2px solid #cba25a; /* Optional: Add a border */
}

/* Admin Folder Content */
.adminfolder-content {
    display: none;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    margin: 0 auto;
}

.adminfolder-content.active {
    display: flex;
}

/* Admin Folder Cover Image */
.folder-cover {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

/* Admin Folder Title */
.folder-title {
    width: 100%;
    color: #333; /* Keep dark text for titles */
    padding: 5px 0;
    text-align: center;
    border-radius: 0 0 10px 10px;
    background-color: #f9f9f9; /* Light background for title */
    font-size: 1rem;
    font-weight: bold;
}

/* Add Photo Form */
.add-photo-form {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 2px solid #cba25a; /* MM Project's gold */
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.add-photo-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #2c3e50; /* Dark blue for labels */
}

.add-photo-form input,
.add-photo-form textarea,
.add-photo-form button {
    width: 80%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}

.add-photo-form button {
    background-color: #8a5c9e; /* MM Project's purple */
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
}

.add-photo-form button:hover {
    background-color: #a57cae; /* Darker purple for hover */
}

/* Error Message Styling */
.error-message {
    color: #e74c3c; /* Red for error messages */
    font-size: 0.9rem;
    margin-top: -10px;
}

/* Video Upload Form */
.video-upload-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 2px solid #cba25a; /* MM Project's gold */
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.video-upload-container h2 {
    text-align: center;
    font-size: 1.5rem;
    color: #8a5c9e; /* MM Project's purple */
    margin-bottom: 20px;
}

.video-upload-form label {
    display: block; /* Ensure the label is above the input */
    font-weight: bold; /* Make the text bold */
    margin-bottom: 5px; /* Add space below the label */
    text-align: left; /* Align the text to the left */
    margin-left: 8%; /* Align the label with the left edge of the input */
    width: 90%; /* Match the width of the input fields */
}

.video-upload-form input {
    width: 80%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.video-upload-form button {
    display: block; /* Ensure the button is treated as a block element */
    margin: 0 auto; /* Center the button horizontally */
    background-color: #8a5c9e; /* MM Project's purple */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    text-align: center; /* Center the text inside the button */
}

.video-upload-form button:hover {
    background-color: #a57cae; /* Darker purple for hover */
}

/* Video Gallery */
.video-gallery-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Center the items horizontally */
    gap: 20px; /* Add spacing between items */
    padding: 20px; /* Add padding inside the container */
    border: 2px solid #cba25a; /* Optional: Add a gold border */
    border-radius: 10px; /* Optional: Add rounded corners */
    background-color: #fff; /* Optional: Set a white background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
    margin: 20px auto; /* Center the container horizontally */
    width: 90%; /* Ensure the container takes up 90% of the screen width */
    box-sizing: border-box; /* Include padding and border in the width */
}

/* Video Gallery Container */
.video-gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    padding-bottom: 40px;
    border: 2px solid #cba25a; /* MM Project's gold */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add shadow effect */
    border-radius: 10px;
    margin: 20px auto; /* Center the container horizontally */
    background-color: #fff; /* Keep white background */
    width: 90%; /* Ensure the container takes up 90% of the screen width */
    box-sizing: border-box; /* Include padding and border in the width */
}

/* Video Gallery Item */
.admingallery-item {
    display: inline-block;
    width: 345px; /* Adjust as needed for your layout */
    margin-bottom: 20px; /* Space below each event */
    text-align: center;
    height: auto; /* Adjust height for video content */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add shadow effect */
    border: 2px solid #cba25a; /* Optional: Add a border for better visibility */
    background-color: #f9f9f9; /* Optional: Background color for the container */
    padding: 15px;
    border-radius: 10px;
}

/* Video Player */
.gallery-video {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* Video Title */
.admingallery-item h3 {
    margin: 10px 0;
    font-size: 1rem;
    color: #333;
}

/* Folder Cover */
.folder-cover {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

/* Folder Title */
.folder-title {
    width: 100%;
    color: #333; /* Keep dark text for titles */
    padding: 5px 0;
    text-align: center;
    border-radius: 0 0 10px 10px;
    background-color: #f9f9f9; /* Light background for title */
    font-size: 1rem;
    font-weight: bold;
}

/* Centered Title Inside Admin Gallery Container */
.admingallery-container .centered-title {
    text-align: center;
    width: 100%; /* Ensure it spans the full width of the container */
    margin-bottom: 20px; /* Add spacing below the title */
    font-size: 2.5rem; /* Adjust font size as needed */
    font-weight: bold; /* Make the title bold */
    color: #333; /* Optional: Set a dark color for the title */
}

/* Delete Button for Album */
.delete-video-button {
    width: 100%; /* Make the button span the full width */
    background-color: #e74c3c; /* Red for delete button */
    color: #fff;
    border: none;
    padding: 10px 0; /* Adjust padding for a consistent look */
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border-radius: 10px; /* Rounded corners at the top */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    margin: 0; /* Remove any margin */
}

/* Hover Effect for Video Delete Button */
.delete-video-button:hover {
    background-color: #c0392b; /* Darker red for hover */
}

/* Delete Button for Album */
.delete-album-button {
    width: 100%; /* Make the button span the full width */
    background-color: #e74c3c; /* Red for delete button */
    color: #fff;
    border: none;
    padding: 10px 0; /* Adjust padding for a consistent look */
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border-radius: 10px 10px 0 0; /* Rounded corners at the top */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    margin: 0; /* Remove any margin */
}

/* Hover Effect for Album Delete Button */
.delete-album-button:hover {
    background-color: #c0392b; /* Darker red for hover */
}

/* Ensure the Delete Button is Positioned at the Top */
.adminfolder-item form {
    margin: 0;
    padding: 0;
}

/* Video Delete Button */
.video-delete-button {
    background-color: #e74c3c; /* Red for delete button */
    color: #fff;
    border: none;
    padding: 10px 20px; /* Add padding for a consistent look */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    font-size: 1rem; /* Font size */
    text-align: center; /* Center the text */
    margin-top: 10px; /* Add space above the button */
    display: inline-block; /* Keep the button inline */
    width: auto; /* Do not span the full width */
}

/* Hover Effect for Video Delete Button */
.video-delete-button:hover {
    background-color: #c0392b; /* Darker red for hover */
}

/* Uploaded Videos Title */
.admingallery-container .gallery-title {
    text-align: center; /* Center the title */
    font-size: 2.5rem; /* Adjust font size */
    color: #8a5c9e; /* MM Project's purple */
    margin: 0 0 20px 0; /* Add space below the title */
    width: 100%; /* Ensure it spans the full width of the container */
    padding-top: 10px; /* Add some padding at the top */
}

/* Center input fields in Upload Videos and Create Photo Gallery Album */
.video-upload-form input,
.admin-upload-container input {
    display: block; /* Make the input a block element */
    margin: 0 auto 20px auto; /* Center horizontally and add space below */
    width: 80%; /* Optional: Adjust the width of the input fields */
    text-align: left; /* Keep text aligned to the left */
}

.video-upload-form input[type="file"],
.admin-upload-container input[type="file"] {
    text-align: center; /* Center the file input text */
}

/* Performances Page Heading */
.performances-container h1 {
    text-align: center; /* Center the heading */
    font-family: 'Corinthia', cursive; /* Apply the Corinthia font */
    font-size: 2.5rem; /* Adjust font size */
    color: #8a5c9e; /* MM Project's purple */
    margin-bottom: 20px; /* Add space below the heading */
}

/* photo gallery Heading */
.gallery-title {
    text-align: center; /* Center the text horizontally */
    font-family: 'Corinthia', cursive; /* Apply the Corinthia font */
    font-size: 2.5rem; /* Adjust font size */
    color: #8a5c9e; /* Set the text color */
    margin: 0 auto 20px auto; /* Center the title and add space below */
    width: 100%; /* Ensure it spans the full width of the container */
    padding-top: 10px; /* Add padding at the top for spacing */
}

/* Performance Page Heading */
.performances-title {
    text-align: center; /* Center the heading */
    font-family: 'Corinthia', cursive; /* Apply the Corinthia font */
    font-size: 3rem; /* Adjust font size */
    color: black; /* MM Project's purple */
    margin-bottom: 20px; /* Add space below the heading */
}

/* Admin Manage Page Heading */
.manage-title {
    text-align: center; /* Center the heading */
    font-family: 'Corinthia', cursive; /* Apply the Corinthia font */
    font-size: 3rem; /* Adjust font size */
    color: black; /* MM Project's purple */
    margin-bottom: 20px; /* Add space below the heading */
}

/* Gallery Page Heading */
.gallery-page-title {
    text-align: center; /* Center the heading */
    font-family: 'Corinthia', cursive; /* Apply the Corinthia font */
    font-size: 3rem; /* Adjust font size */
    color: black; /* MM Project's purple */
    margin-bottom: 20px; /* Add space below the heading */
}

/* Admin gallery Page Heading */
.admin-gallery-title {
    text-align: center; /* Center the heading */
    font-family: 'Corinthia', cursive; /* Apply the Corinthia font */
    font-size: 3rem; /* Adjust font size */
    color: black; /* MM Project's purple */
    margin-bottom: 20px; /* Add space below the heading */
}
/* Style for the delete button above each photo */
.delete-photo-button {
    width: 100%; /* Make the button span the full width */
    background-color: #e74c3c; /* Red for delete button */
    color: #fff; /* White text color */
    border: none; /* Remove border */
    padding: 10px 0; /* Adjust padding for a consistent look */
    font-size: 1rem; /* Font size */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center the text */
    cursor: pointer; /* Pointer cursor on hover */
    border-radius: 10px 10px 0 0; /* Rounded corners at the top */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    margin: 0; /* Remove any margin */
}

/* Hover effect for the delete button */
.delete-photo-button:hover {
    background-color: #c0392b; /* Darker red on hover */
}

/* Contact Form Container */
.contact-form-container {
    max-width: 1200px; /* Increase the maximum width for the form */
    width: 85%; /* Ensure it takes up 90% of the available width */
    margin: 20px auto; /* Center the form horizontally and add vertical spacing */
    padding: 20px; /* Add padding around the form */
    border: 2px solid #cba25a; /* Add a gold border */
    border-radius: 10px; /* Add rounded corners */
    background-color: #fff; /* Set a white background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    text-align: center; /* Center the content inside the container */
}

/* Contact Form Iframe */
.contact-form-iframe {
    width: 100%; /* Make the iframe take up the full width of the container */
    height: 800px; /* Increase the height for better visibility */
    border: none; /* Remove the default iframe border */
    border-radius: 10px; /* Add rounded corners to the iframe */
}

/* Admin Contact Form Section */
.admin-contact-form {
    width: 80%; /* Set the width to 80% of the screen */
    max-width: none; /* Remove any maximum width restriction */
    margin: 20px auto; /* Center the form and add vertical spacing */
    padding: 20px; /* Add padding inside the form */
    border: 2px solid #cba25a; /* Add a gold border */
    border-radius: 10px; /* Add rounded corners */
    background-color: #f9f9f9; /* Light background color */
    box-sizing: border-box; /* Include padding and border in the width */
    text-align: center; /* Center the content inside the form */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

/* Center input fields and button */
.admin-contact-form input,
.admin-contact-form button {
    width: 80%; /* Set the width of inputs and button */
    margin: 0 auto 20px; /* Center the inputs and add space below */
    padding: 10px; /* Add padding inside elements */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Add rounded corners */
    font-size: 1rem; /* Set font size */
    display: block; /* Ensure the inputs are block elements */
    text-align: center;
}

/* Center text inside the Contact Form Title input box */
.admin-contact-form input[type="text"] {
    text-align: center; /* Center the text inside the input box */
}

/* Adjust the button styling */
.admin-contact-form button {
    background-color: #8a5c9e; /* MM Project's purple */
    color: white; /* White text color */
    border: none; /* Remove border */
    border-radius: 10px; /* Add rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    padding: 10px 20px; /* Add padding to the button */
    margin: 0 auto; /* Center the button */
    display: block; /* Ensure the button is a block element */
    width: 50%; /* Set the button width to 50% of the form */
    max-width: 200px; /* Optional: Set a maximum width */
}

.admin-contact-form button:hover {
    background-color: #cba25a; /* Change button background color on hover */
}

/* Contact Form Title */
.contact-form-title {
    font-family: 'Corinthia', cursive; /* Apply the Corinthia font */
    font-size: 2.5rem; /* Adjust font size */
    color: #8a5c9e; /* MM Project's purple */
    margin-bottom: 20px; /* Add space below the title */
    text-align: center; /* Center the title */
}

/* Gallery Album Item */
.gallery-album-item {
    cursor: pointer;
    position: relative;
    text-align: center;
    color: white;
    margin-bottom: 20px; /* Add some space between items */
    width: 345px; /* Adjust as needed for your layout */
    height: 350px; /* Adjust height to fit the content */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add shadow effect */
    border: 4px solid #cba25a; /* MM Project's gold */
    background-color: #fff; /* Keep white background */
    border-radius: 10px;
    overflow: hidden; /* Prevent content overflow */
}

/* Gallery Album Cover Image */
.gallery-album-item .folder-cover {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    background-color:#cba25a;
}

/* Folder Info (Name and Description) */
.gallery-album-item .folder-info {
    padding: 10px;
    background-color: white; /* Light background for text */
    text-align: center;
}

.gallery-album-item .folder-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333; /* Dark text color */
    margin: 5px 0;
}
.folder-description {
    font-size: 0.9rem; /* Adjust font size */
    color: #555; /* Subtle color */
    margin-top: 5px; /* Add spacing above the description */
    text-align: center; /* Center the text */
}

.gallery-album-item .folder-description {
    font-size: 0.9rem;
    color: #666; /* Lighter text color for description */
    margin: 0;
}

/* Gallery Album Title */
.gallery-album-item .folder-title {
    width: 100%;
    color: #333; /* Keep dark text for titles */
    padding: 5px 0;
    text-align: center;
    border-radius: 0 0 10px 10px;
    background-color: white; /* Light background for title */
    font-size: 1rem;
    font-weight: bold;
}

/* Gallery Content Container */
.gallery-content-container {
    display: none; /* Hidden by default */
    flex-wrap: wrap; /* Allow items to wrap */
    gap: 20px; /* Add space between items */
    justify-content: center; /* Center the items */
    margin: 20px 0; /* Add vertical spacing */
}

.gallery-content-container.active {
    display: flex; /* Show the container when active */
}

/* Gallery Item */
.gallery-item {
    text-align: center;
    width: 345px; /* Set a fixed width for items */
    height: 280px; /* Set a fixed height for items */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add shadow effect */
    border: 1px solid #ddd; /* Light gray border */
    background-color: #fff; /* White background */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Prevent content overflow */
}

.gallery-item img {
    cursor: pointer;
    width: 100%; /* Make the image responsive */
    height: 220px; /* Set a fixed height for the image */
    object-fit: cover; /* Ensure the image covers the area without distortion */
    border-radius: 10px 10px 0 0; /* Rounded corners for the top */
}

.gallery-item p {
    padding: 10px; /* Add padding inside the text */
    font-size: 0.9rem; /* Adjust font size */
    color: #333; /* Dark text color */
}

/* Expanded Album Container */
.expanded-album-container {
    border: 2px solid #cba25a; /* Gold border to highlight the album */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Add padding inside the container */
    margin: 20px auto; /* Center the container and add vertical spacing */
    background-color: #fff; /* White background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    display: none; /* Hidden by default */
    text-align: center; /* Center the content horizontally */
}

/* Center the album folder inside the expanded container */
.expanded-album-container .gallery-album-item {
    margin: 0 auto 20px auto; /* Center the folder and add spacing below it */
    display: inline-block; /* Ensure the folder is treated as a block element */
    text-align: center; /* Center the content inside the folder */
}

.close-album-button {
    display: block;
    margin: 10px auto;
    padding: 10px 20px;
    background-color: #cba25a; /* Gold color */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
}

.close-album-button:hover {
    background-color: #a8844a; /* Darker gold on hover */
}

/* Gallery Content Container */
.gallery-content-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}

/* Admin Expanded Album Container */
.admin-expanded-album-container {
    display: none;
    border: 2px solid #cba25a; /* Gold border */
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    background-color: #f9f9f9; /* Light background color */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); /* Add shadow for depth */
    text-align: center; /* Center the content */
}

.admin-close-album-button {
    display: block;
    margin: 10px auto;
    padding: 10px 20px;
    background-color: #cba25a; /* Gold color */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
}

.admin-close-album-button:hover {
    background-color: #a8844a; /* Darker gold on hover */
}

/* Gallery Items in Expanded Album */
.admin-gallery-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}

/* Individual Gallery Item */
.admin-gallery-item {
    position: relative; /* Ensure the button stays above the photo */
    border: 2px solid #cba25a; /* Gold border around each photo */
    border-radius: 8px; /* Rounded corners */
    padding: 10px;
    background-color: #fff; /* White background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    text-align: center;
    width: 150px; /* Set a fixed width for consistency */
}

/* Style for the photo */
.admin-gallery-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 0 0 8px 8px; /* Rounded corners for the bottom */
    margin-top: 0px; /* Add spacing below the delete button */
    border: #cba25a 2px solid; /* Gold border around the image */
}

/* Gallery Item Title */
.admin-gallery-item h3 {
    font-size: 0.9rem;
    color: #333;
    margin: 0;
}

/* Admin Gallery Container */
.admin-gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.admin-folder-item {
    text-align: center;
    cursor: pointer;
    margin: 10px;
}

.admin-folder-cover {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.admin-folder-title {
    margin-top: 10px;
    font-weight: bold;
}

.admin-expanded-album-container {
    display: none;
    background-color: #f9f9f9;
    padding: 20px;
    border: 2px solid #ccc;
    border-radius: 8px;
    margin: 20px 0;
    width: 100%;
}

.admin-close-expanded {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 20px;
}

.admin-gallery-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.admin-gallery-item {
    text-align: center;
}

.admin-gallery-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.admin-gallery-description {
    margin-top: 10px;
    font-size: 0.9rem;
}

/* Admin Gallery Item */
.admin-gallery-item {
    text-align: center;
    width: 345px; /* Match the default gallery item width */
    height: 280px; /* Match the default gallery item height */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add shadow effect */
    border: 1px solid #ddd; /* Light gray border */
    background-color: #fff; /* White background */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Prevent content overflow */
}

/* Admin Gallery Item Image */
.admin-gallery-item img {
    cursor: pointer;
    width: 100%; /* Make the image responsive */
    height: 220px; /* Set a fixed height for the image */
    object-fit: cover; /* Ensure the image covers the area without distortion */
    border-radius: 10px 10px 0 0; /* Rounded corners for the top */
}

/* Admin Gallery Item Title */
.admin-gallery-item h3 {
    padding: 10px;
    font-size: 0.9rem;
    color: #333; /* Dark text color */
}

/* Admin Expanded Album Container */
.admin-expanded-album-container {
    border: 2px solid #cba25a; /* Gold border to highlight the album */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Add padding inside the container */
    margin: 20px auto; /* Center the container and add vertical spacing */
    background-color: #fff; /* White background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    display: none; /* Hidden by default */
}

/* Top Section of Expanded Album */
.admin-expanded-top {
    display: flex; /* Use flexbox to align items side by side */
    justify-content: space-between; /* Space out the folder and the form */
    align-items: flex-start; /* Align items at the top */
    gap: 20px; /* Add space between the folder and the form */
    margin-bottom: 20px; /* Add spacing below the top section */
}

/* Album Folder in Expanded Container */
.admin-expanded-top .admin-gallery-album-item {
    flex: 1; /* Allow the folder to take up available space */
    max-width: 45%; /* Limit the folder width to 45% of the container */
    text-align: center; /* Center the content inside the folder */
}

/* Add Photo Form */
.admin-expanded-top .admin-add-photo-form {
    flex: 1; /* Allow the form to take up available space */
    max-width: 45%; /* Limit the form width to 45% of the container */
    border: 2px dashed #cba25a; /* Dashed border for the add photo form */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Add padding inside the form */
    text-align: center; /* Center the content */
    background-color: #f9f9f9; /* Light background */
}

/* Add Photo Form Labels */
.admin-add-photo-form label {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

/* Add Photo Form Inputs */
.admin-add-photo-form input[type="text"],
.admin-add-photo-form input[type="file"] {
    width: 80%;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Add Photo Form Button */
.admin-add-photo-form button {
    background-color: #8a5c9e; /* Purple background */
    color: #fff; /* White text */
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.admin-add-photo-form button:hover {
    background-color: #a57cae; /* Darker purple on hover */
}

/* Non-Expanded Album Item */
.admin-gallery-album-item {
    cursor: pointer;
    text-align: center;
    width: 345px; /* Match the default gallery folder width */
    height: 400px; /* Match the default gallery folder height */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add shadow effect */
    border: 1px solid #ddd; /* Light gray border */
    background-color: #fff; /* White background */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Prevent content overflow */
    margin-bottom: 20px; /* Add spacing between albums */
}

/* Non-Expanded Album Cover Image */
.admin-gallery-album-item .admin-folder-cover {
    margin: 0; /* Remove any margin above the image */
    padding: 0; /* Remove padding to bring the image closer to the button */
    width: 100%; /* Ensure the image spans the full width */
    height: 220px; /* Set a fixed height for the image */
    object-fit: cover; /* Ensure the image covers the area without distortion */
    border-radius: 0 0 10px 10px; /* Rounded corners for the bottom */
}

/* Non-Expanded Album Info (Name and Description) */
.admin-gallery-album-item .admin-folder-info {
    padding: 10px;
    background-color: #f9f9f9; /* Light background for text */
    text-align: center;
}

.admin-gallery-album-item .admin-folder-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333; /* Dark text color */
    margin: 5px 0;
}

.admin-gallery-album-item .admin-folder-description {
    font-size: 0.9rem;
    color: #666; /* Lighter text color for description */
    margin: 0;
}

/* Top Section of Expanded Album */
.admin-expanded-top {
    display: flex; /* Use flexbox to align items side by side */
    justify-content: space-between; /* Space out the folder and the form */
    align-items: flex-start; /* Align items at the top */
    gap: 20px; /* Add space between the folder and the form */
    margin-bottom: 20px; /* Add spacing below the top section */
}

/* Album Folder in Expanded Container */
.admin-expanded-top .admin-gallery-album-item {
    flex: 1; /* Allow the folder to take up available space */
    max-width: 45%; /* Limit the folder width to 45% of the container */
    text-align: center; /* Center the content inside the folder */
}

/* Add Photo Form */
.admin-expanded-top .admin-add-photo-form {
    flex: 1; /* Allow the form to take up available space */
    max-width: 45%; /* Limit the form width to 45% of the container */
    border: 2px dashed #cba25a; /* Dashed border for the add photo form */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Add padding inside the form */
    text-align: center; /* Center the content */
    background-color: #f9f9f9; /* Light background */
}

/* Add Photo Form Labels */
.admin-add-photo-form label {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

/* Add Photo Form Inputs */
.admin-add-photo-form input[type="text"],
.admin-add-photo-form input[type="file"] {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Add Photo Form Button */
.admin-add-photo-form button {
    background-color: #8a5c9e; /* Purple background */
    color: #fff; /* White text */
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.admin-add-photo-form button:hover {
    background-color: #a57cae; /* Darker purple on hover */
}

.adminfolder-item {
    position: relative; /* Set relative positioning for the parent container */
    overflow: hidden; /* Prevent content from overflowing */
}

/* Adjust the spacing between the button and the image */
.admin-folder-cover {
    margin-top: 0; /* Remove any margin above the image */
    width: 100%; /* Ensure the image spans the full width */
}

.admin-about-me img,
.admin-tutoring img {
    max-width: 200px;
    height: auto;
    border: 2px solid #cba25a;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* Delete Confirmation Modal */
.delete-confirmation-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
}

.delete-confirmation-modal .modal-content {
    background-color: #fff;
    margin: 15% auto; /* Center vertically and horizontally */
    padding: 20px;
    border: 2px solid #cba25a;
    border-radius: 10px;
    width: 30%; /* Adjust width as needed */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.delete-confirmation-modal .confirm-button {
    background-color: #e74c3c; /* Red for delete */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
}

.delete-confirmation-modal .confirm-button:hover {
    background-color: #c0392b; /* Darker red */
}

.delete-confirmation-modal .cancel-button {
    background-color: #8a5c9e; /* Purple for cancel */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.delete-confirmation-modal .cancel-button:hover {
    background-color: #a57cae; /* Darker purple */
}

/* Update Confirmation Modal */
.update-confirmation-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
}

.update-confirmation-modal .modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 2px solid #cba25a;
    border-radius: 10px;
    width: 300px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.update-confirmation-modal .close-button {
    background-color: #8a5c9e; /* Purple button */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.update-confirmation-modal .close-button:hover {
    background-color: #6f4a7d; /* Darker purple */
}

.cancel-button {
    background-color: #ccc; /* Gray for cancel */
    color: black;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}

.cancel-button:hover {
    background-color: #bbb; /* Darker gray on hover */
}

/* Add Photos Form */
.admin-add-photo-form {
    margin: 0 auto; /* Center the form horizontally */
    padding: 20px;
    border: 2px solid #8a5c9e; /* Purple border */
    border-radius: 8px; /* Rounded corners */
    background-color: #fff; /* White background */
    max-width: 400px; /* Limit the width */
    text-align: center; /* Center the content */
    margin-bottom: 20px; /* Add spacing below the form */
}

.admin-add-photo-form label {
    display: block;
    margin-bottom: 10px; /* Add spacing below the label */
    font-weight: bold;
    text-align: center; /* Center the label text */
}

.admin-add-photo-form input[type="text"],
.admin-add-photo-form input[type="file"] {
    display: block;
    margin: 0 auto 15px; /* Center the input and add spacing below */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    width: 90%; /* Adjust width for better alignment */
    max-width: 300px; /* Limit the width */
    text-align: center; /* Center text inside the input */
}

.admin-add-photo-form button {
    background-color: #8a5c9e; /* Purple color */
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    margin-top: 10px;
}

.admin-add-photo-form button:hover {
    background-color: #6f4a7d; /* Darker purple on hover */
}




/* Individual Box */
/* Default Layout: 3 Columns */
.content-boxes {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for responsive design */
    justify-content: space-between; /* Space out the boxes */
    gap: 20px; /* Add spacing between the boxes */
    padding: 0 10px; /* Reduce padding to bring the boxes closer to the edges */
    margin: 10px; /* Center the container */
}


.content-boxes .box {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: space-between; /* Space out content evenly */
    align-items: center; /* Center content horizontally */
    padding: 20px;
    border: 2px solid #cba25a;
    border-radius: 10px;
    background-color: white;
    text-align: center;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    width: 100%; /* Allow the box to take up the full width */
    max-width: 30%; /* Limit the maximum width for 3 columns */
    height: auto; /* Allow the height to adjust dynamically */
    flex: 1; /* Allow the boxes to grow and shrink equally */
}

.content-boxes .box img {
    height: auto; /* Maintain the aspect ratio */
    border-radius: 10px;
    margin-bottom: 15px; /* Add spacing below the image */
}

.content-boxes .box h2 {
    font-size: 1.5rem;
    margin-bottom: 10px; /* Add spacing below the heading */
    word-wrap: break-word; /* Ensure long words break to the next line */
    overflow-wrap: break-word; /* Ensure long words wrap properly */
}

.content-boxes .box p {
    font-size: 1rem;
    margin-bottom: 15px; /* Add spacing below the paragraph */
    line-height: 1.5; /* Improve readability */
}

.content-boxes .box a {
    margin-top: auto; /* Push the button to the bottom of the box */
    padding: 10px 20px;
    background-color: #8a5c9e;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.content-boxes .box a:hover {
    background-color: #6f4a7d;
}

/* 2 Columns with 1 Centered Beneath for Medium Screens */
@media (max-width: 1200px) and (min-width: 768px) {
    .content-boxes {
        display: flex;
        flex-wrap: wrap; /* Allow wrapping to the next row */
        justify-content: center; /* Center the boxes horizontally */
        gap: 20px; /* Add spacing between the boxes */
    }

    .content-boxes .box {
        flex: 1 1 45%; /* Allow the boxes to take up 45% of the width */
        max-width: 45%; /* Limit the maximum width to 45% */
        margin: 10px; /* Add margin around the boxes */
    }

    .content-boxes .box:nth-child(3) {
        flex: 1 1 90%; /* Make the third box take up 90% of the width */
        max-width: 90%; /* Center the third box beneath the first two */
    }
}


/* 1 Column Layout for Small Screens */
@media (max-width: 768px) {
    .content-boxes {
        flex-direction: column; /* Stack boxes vertically */
        align-items: center; /* Center the boxes horizontally */
        gap: 20px; /* Add spacing between the boxes */
    }

    .content-boxes .box {
        width: 80%; /* Each box takes up 80% of the screen width */
        max-width: 80%; /* Ensure the maximum width is also 80% */
        margin: 0 auto; /* Center the box horizontally */
    }


    .content-boxes .box:nth-child(1) {
        order: 2; /* Box 1 becomes the second box */
    }

    .content-boxes .box:nth-child(2) {
        order: 3; /* Box 2 becomes the third box */
    }

    .content-boxes .box:nth-child(3) {
        order: 1; /* Box 3 becomes the first box */
    }

    .content-boxes .box {
        width: 90%; /* Full width for single column */
    }
}


.content-boxes .box .tutor-box-link {
    position: relative;
    margin-top: auto; /* Push the button to the bottom of the box */
    display: inline-block;
    padding: 10px 20px;
    background-color: #8a5c9e; /* Button background color */
    color: white; /* Button text color */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    font-weight: bold;
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.content-boxes .box .tutor-box-link:hover {
    background-color: #6f4a7d; /* Darker purple on hover */
}

.box-image {
    max-width: 80%;
    max-height: 250px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Target the image inside the .box-image div */
.box-image img {
    max-width: 100%;
    max-height: 250px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-boxes-container {
        flex-direction: column; /* Stack forms vertically on smaller screens */
        gap: 20px;
    }

    .admin-content-box {
        max-width: 100%; /* Allow forms to take full width */
    }
}

/* Admin Boxes Container */
.admin-boxes-container {
    display: flex;
    justify-content: space-between; /* Add space between the forms */
    gap: 20px; /* Add spacing between the forms */
    margin: 20px auto; /* Center the container */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */

}

/* Admin Content Box */
.admin-content-box {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally */
    flex: 1; /* Allow each form to take up equal space */
    min-width: 300px; /* Ensure a minimum width for each form */
    max-width: 32%; /* Limit the maximum width of each form */
    padding: 20px;
    border: 2px solid #cba25a;
    border-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}


/* Adjust the image inside the forms */
.admin-content-box img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    border: #cba25a solid 2px; /* Gold border */
    border-radius: 5px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-boxes-container {
        flex-direction: column; /* Stack forms vertically on smaller screens */
        gap: 20px;
    }

    .admin-content-box {
        max-width: 100%; /* Allow forms to take full width */
    }
}
.content-boxes .box {
    flex: 1;
    padding: 20px;
    border: 2px solid #cba25a;
    border-radius: 10px;
    background-color: white;
    text-align: center;
    box-shadow: 0 0px 10px #000000;
}

.content-boxes .box h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 0px; /* Reduce the bottom margin */
}


.content-boxes .box p {
    font-size: 1rem;
    color: #555;
    margin-top: 0; /* Remove the top margin */
}

/* Admin Content Box */
.admin-content-box {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 2px solid #cba25a;
    border-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.admin-content-box label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.admin-content-box input[type="text"],
.admin-content-box textarea,
.admin-content-box input[type="file"] {
    width: 80%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.admin-content-box img {
    display: block;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    border: #cba25a solid 2px; /* Gold border */
}

/* Save Changes Button */
.admin-content-box button.admin-button {
    margin-top: auto; /* Push the button to the bottom of the box */
    display: inline-block;
    padding: 10px 20px;
    background-color: #8a5c9e; /* Button background color */
    color: white; /* Button text color */
    text-decoration: none;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: center; /* Ensure the button is horizontally centered */
}

.admin-content-box button.admin-button:hover {
    background-color: #6f4a7d; /* Darker purple on hover */
}

/* Carousel Container */
.carousel {
    position: relative;
    height: 300px;
    width: 80%; /* Adjust the width as needed */
    margin: 0 auto; /* Center the carousel horizontally */
    border: 2px solid #cba25a; /* Gold border */
    border-radius: 10px;
    background-color: black;
    aspect-ratio: 16 / 9; /* Maintain a 16:9 aspect ratio */
}

.carousel_image
{
	width:100%;
	height: 100%;
	object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    
}

.carousel_track-container
{
	background: white;
	height: 100%;
	position: relative;
	overflow: hidden; /* Allow slides to protrude */
    width: 100%;
    aspect-ratio: 16 / 9; /* Maintain a 16:9 aspect ratio */
    background-color: black;
    border-radius: 10px;
}

.carousel_track
{
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	height: 100%;
	transition: transform 0.5s ease-in-out;
    display: flex;

}

.carousel_slide
{
	position : absolute;
	top: 0;
	bottom:0;
	width: 100%;
    min-width: 80%; /* Adjust the width of each slide */
    margin: 0 10px; /* Add spacing between slides */
    transition: transform 0.5s ease-in-out;
}

.carousel_nav
{
	display: flex;
	justify-content: center;
	margin-top: 10px;
    margin-bottom: 50px;
}

.carousel_indicator
{
	border:0;
	border-radius:50%;
	width: 20px;
	height: 15px;
	background: rgba(0,0,0,.5);
	margin: 0 10px;
	cursor: pointer;
    width: 10px;
    height: 10px;
    background-color: #ccc;
    margin: 0 5px;
  
}

.carousel_indicator.current-slide
{
	background:rgba(0,0,0,.75);
    background-color: #333;
}

/* Media Queries */

@media (max-width: 1600px) {
    .carousel {
        width: 90%; /* Adjust the width for smaller screens */
        height: 250px; /* Adjust the height for smaller screens */
    }

}

@media (max-width: 1536px) {
    .home-photo-box {
        height: 300px; /* Set a fixed height for the box */
        width: 400px; /* Set a fixed width for the box */
        flex: none; /* Prevent the box from resizing with flexbox */
    }

    .home-photo-box img {
        height: 100%; /* Ensure the image fills the box */
        width: 100%; /* Ensure the image scales with the box */
        object-fit: cover; /* Maintain the aspect ratio without distortion */
    }
}

@media (max-width: 1419px) {
    .carousel{
        width: 90%; /* Adjust the width for smaller screens */
        height: 240px; /* Adjust the height for smaller screens */
    }
}

@media (max-width: 1400px) {
    body.admin-page .menu-toggle {
        display: block; /* Show the menu button */
    }

    body.admin-page .nav-links {
        display: none; /* Hide the navigation links by default */
        flex-direction: column; /* Stack the links vertically */
        gap: 10px; /* Add spacing between links */
        position: absolute; /* Position the dropdown */
        top: 60px; /* Adjust based on your navbar height */
        right: 20px; /* Align to the right */
        background-color: #8a5c9e; /* Background color for the dropdown */
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    }

    body.admin-page .nav-links.active {
        display: flex; /* Show the navigation links when the menu is toggled */
    }
    .home-photo-box {
        height: 300px; /* Set a fixed height for the box */
        width: 400px; /* Set a fixed width for the box */
        flex: none; /* Prevent the box from resizing with flexbox */
    }

    .home-photo-box img {
        height: 100%; /* Ensure the image fills the box */
        width: 100%; /* Ensure the image scales with the box */
        object-fit: cover; /* Maintain the aspect ratio without distortion */
    }
}

@media (max-width: 1200px) {
    .content-container {
        display: flex;
        flex-direction: column; /* Stack the boxes vertically */
        align-items: center; /* Center the boxes horizontally */
        gap: 20px; /* Add spacing between the boxes */
    }

    .about-me-text-box {
        order: -1; /* Move the text box above the image */
        width: 80%; /* Take up 80% of the width */
        text-align: center; /* Center the text inside */
    }

    .home-photo-box {
        width: 100%; /* Allow the box to take up the full width */
        max-width: 400px; /* Limit the maximum width */
        height: auto; /* Allow the height to adjust dynamically */
        flex: none; /* Prevent the box from resizing with flexbox */
    }

    .home-photo-box img {
        width: 100%; /* Ensure the image fills the box */
        height: auto; /* Maintain the aspect ratio */
        object-fit: cover; /* Ensure the image scales properly without distortion */
        border-radius: 10px; /* Keep rounded corners for the image */
    }

    .tutor-box {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center align all elements horizontally */
        text-align: center; /* Center text inside the box */
        gap: 20px; /* Add spacing between elements */
        width: 90%; /* Allow the tutor box to take up the full width */
    }

    .tutor-box h1 {
  
            order: 1; /* Ensure the heading appears first */
            font-size: 2.5rem; /* Default font size for larger screens */
            margin-bottom: 10px; /* Add spacing below the heading */
            border-bottom: #cba25a 2px solid; /* Add a gold underline */
            padding-bottom: 10px; /* Add space below the underline */
            display: inline-block; /* Restrict underline to the text width */
            font-family: 'Corinthia', cursive; /* Apply the Corinthia font */
            color: #333; /* Optional: Set a dark color for the header */
            text-align: center; /* Center the text */
            line-height: 1.2; /* Adjust line height for readability */
            word-wrap: break-word; /* Ensure long words break to the next line */
            overflow-wrap: break-word; /* Ensure long words wrap properly */
            width: 100%; /* Allow the header to take up the full width */
        
        
    }

    .tutor-box-photo {
        order: 3; /* Ensure the image appears after the text */
        width: 100%; /* Allow the image to take up the full width */
        max-width: 400px; /* Limit the maximum width */
        display: flex;
        justify-content: center; /* Center the image horizontally */
    }

    .tutor-box-photo img {
        width: 100%; /* Ensure the image fills the container */
        max-width: 400px; /* Limit the maximum width */
        height: auto; /* Maintain the aspect ratio */
        border-radius: 10px; /* Keep rounded corners */
    }

    .tutor-box-text {
        order: 2; /* Ensure the text appears after the heading */
        width: 80%; /* Adjust the width of the text */
        text-align: center; /* Center the text */
    }

    .tutor-box-button {
        order: 4; /* Ensure the button appears last */
        width: auto; /* Allow the button to size dynamically */
        margin-top: 20px; /* Add spacing above the button */
    }
}
@media (max-width: 1359px) {
    .carousel{
        width: 90%; /* Adjust the width for smaller screens */
        height: 230px; /* Adjust the height for smaller screens */
    }
}
@media (max-width: 1290px) {
    .carousel{
        width: 90%; /* Adjust the width for smaller screens */
        height: 220px; /* Adjust the height for smaller screens */
    }
}

@media (max-width: 1250px) {
    .carousel{
        width: 90%; /* Adjust the width for smaller screens */
        height: 210px; /* Adjust the height for smaller screens */
    }
}
@media (max-width: 120px) {
    .carousel{
        width: 80%; /* Adjust the width for smaller screens */
        height: 300px; /* Adjust the height for smaller screens */
    }
}

@media (max-width: 922px) {
    .expanded-album-container {
        margin: 0; /* Remove all margins */
    }
}
/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    .tutor-box h1 {
        font-size: 2rem; /* Reduce font size for smaller screens */
        line-height: 1.4; /* Increase line height for better readability */
        padding-bottom: 8px; /* Adjust padding below the underline */
        word-wrap: break-word; /* Ensure long words break to the next line */
        overflow-wrap: break-word; /* Ensure long words wrap properly */
    }
}

@media (max-width: 620px) {
    .admin-performance-form {
        margin: 0 10px;
        margin-bottom: 10px;
    }
}

@media (max-width: 540px) {
    .navbar {
        padding: 10px 20px; /* Reduce padding to make the navbar thinner */
        height: 50px; /* Adjust the height of the navbar */
    }

    .logo a {
        font-size: 1.8rem; /* Further reduce font size for screens 539px or smaller */
    }
    .menu-toggle {
        font-size: 1rem; /* Reduce font size */
        padding: 9px 13px; /* Adjust padding for a smaller button */
    }
    .nav-links {
        top: 45px; /* Adjust the top position to move the menu up */
    }
}

@media (max-width: 480px) {
    .logo a {
        font-size: 1.5rem; /* Further reduce font size for screens 480px or smaller */
        margin-left: 10px; /* Move the logo text slightly to the left */
    }
        .home-photo-box {
            width: 80%; /* Set the width to 80% of the screen */
            height: auto; /* Allow the height to adjust automatically */
            margin: 0 auto; /* Center the box horizontally */
            padding: 10; /* Remove any padding */
            border: 2px solid #cba25a; /* Keep the gold border */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Keep the box shadow */
            border-radius: 15px; /* Keep rounded corners */
            flex: none; /* Prevent resizing with flexbox */
        }
    
        .home-photo-box img {
            width: 100%; /* Ensure the image fills the box */
            height: auto; /* Maintain the aspect ratio */
            object-fit: cover; /* Ensure the image scales properly without distortion */
            display: block; /* Ensure the image is treated as a block element */
            border-radius: 10px; /* Keep rounded corners for the image */
        }
        .tutor-box h1 {
            font-size: 1.8rem; /* Further reduce font size for very small screens */
            line-height: 1.5; /* Increase line height for better readability */
            padding-bottom: 6px; /* Adjust padding below the underline */
        }
}
@media (max-width: 500px) {
    .carousel{
        width: 90%; /* Adjust the width for smaller screens */
        height: 210px; /* Adjust the height for smaller screens */
    }
}

@media (max-width: 480px) {
    .carousel{
        width: 90%; /* Adjust the width for smaller screens */
        height: 205px; /* Adjust the height for smaller screens */
    }
}
@media (max-width: 460px) {
    .carousel{
        width: 90%; /* Adjust the width for smaller screens */
        height: 200px; /* Adjust the height for smaller screens */
    }
}
@media (max-width: 450px) {

    .carousel{
        width: 90%; /* Adjust the width for smaller screens */
        height: 195px; /* Adjust the height for smaller screens */
    }
    .gallery-album-item {
        width: 95%; /* Set the container to take up 90% of the screen width */
        margin: 0 auto; /* Center the container horizontally */
    }

    .expanded-album-container {
        width: 95%; /* Set the container to take up 90% of the screen width */
        margin: 0 auto; /* Center the container horizontally */
    }

.admingallery-item {
    width: 95%; /* Set the container to take up 90% of the screen width */
    margin: 0 auto; /* Center the container horizontally */
}
}
@media (max-width: 444px) {
    .carousel{
        width: 90%; /* Adjust the width for smaller screens */
        height: 190px; /* Adjust the height for smaller screens */
    }
    .footer {
        font-size: 0.8rem; /* Reduce the font size */
        padding: 5px; /* Reduce the padding to make the footer height smaller */
    }
}
@media (max-width: 435px) {
    .carousel{
        width: 90%; /* Adjust the width for smaller screens */
        height: 185px; /* Adjust the height for smaller screens */
    }
}

@media (max-width: 424px) {
    .carousel{
        width: 90%; /* Adjust the width for smaller screens */
        height: 180px; /* Adjust the height for smaller screens */
    }
}

@media (max-width: 414px) {
    .carousel{
        width: 90%; /* Adjust the width for smaller screens */
        height: 175px; /* Adjust the height for smaller screens */
    }
}
@media (max-width: 403px) {
    .carousel{
        width: 90%; /* Adjust the width for smaller screens */
        height: 170px; /* Adjust the height for smaller screens */
    }
}
@media (max-width: 400px) {
    .menu-toggle {
        font-size: 1rem; /* Reduce font size */
        padding: 8px 12px; /* Adjust padding for a smaller button */
    }
}
@media (max-width: 395px) {
    .carousel{
        width: 90%; /* Adjust the width for smaller screens */
        height: 165px; /* Adjust the height for smaller screens */
    }
}


@media (max-width: 360px) {

    @media (max-width: 460px) {
        .carousel{
            width: 90%; /* Adjust the width for smaller screens */
            height: 155px; /* Adjust the height for smaller screens */
        }
    }
    .menu-toggle {
        font-size: 1rem; /* Reduce font size */
        padding: 6px 10px; /* Adjust padding for a smaller button */
    }
    .logo a{
        font-size: 1.4rem; /* Reduce font size */
        margin-left: 1px; /* Move the logo text slightly to the left */
    }
    .nav-links {
        top: 40px; /* Adjust the top position to align with the smaller navbar */
    }
}

@media (max-width: 346px) {
    .footer {
        font-size: 0.7rem; /* Further reduce the font size */
        padding: 3px; /* Reduce the padding to make the footer height smaller */
    }
}
@media (max-width: 345px) {
    .carousel{
        width: 90%; /* Adjust the width for smaller screens */
        height: 140px; /* Adjust the height for smaller screens */
    }
}