/* Basic styles for the navbar */
.no {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    /* Full height of the viewport */
    background-color: #f7f7f7;
}

.no p {
    font-weight: bold;
    text-align: center;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: white;
    /* color: #333; */
}

/* Styles for the logo */
.logo {
    margin-right: auto;
    /* Logo aligned to the left */
}

.logonavbar {
    color: #0b0b0b;
    /* Text color */
    text-decoration: none;
    font-size: 20px;
}

/* Styles for the login buttons */
.loginbtn {
    display: flex;
    gap: 10px;
    /* Space between buttons */
    margin-left: 20px;
    /* Space from the nav-links */
    padding-top: 10px;
}

.log,
.log1 {
    margin-right: 10px;
    padding: 6px 12px;
    border: none;
    background-color: #007bff;
    /* Button color */
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
}

/* Change button color on hover */
.log:hover,
.log1:hover {
    background-color: #01f770;
}

/* Hamburger icon for mobile view */
.hamburger {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: #020202;
}

/* Styles for the navigation links */
.nav-links {
    background-color: white;
    color: white;
    list-style: none;
    display: flex;
    gap: 5px;
}

.nav-links a:hover {
    border-radius: 10px;
    background-color: rgb(243, 7, 7);
    color: white;
}

.nav-links a {
    color: black;
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid gray;
    border-radius: 10px;
    /* background-color: aquamarine; */
}

h6 {
    font-size: 10px;
}

.cartorder {
    cursor: pointer;
    text-align: center;
    justify-content: center;
    margin-right: 40px;
}

.cartorder:hover {
    background-color: transparent;
}

.cartorder h6,
img {
    margin-top: 0px;
}

/* Responsive styles for mobile */
@media (max-width: 768px) {
    .navbar {
        /* background-color: #a0b946de; */
        flex-direction: row;
        /* Ensure items are in a row */
        justify-content: space-between;
        /* Distribute space between items */
        padding: 10px;
    }

    .nav-links a:hover {
        border: none;
        background-color: none;

    }

    .loginbtn {
        display: flex;
        /* Show buttons */
        flex: 1;
        justify-content: center;
        /* Center the login buttons */
        margin-left: 70px;
    }

    .nav-links a:hover {
        border-radius: 10px;
        background-color: #333;
        color: white;
    }

    .log,
    .log1 {
        width: 65px;
        margin-right: 0px;
        padding: 0px 1px;
        border: none;
        background-color: #007bff;
        /* Button color */
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        border-radius: 5px;
        text-align: center;
    }

    .hamburger {
        display: block;
        /* Show hamburger icon */
        flex: 1;
        /* Align hamburger to the right */
        text-align: right;
        /* Align text (icon) to the right */
        /* margin-left: 2px; Push hamburger to the far right */
    }

    .nav-links {
        display: none;
        /* Hide nav links initially */
    }

    .nav-links a {
        color: white;
    }

    .nav-links.active {
        color: white;
        display: flex;
        /* Show nav links when hamburger is clicked */
        flex-direction: column;
        /* Display nav links in a column */
        position: absolute;
        top: 0px;
        /* Adjust based on your navbar height */
        right: 0;
        padding-top: 40px;
        background-color: #333;
        width: 40%;
    }

    .logonavbar {
        margin-right: 15px;
    }

    .nav-links {
        position: fixed;
        left: -250px;
        top: 0;
        width: 200px;
        height: 100%;
        /* background-color: #e23232; */
        flex-direction: column;
        transition: left 0.3s ease;
        z-index: 1000;
    }

    .hamburger {
        display: block;
    }

    .nav-links li {
        text-align: left;
        width: 100%;
    }

    .nav-links.active {
        left: 0;
    }

    .logo button {
        display: table-row;
        margin-left: 5px;
        display: inline-block;
        width: 50px;
        height: 25px;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
        border: 2px solid transparent;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;


    }

    .nav-links a:hover {
        border-radius: 10px;
        background-color: #333;
        color: white;
    }

    .nav-links a {
        margin-left: 10px;
        background-color: #333;
        color: white;
        padding: 0px;
        border: none;
    }
    .cartorder {
        margin-right: 0px;
        margin-left: 0px;
    }
}