@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

@font-face {
    font-family: 'AvenirLight';
    src: url('fonts/Avenir Light.ttf') format('truetype');
}

@font-face {
    font-family: 'AvenirRegular';
    src: url('fonts/Avenir Regular.ttf') format('truetype');
}

body {
    font-family: 'AvenirRegular', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #241F21;
}

header {
    background-color: #FAF8F7;
    color: #241F21;
    padding: 20px;
    text-align: center;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    max-width: 120px;
    height: auto;
}

.navigation {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-grow: 1;
    font-family: 'AvenirLight', sans-serif;
    font-size: 13px;
}

nav a {
    color: #241F21;
    margin: 0 0px;
    text-decoration: none;
    font-weight: 600;
}

.login-link {
    margin-left: 30px;
    font-weight: bold;
    color: #ffffff;
    font-weight: 800 !important;
    background-color: #000000;
    padding: 8px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
}

main {
    padding: 20px;
}

.row {
    margin: 20px 0;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app-download-section {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 15px; 
    position: relative;
}

.app-download-section::before {
    content: '';
    position: absolute;
    left: 60%; /* Center the pseudo-element */
    transform: translateX(-50%); /* Adjust horizontally to truly center based on its width */
    top: 0;
    bottom: 0;
    background-color: #FF543D; /* Red background */
    z-index: -1; /* Keep behind the content */
    border-radius: 15px;
    width: 81%; /* Control the width of the red background */
}

.learn-more-section {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 15px; 
}

.learn-more-section {
    background-color: #A1D9FF;
}

.app-download-section .content,
.learn-more-section .content {
    text-align: start;
    color: white;
    padding: 0px 50px 0px 40px;
}

.app-preview,
.learn-more-preview {
    max-width: 25%;
    height: auto;
    margin: 20px;
}

.btn {
    background-color: #241F21;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #241F21;
    padding: 20px;
    text-align: center;
    position: relative;    /* Allows for position adjustments of elements inside footer */
    background-image: url('images/footer_background.png');
    background-size: cover;    /* Ensure the image covers the entire footer area */
    background-position: bottom;
    height: auto;
    background-repeat: no-repeat;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; /* Align items vertically */
    padding: 20px;
    text-align: center;
    position: relative; /* Allows for position adjustments of elements inside */
}

.footer-column {
    flex: 1 1 200px; /* Allows flex items to grow and shrink but not smaller than 200px */
    margin: 15px; /* Adjust spacing as needed */
    text-align: left; /* Align text to the left for columns */
}

.footer-column svg {
    width: 100px; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
}

.address-column {
    display: flex;
    flex-direction: row; /* Align children horizontally */
    align-items: center; /* Vertically align items in the middle */
    justify-content: space-between; /* Spreads out the children */
    text-align: left; /* Text alignment for the contact details */
}

.footer-mascot {
    max-width: 90px;
    height: auto;
    margin-top: 30px;
}

.footer-copyright {
    flex-basis: 100%;
    text-align: center;
    margin-top: 20px;
}

footer p,
footer nav a {
    color: #241F21;
}

.footer-row {
    width: 100%; /* Full width to ensure it's on its own row */
    text-align: center;
    padding-top: 20px; /* Add some padding at the top */
    margin-top: 20px; /* Ensure it's visually separated from the columns */
    border-top: 1px solid #ccc; /* Optional: adds a separator line */
}

.hamburger-menu {
    display: none;
}

@media (min-width: 600px) {
    .row {
        margin: 40px 100px;
    }
    .btn-container{
        display: flex;
    }
    .btn{
        margin-right: 1rem;
    }
}

@media (min-width: 769px){
    #small-screen{
        display: none;
    }
    .btn1, .btn2{
        width: 25%;
    }
    .icon-btn{
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        align-items: center;
    }
    .footer-row {
        width: 100%;
        text-align: center;
        padding-top: 20px;
        margin-top: 20px; 
        border-top: 1px solid #ccc;
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .login-link {
        margin-left: 10px;
        font-size: 8px;
    }

    .navigation {
        display: none;
    }

    .hamburger-menu {
        display: block;
        cursor: pointer;
    }

    .app-download-section, .learn-more-section {
        flex-direction: column;
    }

    .app-preview, .learn-more-preview {
        max-width: 30%;
        margin: 0 0 20px 0;
        display: block;
    }
    .btns{
        max-width: 100%;
        margin: 0 0 20px 0;
        display: block;
    }
    .navigation.show {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .app-download-section::before {
        content: '';
        position: absolute;
        left: 50%; /* Center the pseudo-element */
        transform: translateX(-50%); /* Adjust horizontally to truly center based on its width */
        top: 0;
        bottom: 0;
        background-color: #FF543D; /* Red background */
        z-index: -1; /* Keep behind the content */
        border-radius: 15px;
        width: 100%; /* Control the width of the red background */
    }
    .btn-container{
        display: flex;
    }
    .btn{
        margin-right: 1rem;
    }
    #large-screen{
        display: none;
    }
    .section-three {
        flex-direction: column; /* Stacks the blocks vertically on smaller screens */
        align-items: center; /* Centers the blocks */
        padding: 20px; /* Adjusts padding for smaller screens */
    }
    .content-block1, .content-block2 {
        width: 100%; /* Full width for each block on smaller screens */
        margin: 10px 0; /* Adds vertical margin between stacked blocks */
    }
}

.section-three {
    display: flex;
    flex-direction: row; /* Keeps the blocks in a horizontal row */
    justify-content: space-between; /* Spaces out the blocks evenly */
    align-items: stretch; /* Stretches items to fill the container vertically */
    gap: 20px; /* Adds space between the two content blocks */
    margin: 20px auto; /* Centers the section with automatic side margins */
    max-width: 85%; /* Limits the maximum width to align with other sections */
    padding: 20px; /* Adds vertical padding without affecting width */
}

.content-block1 {
    background-color: #f0f0f0; /* Light grey background */
    border-radius: 15px; /* Rounded corners */
    padding: 20px; /* Inner spacing */
    flex: 1.5; /* Allows both blocks to grow but respect the max-width */
}

.content-block2 {
    background-color: #f0f0f0; /* Light grey background */
    border-radius: 15px; /* Rounded corners */
    padding: 20px; /* Inner spacing */
    flex: 1; /* Allows both blocks to grow but respect the max-width */
}

.content-block1 .vendorbtn, .content-block2 .vendorbtn {
    width: 33.333%; /* Ensures button takes up 1/3 of the block's width */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0; /* Adds margin for spacing around buttons */
}

.content-block1 .vendorimg, .content-block2 .vendorimg {
    max-width: 100%; /* Ensures image does not exceed the button's width */
    height: auto; /* Maintains the aspect ratio of the image */
}

.content-block h2, .content-block p {
    text-align: center; /* Centers the text within each content block */
}