/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and General Styles */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9; /* Light background */
}

/* Floating Container */
.floating-container {
    background-color: #e0b0d1; /* Nude background for the container */
    border-radius: 25px; /* Rounded corners */
    padding: 20px;
    max-width: 98%; /* Max width for the content */
    margin: 5px auto; /* Centered margin with a lower position */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); /* Floating effect */
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    background-color: #d1b44c; /* Golden Luxe */
    color: #4b3c2a; /* Dark Brown */
    border-radius: 25px; /* Rounded corners */
}

.nav-menu {
    display: flex;
    list-style: none;
}

.nav-menu li a {
    color: #4b3c2a;
    padding: 0 1em;
    text-decoration: none;
}

.menu-toggle {
    display: none;
}

/* Hero Section */
#hero {
    text-align: center;
    padding: 5em 2em;
    background: linear-gradient(to right, #e0b0d1, #a1c9e7); /* Nude and Azure Allure gradient */
    color: #4b3c2a; /* Dark Brown */
    border-radius: 25px; /* Rounded corners */
}

#hero h1 {
    font-size: 3em;
    margin-bottom: 0.5em;
}

#hero p {
    font-size: 1.5em;
}

.cta {
    padding: 1em 2em;
    background-color: #f1d6a7; /* Light Gold */
    color: #4b3c2a; /* Dark Brown */
    border: none;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s;
    border-radius: 8px; /* Rounded corners */
}

.cta:hover {
    background-color: #e2c8a4; /* Darker Gold on hover */
}

/* About Section */
#about {
    padding: 3em 2em;
    text-align: center;
    border-radius: 25px; /* Rounded corners */
}
.about-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 2em;
    text-align: left;
    background-color: #e0b0d1; /* Nude color background */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Floating shadow effect */
}

.profile-image {
    width: 300px;
    height: 300px;
    border-radius: 30%; /* Circular image */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Subtle shadow for the image */
}

#about p {
    font-size: 1.1em;
    color: #4b3c2a; /* Dark brown for text */
    max-width: 600px;
    line-height: 1.6;
    text-align: justify;
}


/* Services Section */
#services {
    padding: 3em 2em;
    background-color: #f9f9f9;
    text-align: center;
    border-radius: 25px; /* Rounded corners */
}

.service-cards {
    display: flex;
    gap: 1em;
    justify-content: center;
    flex-wrap: wrap;
}

.service-card {
    padding: 2em;
    background-color: white;
    border-radius: 15px; /* Rounded corners */
    width: 200px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid #d1b44c; /* Golden Luxe border */
}

/* Contact Section */
#contact {
    padding: 3em 2em;
    text-align: center;
    border-radius: 25px; /* Rounded corners */
}

.contact-form-container {
    background-color: white; /* White background for the form */
    padding: 2em; /* Padding for spacing */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for floating effect */
    max-width: 400px; /* Limit the width of the form */
    margin: 0 auto; /* Center the form */
}

#contact-form {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

#contact-form input,
#contact-form textarea {
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 10px; /* Rounded corners */
}

/* Button */
#contact-form button {
    padding: 0.75em;
    background-color: #d1b44c; /* Golden Luxe */
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 10px; /* Rounded corners */
    transition: background-color 0.3s;
}

#contact-form button:hover {
    background-color: #b99c3a; /* Darker shade on hover */
}

/* Footer */
footer {
    padding: 1em;
    background-color: #4b3c2a; /* Dark Brown */
    color: #f5f0e1; /* Off-white */
    text-align: center;
    border-radius: 0 0 25px 25px; /* Rounded corners at the bottom */
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }

    .menu-toggle {
        display: block;
        cursor: pointer;
    }

    .service-cards {
        flex-direction: column;
    }
}

/* Achievements Section */
#achievements {
    padding: 3em 2em;
    text-align: center;
    background-color: #f9f9f9; /* Light background for contrast */
    border-radius: 25px; /* Rounded corners */
    margin: 20px 0; /* Space between sections */
}

.achievements-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between cards */
    justify-content: center;
}

.achievement-card {
    background-color: white; /* White background for cards */
    border-radius: 15px; /* Rounded corners */
    padding: 1em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    text-align: center; /* Centered text */
    width: 250px; /* Fixed width for cards */
}

.certificate-image {
    width: 100%; /* Responsive image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Slightly rounded corners */
}

.achievement-card p {
    margin-top: 0.5em; /* Space above the title */
    color: #4b3c2a; /* Dark brown for text */
}


/* Add this to your existing CSS */
.nav-menu.active {
    display: flex; /* Show the menu when active */
    flex-direction: column; /* Stack items vertically */
    position: absolute; /* Position it correctly on mobile */
    top: 60px; /* Adjust according to your header height */
    right: 0;
    background-color: #d1b44c; /* Match navbar color */
    width: 100%; /* Full width */
    z-index: 100; /* Ensure it stays on top */
}
.nav-menu li a:hover {
    color: #f1d6a7; /* Lighten text on hover */
}

.cta:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}
section {
    margin: 20px 0; /* Add space between sections */
}
.nav-menu li a:focus,
#contact-form button:focus {
    outline: 2px solid #4b3c2a; /* Outline color for focus */
}
#contact-form button:disabled {
    background-color: #ccc; /* Greyed out */
    cursor: not-allowed; /* Change cursor */
}
:root {
    --golden-luxe: #d1b44c;
    --dark-brown: #4b3c2a;
    --light-background: #f9f9f9;
    --nude: #e0b0d1;
    --light-gold: #f1d6a7;
}

body {
    background-color: var(--light-background);
}

.navbar {
    background-color: var(--golden-luxe);
    color: var(--dark-brown);
}