/* General Styling */
body {
    margin: 0;
    font-family: 'Gochi Hand', cursive;
    background-color: #111;
    color: #ffffff;
    display: flex; /* Use flexbox for centering */
    flex-direction: column; /* Stack children vertically */
    min-height: 100vh; /* Ensure body takes up full height */
}

/* Main Container for Centering Content */
.main-container {
    display: flex; /* Use flexbox for centering */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center children vertically */
    align-items: center; /* Center children horizontally */
    flex: 1; /* Allow this container to grow and fill available space */
    text-align: center; /* Center text within the container */
    margin-top: -10vh; /* Move up by 10% of viewport height */
}

/* Title Styling */
.title {
    font-size: 72px; /* Increased from 60px to 72px */
    color: #93b3de;
    margin-bottom: 24px; /* Increased from 20px to 24px */
}

/* Subtitle Styling */
.subtitle {
    font-size: 30px; /* Increased from 25px to 30px */
    color: #93b3de;
    margin-bottom: 48px; /* Increased from 40px to 48px */
}

/* Products Container */
.products {
    display: flex;
    justify-content: center; /* Center products horizontally */
    gap: 72px; /* Increased from 60px to 72px */
}

/* Individual Product Styling */
.product {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Product Box Styling */
.product-box {
    width: 360px; /* Increased from 300px to 360px */
    height: 192px; /* Increased from 160px to 192px */
    background-color: #222222; /* Maintain the background color */
    margin-bottom: 12px; /* Increased from 10px to 12px */
    border-radius: 12px; /* Increased border-radius for a smoother look */
    position: relative; /* Make the box a positioning context */
    overflow: hidden; /* Ensure content is clipped to the box */
}

/* Product Image Styling */
.product-image {
    position: absolute; /* Position absolutely within the product-box */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    right: 0; /* Stretch to the right */
    bottom: 48px; /* Increased from 40px to 48px */
    background-size: cover; /* Ensure the image covers the div */
    background-position: center; /* Center the image */
    z-index: 1; /* Layer behind the description */
}

/* Product Description Styling */
.product-description {
    position: absolute; /* Position absolutely within the product-box */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for centering */
    z-index: 2; /* Layer above the image */
    text-align: center; /* Center the text */
    color: #ffffff; /* Ensure the text is visible */
    font-size: 28px; /* Increased from 24px to 28px */
}

/* Product Button Styling */
.product-button {
    position: absolute; /* Position absolutely within the product-box */
    bottom: 0; /* Align the button to the bottom */
    font-family: 'Gochi Hand', cursive;
    left: 0; /* Align to the left */
    right: 0; /* Stretch to the right */
    background-color: #93b3de; /* Maintain the button's background color */
    color: #ffffff; /* Text color for the button */
    border: none;
    height: 48px; /* Increased from 40px to 48px */
    font-size: 36px; /* Increased from 30px to 36px */
    cursor: pointer; /* Cursor style for the button */
    border-radius: 0 0 6px 6px; /* Increased rounded corners at the bottom */
    text-align: center; /* Center the text in the button */
    z-index: 3; /* Ensure the button is above the image and description */
}

/* Button Hover Effect */
.product-button:hover {
    background-color: #7fa5cc; /* Hover effect for the button */
}

/* Footer Styling */
footer {
    background-color: #93b3de; /* Footer background color */
    padding: 20px 0;
    position: fixed; /* Fixes footer at the bottom */
    bottom: 0; /* Anchors footer to the bottom */
    width: 100%; /* Ensures the footer spans the entire page width */
    text-align: center; /* Centers the content in the footer */
    z-index: 1000; /* Keeps the footer on top of other elements */
}

/* Footer Links Styling */
.footer-links {
    display: flex;
    justify-content: center;
    gap: 72px; /* Increased from 60px to 72px */
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
}

/* Footer Left and Right Links */
.footer-left, .footer-right {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Increased from 5px to 8px */
    text-align: center;
}

.footer-left a, .footer-right a {
    color: #fff;
    font-size: 16px; /* Increased from 14px to 16px */
    text-decoration: none;
}

/* Footer Links Hover Effect */
.footer-left a:hover, .footer-right a:hover {
    text-decoration: underline;
}

/* Centered Text Styling */
.footer-center {
    text-align: center;
}

footer .footer-center .mochi-logo {
    font-size: 30px; /* Increased from 30px to 36px */
    color: #ffffff;
    margin: 0;
    font-weight: bold; /* Makes the text bold */
}

/* Footer Center Paragraphs */
.footer-center p {
    margin: 3px 0; /* Increased from 3px to 4px */
    color: #ffffff;
    font-size: 14px; /* Increased from 14px to 16px */
}