/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f8f8;
}

header {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 1em;
}

nav {
    display: flex;
    justify-content: space-around;
    background-color: #333;
}

nav a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
}

nav a:hover {
    background-color: #ddd;
    color: black;
}

main {
    margin: 15px;
}

section {
    margin-bottom: 20px;
}

img {
    max-width: 100%;
}


footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}


form {
    background-color: white;
    border: 1px solid #ccc;
    padding: 20px;
    margin: 20px;
    box-shadow: 2px 2px 12px #aaa;
    flex: 1;
}

form label, form input, form textarea {
    margin-bottom: 10px;
    width: calc(100% - 10px);
    padding: 5px;
}

form input[type="submit"] {
    width: auto;
}

.info {
    margin: 20px;
    flex: 1;
}

.info p {
    margin-bottom: 10px;
}

/* styles.css */
/* ... existing styles ... */

.catalog-img {
    width: 90%; /* Set the width to 90% of the container */
    margin: 5%; /* Add margin to create whitespace around the image */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); /* Add a shadow to give a lifted effect */
    transition: 0.3s; /* Add a smooth transition */
}

.product {
    width: calc(12.5% - 10px); /* Set a fixed width for the product container */
    margin: 5px; /* Add some margin around each product */
    border-radius: 3px; /* Round the corners of the product container */
    overflow: hidden; /* Ensure content follows the border-radius */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); /* Add a shadow to give a lifted effect */
    transition: 0.3s; /* Add a smooth transition */
    display: inline-block; /* Make the products appear in a row */
    vertical-align: top; /* Align the products to the top */
}

.product h2, .product p {
    margin: 3%; /* Add margin to the text */
    font-size: 0.9em; /* Slightly increase the font size */
}

.product form {
    margin: 3%; /* Add margin to the form */
    background: none; /* Remove the background */
    box-shadow: none; /* Remove the shadow */
}

.product form label, .product form input {
    font-size: 0.9em; /* Slightly increase the font size */
}

/* styles.css */
/* ... existing styles ... */

.order-section {
    margin: 3%; /* Add margin to the order section */
    background: none; /* Remove the background */
    box-shadow: none; /* Remove the shadow */
    text-align: center; /* Center the content */
}

.order-section label, .order-section input, .order-section button {
    font-size: 0.9em; /* Slightly increase the font size */
    display: inline-block; /* Display elements in a line */
    margin: 5px; /* Add some margin around each element */
}

.order-section input[type=number] {
    width: 50px; /* Set a fixed width for the input field */
    border: 1px solid #ccc; /* Add a border to the input field */
    padding: 5px; /* Add some padding to the input field */
    border-radius: 3px; /* Round the corners of the input field */
}

.order-section button {
    background-color: #4CAF50; /* Set the background color of the button */
    color: white; /* Set the text color of the button */
    padding: 6px 12px; /* Set the padding of the button */
    border: none; /* Remove the border of the button */
    border-radius: 3px; /* Round the corners of the button */
    cursor: pointer; /* Change the cursor on hover over the button */
}

.order-section button:hover {
    background-color: #45a049; /* Change the background color on hover */
}

/* styles.css */
/* ... existing styles ... */

/* Add styles for the index page */
.index-page {
    background: url('../resources/background.jpg') no-repeat center center fixed; 
    background-size: cover;
    height: 100vh;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.index-page h1, .index-page p {
    margin: 0;
}

.index-content {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent grey background */
    padding: 20px;
    border-radius: 10px;
    width: 80%;
}

.index-page nav a {
    background-color: transparent; /* Remove the green background */
    color: white;
    border: 1px solid white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin: 5px;
}

.index-page nav a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}


#index-header {
    background-color: transparent !important; /* Remove the green background from the header */
}

/* Override nav style for index page using ID */
#index-nav {
    background-color: transparent !important; /* Remove the grey background from the navbar */
}