/* ============================= Responsive Design (Mobile & Tablet Adjustments) ================================ */

/* Small Screens (Tablets, 768px and below) */
@media (max-width: 768px) {
    .navbar-menu {
        display: flex;
        flex-direction: row;  /* Ensure it's in a row */
        justify-content: center; /* Space items evenly */
        align-items: center; /* Align vertically */
        gap: 25px; /* Adjust spacing between items */
        padding: 0;
        list-style: none; /* Remove default bullets */
    }
    .navbar-menu li {
        flex: 1; /* Each item takes equal space */
        text-align: center;
       /* border: 1px solid red; */
    }

    .hero-title {
        font-size: 2rem; /* Reduce hero text size */
    }

    .event-card {
        width: 90%; /* Make event cards full-width */
    }

    .contact-container {
        flex-direction: column;
        text-align: center;
    }
}

/* ================ Extra Small Screens (Phones, 480px and below) ================*/
@media (max-width: 480px) {

    .hero {
        height: 150px; /* Reduce hero height */
    }

    .hero-title {
        font-size: 1.8rem;
        padding: 10px 15px;
    }

    .welcome {
        width: 95%;
        padding: 20px;
    }

    .rules-container {
        width: 90%;
    }
}
@media (max-width: 768px) {
    .rules-container {
        width: 90%;
    }

    .rules-section h2 {
        font-size: 1.6rem;
    }

    .rules-section p, .rules-section ul li {
        font-size: 1rem;
    }

    .contact-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .contact-aside {
        border-left: none;
        border-top: 2px solid #ccc;
        padding-top: 20px;
    }
}
@media (max-width: 900px) {
    .welcome-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .welcome-image img {
        max-width: 150px;
    }
}