@charset "UTF-8";

.navbar-nav {
    align-items: center;
}

.navbar-nav .logo-item {
    display: flex;
    align-items: center;
    padding: 0;
}

.navbar-logo {
    height: 50px;
    width: auto;
	margin-top: -5px;
}

.flavors {
    padding: 2rem 0;
}

.flavors .container {
    padding: 0 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.flavors .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.flavors .flavor-item {
    text-align: center;
    margin-bottom: 1rem;
}

.flavors .flavor-title {
    font-size: 1.25rem;
    margin-top: 5rem;
    color: #442222;
}

.flavors .flavor-description {
    font-size: 1rem;
    margin-top: 0.5rem;
    color: #442222;
}

.flavors .col {
    flex: 0 0 100%;
    max-width: 100%;
}

.intro-text p {
    color: #442222;
}

.intro-text h2 {
    color: #442222;
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .flavors .col {
        flex: 0 0 calc(50% - 1rem);
        max-width: calc(50% - 1rem);
    }
}

@media (min-width: 768px) {
    .flavors .col {
        flex: 0 0 calc(33.33% - 1rem);
        max-width: calc(33.33% - 1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .flavors img {
        transition: none;
    }
}
/* Change the navbar background color */
#mainNav {
    background-color: #FBF5EA;
}

/* Change the text color in navbar */
#mainNav .navbar-nav .nav-link,
#mainNav .navbar-brand {
    color: #442222 !important;
}

/* Ensure navbar toggler icon (hamburger menu) also changes color */
#mainNav .navbar-toggler-icon {
    background-color: #FBF5EA !important;
}

/* Optional: Change the color of the logo on hover */
#mainNav .navbar-nav .nav-link:hover,
#mainNav .navbar-brand:hover {
    color: #81CEC9 !important;
}
/* Change the background color of the entire page */
body {
    background-color: #FBF5EA !important;
}

/* Optional: To change the background color of the navbar to match the page */
#mainNav {
    background-color: #FBF5EA !important;
}

/* If you want to change the background color of other sections specifically */
.page-section {
    background-color: #FBF5EA !important;
}
/* Add a shadow to the Our Story box */
.intro-text {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Horizontal, Vertical, Blur, Spread */
}

/* Add shadow to the "Explore Our Flavors" button */
.intro-button .btn {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Light shadow for the button */
}

.intro-button .btn:hover {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); /* Darker shadow on hover */
}


/* Optionally, change the border color if you don’t want to remove it */
.navbar-toggler {
    border: 2px solid #442222; /* Optional: Change to your desired border color */
}



.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgb(68,34,34)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* Remove the outline and border from the navbar toggler button */
.navbar-toggler {
    border: none !important;  /* Remove the border around the button */
    outline: none !important; /* Remove the outline when focused */
}

footer .m-0.small {
    color: #FBF5EA;
}
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 1000

.nunito-<uniquifier> {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 700

.quicksand-<uniquifier> {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
/* Apply Quicksand font to all headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Quicksand', sans-serif !important;  /* Make sure to include important if you want to override other styles */
}

/* Apply Nunito font to the body or paragraph elements */
body, p {
    font-family: 'Nunito', sans-serif !important;
}
.btn-primary {
    background-color: #81CEC9 !important;  /* Update to your desired color */
    border-color: #81CEC9 !important;     /* Ensure the border matches */
}

/* Optional: Adjust the hover effect for the button */
.btn-primary:hover {
    background-color: #6BB3AE !important;  /* Slightly darker shade for hover effect */
    border-color: #6BB3AE !important;     /* Match the hover border */
}


body {
	background-color: #991012;
}

/* Apply background color globally */
body {
    background-color: #FBF5EA !important;
}
.cover-rectangles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  /* Ensures it covers the entire viewport */
    background-color: #FBF5EA;
    z-index: -1; /* Ensures it stays behind the content */
}

/* Basic Styling for Section Break */
.section-break {
    width: 100%;
    height: 30px; /* Keeps the section break visually distinct */
    background-color: #81CEC9;
}

/* Custom Spacing for Specific Section Breaks */
.section-break-1 {
    margin-top: 3rem; /* Custom spacing for the first section break */
}

.section-break-2 {
    margin-top: 4rem; /* Custom spacing for the second section break */
}

.section-break-3 {
    margin-top: 2rem; /* Custom spacing for the third section break */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .section-break {
        height: 15px; /* Slightly smaller for tablets */
    }

    .section-break-1 {
        margin-top: 2.5rem; /* Reduce spacing on smaller screens */
    }

    .section-break-2 {
        margin-top: 3rem; /* Reduce spacing on smaller screens */
    }

    .section-break-3 {
        margin-top: 1.5rem; /* Reduce spacing on smaller screens */
    }
}

@media (max-width: 480px) {
    .section-break {
        height: 10px; /* Compact for phones */
    }

    .section-break-1 {
        margin-top: -20rem; /* Further reduce spacing on phones */
    }

    .section-break-2 {
        margin-top: -200rem; /* Further reduce spacing on phones */
    }

    .section-break-3 {
        margin-top: -200rem; /* Further reduce spacing on phones */
    }
}
/* Add padding to the top and bottom of the Our Story section */
.page-section.clearfix {
    padding-top: 2rem;  /* Adjust this value to add space at the top */
    padding-bottom: 5rem; /* Adjust this value to add space at the bottom */
}

/* Section break style */
.section-break {
    height: 30px; /* Adjust the height of the page break */
    background-color: #81CEC9; /* Color of the break */
    margin-top: 0; /* Ensure no additional top margin */
}

/* Optional: Add padding before the Our Flavors section */
.flavors {
    padding-top: 2rem; /* Add some padding before the "Our Flavors" section */
}
@media (min-width: 992px) {
  #mainNav .navbar-nav .nav-item .nav-link:hover {
    color: #81CEC9 !important;
  }
}
/* Style for navigation links */
.navbar-nav .nav-item .nav-link {
    transition: transform 0.3s ease; /* Smooth scaling transition */
}

/* Hover effect: Scaling the navigation links */
.navbar-nav .nav-item:hover .nav-link {
    transform: scale(1.1); /* Slight zoom effect */
}

/* Style for the logo image */
.navbar-logo {
    height: 50px; /* Set logo size */
    width: auto; /* Maintain aspect ratio */
    transition: transform 0.3s ease; /* Smooth scaling transition */
    position: relative; /* Ensures overlay stays in bounds */
}

/* Hover effect: Scaling the logo */
.logo-item:hover .navbar-logo {
    transform: scale(1.1); /* Slight zoom effect */
}

/* Add overlay specifically to the logo */
.logo-item {
    position: relative; /* To position the overlay correctly */
}

.logo-item::after {
    content: ""; /* Create overlay pseudo-element */
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1; /* Ensure it appears above the logo */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth fade-in */
}

/* Show the overlay on hover */
.logo-item:hover::after {
    opacity: 1; /* Overlay becomes visible */
}

/* Hide the hover logo by default */
.navbar-logo.hover-logo {
    display: none;
}

/* Show the hover logo when the nav-item is hovered */
.logo-item:hover .navbar-logo.default-logo {
    display: none;
}

.logo-item:hover .navbar-logo.hover-logo {
    display: inline-block;
}

.flavor-item img {
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}

.flavor-item img:hover {
    transform: scale(1.1); /* Scale the image to 110% on hover */
}
html {
    scroll-behavior: smooth;
}
.flavors .flavor-item {
    position: relative;
    text-align: center; /* Keep text centered */
    padding-top: 1rem; /* Add space above the text */
}

.flavors .flavor-title {
    margin-top: 3rem; /* Move title down from the image */
    font-size: 1.25rem;
    color: #442222;
}

.flavors .flavor-description {
    margin-top: 0.75rem; /* Move description down from the title */
    font-size: 1rem;
    color: #442222;
}
.footer-icons a {
    text-decoration: none; /* Remove any unintended underlines */
    margin: 0 5px; /* Space between icons */
    display: inline-block; /* Ensure proper alignment */
}

.footer-icons {
    display: flex;
    justify-content: center; /* Center the icons horizontally */
    gap: 1px; /* Add spacing without extra elements */
}
/* Footer Styles */
.footer {
    background-color: #3e2723; /* Dark brown background */
    color: white; /* Text color for the footer */
    padding: 40px 0; /* Adjust padding for spacing */
    text-align: center; /* Center text inside footer */
}

/* Small text in footer */
.footer .small {
    font-size: 0.8rem; /* Smaller text size */
}

/* Footer Styles */
.footer {
    background-color: #3e2723; /* Dark brown background */
    color: white; /* Text color for the footer */
    padding: 40px 0; /* Adjust padding for spacing */
    text-align: center; /* Center text inside footer */
}

/* Small text in footer */
.footer .small {
    font-size: 0.8rem; /* Smaller text size */
	margin-bottom: 20px; /* Add more space below the copyright text */
}

/* Footer icons container */
.footer-icons {
    display: flex;
    justify-content: center; /* Center the icons horizontally */
    gap: 10px; /* Adjust spacing between the icons */
    margin-bottom: 7px; /* Reduced space between icons and logo */
}

/* Individual icon styling */
.footer-icons a {
    color: white; /* Icon color */
    font-size: 1.5rem; /* Icon size */
    text-decoration: none; /* Remove underline */
}

/* Hover effect on icons */
.footer-icons a:hover {
    color: #81CEC9; /* Hover color for icons */
}

/* Footer logo container */
.footer-logo {
    margin-top: ; /* No space between icons and logo */
	margin-bottom: -16px; /* Adjust this value to reduce space below the logo */
    position: relative; /* For absolute positioning of hover logo */
    display: inline-block; /* Ensure the logos are displayed inline */
}

/* Default logo (non-hovered) */
.footer-logo-default {
    width: 100px; /* Set a maximum width for the logo */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Make sure it's visible */
}

/* Hover logo (hidden by default) */
.footer-logo-hover {
    position: absolute; /* Stack the hover logo on top of the default logo */
    top: 0;
    left: 0;
    width: 100px; /* Set a maximum width for the hover logo */
    height: auto; /* Maintain aspect ratio */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition for visibility */
}

/* Show hover logo when hovering over the logo container */
.footer-logo:hover .footer-logo-hover {
    opacity: 1; /* Show hover logo */
}

.footer-logo:hover .footer-logo-default {
    opacity: 0; /* Hide default logo on hover */
}
/* Apply hover color to navigation links */
.navbar-nav .nav-link:hover {
    color: #81CEC9 !important;  /* Set hover color for nav links */
}

/* Hover color for dropdown links */
.nav-item.dropdown:hover .nav-link {
    color: #81CEC9 !important;  /* Set hover color for dropdown nav link */
}

/* Hover color for dropdown items */
.dropdown-item:hover {
    color: #81CEC9 !important;  /* Set hover color for dropdown items */
}

/* Optional: Ensure dropdown items have no background color change on hover */
.dropdown-item:hover {
    background-color: transparent !important;  /* Prevent background color change */
}
/* On hover, change the text color of the dropdown items to #81CEC9 */
.navbar-nav .nav-item.dropdown:hover .nav-link,
.navbar-nav .nav-item.dropdown .nav-link:hover {
    color: #81CEC9 !important; /* Hover text color */
}

/* Change the outline color of the navbar toggler button */
.navbar-toggler:focus {
    outline: 2px solid #442222 !important;  /* Set outline color to dark brown */
}


/* Ensure cursor is a hand on hover */
.navbar-nav .nav-link {
    cursor: pointer;  /* Ensures pointer cursor when hovering */
}

/* Initially, show the default logo */
.default-logo {
    display: block;
}

/* Initially hide the hover logo */
.hover-logo {
    display: none;
}

/* When hovering over the logo, show the hover logo and scale the image */
.navbar-item:hover .hover-logo {
    display: block; /* Shows the hover logo */
}

.navbar-item:hover .default-logo {
    display: none; /* Hides the default logo */
}

/* Add scale effect when hovering */
.navbar-item:hover .navbar-logo {
    transform: scale(1.1); /* Slightly scale up the logo */
    transition: transform 0.3s ease, opacity 0.3s ease;  /* Smooth transition */
}