footer.maintenance_page {
    font-family: 'Arial', sans-serif;
    background-color: #f2f2f2;
    text-align: center;
    color: #333;
}
.maintenance_container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 18vh auto 10vh auto;
}
.contact-info {
    margin-top: 20px;
    font-size: 16px;
}
.contact-info a {
    text-decoration: none;
    color: #de2f2f;
    font-weight: bold;
}
.contact-info a:hover {
    text-decoration: underline;
}
.elf-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

body {
    display: block;
    margin: 0;
}

.background {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100vh;
    background-color: #7393B3;
    position: fixed;
    z-index: -1;
}

.main_body {
    margin: 0px;
}

.main_page_banner {
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 14vh;
    top: 0px;
    left: 0px;
    background: linear-gradient(rgba(248, 250, 248, 0.5), rgba(237, 237, 237, 0.5));
    -webkit-backdrop-filter: blur(10px);
    text-align: center;
    position: fixed;
    transition: .5s ease-in-out;
}

.main_page_banner.small {
    height: 6%;
    transition: .5s ease-in-out;
}

.banner-gradient {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20%; /* Height of the gradient */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none; /* Allows clicks to pass through */
    z-index: 10; /* Ensure it is above the content but below the header */
}

.logo {
    height: 100%;
    width: auto;
    transition: opacity 0.5s ease-in-out;
    left: 2vw;
    position: absolute;
}

.main_page_banner.small .big_logo {
    opacity: 0;
}

.big_logo {
    opacity: 1;
    cursor: pointer;
}

.small_logo {
    opacity: 0;
    cursor: pointer;
}

.main_page_banner.small .small_logo {
    opacity: 1;    
}

.main_page_banner.small .logo_text {
    opacity: 0;
}

.hamburger_container {
    height: 5vh;
    width: calc(5vh + 1vw);
    position: fixed;
    right: 3%;
    top: 4.2vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: height 0.5s ease, width 0.5s ease, right 0.5s ease, top 0.5s ease; /* Add transition properties */
}

.main_page_banner.small .hamburger_container {
    height: 3vh;
    width: calc(3vh + 1vw);
    right: 1.5%;
    top: 1.5vh;
}

.hamburger_icon {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.hamburger_icon span {
    display: block;
    position: absolute;
    height: 20%; /* Adjust this value as needed */
    width: 100%;
    background: black;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.hamburger_icon span:nth-child(1) {
  top: 0%;
}

.hamburger_icon span:nth-child(2) {
  top: 40%; /* Adjust this value as needed */
}

.hamburger_icon span:nth-child(3) {
  top: 80%; /* Adjust this value as needed */
}

.hamburger_icon.open span:nth-child(1) {
  top: 40%;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.hamburger_icon.open span:nth-child(2) {
  opacity: 0;
  left: -100%;
}

.hamburger_icon.open span:nth-child(3) {
  top: 40%;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin: 0 60px;
    z-index: 2;
}

@media (max-width: 1400px) {
    .nav-links {
        display: none;
    }
}

.nav-links a {
    font-size: 25px;
    font-family: Arial,sans-serif;
    text-decoration: none;
    color: black;
    position: relative;
    display: inline-block; /* Ensure padding and width are respected */
    padding: 0 20px;
}

.indicator {
    position: absolute;
    bottom: calc(50% - 20px); /* Align the indicator with the bottom of the nav item */
    height: 40px;
    background-color: red;
    border-radius: 20px;
    transition: transform 0.3s ease, width 0.3s ease;
    z-index: 1; /* Ensure the indicator is behind the text */
    left: 0; /* Align with the left edge of the nav item */
    width: 100%; /* Default width of the indicator */
}

.side_menu {
    position: fixed;
    top: 0;
    z-index: 10;
    right: -500px; /* Initially hidden */
    width: 500px;
    height: 100%;
    background: white;
    transition: right 0.5s;
    padding-top: 15vh; /* Adjust to match banner height */
}

.side_menu.open {
    transition: right 0.5s;
    right: 0; /* Slide in */
}

.option {
    list-style-type: none;
    margin-top: 30px;
    margin-left: 50px;
}

.side_menu a {
    text-decoration: none;
    color: black;
    font-family: Arial,sans-serif;
    font-size: 30px;
}

@media (max-width: 500px) {
    .side_menu {
        width: 380px;
    }
    
    .side_menu ul {
        margin-left: 0;
        padding-left: 0;
    }   
}

.greeting {
    text-decoration: none;
    color: black;
    font-family: Arial,sans-serif;
    font-size: 40px;
    margin-left: 80px;
    margin-top: 50px;
}

.overview {
    display: none;
}

.login {
    display: none;
}

.create_account {
    display: none;
}

.first_section {
    display: flex;
    width: 100%;
    flex-wrap: wrap; /* Allow items to wrap */
    height: auto; /* Let height adjust based on content */
}

.mainbackground {
    top: 0px;
    left: 0px;
    width: 100%;
    margin-left: 0px;
}

.first_section_band {
    margin-top: 14vh;
    background-color: #F9FAF9;
    width: 50%;
    right: 0px;
    height: 500px;
    text-align: center;
}

.welcome_side_image {
    margin-top: 14vh;
    width: 50%; /* Adjusts to 100% in media query */
    aspect-ratio: 1 / 1; /* Keeps the image square */
    object-fit: cover;
    height: 500px; /* Optional, adjust based on content needs */
}

.about_us_title {
    color: black;
    font-size: 7vh;
    text-align: center;
    font-family: Arial,sans-serif;
    font-weight: bold;
    display: block;
    margin-top: 2vh;
}

.about_us {
    color: black;
    font-size: 2.5vh;
    text-align: center;
    font-family: Arial,sans-serif;
    margin-top: 2vh;
    width: 80%;
    display: block;
    margin-left: 10%;
}

.about_us_social_link {
    color: black;
}

.reviews_link {
    color: black;
}

.email_link {
    color: black;
}

.about_us_button {
    font-size: 2.5vh;
    background: linear-gradient(135deg, #1F5D38, #2F7D4C);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 20px;
    max-width: 70%;
    margin-bottom: 20px;
}

.about_us_button:hover {
    box-shadow: 0 4px 8px rgba(197, 157, 95, 0.5);
}

/* Media query for smaller screens */
@media (max-width: 700px) {
    .first_section {
        flex-direction: column; /* Stack items vertically */
    }
    
    .first_section_band, .welcome_side_image {
        width: 100%; /* Full width for smaller screens */
        height: auto; /* Adjust height to fit content */
    }
    
    .first_section_band {
        margin-top: 0;
    }
}

.second_section {
    text-align: center;
    font-family: Arial,sans-serif;
}

.second_section_band {
    background-color: #f0f7f0;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.delivery_dates_title, .time_slots_title {
    color: black;
    font-size: 4vh;
    text-align: center;
    font-family: Arial,sans-serif;
    font-weight: bold;
    display: block;
    margin-top: 2vh;
}

.delivery_dates, .time_slots {
    color: black;
    font-size: 2.5vh;
    text-align: center;
    font-family: Arial,sans-serif;
    margin-top: 2vh;
    width: 80%;
    display: block;
    list-style-position: inside;
    padding-left: 0;
    margin-left: 10%;
}

.third_section {
     display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Center the items horizontally */
    max-width: 1200px; /* Set a maximum width for the container */
    margin: 0 auto; /* Center the container on the screen */
    padding: 20px; /* Optional: add some padding around the container */
}

.product {
    flex: 1 1 calc(20% - 30px); /* Adjust flex for responsiveness */
    max-width: 250px; /* Set maximum width for individual products */
    box-sizing: border-box; /* Include padding and border in width/height */
    background-color: white;
    color: black;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 400px; /* Fixed height */
    padding: 30px; /* Padding around the content */
    text-align: center; /* Center text */
    border-radius: 30px; /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 15px; /* Margin between products */
}

@media (max-width: 1200px) {
    .product {
        flex: 1 1 calc(33.33% - 30px); /* 3 products per row */
    }
}

@media (max-width: 800px) {
    .product {
        flex: 1 1 calc(50% - 30px); /* 2 products per row */
    }
}

@media (max-width: 500px) {
    .product {
        flex: 1 1 calc(100% - 30px); /* 1 product per row */
    }
}

.product:hover {
    background: linear-gradient(to bottom right, rgba(31, 93, 56, 0.50), rgba(197, 157, 95, 0.5));
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Darker box shadow on hover */
}

/* Adjusting the image container */
.product_image_container {
    width: 100%; /* Full width of the product */
    height: 200px; /* Fixed height for image */
    overflow: hidden; /* Prevent overflow */
    display: flex; /* Flex layout for centering */
    justify-content: center; /* Center image horizontally */
    align-items: center; /* Center image vertically */
    margin: 0 auto; /* Center container */
}

.product_image {
    max-width: 100%;  
    max-height: 100%; 
    object-fit: contain; 
    display: block;
}

.product_title {
    font-family: Arial,sans-serif;
    font-weight: bold;
    font-size: 30px;
}

.product_price {
    margin-top: 20px;
    font-size: 20px;
    font-family: Arial,sans-serif;
}

.price_box {
    background-color: white;
    padding: 10px;
    width: 20%;
    left: 50%;
    transform: translate(-50%);
    position: relative;
    border-radius: 10px;
}

.fourth_section {
    display: flex;
    width: 100%;
    flex-wrap: wrap; /* Allow items to wrap */
    height: auto; /* Let height adjust based on content */
}

.fourth_section_band {
    background-color: #F9FAF9;
    width: 50%;
    right: 0px;
    height: 500px;
    text-align: center;
}

.function_side_image {
    width: 50%; /* Adjusts to 100% in media query */
    aspect-ratio: 1 / 1; /* Keeps the image square */
    object-fit: cover;
    height: 500px; /* Optional, adjust based on content needs */
}

.function_title {
    color: black;
    font-size: 7vh;
    text-align: center;
    font-family: Arial,sans-serif;
    font-weight: bold;
    display: block;
    margin-top: 2vh;
}

.function {
    color: black;
    font-size: 2.5vh;
    text-align: center;
    font-family: Arial,sans-serif;
    margin-top: 2vh;
    width: 80%;
    display: block;
    margin-left: 10%;
}

.function_button {
    font-size: 2.5vh;
    background: linear-gradient(135deg, #1F5D38, #2F7D4C);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 20px;
    max-width: 70%;
    margin-bottom: 20px;
}

.function_button:hover {
    box-shadow: 0 4px 8px rgba(197, 157, 95, 0.5);
}

/* Media query for smaller screens */
@media (max-width: 700px) {
    .fourth_section {
        flex-direction: column; /* Stack items vertically */
    }
    
    .fourth_section_band, .function_side_image {
        width: 100%; /* Full width for smaller screens */
        height: auto; /* Adjust height to fit content */
    }
}

.fifth_section {
    display: flex;
    width: 100%;
    flex-wrap: wrap; /* Allow items to wrap */
    height: auto; /* Let height adjust based on content */
}

.fifth_section_band {
    background-color: #F9FAF9;
    width: 50%;
    right: 0px;
    height: 500px;
    text-align: center;
}

.eco_side_image {
    width: 50%; /* Adjusts to 100% in media query */
    aspect-ratio: 1 / 1; /* Keeps the image square */
    object-fit: cover;
    height: 500px; /* Optional, adjust based on content needs */
    object-position: top;
}

.eco_title {
    color: black;
    font-size: 7vh;
    text-align: center;
    font-family: Arial,sans-serif;
    font-weight: bold;
    display: block;
    margin-top: 2vh;
}

.eco {
    color: black;
    font-size: 2.5vh;
    text-align: center;
    font-family: Arial,sans-serif;
    margin-top: 2vh;
    width: 80%;
    display: block;
    margin-left: 10%;
}

.eco_button {
    font-size: 2.5vh;
    background: linear-gradient(135deg, #1F5D38, #2F7D4C);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 20px;
    max-width: 70%;
    margin-bottom: 20px;
}

.eco_button:hover {
    box-shadow: 0 4px 8px rgba(197, 157, 95, 0.5);
}

/* Media query for smaller screens */
@media (max-width: 700px) {
    .fifth_section {
        flex-direction: column; /* Stack items vertically */
    }
    
    .fifth_section_band, .eco_side_image {
        width: 100%; /* Full width for smaller screens */
        height: auto; /* Adjust height to fit content */
    }
}

/* web footer */

.bottom_banner {
    font-family: Arial, Sans-serif;
    background-color: #1F5D38; /* Light background */
    padding: 20px;
    display: flex; /* Use flexbox for layout */
    align-items: flex-start; /* Align items to the top */
    flex-wrap: wrap; /* Allow wrapping of flex items */
}

.logo-container {
    text-align: center; /* Center logo and name */
    color: white;
    margin: 30px 5% 0 5%;
}

.footer_big_logo {
    max-width: 150px; /* Set a max width for the logo */
}

.info-container {
    display: flex; /* Use flexbox for the info section */
    flex-direction: row; /* Arrange items in a row */
    justify-content: space-between; /* Space out sections */
    flex-grow: 1; /* Allow the info section to grow and fill the space */
    color: white;
    margin-bottom: 3%;
}

.contact-text, .resources, .social-media {
    margin: 10px 20px; /* Space between sections */
    flex: 1; /* Each section will take up equal space */
    text-align: left; /* Align text to the left */
    color: white;
}

.footer_title {
    font-size: 30px; /* Set the title font size */
    color: white;
    margin-bottom: 30px; /* Space below the title */
}

.footer_link {
    font-size: 20px;
    color: white;
    display: block; /* Make links block-level for better spacing */
    margin: 25px 0 0 20px; /* Space between links */
}

.footer_link:hover {
    color: #d04040;
}

/* Media queries for smaller screens */
@media (max-width: 768px) {
    .bottom_banner {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center-align the items */
    }
    
    .logo-container {
        margin: 0 0 0 0;
    }

    .info-container {
        flex-direction: column; /* Stack columns vertically */
        text-align: center; /* Center text for smaller screens */
    }

    .contact-text, .resources, .social-media {
        flex: none; /* Prevent flex grow */
        width: 100%; /* Ensure each section takes full width */
        margin: 10px 0; /* Add margin between stacked sections */
        text-align: center; /* Center-align text */
    }
    
    .footer_link {
        margin: 25px 0 0 0;
    }
}

/* login page */ 

.background_image_1 {
    position: absolute;
    top: 14vh;
    left: 0;
    width: 100%;
    max-height: 800px;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire container */
    z-index: -1; /* Places the image behind the login box */
}

.background_image_2 {
    position: fixed;
    top: 14vh;
    left: 0;
    width: 100%;
    max-height: 800px;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire container */
    z-index: -1; /* Places the image behind the login box */
    display: none;
}

.login_box {
    display: block;
    margin-left: 10%;
    margin-top: 18vh;
    margin-bottom: 5vh;
    width: 30%;
    border-radius: 50px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
    justify-content: center;
    background-color: white;
    z-index: 1;
    padding: 30px;
}

.login_title {
    color: #000000;
    font-size: 50px;
    text-align: center;
    font-family: Arial,sans-serif;
    font-weight: bold;
    display: block;
    top: 30px;
}

.email {
    width: 80%;
    padding: 12px 20px;
    margin: 8px 0;
    border-radius: 4px;
    font-size: 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
}

.email_label {
    font-size: 20px;
    font-family: Arial,sans-serif;
}

.password {
    width: 80%;
    padding: 12px 20px;
    margin: 8px 0;
    border-radius: 4px;
    font-size: 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
}

.password_label {
    font-size: 20px;
    font-family: Arial,sans-serif;
}

.login_button {
    font-size: 20px;
    background-color: rgb(0, 146, 0);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 20px;
}

.error_message {
    color: red;
    font-family: Arial, sans-serif;
    display: none;
    font-size: 20px;
    margin-bottom: 20px;
}

.signuprbutton {
    font-size: 20px;
    font-family: Arial,sans-serif;
    cursor: pointer;
}

.passwordreset {
    font-size: 20px;
    font-family: Arial,sans-serif;
    cursor: pointer;
}

@media (max-width: 900px) {
    .login_box {
        display: block;
        margin-top: 18vh;
        margin-left: 50%;
        margin-bottom: 8%;
        width: 80%;
        transform: translate(-50%);
        border-radius: 50px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        text-align: center;
        justify-content: center;
        background-color: white;
        z-index: 1;
        padding: 30px;
    }
    
    .background_image_1 {
        display: none;
    }

    .background_image_2 {
        display: block;
    }

}

/* signup page */ 

.background_signup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire container */
    z-index: -1; /* Places the image behind the login box */
}

.signup_box {
    display: block;
    margin-left: 50%;
    transform: translate(-50%);
    margin-top: 18vh;
    width: 50%;
    border-radius: 50px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
    background-color: white;
    padding: 30px;
    margin-bottom: 100px;
    z-index: 1;
}

.signup_title {
    color: #000000;
    font-size: 50px;
    text-align: center;
    font-family: Arial,sans-serif;
    font-weight: bold;
    display: block;
    top: 30px;
    z-index: 1;
}

.signup_email_label {
    font-size: 20px;
    font-family: Arial,sans-serif;
    z-index: 1;
}

.signup_email {
    width: 60%;
    padding: 12px 20px;
    margin: 8px 0;
    border-radius: 4px;
    font-size: 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    top: 200px;
    left: 50px;
    z-index: 1;
}

.signup_required_label {
    font-size: 20px;
    font-family: Arial, sans-serif;
    margin-bottom: 20px;
    z-index: 1;
}

.signup_phone_number_label {
    font-size: 20px;
    font-family: Arial,sans-serif;
    z-index: 1;
}

.signup_phone_number {
    width: 60%;
    padding: 12px 20px;
    margin: 8px 0;
    border-radius: 4px;
    font-size: 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    top: 200px;
    left: 50px;
    z-index: 1;
}

.signup_password_label {
    font-size: 20px;
    font-family: Arial,sans-serif;
    z-index: 1;
}

.signup_password {
    width: 60%;
    padding: 12px 20px;
    margin: 8px 0;
    border-radius: 4px;
    font-size: 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    top: 200px;
    left: 50px;
    z-index: 1;
}

.password_strength_container {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.password_strength_indicator {
    height: 5px;
    width: 50%;
    border-radius: 5px;
    background-color: #ddd;
    z-index: 1;
}

.password_strength_label {
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px;
    z-index: 1;
}

.password_requirements {
    list-style-type: disc;
    padding-left: 20px;
    z-index: 1;
}

.password_requirements li {
    font-family: Arial, Helvetica, sans-serif;
    color: red;
    display: block;
    margin-bottom: 5px;
    z-index: 1;
}

.strength_bar {
    height: 5px;
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
    z-index: 1;
}

.strength_bar.password_weak {
    width: 33%;
    background-color: red;
    z-index: 1;
}

.strength_bar.password_intermediate {
    width: 67%;
    background-color: yellow;
    z-index: 1;
}

.strength_bar.password_strong {
    width: 100%; 
    background-color: green;  
    border-radius: 5px;
    z-index: 1;
}

.signup_confirmpassword_label {
    font-size: 20px;
    font-family: Arial,sans-serif;
    z-index: 1;
}

.signup_confirmpassword {
    width: 60%;
    padding: 12px 20px;
    margin: 8px 0;
    border-radius: 4px;
    font-size: 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    top: 200px;
    left: 50px;
    z-index: 1;
}

.signup_fullname_label {
    font-size: 20px;
    font-family: Arial,sans-serif;
    z-index: 1;
}

.signup_fullname {
    width: 60%;
    padding: 12px 20px;
    margin: 8px 0;
    border-radius: 4px;
    font-size: 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    top: 200px;
    left: 50px;
    z-index: 1;
}

.signup_address_label {
    font-size: 20px;
    font-family: Arial,sans-serif;
    z-index: 1;
}

.signup_address {
    width: 60%;
    padding: 12px 20px;
    margin: 8px 0;
    border-radius: 4px;
    font-size: 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    top: 200px;
    left: 50px;
    z-index: 1;
}

.signup_postcode_label {
    font-size: 20px;
    font-family: Arial,sans-serif;
    z-index: 1;
}

.signup_postcode {
    width: 60%;
    padding: 12px 20px;
    margin: 8px 0;
    border-radius: 4px;
    font-size: 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    top: 200px;
    left: 50px;
    z-index: 1;
}

.terms_checkbox_label {
    font-size: 20px;
    font-family: Arial,sans-serif;
    z-index: 1;
}

.signup_button {
    font-size: 20px;
    background-color: rgb(0, 146, 0);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 20px;
    z-index: 1;
}

.loginrbutton {
    font-size: 20px;
    font-family: Arial,sans-serif;
    cursor: pointer;
    z-index: 1;
}

@media (max-width: 900px) {
    .signup_box {
        display: block;
        margin-left: 50%;
        transform: translate(-50%);
        margin-top: 18vh;
        width: 80%;
        border-radius: 50px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        text-align: center;
        background-color: white;
        padding: 30px;
        margin-bottom: 100px;
        z-index: 1;
    }
    
    .signup_email, .signup_password, .signup_confirmpassword, .signup_phone_number, .signup_address, .signup_postcode, .signup_fullname {
        width: 80%;
    }
}

/* otp form */

.background_otp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire container */
    z-index: -1; /* Places the image behind the login box */
}

.otp_box {
    display: block;
    margin-left: 50%;
    transform: translate(-50%);
    margin-top: 25vh;
    margin-bottom: 10vh;
    width: 30%;
    border-radius: 50px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    background-color: white;
    z-index: 1;
    padding: 30px;
}

@media (max-width: 1100px) {
    .otp_box {
        width: 80%;
    }
}

.button-container {
    display: flex;
    flex-direction: column; /* Stack the buttons vertically */
    align-items: center; /* Center the buttons horizontally */
}

.verify-button {
    background-color: green; /* Green background */
    color: white; /* White text */
    padding: 15px 30px; /* Make the button bigger */
    font-size: 18px; /* Increase text size */
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
}

.resend-button {
    margin-top: 10px; /* Space between the buttons */
    background-color: grey; /* Default color for resend */
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.time_out {
    margin-top: 20px;
}

/* admin signup */

.signup_name_label {
    font-size: 20px;
    font-family: Arial,sans-serif;
}

.signup_name {
    width: 60%;
    padding: 12px 20px;
    margin: 8px 0;
    border-radius: 4px;
    font-size: 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    top: 200px;
    left: 50px;
}

.signup_username_label {
    font-size: 20px;
    font-family: Arial,sans-serif;
}

.signup_username {
    width: 60%;
    padding: 12px 20px;
    margin: 8px 0;
    border-radius: 4px;
    font-size: 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    top: 200px;
    left: 50px;
}

/* basket page */
.basket_page {
    font-family: Arial, sans-serif;
    display: flex; /* Flexbox layout */
    margin: 0;
    min-height: 45vh;
    padding: 20px 20px 15% 20px;
    background-color: #f8f8f8;
}

.basket-contents {
    flex: 1; /* Allow it to grow */
    margin-top: 17vh; /* Adjust as needed */
    display: flex; /* Enable flex layout for contents */
}

/* Make basket items take available space */
#basket-items {
    flex: 1; /* Grow to fill available space */
    margin-right: 20px; /* Space between items and order summary */
    max-height: 400px; /* Prevent overflow */
    overflow-y: auto; /* Scroll if items exceed height */
}

#basket-items li {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.item-image {
    width: 60px; 
    height: 60px; 
    border-radius: 10px; 
    margin-right: 10px; 
}

#order-summary {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%; /* Make it full width */
    max-width: 400px; /* Optional: Limit width */
}

#order-summary h2 {
    margin-top: 0;
}

.delete-icon {
    cursor: pointer;
    margin-left: 10px; 
}

.quantity-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; 
    height: 30px; 
    background-color: #d3d3d3; 
    color: #000; 
    border-radius: 50%; 
    margin: 0 10px; 
    font-weight: bold; 
}

.right-section {
    display: flex;
    flex-direction: column; 
    align-items: flex-end; 
    margin-left: auto; 
}

.item-price {
    font-weight: bold; 
    margin-bottom: 5px;
}

.checkout-button {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.checkout_back_button,
.checkout_next_button {
    margin-top: 20px;
    padding: 15px 30px; /* Increased padding for larger buttons */
    font-size: 18px; /* Font size for better readability */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Change cursor on hover */
    transition: background-color 0.3s, transform 0.2s; /* Smooth transitions */
}

.checkout_back_button {
    background-color: #f44336; /* Red color for 'Back' button */
    color: white; /* White text color */
}

.checkout_next_button {
    background-color: #4CAF50; /* Green color for 'Next' button */
    color: white; /* White text color */
}

.checkout_next_button:disabled {
    background-color: #ccc; /* Grey color for disabled state */
    cursor: not-allowed;
}

.checkout_back_button:hover,
.checkout_next_button:not(:disabled):hover {
    background-color: #d32f2f; /* Darker red on hover for 'Back' */
}

.checkout_next_button:not(:disabled):hover {
    background-color: #45a049; /* Darker green on hover for 'Next' */
}

.checkout_back_button:active,
.checkout_next_button:not(:disabled):active {
    transform: scale(0.95); /* Slightly shrink on click */
}

#dpm-annotation {
    display: none;
}

@media (max-width: 1250px) {
    .basket-contents {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        flex: 1; /* Allow it to grow */
        margin-top: 14vh; /* Adjust as needed */
    }
    
    /* Make basket items take available space */
    #basket-items {
        flex: 1; /* Grow to fill available space */
        margin-right: 0; /* Space between items and order summary */
        padding: 0;
        max-height: 400px; /* Prevent overflow */
        overflow-y: auto; /* Scroll if items exceed height */
    }
    
    #order-summary {
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        width: 250px; /* Fixed width for order summary */
        height: auto;
    }
}
 
/*product page */

.product-item {
    margin-top: 10%;
    font-family: Arial, Sans-serif;
    display: flex;
    flex-wrap: wrap; /* Wrap on smaller screens */
    justify-content: space-between;
    max-width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.product-image-container {
  flex: 1;
  margin-top: 14vh;
  width: 50%; /* Image container takes up 50% of the page */
  box-sizing: border-box;
  display: flex;
  justify-content: center; /* Centers the image horizontally */
  align-items: center;     /* Centers the image vertically (if necessary) */
}

/* Style for the image */
.product-item-image {
  width: 60%; /* The image takes up 80% of its container's width */
  height: auto;
  border-radius: 15px; /* Rounded edges */
  object-fit: cover;   /* Ensures the image scales without stretching */
  margin: 0 auto;      /* Horizontally centers the image */
}

/* Right side: Product info */
.product-item-info {
    flex: 1;
    margin-top: 14vh;
    width: 50%; /* Product info takes up 50% of the page */
    padding-left: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: flex-start;
}

/* Styling for the product name */
.product-item-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

/* Styling for the price */
.product-item-price {
  font-size: 20px;
  color: #555;
  margin-bottom: 20px;
}

/* Styling for the description */
.product-item-description {
  font-size: 16px;
  color: #777;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Styling for the 'Add to Basket' button */
.add-to-basket-button {
    margin: 20px auto;  
    background-color: #28a745;  /* Green background */
    color: white;               /* White text */
    padding: 10px 20px;         /* Padding for the button */
    border-radius: 30px;        /* Curved corners */
    font-size: 16px;            /* Font size */
    border: none;               /* No border */
    cursor: pointer;            /* Pointer cursor on hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
    text-transform: uppercase;  /* Uppercase text */
    display: inline-block;      /* Keep it inline for better layout control */
    width: 60%;                /* Let the width adjust based on the content */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
}

/* Hover effect */
.add-to-basket-button:hover {
    background-color: #218838;  /* Darker green on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}

/* Hover effect */
.add-to-basket-button.disabled {
    background-color: #808080;  /* Darker green on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}

.out-of-stock-message {
    color: red;
    margin-left: 50%;
    transform: translate(-50%);
    margin-top: 10px;
    font-size: 20px;
}

/* Responsive Design: On smaller screens, stack the image and product info vertically */
@media (max-width: 768px) {
  .product-item {
    flex-direction: column;
  }
  
  .product-image-container, .product-item-info {
    width: 100%;
    padding: 0;
  }
  
  .product-item-info {
      margin-top: 2vh;
  }
  
  .image-container {
    margin-bottom: 20px;
  }
  
  .delivery_slot_form {
      font-size: 20px;
  }
  .delivery_slot_title {
      font-size: 25px;
  }
  .checkout_payment_form {
      font-size: 20px;
  }
  .delivery_address_form {
      font-size: 20px;
  }
  .delivery_address_title {
      font-size: 25px;
  }
}

.reviews {
    font-family: Arial, Sans-serif;
    margin-top: 30px; /* Space above the reviews section */
    padding: 20px;    /* Padding inside the reviews section */
    border-top: 1px solid #ccc; /* Light border */
}

/* order overview */

.order_overview_page {
    margin-top: 18vh;
}

.overview-search {
    width: 100%;
    display: flex; /* Use flexbox for layout */
    justify-content: flex-end; /* Align contents to the right */
    align-items: center; /* Center vertically */
    margin-top: 10px; /* Space from the top if needed */
    padding-right: 20px; /* Optional: some padding to the right */
}

.order-search-input {
    border-radius: 15px;
    border: 2px solid #ccc;
    font-family: Arial, sans-serif;
    width: 70%; /* You can adjust this width */
    height: 20px; /* Adjust height for better visibility */
    margin-right: 10px;
}

.order-search-button {
    margin-right: 2vw;
}

.order-overview-data {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.overview-order {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
    padding: 10px;
    width: 80%;
}

.overview-order-details {
    font-weight: bold;
}

.overview-item {
    margin-top: 5px;
    margin-left: 20px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #ccc;
}

.overview-filters {
    margin-top: 5%;
    margin-left: 2vw;
    margin-right: 2vw;
    width: 20vw; /* Increased width */
    border-radius: 5px;
    border: 2px solid #ccc;
    padding: 20px; /* Reduced padding */
    font-family: Arial, sans-serif;
}

.overview-filters label {
    display: block; /* Makes each label a block element */
    margin-bottom: 10px; /* Adds some space between items */
}

.overview_information_boxes {
    display: flex;             
    flex-direction: column;    
    gap: 15px;                 
}

.delivery-key {
    margin-top: 5%;
    margin-left: 2vw;
    width: 20vw; /* Increased width */
    border-radius: 5px;
    border: 2px solid #ccc;
    padding: 20px; /* Reduced padding */
    font-family: Arial, sans-serif;
}

.key-item {
    display: flex; 
    align-items: center; 
    margin-bottom: 5px; 
}

.color-box {
    width: 20px; 
    height: 20px; 
    margin-right: 10px; 
    border-radius: 3px; 
}

.delivery-status-container {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    color: black;
    text-align: center;
    width: 98%;
}

.filtered-orders-count {
    font-size: 20px;
    font-family: Arial, sans-serif;
    margin-left: 2vw;
    font-weight: bold;
}

.delivery-status-container .status-delivered {
    background-color: #c3e6cb; /* Soft Light Green */
    padding: 5px; /* Add some padding */
    border-radius: 3px; /* Optional: round corners */
    width: 100%;
}

.delivery-status-container .status-pending {
    background-color: #ffeeba; /* Light Soft Yellow */
    padding: 5px; /* Add some padding */
    border-radius: 3px; /* Optional: round corners */
    width: 100%;
}

.delivery-status-container .status-overdue {
    background-color: #f5c6cb; /* Light Soft Red/Pink */
    padding: 5px; /* Add some padding */
    border-radius: 3px; /* Optional: round corners */
    width: 100%;
}

.delivery-date {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    color: white;
    text-align: center;
    width: 98%;
}

.user-id-box {
    background-color: #d1ecf1; /* Light blue for user ID */
    color: #0c5460; /* Darker blue for text */
    border: 1px solid #bee5eb; /* Light blue border */
    padding: 5px;
    border-radius: 5px;
    margin-top: 10px;
}

.company-id-box {
    background-color: #fff3cd; /* Light yellow for company ID */
    color: #856404; /* Darker yellow for text */
    border: 1px solid #ffeeba; /* Light yellow border */
    padding: 5px;
    border-radius: 5px;
    margin-top: 10px;
}

/* Different colors for specific dates */
.date-2025-11-29 { background-color: #007bff; } /* Bright Blue */
.date-2025-11-30 { background-color: #ff5733; } /* Coral Red */
/* .date-2025-11-30 { background-color: #ffc300; } Golden Yellow */
/* .date-2025-12-01 { background-color: #ff33b5; } Hot Pink */
.date-2025-12-06 { background-color: #4caf50; } /* Medium Green */
.date-2025-12-07 { background-color: #00bcd4; } /* Cyan */
.date-2025-12-13 { background-color: #673ab7; } /* Deep Purple */
.date-2025-12-14 { background-color: #ff9800; } /* Orange */
.old-date {
  background-color: #999; /* grey or your chosen distinct colour */
}

.customer-business { background-color: #fff3cd; }
.customer-user { background-color: #d1ecf1; }

.delivery-status-pending { background-color: #ffeeba; }
.delivery-status-delivered { background-color: #c3e6cb; }
.delivery-status-overdue { background-color: #f5c6cb; }

.order_status_label,
.delivery_date_label,
.delivery_time_label,
.product_label,
.customer_id_label,
.payment_status_label {
    font-weight: bold;
}

.delivery_instructions_container {
    margin-top: 20px;
}

.orders-container {
    width: 80%; /* Adjusted width */
    margin: 20px auto; /* Centered */
    font-family: Arial, sans-serif;
}

.marketing_emails_box {
    margin-top: 5%;
    margin-left: 2vw;
    width: 20vw; /* Increased width */
    border-radius: 5px;
    border: 2px solid #ccc;
    padding: 20px; /* Reduced padding */
    font-family: Arial, sans-serif;
}

.send_email_button {
    margin-bottom: 15px;
}

.subject_input {
    width: 100%;
}

/* checkout page */

.checkout-page {
    display: flex;
    font-family: Arial, sans-serif;
    flex-wrap: wrap;
    margin-top: 17vh;
    width: 100%;
    min-height: 60vh; /* Use min-height for flexibility */
    background-color: #fff;
}

.payment-details {
    margin: auto;
    width: 100%;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.payment-box {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 80%;
}

.order-details {
  background-image: url("/images/website_images/SCT-background.png");
  background-size: cover;       /* make it cover the entire container */
  background-position: center;  /* keep it centered */
  background-repeat: no-repeat; /* prevent tiling */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;     /* span full width of parent (or screen) */
  min-height: 50%; /* optional: make it fill full viewport height */
}

.order-box {
    margin: 20px 20px;
    background-color: #fff; /* White background for the box */
    border-radius: 5px;
    padding: 20px;
    width: 70%;
}

.order-title {
    color: black;
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    display: block;
}

.order-items {
    text-decoration: none;
    list-style: none;
    font-size: 20px;
}

.order-item {
    display: flex;
    align-items: center;  /* Vertically aligns the items */
    justify-content: space-between;  /* Distribute space between items */
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.order-item-left {
    display: flex;
    align-items: center; /* Align image and name vertically */
}

.order-item-name {
    font-size: 16px;
}

.order-item-price {
    font-weight: bold;  /* Makes the price bold */
    font-size: 16px;
    text-align: right; 
}

.product-image {
    width: 50px;   /* Adjust the width of the product image */
    height: auto;
    margin-right: 10px;  
}

.total-price {
    color: black;
    font-size: 30px;
    font-weight: bold;
    display: block;
}

.order-item-quantity {
    background-color: #ccc;  /* Grey background */
    border-radius: 50%;  /* Make it circular */
    color: #333;  /* Text color */
    width: 30px;  /* Fixed width for the circle */
    height: 30px;  /* Fixed height for the circle */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-right: 10px;  /* Add some space between quantity and name */
}

.delivery_slot_box {
    max-width: 600px; /* Set a maximum width for the box */
    width: 80%;
    margin: auto; /* Center the box horizontally */
    padding: 20px; /* Add padding inside the box */
    border-radius: 10px; /* Rounded edges */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Shadow effect */
    background-color: #fff; /* White background */
}

.delivery_address_box {
    max-width: 600px; /* Set a maximum width for the box */
    width: 80%;
    margin: auto; /* Center the box horizontally */
    padding: 20px; /* Add padding inside the box */
    border-radius: 10px; /* Rounded edges */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Shadow effect */
    background-color: #fff; /* White background */
}

.checkout-submit {
    background-color: #4CAF50; /* Medium green background */
    color: #fff; /* White text color */
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    margin-top: 30px;
    text-align: center;
}

.checkout_section {
    display: none;
    width: 50%;
    flex-grow: 1; /* Allow sections to grow */
    height: auto; /* Let content define height */
}

.checkout_section.active {
    display: flex; /* Use flex for better alignment */
    flex-direction: column; /* Align children vertically */
}

.progress-container {
    width: 100%;
    height: 10vh;
    z-index: 2;
    left: 0; /* Change from 100% to 0 */
    background-color: #fff;
    margin-bottom: 0; /* Ensure no bottom margin */
    padding: 0; /* Ensure no padding */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center; /* Center text and elements */
}

.progress-box {
    width: 100%;
    max-width: 80%;
    position: relative; /* Changed from 'block' to 'relative' */
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 0;
}

.progress-bar {
    display: flex; /* Add this */
    width: 100%;
    height: 4px;
    background-color: #e0e0e0;
}

.progress-bar-filled {
    height: 100%;
    background-color: #4CAF50; /* Color of the filled portion */
    width: 0; /* Start with 0 width */
    transition: width 0.5s ease; /* Smooth transition */
}

.circle-container {
    display: flex;
    justify-content: space-between;
    position: absolute; /* Position circles absolutely within the progress box */
    top: -5px; /* Adjust this value to align circles over the progress bar */
    width: 100%; /* Ensure the container takes full width */
}

.circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #fff;
    position: relative;
    z-index: 1;
    transition: background-color 0.5s ease;
}

.circle.active {
    background-color: #4CAF50; /* Change the color for the active circle */
}

.circle.filled {
    background-color: #4CAF50; /* Green */
    transition: background-color 0.3s ease;
}

.label-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px; /* Add some space above the labels */
    width: 100%; /* Ensure the container takes the full width */
}

.label {
    width: 33.33%; /* Each label takes up one-third of the width */
    font-weight: bold;
    font-size: 20px;
    left: -50%;
}

.label:first-child {
    text-align: left; /* Align left label to the left */
}

.label:nth-child(2) {
    text-align: center; /* Center the middle label */
}

.label:last-child {
    text-align: right; /* Align right label to the right */
    right: -50%;
}

/* Media query for smaller screens */
@media (max-width: 1400px) {
    .checkout_section {
        width: 100%; /* Make each section take full width */
        margin-top: 50px;
        margin-bottom: 50px;
    }
    
    .delivery_address_box {
        width: 90%;
    }
    
    .delivery_slot_box {
        width: 90%;
    }

    .progress-container {
        flex-direction: column; /* Stack progress elements vertically */
        align-items: center; /* Center items */
    }

    .label-container {
        align-items: center; /* Center labels */
        width: 100%; /* Ensure full width */
    }

    .label {
        width: auto; /* Remove fixed width for labels */
        text-align: center; /* Center text in labels */
        margin: 5px 0; /* Add some vertical spacing */
    }

    .order-details {
        width: 100%; /* Ensure order details take full width */
    }

    .payment-box {
        width: 90%; /* Adjust payment box width for smaller screens */
    }
    
    .order-items {
        padding: 0;
    }
}

/* order page */ 

.order-page {
    margin-top: 14vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Ensures the filter bar and other content are stacked vertically */
    min-height: 100vh;
}

.filter-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    width: fit-content;
    background: #f0f0f0;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 50px;
    width: 80%;
    font-family: Arial, sans-serif;
}
.filter-bar .filter-option {
    position: relative;
    padding: 10px 20px;
    cursor: pointer;
    text-align: center;
}
.filter-bar .filter-option.active {
    color: #333;
}
.filter-bar .order-indicator {
    position: absolute;
    left: 0;
    height: 80%;
    border-radius: 50px;
    top: 10%;
    width: 33.3%; /* Adjust width based on the longest text */
    background: #FFFFFF; /* Light grey indicator color */
    transition: left 0.3s;
    z-index: 1;
}

.filter-option {
    z-index: 2;
}

/* order confirmation page */

.order_confirmation_details {
    font-family: Arial, Helvetica, sans-serif;
    margin: 18vh 0 5vh 5vw
}

.order_confirmation_map {
    margin-bottom: 18vh;
}

.order-confirmation-centered-message {
    position: fixed; /* Position it relative to the viewport */
    top: 50%; /* Position from the top */
    font-size: 30px;
    left: 50%; /* Position from the left */
    transform: translate(-50%, -50%); /* Center the element */
    text-align: center; /* Center the text */
    background-color: rgba(255, 255, 255, 0.9); /* Optional: white background with some transparency */
    border: 1px solid #ccc; /* Optional: border */
    padding: 20px; /* Optional: padding */
    border-radius: 10px; /* Optional: rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: shadow for better visibility */
    z-index: 1000; /* Optional: to ensure it appears above other content */
}

/* about us */

/* Container for the whole about section */
.about_us_page {
    min-height: 45vh;
    display: flex;
    justify-content: center;
    padding: 60px 20px; /* Add padding around the section */
    background: radial-gradient(rgb(225, 245, 224), rgb(50, 114, 27));
    margin-top: 14vh;
}

/* Content wrapper for text and images */
.about_us_content {
    margin-top: 3vh;
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1200px; /* Restrict maximum width */
    width: 100%;
    justify-content: space-between; /* Space between text and images */
}

/* Styling for the text box */
.about_us_text {
    background-color: #ffffff; /* White background for the text */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for text box */
    max-width: 600px; /* Control width of the text box */
    text-align: justify;
    font-family: Arial, Sans-serif;
    z-index: 1; /* Ensure text box is on top of other elements */
}

/* Styling for the text */
.about_us_text p {
    font-size: 1.2em;
    line-height: 1.6;
    color: #333; /* Darker text for readability */
}

/* Image styling */
.about_us_image {
    max-width: 250px; /* Increase image size */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Light shadow for images */
    position: relative;
    z-index: 0; /* Ensure images appear behind the text box */
}

/* Left image placement */
.about_us_image_1 {
    transform: translateX(-30px); /* Offset the image slightly to the left */
}

/* Right image placement */
.about_us_image_2 {
    transform: translateX(30px); /* Offset the image slightly to the right */
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .about_us_content {
        flex-direction: column; /* Stack the images and text vertically */
        align-items: center;
    }
    
    .about_us_image_1, .about_us_image_2 {
        transform: translateX(0); /* Remove offset for mobile */
        margin: 20px 0; /* Add spacing around images */
    }
    
    .about_us_text {
        max-width: 100%; /* Make text box full width */
        padding: 20px;
    }
}

/* how we work */

/* Container for the whole about section */
.how_we_work_page {
    display: flex;
    justify-content: center;
    padding: 60px 20px; /* Add padding around the section */
    background: radial-gradient(rgb(225, 245, 224), rgb(50, 114, 27));
    margin-top: 14vh;
}

/* Content wrapper for text and images */
.how_we_work_content {
    margin-top: 3vh;
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1200px; /* Restrict maximum width */
    width: 100%;
    justify-content: space-between; /* Space between text and images */
}

/* Styling for the text box */
.how_we_work_text {
    background-color: #ffffff; /* White background for the text */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for text box */
    max-width: 600px; /* Control width of the text box */
    text-align: justify;
    font-family: Arial, Sans-serif;
    z-index: 1; /* Ensure text box is on top of other elements */
}

/* Styling for the text */
.how_we_work_text p {
    font-size: 1.2em;
    line-height: 1.6;
    color: #333; /* Darker text for readability */
}

/* Image styling */
.how_we_work_image {
    max-width: 250px; /* Increase image size */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Light shadow for images */
    position: relative;
    z-index: 0; /* Ensure images appear behind the text box */
}

/* Left image placement */
.how_we_work_image_1 {
    transform: translateX(-30px); /* Offset the image slightly to the left */
}

/* Right image placement */
.how_we_work_image_2 {
    transform: translateX(30px); /* Offset the image slightly to the right */
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .how_we_work_content {
        flex-direction: column; /* Stack the images and text vertically */
        align-items: center;
    }
    
    .how_we_work_image_1, .how_we_work_image_2 {
        transform: translateX(0); /* Remove offset for mobile */
        margin: 20px 0; /* Add spacing around images */
    }
    
    .how_we_work_text {
        max-width: 100%; /* Make text box full width */
        padding: 20px;
    }
}

/* social responsibility */

/* Container for the whole about section */
.social_responsibility_page {
    display: flex;
    justify-content: center;
    padding: 60px 20px; /* Add padding around the section */
    background: radial-gradient(rgb(225, 245, 224), rgb(50, 114, 27));
    margin-top: 14vh;
}

/* Content wrapper for text and images */
.social_responsibility_content {
    margin-top: 3vh;
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1200px; /* Restrict maximum width */
    width: 100%;
    justify-content: space-between; /* Space between text and images */
}

/* Styling for the text box */
.social_responsibility_text {
    background-color: #ffffff; /* White background for the text */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for text box */
    max-width: 600px; /* Control width of the text box */
    text-align: justify;
    font-family: Arial, Sans-serif;
    z-index: 1; /* Ensure text box is on top of other elements */
}

/* Styling for the text */
.social_responsibility_text p {
    font-size: 1.2em;
    line-height: 1.6;
    color: #333; /* Darker text for readability */
}

/* Image styling */
.social_responsibility_image {
    max-width: 250px; /* Increase image size */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Light shadow for images */
    position: relative;
    z-index: 0; /* Ensure images appear behind the text box */
}

/* Left image placement */
.social_responsibility_image_1 {
    transform: translateX(-30px); /* Offset the image slightly to the left */
}

/* Right image placement */
.social_responsibility_image_2 {
    transform: translateX(30px); /* Offset the image slightly to the right */
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .social_responsibility_content {
        flex-direction: column; /* Stack the images and text vertically */
        align-items: center;
    }
    
    .social_responsibility_image_1, .social_responsibility_image_2 {
        transform: translateX(0); /* Remove offset for mobile */
        margin: 20px 0; /* Add spacing around images */
    }
    
    .social_responsibility_text {
        max-width: 100%; /* Make text box full width */
        padding: 20px;
    }
}

/* terms and conditions */

.terms_and_conditions_page {
    display: flex;            /* Use Flexbox for layout */
    justify-content: space-between; /* Space between elements */
    align-items: flex-start;  /* Align items at the top */
    height: auto;
    margin-bottom: 20px;   
}

.terms_and_conditions {
    width: 70%;
    margin-bottom: 50px;
    margin-right: 5%;
    font-size: 20px;
    font-family: Arial, sans-serif;
    position: relative; /* Change from absolute to relative */
}

.terms_body {
    margin-top: 15vh;
}

.terms_title {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
}

.highlighted {
    background-color: yellow; /* Highlight color */
    transition: background-color 1s ease; /* Smooth fade-out */
}

.nav_sidebar {
  width: 20%;
  top: 20vh;
  left: 0;
  bottom: 0;
  overflow-y: auto;
}

.nav_sidebar_title {
    text-align: center;
}

.nav_sidebar_box {
    margin-top: 15vh;
    margin-bottom: 20px;
    margin-left: 7%;
    margin-right: 5%;
    width: 17vw;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow effect */
    border-radius: 8px; /* Optional: Rounded corners */
    background-color: #F0F0F0;
    padding: 10px;
    overflow-y: scroll;
    font-family: Arial, Sans-serif;
}

.nav_sidebar_content {
     margin-left: 10px;
}

.nav_sidebar_content li {
    font-family: Arial, Sans-serif;
    list-style-type: none;
}

.nav_sidebar_content a {
    font-family: Arial, Sans-serif;
    text-decoration: none;
    color: black;
}

.nav_sidebar_content a:hover {
    color: darkgray;             /* Optional: Change color when hovering */
    text-decoration: underline;  /* Optional: Add underline on hover */
}

.terms_indent {
    margin-left: 15px;
}

/* privacy policy */

.privacy_policy_page {
    display: flex;            /* Use Flexbox for layout */
    justify-content: space-between; /* Space between elements */
    align-items: flex-start;  /* Align items at the top */
    height: auto;
    margin-bottom: 20px;   
}

.privacy_policy {
    width: 70%;
    margin-bottom: 50px;
    margin-right: 5%;
    font-size: 20px;
    font-family: Arial, sans-serif;
    position: relative; /* Change from absolute to relative */
}

.privacy_body {
    margin-top: 15vh;
}

.privacy_title {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
}

.privacy_nav_sidebar {
  width: 20%;
  top: 20vh;
  left: 0;
  bottom: 0;
  overflow-y: auto;
}

.privacy_nav_sidebar_title {
    text-align: center;
}

.privacy_nav_sidebar_box {
    margin-top: 15vh;
    margin-bottom: 20px;
    margin-left: 7%;
    margin-right: 5%;
    width: 17vw;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow effect */
    border-radius: 8px; /* Optional: Rounded corners */
    background-color: #F0F0F0;
    padding: 10px;
    overflow-y: scroll;
    font-family: Arial, Sans-serif;
}

.privacy_nav_sidebar_content {
     margin-left: 10px;
}

.privacy_nav_sidebar_content li {
    font-family: Arial, Sans-serif;
    list-style-type: none;
}

.privacy_nav_sidebar_content a {
    font-family: Arial, Sans-serif;
    text-decoration: none;
    color: black;
}

.privacy_nav_sidebar_content a:hover {
    color: darkgray;             /* Optional: Change color when hovering */
    text-decoration: underline;  /* Optional: Add underline on hover */
}

.privacy_policy_indent {
    margin-left: 15px;
}

/* cookies policy */

.cookies_policy_page {
    display: flex;            /* Use Flexbox for layout */
    justify-content: space-between; /* Space between elements */
    align-items: flex-start;  /* Align items at the top */
    height: auto;
    margin-bottom: 20px;   
}

.cookies_policy {
    width: 70%;
    margin-bottom: 50px;
    margin-right: 5%;
    font-size: 20px;
    font-family: Arial, sans-serif;
    position: relative; /* Change from absolute to relative */
}

.cookies_body {
    margin-top: 15vh;
}

.cookies_title {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
}

.cookies_nav_sidebar {
  width: 20%;
  top: 20vh;
  left: 0;
  bottom: 0;
  overflow-y: auto;
}

.cookies_nav_sidebar_title {
    text-align: center;
}

.cookies_nav_sidebar_box {
    margin-top: 15vh;
    margin-bottom: 20px;
    margin-left: 7%;
    margin-right: 5%;
    width: 17vw;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow effect */
    border-radius: 8px; /* Optional: Rounded corners */
    background-color: #F0F0F0;
    padding: 10px;
    overflow-y: scroll;
    font-family: Arial, Sans-serif;
}

.cookies_nav_sidebar_content {
     margin-left: 10px;
}

.cookies_nav_sidebar_content li {
    font-family: Arial, Sans-serif;
    list-style-type: none;
}

.cookies_nav_sidebar_content a {
    font-family: Arial, Sans-serif;
    text-decoration: none;
    color: black;
}

.cookies_nav_sidebar_content a:hover {
    color: darkgray;             /* Optional: Change color when hovering */
    text-decoration: underline;  /* Optional: Add underline on hover */
}

.cookies_policy_indent {
    margin-left: 15px;
}

/* password reset */

.resetPasswordPage {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    height: 100vh;
    margin: 0;
}
.reset-container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    margin-top: 20vh;
    margin-bottom: 25vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.resetConfirmPassword,
.resetNewPassword,
.resetCode,
.emailResetForm,
.submitResetButton,
.resetBackButton {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.resetConfirmPassword,
.resetNewPassword,
.resetCode,
.emailResetForm {
    width: 278px;
}
.submitResetButton {
    width: 300px;
}
.submitResetButton {
    background-color: #007BFF;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}
.resetBackButton {
    background-color: #e4002b;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}
.message {
    margin-top: 15px;
    color: black;
}
.hidden {
    display: none;
}

/* Styles for password strength */
.reset_password_strength_container {
    margin: 10px 0;
}
.reset_password_strength_label {
    font-size: 14px;
    margin-bottom: 5px;
}
.reset_password_strength_indicator {
    height: 10px;
    background-color: #ccc;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}
.reset_strength_bar {
    height: 100%;
    transition: width 0.3s ease;
}
.reset_password_weak {
    width: 33%;
    background-color: red;
}
.reset_password_intermediate {
    width: 66%;
    background-color: orange;
}
.reset_password_strong {
    width: 100%;
    background-color: green;
}
.reset_password_requirements {
    list-style: none;
    padding-left: 0;
    font-size: 12px;
    color: red;
}
.reset {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}