/* ==========================
   🌟 GENERAL STYLES
   ========================== */

   body {
    font-family: 'Lora', serif;
    margin: 0;
    padding: 0;
    background-color: #F4F1EB; /* Soft off-white */
    color: #4A3A33; /* Deep brown text */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ==========================
   🌟 HEADER & NAVIGATION
   ========================== */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #4A3A33; /* Dark brown */
    padding: 15px 20px;
    color: #C7A482; /* Warm tan */
    flex-wrap: wrap; /* Allows wrapping for smaller screens */
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1; /* Ensure it spans the width */
}

.logo {
    height: 50px;
    width: auto;
}

.logo-text {
    font-family: 'Playfair Display', serif;
    font-weight: bold;
    color: #C7A482;
    text-transform: uppercase;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
}

.logo-text .main {
    font-size: 1.8rem;
}

.logo-text .sub {
    font-size: 1rem;
    color: #985F4D;
    letter-spacing: 1px;
}

/* Navigation Menu */
nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

nav ul li a {
    text-decoration: none;
    color: #C7A482;
    font-weight: bold;
    position: relative;
    transition: color 0.3s ease;
}

nav ul li a::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -3px;
    left: 0;
    background-color: #985F4D;
    transition: width 0.3s ease;
}

nav ul li a:hover::after {
    width: 100%;
}

nav ul li a:hover {
    color: #985F4D;
}

/* ==========================
   🌟 RESPONSIVE DESIGN (MOBILE)
   ========================== */

@media screen and (max-width: 768px) {
    /* Header Adjustments */
    header {
        flex-direction: column; /* Stack elements vertically */
        text-align: center; /* Center-align on small screens */
    }

    .logo-container {
        justify-content: center; /* Center the logo */
        flex-wrap: wrap; /* Allow wrapping */
    }

    .logo-text {
        text-align: center; /* Center logo text */
    }

    /* Navigation Menu Adjustments */
    nav ul {
        flex-direction: column; /* Stack menu items vertically */
        align-items: center;
        gap: 10px; /* Space between menu items */
        margin-top: 10px;
    }

    nav ul li a {
        font-size: 1.1rem; /* Slightly larger for mobile */
    }

    .prev, .next {
        padding: 8px;
        font-size: 18px;
    }

    .slideshow-container {
        max-width: 100%; /* Full width on smaller screens */
        height: auto; /* Maintain aspect ratio */
    }
}


/* ==========================
   🌟 MAIN CONTENT
   ========================== */

main {
    flex: 1;
    padding: 20px;
    text-align: center;
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #4A3A33; /* Deep brown */
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

p {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 20px;
}

/* ==========================
   🌟 SLIDESHOW STYLES
   ========================== */

   .slideshow-container {
    position: relative; /* Allows absolute positioning for buttons */
    max-width: 500px; /* Limit the slideshow width */
    height: 281px; /* Maintain 16:9 aspect ratio */
    margin: 20px auto; /* Center the slideshow */
    overflow: hidden;
    border: 3px solid #4A3A33; /* Match with dark brown accents */
    background-color: #F4F1EB; /* Light background */
    border-radius: 8px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Add a soft shadow */
}

/* Slides */
.slide {
    display: none;
    position: absolute; /* Allow overlapping slides */
    width: 100%;
    height: 100%;
    animation: fadeEffect 1.5s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure no distortion */
    border-radius: 5px;
}

/* Fade Animation */
@keyframes fadeEffect {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* Slideshow Navigation Buttons */
.prev, .next {
    position: absolute; /* Position relative to the container */
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: white;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    transition: background-color 0.3s ease;
    z-index: 10; /* Ensure buttons appear above slides */
}

/* Position Left and Right Buttons */
.prev {
    left: 10px; /* 10px from the left edge */
}

.next {
    right: 10px; /* 10px from the right edge */
}

/* Hover Effect for Buttons */
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */
}

/* ==========================
   🌟 FORMS
   ========================== */

form input, form textarea {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #4A3A33;
    border-radius: 5px;
    width: 100%;
    font-size: 1rem;
    background-color: #F4F1EB;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

form input:focus, form textarea:focus {
    box-shadow: 0 0 10px #985F4D; /* Glowing focus */
    background-color: #FFF5EE; /* Slightly brighter */
}

/* ==========================
   🌟 FOOTER
   ========================== */

footer {
    background-color: #4A3A33;
    color: #C7A482;
    padding: 10px;
    text-align: center;
    width: 100%;
    margin-top: auto;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* Subtle top shadow */
}