/* General Reset */
body, h1, h2, p, ul, li, nav, header, section, footer {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styling */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #fdf8f1; /* Soft background color */
    color: #333;
    margin: 0;
    padding: 0;
    width: 100%; /* Ensure full width */
}

/* Header */
header {
    background: #f4b400;
    color: #fff;
    padding: 1rem;
    text-align: center;
}

/* Navigation Bar */
nav {
    background: #333;
    color: #fff;
    padding: 0.5rem;
    margin-bottom: 0;
}
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap; /* Prevent wrapping on wide screens */
}
nav ul li {
    margin: 0 1rem;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
}
nav ul li a.active {
    background-color: #f4b400; /* Your bright yellow */
    border-radius: 5px; /* Rounded borders */
    color: white; /* Text color */
    padding: 0px 6px; /* Add padding (top/bottom: 0px, left/right: 6px) */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Ensure proper padding and box sizing */
}

/* Navigation Styling for Small Screens */
@media (max-width: 900px) {
    nav ul {
        flex-wrap: wrap; /* Allow links to wrap to multiple lines */
        justify-content: center; /* Center-align items */
        gap: 0.25rem; /* Reduce spacing between items */
    }
    nav ul li {
        margin: 0; /* Reset margins */
    }
    nav ul li a {
        font-size: 0.9rem; /* Slightly smaller text */
        padding: 0.25rem 0.5rem; /* Add padding inside links */
    }
}

@media (max-width: 700px) {
    nav ul {
        flex-wrap: wrap; /* Allow items to wrap naturally */
        justify-content: center; /* Center the items overall */
        padding: 0 1rem; /* Add padding around the menu */
    }
    nav ul li {
        margin: 0.2rem 0.2rem; /* Even spacing around each item */
    }
    nav ul li a {
        font-size: 0.85rem; /* Slightly smaller font for better fit */
        text-align: center; /* Center the text */
        padding: 0.2rem 0.2rem; /* Add some padding to the links */
    }
}


/* Content */
.content {
    padding: 1rem;
}

/* Footer */
footer {
    background-color: #f4b400;
    color: white;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
}

/* Map Container */
.map-container {
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
}
.map-container iframe {
    width: 100%;
    height: 500px;
    border: none;
    display: block;
    box-sizing: border-box;
}

/* Explore Section */
.explore-container {
    background: linear-gradient(to bottom, #fce8b2, #ffffff);
    background-image: url('yellow.jpg');
    background-repeat: repeat;
    padding: 2rem;
    text-align: center;
    margin: 0 0 1rem 0;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0d8c5;
}
.explore-container h1 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #222;
    margin-bottom: 1rem;
}
.explore-container h2 {
    font-size: 2rem;
    font-weight: normal;
    color: #555;
    margin-bottom: 0.5rem;
}

/* Map Buttons */
.map-buttons button {
    background-color: #f4b400;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    margin: 0.5rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.map-buttons button:hover {
    background-color: #e59500;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
}
.map-buttons button.active {
    background-color: #e57200;
    font-weight: bold;
    box-shadow: none;
    transform: translateY(2px);
}

/* Currency Converter */
.currency-converter {
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.currency-converter iframe {
    width: 100%;
    max-width: 700px;
    height: 250px;
    border: none;
    margin: 0;
    padding: 0;
}

/* Left-Justified List */
.left-list {
    list-style: disc;
    margin-left: 2rem;
    padding-left: 1rem;
    line-height: 1.6;
    color: #333;
}
.left-list li {
    margin-bottom: 0.5rem;
}

/* Home Page Specific Styles */
.home-page .map-container {
    /* Add any unique styles for the map on the home page here */
}

/* General App Section Styling */
.app-section {
    padding: 1rem;
}

/* Card Style for Each App */
.app-card {
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background-color: #ffffff; /* white color */
    border: 1px solid #e0d8c5; /* Subtle border color */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Title Styling */
.app-card h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem; /* Reduce space above the header */
    padding-top: 0; /* Ensure no extra padding */
}

/* Description Styling */
.app-card p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Download Links */
.app-links {
    display: flex;
    gap: 1rem;
    justify-content: center; /* Center the buttons horizontally */
    align-items: center;
}

/* Download Buttons */
.app-links a img {
    max-height: 50px;
    height: auto;
    width: auto;
    transition: transform 0.2s;
}

/* Hover Effect for Buttons */
.app-links a img:hover {
    transform: scale(1.1);
}


.etiquette-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.etiquette-list li {
    position: relative;
    margin-bottom: 1rem; /* Slightly more spacing between items */
    line-height: 1.8;
    color: #333;
}

/* Larger, well-placed circles */
.etiquette-list li::before {
    content: "";
    position: absolute;
    top: -5px; /* Slightly above the box */
    left: -50px; /* Moves further left to balance placement */
    width: 40px; /* Larger circle */
    height: 40px;
    border: 5px solid red; /* Thicker red outline */
    border-radius: 50%;
    background: none;
    z-index: 1; /* Keeps the circle above the box */
}

/* Shift the text boxes to the right */
.etiquette-list .app-card {
    position: relative;
    padding: 1rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-left: 2.5rem; /* Pushes the box further right */
    max-width: 85%; /* Slightly reduce width to fit well */
}