/* Base styles (Desktop default) */
body {
    font-family: 'Georgia', serif;
    background-color: #ffffff;
    color: #4a4a4a;
}

nav {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 4rem; /* Larger padding for desktop */
}

nav a {
    margin-left: 0.5rem; /* Ensure consistent left margin */
    margin-right: 0.5rem; /* Ensure consistent right margin */
    font-size: 1.125rem; /* Slightly larger text for desktop */
    transition: color 0.2s ease-in-out;
}

nav .space-x-7 > a:first-child {
    margin-left: 0; /* Remove any extra left margin on the first item */
    margin-right: 0; /* Remove any extra right margin on the first item */
}


input[type="text"] {
    border-radius: 9999px;
    padding: 0.75rem;
    padding-left: 1.5rem; /* Add extra padding on the left inside the input field */
    width: 100%;
    font-size: 1.125rem;
}


p {
    line-height: 2rem; /* Increase line height for better readability */
    padding: 1rem 2rem; /* Larger padding for desktop */
}

.recommendation {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

.recommendation.active {
    display: block;
    opacity: 1;
}



/* Dots Indicator */
.dot {
    width: 8px;
    height: 8px;
    background-color: #d1d5db;
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.dot.active {
    width: 20px;
    height: 8px;
    background-color: #4a4a4a;
}

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    nav {
        padding: 1rem 2rem; /* Reduce padding for tablet */
    }

    nav a {
        margin: 0 0.75rem;
        font-size: 1rem; /* Slightly smaller font for tablet */
    }

    .recommendation.active {
        max-width: 600px; /* Slightly narrower block */
    }

    p {
        padding: 1rem 1.5rem; /* Slightly less padding for tablet */
        font-size: 1rem; /* Adjust font size for readability */
    }

    input[type="text"] {
        font-size: 1rem; /* Adjust input text size */
        padding: 0.65rem; /* Reduce padding for input */
    }
}

/* Phone (< 768px) */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        padding: 1rem;
    }

    .recommendation.active {
        max-width: 100%; /* Full width for mobile */
    }

    nav a {
        margin: 0.5rem 0;
        font-size: 0.875rem; /* Smaller text for mobile */
        text-align: center; /* Center align menu items */
    }

    p {
        padding: 1rem;
        font-size: 0.875rem; /* Smaller font for better fit */
    }

    input[type="text"] {
        font-size: 0.875rem;
        padding: 0.5rem; /* Reduce padding for input */
    }

    .dots-container {
        margin-top: 1rem; /* Add space for dots */
    }

    /* Navigation toggle for mobile (hamburger menu) */
    nav {
        display: none; /* Hide initially */
    }

    nav.active {
        display: flex;
    }
}

/* Mobile menu button */
.hamburger {
    display: none;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 100;
}

@media (max-width: 768px) {
    .hamburger {
        display: block;
    }
}

/* Container for main content to limit width */
.container-0 {
    max-width: 800px; /* Maximum width for the entire content area */
    margin: 0 auto; /* Center the container horizontally */
    padding: 0 1rem; /* Optional padding for spacing */
}

/* Ensure other elements within the container respect the max-width */
.recommendation.active,
.search-bar,
nav {
    width: 100%;
    max-width: 100%; /* Ensure these elements don't exceed the container's width */
}