/* Reset some default browser styles */
body, h1, h2, h3, p, li {
    margin: 0;
    padding: 0;
    font-family: 'Quicksand', Arial, sans-serif;
}

.italics-sub {
    color: #266cff;
}

/* Change the font size of the menu links */
ul.menu li a {
    font-size: 20px; /* Adjust the size to your preference */
}

/* Set a background color and default text color */
body {
    background-color: #f0f0f0;
    color: #333;
}

.business h3 {
    font-size: 24px;
}

h4 {
    color:rgba(45, 149, 16, 1);
}

/* Style the header with the hero image */
header {
    position: relative;
    text-align: center;
    background-color: #fff;
    color: #333;
    overflow: hidden;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* CSS for the hero container */
.hero-container {
    position: relative;
    margin-top: 110px;
}

/* CSS for the hero image */
.hero-image {
    width: 100%;
    height: auto;
}

/* CSS for the hero text */
.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff; /* Text color */
    background-color: rgba(0, 0, 0, 0); /* Background color with transparency */
    padding: 20px;
    font-family: 'Quicksand', Arial, sans-serif;
    font-weight: 700; /* Semibold (600) variant */
}

/* Style for the heading */
.hero-text h1 {
    font-size: 48px;
    margin-bottom: 10px;
}

/* Style for the paragraph */
.hero-text h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

/* Style the sections */
section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

/* Style the accordion */
.accordion {
    border: 1px solid #ddd;
}

.accordion-image {
    width: 100%; /* Make the image take up 100% of the width */
    height: auto; /* Allow the height to adjust proportionally */
}

/* Style the crop accordion */
.crop {
    border-top: 1px solid #ddd;
    cursor: pointer;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
    padding: 10px; /* Adjust the padding as needed */
    display: flex;
    flex-direction: column; /* Display items in a column layout */
}

.crop-content {
    position: relative; /* Add relative positioning to the container */
    width: 100%;
    display: flex;
    flex-direction: column;
}

.crop-text {
    flex-grow: 1; /* Allow text to take up available space */
    position: absolute; /* Position text absolutely */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center text precisely */
    text-align: center; /* Center text within the div */
    font-weight: 700; /* Semibold (600) variant */
    color: #fff;
}


.crop-title {
    font-weight: bold;
    font-size: 52px;
    white-space: nowrap;
}

.crop-details {
    display: none;
    padding: 10px; /* Adjust the padding for the details */
}

/* Style the active (expanded) state */
.crop.active {
    background-color: #e0e0e0;
}

.crop.active .crop-details {
    display: block;
}

/* CSS for hover animations */
.crop:hover {
    filter: brightness(1.1); /* Increase brightness on hover */
    transition: filter 0.3s ease; /* Smooth transition */
}

/* CSS for chevron icons */
.crop-overlay {
    position: absolute;
    top: 50%;
    left: 5%; /* Align to the left */
    transform: translateY(-50%);
    font-size: 1em;
    color: rgba(255, 255, 255, 1);
    padding: 5px;
}

.crop-overlay i {
    transform: rotate(-90deg); /* Initially, rotate to the right */
    transition: transform 0.3s ease; /* Add transition for smooth rotation */
}



/* Style the footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: #fff;
}

.dots {
    display: inline-block;
    margin: 0 5px; /* Adjust the margin as needed for spacing */
    position: relative;
}

.dots::before {
    content: '\00B7'; /* Unicode character for a bullet (middle dot) */
    color: #333; /* Change the color as needed */
    margin-right: 5px; /* Adjust the spacing between the dot and the word */
}

.icon_small {
    font-size: 14px;
    vertical-align: middle;
}

.fa-chevron-down {
    font-size: 6em;
    padding-bottom: 20px;
}

td {
    vertical-align: top;
}

/* Style the navbar */
.navbar {
    position: fixed; /* Fix the navbar at the top of the viewport */
    top: 0; /* Position it at the top */
    left: 0; /* Align it to the left */
    right: 0; /* Align it to the right */
    background-color: #fff; /* Background color for the navbar */
    padding: 10px 40px; /* Adjust padding as needed */
    z-index: 1000; /* Ensure the navbar is on top of other elements */
    transition: background-color 0.3s ease; /* Add a smooth transition for background color */
    display: flex; /* Use flexbox to control layout */
    justify-content: space-between; /* Align logo to the left and menu to the right */
    align-items: center; /* Vertically center content */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow (adjust values as needed) */
}

/* Style the logo */
.logo img {
    height: 100px; /* Adjust the height of your logo */
    vertical-align: middle; /* Vertically align them in the navbar */
}

/* Style the menu */
.menu {
    list-style: none;
    display: flex;
    margin-left: auto; /* Push the menu items to the right */
    gap: 20px; /* Adjust the spacing between menu items */
}

.menu li {
    margin: 0;
}

.menu li a {
    text-decoration: none;
    color: #333; /* Text color for menu items */
    font-weight: bold;
    transition: color 0.3s ease;
}

.menu li a:hover {
    color: #36b014; /* Change color on hover */
}

#scrollToBusiness:hover {
    color: #266cff; /* Change the color to blue when hovered over */
}

.scrollToTop:hover {
    color: #36b014; /* Change the color to green when hovered over */
}

section h2 {
    color: #266cff; /* Replace with your desired color */
}

/* Add media queries for specific screen sizes and further adjustments as needed */
@media (max-width: 768px) {
    /* Adjust styles for tablets */
    body {
        font-size: 16px;
    }

    header {
        padding: 10px 0;
    }

    .hero-text h1 {
        font-size: 28px;
    }

    .hero-text h2 {
        font-size: 20px;
        white-space: nowrap;
    }

    section {
        padding: 20px;
    }

    .navbar {
        flex-direction: column; /* Stack elements vertically on smaller screens */
        text-align: center; /* Center-align text */
    }

    .menu {
        margin-top: 10px; /* Add some spacing between logo and menu on tablets */
    }

    .menu li {
        margin-bottom: 10px; /* Add space between menu items on tablets */
        white-space: nowrap; /* Prevent text from wrapping on tablets */
    }

    .logo img {
        height: 100px;
    }

    .icon_small {
        font-size: 12px;
    }

    .fa-chevron-down {
        font-size: 5em;
    }
}

@media (max-width: 480px) {
    /* Adjust styles for mobile phones */
    body {
        font-size: 14px;
    }

    h2 {
        font-size: 24px;
    }

    header {
        padding: 5px 0;
    }

    .hero-container {
        margin-top: 140px;
    }

    .hero-text h1 {
        font-size: 26px;
    }

    .hero-text h2 {
        font-size: 18px;
        white-space: nowrap;
    }

    section {
        padding: 10px;
    }

    .navbar {
        flex-direction: column; /* Stack elements vertically on smaller screens */
        text-align: center; /* Center-align text */
        padding: 10px; /* Adjust padding for smaller screens */
        justify-content: center; /* Align logo to the left and menu to the right */
    }

    .menu {
        margin-top: 10px; /* Add some spacing between logo and menu on mobile */
        white-space: normal;
    }

    .menu li {
        margin-bottom: 10px; /* Add space between menu items on mobile */
        white-space: nowrap; /* Prevent text from wrapping on mobile */
    }

    /* Change the font size of the menu links */
    ul.menu li a {
        font-size: 1em; /* Adjust the size to your preference */
    }

    .logo img {
        height: 80px;
    }

    .crop-title {
        font-size: 35px;
    }
    .icon_small {
        font-size: 10px;
    }

    .fa-chevron-down {
        font-size: 3em;
        padding-bottom:0px;
    }

    .captext {
        color: #f2f2f2;
        font-size: 8px;
        padding: 8px;
        position: absolute;
        bottom: 8px;
        width: 80vw; /* Adjust as needed */
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        font-weight: 700; /* Bold (700) variant */
    }
        
    .fa {
        padding: 20px;
        font-size: 30px;
        width: 30px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-bottom: 20px;
    }


    
}

/* Style for responsive images */
.responsive-image {
    max-width: 100%;
    height: auto;
}

/* Style all font awesome icons */
.fa {
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;

}

.fa-brands {
    padding: 20px 25px 20px 15px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}
  
/* Add a hover effect if you want */
.fa:hover {
    opacity: 0.7;
}

.fa:hover {
    opacity: 0.7;
}
  
/* Set a specific color for each brand */
  
/* Facebook */
.fa-facebook {
    background: #3B5998;
    color: white;
}
  
/* Insta */
.fa-instagram {
    background: #ab01ed;
    color: white;
} 

/* Youtube */
.fa-youtube {
    background: #fe0000;
    color: white;
}

/* Linkedin */
.fa-linkedin {
    background: #007bb6;
    color: white;
} 

/* Discord */
.fa-discord {
    background: #5165f6;
    color: white;
} 

/* Style the slideshow container */
.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

/* Hide the dots (slide indicators) */
.dot {
    display: none;
}

/* Style the container for the image and buttons */
.recipe-image-container {
    position: relative;
    height: auto; /* Set the height to match the image height */
}

.prev, .next {
    position: absolute;
    top: 50%; /* Vertically center the buttons within the container */
    transform: translateY(-50%); /* Adjust for vertical centering */
    background-color: rgba(54, 176, 20, 0.6); /* Adjust the background color and opacity */
    color: white; /* Text color for the buttons */
    font-size: 24px; /* Adjust the font size */
    padding: 10px; /* Adjust padding for the buttons */
    cursor: pointer;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}


/* On hover, add a black background color with a little bit of transparency */
.prev:hover, .next:hover {
    background-color: rgba(45, 149, 16, 1);
}

/* Caption text */
.captext {
    color: #f2f2f2;
    font-size: 30px;
    padding: 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    font-weight: 700; /* Bold (700) variant */
  }

/* Form and Policy */
.contact-container {
    display: flex;
    flex-wrap: wrap; /* Allow flex items to wrap to the next line if needed */
}

.contact-form {
    flex: 1; /* Take up the entire available width */
    margin-right: 20px; /* Add some spacing between form and policy */
    min-width: 300px; /* Set a minimum width to avoid excessive shrinking */
}

.privacy-policy {
    flex: 1; /* Take up the entire available width */
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #ddd;
    max-height: 400px; /* Limit the height */
    overflow-y: auto; /* Add a scroll bar when content exceeds the height */
    min-width: 300px; /* Set a minimum width to avoid excessive shrinking */
}

.submit-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700; /* Bold (700) variant */
}

.social-media-container {
    text-align: center;
}

.fa-beat-fade {
    -webkit-animation: fa-beat-fade 4s infinite linear !important;
    animation: fa-beat-fade 4s infinite linear !important;
   }

.fa-beat {
    -webkit-animation: fa-beat 2.5s infinite linear !important;
    animation: fa-beat 2.5s infinite linear !important;
   }

details > summary {
    padding: 4px;
    width: 100%;
    border: none;
    cursor: pointer;
    list-style: none;
    font-weight: 600; /* Semibold (600) variant */
  }
  
details summary::-webkit-details-marker {
    display: none;
  }

  details > p {
    background-color: #f9f9f9;
    padding: 10px;
    margin: 0;
    box-shadow: 1px 1px 2px #bbbbbb;
  }

  details summary::before {
    content: "\f4d8"; /* Unicode for the Font Awesome icon you want to use */
    font-family: "Font Awesome 6 Free"; /* Font Awesome font family */
    margin-right: 10px; /* Adjust the spacing between the icon and text */
  }

  /* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 18px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    font-weight: 600; /* Semibold (600) variant */
  }

.recipe-caption {
    font-weight: 600;
}

.customers {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* full width on PC */
  gap: 24px;
  align-items: center;
}

.customer {
  aspect-ratio: 1 / 1;           /* equal box for every logo */
  display: flex;
  align-items: center;
  justify-content: center;
}

.customer img {
  width: 100%;
  height: 100%;
  object-fit: contain;           /* no distortion */
  border-radius: 8px;
}

/* wrap on smaller screens */
@media (max-width: 900px) {
  .customers { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .customers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .customers { grid-template-columns: 1fr; }
}