* {font-family: 'Times New Roman', Times, serif;}
body {margin: 0; background-color: white; background-image: url(../images/background.jpg); background-repeat: no-repeat; background-size: 100% 100%; background-attachment: fixed; font-family: 'Times New Roman', Times, serif;}


/*Nav design*/
header { background-color: rgba(0, 0, 0, 0.3); width: 100vw; margin: auto; position: fixed; top: 0;}
header nav { display: flex; justify-content: space-between; flex-wrap: wrap;}
header nav ul { display: flex; padding: 0;}
header nav ul li { list-style: none; margin: 0px 40px;}
header nav ul li a {text-decoration: none; color: white; font-size: 25px;}
header nav ul li a:hover { color: darkgreen;}

/*Logo class*/
.logo {width: auto; height: 75px; margin: 10px 0px 0px 50px;}

/*Section contents*/
.uppermid {margin-top: 100px; display: flex; flex-direction: column; text-align: center;}
.leftart {background-color: rgba(0, 0, 0, 0.2); margin: auto; width: auto; height: 400px; padding: 5px;}
.rightart {margin: auto;}

/*2 color background*/
.upperhalf {height: 50vh; background-color: rgba(0, 0, 0, 0.2); display: flex; justify-content: center; margin-top: 10px;}
.lowerhalf {height: 50vh; background-color: rgba(0, 0, 0, 0.2); display: grid; grid-template-columns: 100px 1fr 1fr 50px;}

/*Footer design*/
footer {background-color: none; color: white; margin: 0; text-align: center; height: auto;}

footer p {
    margin: 10px 0;
}

/* Additional CSS for product section */
main {
    padding: 50px 20px;
    text-align: center;
}
.product-menu {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 20px;
    margin: 20px auto;
    max-width: 600px;
}
.product-menu ul {
    list-style: none;
    padding: 0;
}
.product-menu li {
    margin-bottom: 10px;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}