.elementor-9 .elementor-element.elementor-element-d901cae{--display:flex;}.elementor-9 .elementor-element.elementor-element-ff5d568{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9 .elementor-element.elementor-element-ca6ac7a{--display:flex;}/* Start custom CSS for html, class: .elementor-element-bdf5316 *//* Reset */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Navbar styles */
.navbar {
    background-color: #A00000; /* Red background color */
    color: white;
    padding: 10px 20px;
}

.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

/* Logo styles (on the left) */
.logo {
    flex: 1; /* Pushes other elements to the right */
}

.logo img {
    height: 30px; /* Adjust size as needed */
}

/* Hamburger menu button */
.menu-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.menu-icon {
    font-size: 24px;
}

/* Auth buttons container */
.auth-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Login and Join buttons */
.login-btn, .join-btn {
    text-decoration: none;
    font-weight: bold;
    color: white;
    padding: 5px 10px;
}

.join-btn {
    background-color: #FFD700; /* Yellow button */
    color: #000;
    border-radius: 3px;
}

/* Mobile view adjustments */
@media (max-width: 768px) {
    .navbar-container {
        justify-content: space-between;
    }

    .logo img {
        height: 25px; /* Slightly smaller logo for mobile */
    }

    .auth-buttons {
        gap: 5px;
    }

    .login-btn, .join-btn {
        font-size: 14px; /* Smaller font for buttons */
        padding: 5px 8px;
    }
}/* End custom CSS */