/* Fonts */


@font-face {
    font-family: 'Agrandir';
    src: url('fonts/PPAgrandir-Variable.ttf') format('truetype');
    font-display: swap; 
}
@font-face {
    font-family: 'EditorialItalic';
    src: url('fonts/PPEditorialNew-Italic.ttf') format('truetype'),
        url('fonts/PPEditorialNew-Italic.woff2') format('woff2'),
        url('fonts/PPEditorialNew-Italic.woff') format('woff');
    font-display: swap; 
}
@font-face {
    font-family: 'Editorial-UltralightItalic';
    src: url('fonts/PPEditorialNew-UltralightItalic.woff') format('woff'),
    url('fonts/PPEditorialNew-UltralightItalic.woff2') format('woff2'),
        url('fonts/PPEditorialNew-UltralightItalic.ttf') format('truetype');
    font-display: swap; 
}

@font-face {
    font-family: 'Editorial-Regular';
    src: url('fonts/PPEditorialNew-Regular.ttf') format('truetype'),
        url('fonts/PPEditorialNew-Regular.woff2') format('woff2'),
        url('fonts/PPEditorialNew-Regular.woff') format('woff');
    font-display: swap; 
}

/* styles.css */
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #271D2A;
}

p {
    font-weight: 200;
}

a {
    font-weight: 200;
}

.hamburger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.hamburger-menu span {
    height: 2px;
    width: 25px;
    background: white;
    margin-bottom: 4px;
    border-radius: 2px;
    display: flex;
}
.hamburger-dropdown {
    display: none;
    flex-direction: column;
    cursor: pointer;
    list-style: none;
}

.hamburger-dropdown li {
    margin-bottom: 4px;
    border-radius: 2px;
    display: none;
}


/* Header styles */
.header-background {
    background: url('/jrcImages/hand-making-dumplings.jpeg') no-repeat center center;
    background-size: cover;
    color: white;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px;
    color: white;
    mix-blend-mode: exclusion;
    position: fixed; /* Fixed positioning relative to the viewport */
    top: 0; /* Align to the top of the viewport */
    left: 0; /* Align to the left of the viewport */
    right: 0;
    z-index: 1000; /* Ensure the navbar is above other items */
}

.nav-left, .nav-right {
    flex: 1; /* This gives equal space to the left and right sides of the navbar */
}

.nav-center {
    display: flex;
    justify-content: center; /* This centers the menu items horizontally */
    align-items: center; /* This centers the menu items vertically */
    flex: 2; /* This allocates twice as much space to the center to allow for spacing between menu items */
}

.navbar ul {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}

.navbar li {
    margin: 0 15px;/* This will give spacing between your nav items */
}

.navbar a {
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    padding: 5px 10px; /* Optional padding to make the links easier to click */
}

.nav-logo, .nav-cta {
    font-family: 'Agrandir'; /* Use the font that matches your design */
    
}

.header-title {
    display: flex;
    align-items: center;
}


.hero {
    color: white;
    align-items: center;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
}


.hero h3 {
    font-family: 'Editorial-UltralightItalic';
    font-size: 3em; /* Adjust to match the size in the image */
    margin: 0;
    font-weight: normal;
    padding: 0;
    align-self: flex-start;

    
}

.hero h1 {
    font-size: 6em; /* Adjust to match the size in the image */
    margin: 0; /* Tighten the line spacing between 'We are' and 'JRC CULINARY GROUP' */
    font-weight: normal;
    letter-spacing: 4px; /* Example styling */
    font-family: 'EditorialItalic';

}

.hero p {
    font-size: 2em;
    font-family: 'Agrandir';
    font-weight: 200;
    margin: 0;
    align-self: flex-end;
}

.learn-more-btn {
    padding: 15px 30px; /* Larger padding for a bigger button */
    font-size: 1em; /* Adjust to match the size in the image */
    border: transparent; /* Ensure the border is visible */
    margin-top: 2em; /* Space between the text and the button */
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(228, 226, 221, 0.80); /* Text color */
    background: none; /* Transparent background */
    /*move the button to the bottom*/
    position: absolute; /* Position the button absolutely within the .hero container */
    bottom: 20px; /* Adjust as needed to place the button at the desired distance from the bottom */
    left: 50%; /* Center the button horizontally */
    transform: translateX(-50%);
    border-radius: 10px;
    font-family: 'Agrandir';

}

.learn-more-btn:hover {
    color: white; /* Color change on hover */
}


/* Responsive Design */
@media (max-width: 768px) {
    .hamburger-menu {
        display: flex;
    }


    .nav-left, .nav-right {
        display: none;
        flex: 0;
    }
    .nav-left li, .nav-right li {
        display: none;
        flex: 0;
    }
    .nav-center {
        flex: 1;
    }

    /* Adjust styles for your menu when it's open */
    .hamburger-menu.active ~ .hamburger-dropdown {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px; /* Adjust as needed */
        background-color: #271D2A; /* Same as your navbar color */
        width: 100%;
    }
    .hamburger-menu.active ~ .hamburger-dropdown li {
        display: flex;
        background-color: #271D2A; /* Same as your navbar color */
        width: 100%;
    }
    .header-title {
        display: block; /* Show the title in the center of the navbar for small screens */
    }

    .hero h1 {
        font-size: 4em;
        text-align: left;
    }

    .hero p {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 50px 20px;
    }

    .hero h1 {
        font-size: 4em;
    }

    .hero p {
        font-size: 1em;
        padding: 0;
    }

    .learn-more-btn {
        font-size: 0.8em;
        padding: 8px 16px;
    }
}
/* Additional styles.css content */

/* About Us section styles */
#about {
    color: #fff;
    padding: 12vh 0;
    text-align: left;
}

.about-container {
    max-width: 900px; /* Or the width you prefer */
    margin: 0 auto;
    padding: 0 15px;
}
.about-us {
    font-family: 'Agrandir';
}


.about-heading {
    font-size: 3.5em; /* Adjust as needed */
    margin-bottom: 40px;
    line-height: 1.4;
    font-family: 'Editorial-UltralightItalic';
    font-weight: 200;
    line-height: 108%;
}

.about-text {
    font-size: 1em;
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.6;
    padding-left: 60px;
    padding-right: 60px;
    font-family: 'Agrandir';
}

@media (max-width: 768px) {
    .about-heading {
        font-size: 2.5em;
    }

    .about-text {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .about-heading {
        font-size: 2em;
    }

    .about-text {
        font-size: 0.8em;
    }
}

.image-collage-container{
    background-color: #E4E2DD;
    align-items: center;
}

.image-collage-container h1{
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 0.5em;
    font-family: 'EditorialItalic';
}
.image-collage {
    position: relative;
    max-width: 300px; /* Adjust to fit your site's layout */
    margin: auto; /* Center the collage in the middle of the page */
    height: 700px; /* Adjust based on your images' aspect ratio and size */
    align-items: center;
    padding: 2vh 0;
    
}

.collage-image {
    position: absolute;
    max-width: none; /* Override default styles if necessary */
    height: 500px;
    border-radius: 15px; /* Adjust height to maintain aspect ratio */
}

.collage-image-1 {
    /* top: -10%; */
    top:30%;
    left: -80%;
    z-index: 2;
    transform: rotate(-15deg); /* Adjust rotation as necessary */
}

.collage-image-2 {
    left: 0%;
    z-index: 1;
    /* transform: rotate(15deg); */
}

.collage-image-3 {
    /* top: 20%; */
    top:30%;
    right: -80%; /* Position to overlap on the right side */
    z-index: 3;
    transform: rotate(15deg); /* Adjust rotation as necessary */
}


#products {
    background-color: #E4E2DD; /* Adjust if your design requires a different color */
    color: #404040; /* Adjust the color based on your design */
    padding: 12vh 0;
}

.products-container {
    max-width: 1200px; /* Or the width you prefer */
    margin: 0 auto;
    padding: 0 20px;
    padding-top: 6vh;
}

.product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.product-item {
    width: 250px; /* Adjust the width for your design */
    margin: 10px;
    border: 1px solid #271D2A; /* Optional: Add a border around each product item */
    border-radius: 10px;
    padding: 20px;
    background: #E4E2DD; /* Light grey background for the product item */
}

.product-item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.product-item h3 {
    margin-bottom: 10px;
    font-family: 'Editorial-Regular';
    font-size: 1.5em;
    color: #271D2A;
    
}
.product-item strong {
    font-weight: 400; /* You can set the value to the desired weight, 400 for normal, 700 for bold, etc. */
}
.product-item p {
    font-family: 'Agrandir';
    color: #271D2A;
}

/* You can add media queries for responsiveness */
@media (max-width: 768px) {
    .product-item {
        width: 45%; /* Adjust for medium-sized screens */
    }
}

@media (max-width: 480px) {
    .product-item {
        width: 90%; /* Adjust for small-sized screens */
    }
}



#distribution {
    background-color: #E4E2DD; /* Adjust the color to match your design */
    color: #271D2A; /* Adjust the color to match your design */
}

.distribution-container {
    max-width: 1000px; /* Adjust as needed */
    margin: 0 auto;
    padding: 0 10vw;
    padding-top: 12vh;
    padding-bottom: 6vh;
    
}

.distribution-type {
    margin-bottom: 30px;
}

.distribution-container h1 {
    text-align: left; /* Center the title */
    margin-bottom: 0.5em; /* Space between title and content */
    font-family: 'EditorialItalic';
    font-size: 3em;
}

.distribution-type h3 {
    font-size: 2em;
    margin-bottom: 15px;
    font-family: 'EditorialItalic';
    margin-left: 90px;
}

.distribution-type ul {
    list-style: none;
    padding: 0;
    margin-left: 130px;
    font-family: 'Agrandir';
    font-weight: 200;
}

.distribution-type ul li {
    padding: 5px 0;
    color: #271D2A; /* Bullet point color */
    font-size: 1.5em; /* Adjust bullet size */
    padding-right: 0.5em; /* Space between bullet and text */
}
.distribution-type .indent {
    padding-left: 50px; /* Adjust as needed */
}


/* Contact section */

.contact-container {
    display: flex;
    justify-content: space-between; /* Aligns children to the edges */
    align-items: center; /* Centers children vertically */
    padding: 15vh 10%; /* Add padding on top/bottom and a percentage of the viewport width on left/right */
    color: #E4E2DD; /* Assuming the text color is white */
    max-width: 100vw;
    
}

.left-side {
    max-width: 50%; /* Adjust the width as necessary */
    /* If the title needs more separation from the text, adjust the padding here */
}

.left-side h2 {
    font-size: 4.5em;
    margin-bottom: 0.5em;
    font-family: 'EditorialItalic';
}
.left-side p {
    font-size: 1em;
    margin-bottom: 1em;
    font-family: 'Agrandir';
}

.right-side {
    width: 50%; /* Adjust the width as necessary */
    text-align: left; /* Aligns the text to the right */
    margin-left:40%;
    font-family: 'Agrandir';
}

a {
    font-weight: 200;
}

a:link {
    color: rgba(228, 226, 221, 0.80);
    font-weight: 200; /* Red color for unvisited links */
}
a:visited {
    color: #E4E2DD;
    font-weight: 200; /* Green color for visited links */
}

li {
    font-family: 'Agrandir';
    font-weight: 200;
}


.footer-credits {
    text-align: center;
    margin-top: 2em;
    bottom: 0;
    width: 100%;
    font-family: 'Agrandir';
    color: #E4E2DD;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .image-collage-container h1 {
        padding: 0.5em 0;
        margin-bottom: 0;
    }

    .collage-image-1, .collage-image-3 {
        display: none; /* Hide the first image on smaller screens */
    }
    .collage-image-2 {
        left: 0; /* Adjust the position of the second image */
    }
    .collage-image {
        height: 500px;
        position: relative;
    }
    .image-collage {
        height: 500px;
        display: flex;
        justify-content: center;
    }
    .hero h3 {
        padding-right: 0;
    }
    .contact-container {
        flex-direction: column;
        text-align: center;
        padding: 50px 5%;
    }
    .left-side, .right-side {
        width: 100%; /* Full width on smaller screens */
        margin-left:0;
        max-width: 90%;
    }
    .left-side h2 {
        font-size: 2.5em;
        padding: 0;
        margin-block-start: 0;
        margin-block-end: 0;
    }
    .right-side {
        text-align: center; /* Center align on smaller screens */
    }

    .footer-credits {
        font-family: 'Agrandir';
    }
    .distribution-type h3 {
    margin-left: 0;
    }
    .distribution-type ul {
    margin-left: 0;
    }
    .distribution-type .indent {
    padding-left: 10px; /* Adjust as needed */
}
.about-text {
    font-size: 1.1em;
    padding: 0 5px;
}
}