/* index.css */

/* Hero Section */
#hero {
    position: relative;
    width: 100%;
    height: calc(100vh - 72px); /* Increased height by 80px */
    background-color: #fff; /* White background color */
    display: flex;
    justify-content: center; /* Center the hero container horizontally */
    align-items: center; /* Center the hero container vertically */
    overflow: hidden; /* Ensure no overflow from the hero container */
}

.hero-container {
    position: relative;
    max-width: 1200px;
    width: 100%; /* Ensure hero container takes up the full width within the max-width */
    height: 100%; /* Ensure hero container takes up the full height */
    background-image: url('../images/hero-image.jpg');
    background-size: cover; /* Cover the container, stretching and cropping sides if necessary */
    background-position: center; /* Center the image */
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end; /* Align items to the bottom */
    justify-content: flex-end; /* Align items to the right */
}

.hero-content {
    text-align: right; /* Text aligned to the right */
    color: white; /* White text color */
    padding: 20px;
    margin: 20px;
    transform: translateY(-40px); /* Move the text up slightly */
    max-width: 55%; /* Limit the width of the content to ensure wrapping */
}

.hero-content h1 {
    font-size: 75px; /* Updated size for the first line */
    margin-bottom: 7px;
}

.hero-content p {
    font-size: 35px; /* Updated size for the second line */
    margin-bottom: 30px; /* Adjusted to remove any unnecessary margin */
    word-wrap: break-word; /* Ensure long text wraps to the next line */
    white-space: normal; /* Allow wrapping */
}

/* Service Cards */
#services {
    padding: 50px 0;
    background-color: #fff;
}

#services h2 {
    font-size: 50px; /* Set the font size to 30px */
    text-align: left; /* Align the heading to the left */
    margin-bottom: 40px; /* Add space below the heading */
    color: #333; /* Ensure the color stands out against the white background */
    padding-left: 20px; /* Optional: Add padding to move the heading slightly from the edge */
}

.service-cards {
    display: flex;
    justify-content: center; /* Center the service cards within the container */
    gap: 100px;
    flex-wrap: wrap; /* Allows the cards to wrap if they don't fit in one line */
}

.service-card {
    position: relative;
    background-color: transparent; /* Transparent background */
    padding: 20px;
    border-radius: 5px;
    text-align: left; /* Align all text to the left */
    flex: 0 1 45%; /* Flex-basis set to 45% to give space between two cards */
    margin-bottom: 20px; /* Adds space below each card */
    max-width: 400px; /* Optional: Set a max width to prevent cards from stretching too wide */
    box-sizing: border-box; /* Ensure padding is included in the element's total width */
}

.service-card img {
    width: 100%; /* Set the image width to 100% of the service card */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px;
    object-fit: cover; /* Ensure the image covers the area, cropping if necessary */
    margin-bottom: 15px; /* Space between image and text */
}

.service-card h3 {
    margin-bottom: 10px; /* Space between name and description */
    font-size: 20px; /* Adjusted font size for product name */
}

.service-card p {
    margin: 10px 0; /* Space between elements */
    font-size: 16px; /* Adjusted font size for description and price */
}

.service-card .service-btn {
    display: block;
    width: 100%; /* Ensure the button takes up the full width */
    padding: 10px;
    text-align: center;
    background-color: #ff6600; /* Button background color */
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
    box-sizing: border-box; /* Include padding and border in the element's total width */
}

.service-card .service-btn:hover {
    background-color: #e65c00;
}

/* Delivery Banner */
#delivery-banner {
    background-color: #c2a476; /* Cardboard-like warm brown background for the banner */
    color: white; /* White text color */
    text-align: center; /* Center the text */
    padding: 15px; /* Padding around the text */
    font-size: 18px; /* Font size for the banner text */
    margin-top: 10px; /* Space above the banner */
    border-radius: 5px; /* Rounded corners for the banner */
}

#delivery-banner p {
    margin: 0; /* Remove default margin */
    line-height: 1.5; /* Line height for better readability */
}

#delivery-banner strong {
    font-size: 35px; /* Increased font size for the first line */
}

#delivery-banner p br + span {
    font-size: 15px; /* Reduced font size for the second line */
}

/* Features Section */
#about {
    padding: 50px 20px;
    background-color: #fff; /* Ensure the section has a white background */
}

#about h2 {
    font-size: 50px; /* Emphasize the About section heading */
    text-align: left;
    margin-bottom: 20px;
    color: #333;
}

.feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding-top: 50px;
}

.feature-left {
    flex-direction: row; /* Image on the left, text on the right */
}

.feature-right {
    flex-direction: row-reverse; /* Text on the left, image on the right */
}

.feature-img, .feature-text {
    flex: 1;
    padding: 0 20px;
}

.feature-img {
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center;
}

.feature-img img {
    max-width: 100%;
    height: 300px; /* Set a consistent height for all images */
    object-fit: contain; /* Maintain the full image height, leave blank space on the sides if necessary */
    border-radius: 5px;
}

.feature-text {
    text-align: center; /* Center-align the text */
}

.feature-text h3 {
    font-size: 35px;
    margin-bottom: 10px;
}

.feature-text p {
    font-size: 17px;
    margin: 0;
    line-height: 1.5;
}

/* Contact Section */
#contact {
    padding: 50px 20px;
    background-color: #fff; /* White background to match the rest of the site */
    text-align: left;
}

#contact h2 {
    font-size: 50px; /* Emphasize the Contact section heading */
    margin-bottom: 60px;
    color: #333;
}

.contact-cards {
    display: flex;
    justify-content: center;
    gap: 100px; /* Space between the contact cards */
    flex-wrap: wrap;
}

.contact-card {
    text-align: center;
    flex: 1;
    max-width: 300px; /* Restrict the maximum width of each card */
    margin-bottom: 20px;
}

.contact-card img {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 15px; /* Space between image and text */
    border-radius: 5px;
}

.contact-card p {
    font-size: 18px;
    color: #333;
}

/* FAQ Section */
#faq {
    padding: 50px 20px;
    background-color: #fff;
}

#faq h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

.faq-item {
    margin-bottom: 20px;
}

.faq-item h3 {
    font-size: 24px;
    color: #333;
    cursor: pointer;
    margin: 0;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.faq-item h3:hover {
    background-color: #e9e9e9;
}

.faq-item p {
    font-size: 18px;
    color: #555;
    margin: 10px 0;
    padding: 0 10px;
    display: none;
}

.faq-item.open p {
    display: block;
}

/* Add to Cart Button and Quantity Controls */
/* Set the width of the cart control elements */
.cart-control {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Add to cart button styling */
.add-to-cart {
    flex-grow: 1;
    background-color: #ff6600;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    text-align: center;
    border-radius: 5px;
}

/* Set plus and minus buttons to be the same size */
.quantity-btn {
    background-color: #ff6600;
    color: white;
    border: none;
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    width: 40px; /* Ensure the buttons have the same width */
    height: 40px; /* Ensure the buttons have the same height */
}

.quantity-btn:hover {
    background-color: #e65c00;
}

/* Adjust input box width */
.quantity-input {
    flex-grow: 1;  /* This makes the input box stretch to fill the available space */
    padding: 5px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 18px;
    margin: 0 5px;  /* This ensures the space between the input box and buttons remains constant */
    min-width: 60px; /* Ensure a minimum width for the input */
    height: 40px; /* Match the height of the buttons */
    box-sizing: border-box; /* Ensure padding doesn't affect the height */
}

/* Flex adjustments to center and stretch the elements */
.quantity-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0;
}

.sale-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff4444;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.sale-tag::before {
    content: "Save";
    display: block;
    font-size: 0.8em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.sale-amount {
    font-size: 1.1em;
}