@font-face {
    font-family: recharge;
    src: url(recharge_bd.ttf) format('truetype');
    font-weight: bold 400;
}
:root{
    --epd-green: #006631;
    --neutral-green: #c8e6c9;
}

.btn.bg-btn {
    background-color: var(--epd-green);
    border: none;
}
.btn.bg-btn:hover {
    background-color: #004d2d;
}
.btn.bg-btn:active {
    background-color: #003d1d;
}

/* Apply full width background to the container */
.bg-hero {
    background-color: var(--neutral-green); /* Neutral green, adjust as needed */
    width: 100vw; /* Ensure background stretches to the full width */
    margin-left: calc(-50vw + 50%); /* Remove any left margin */
    margin-right: calc(-50vw + 50%); /* Remove any right margin */
    padding: 0; /* Ensure no padding around the container */
  }
.col-md-6 img {
    max-height: 60%; /* Restrict the image height */
    object-fit: cover; /* Ensure the image covers the area without stretching */
    margin: 10px auto;
    display: block;
}
  
  /* Remove the default padding and margins of the container */
  .container-fluid {
    padding-left: 0;  /* Remove left padding */
    padding-right: 0; /* Remove right padding */
  }
  
  /* Remove default row gutter */
  .no-gutters {
    margin-right: 0;
    margin-left: 0;
  }
  
  /* Ensure that the image takes the full width of its container */
  .img-fluid {
    width: 100%;
  }  

nav {
    border-bottom: 8px double var(--epd-green);
}

body {
    font-family: 'Lato', sans-serif;
}

nav, h1,h2,h3 {
    font-family: 'recharge', 'Lato', sans-serif;
}

h1 {
    font-size: 3rem;
    text-align: center;
}

/* Home Page */
.receipt-style {
    background-color: #f9f9f9; /* Light gray background to simulate paper */
    border: 2px dashed #aaa; /* Dashed border to resemble receipt edges */
    padding: 1.5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                      linear-gradient(-45deg, #f0f0f0 25%, transparent 25%);
    background-size: 10px 10px; /* Adjust the size of the "texture" */
    background-position: 0 0, 5px 5px; /* Offset the texture for a grid-like effect */
}
  
.receipt-style h1, .receipt-style p {
margin: 0; /* Remove default margins for cleaner layout */
}

.receipt-style p {
    margin-top: 20px; /* Space between the text and button */
}  
@media (min-width: 768px) {
    .col-md-6 img {
        max-width: 90%;
    }
}
@media (max-width: 768px) {
    .receipt-style {
        margin-bottom: 2.5rem;
    }
}

.weekly h2 {
    text-align: center;
}

.weekly h3 {
    font-size: 1.5rem;
}

/* Carousel */
.carousel {
    padding: 2rem;
    overflow: hidden;
}
.carousel img {
    height: 100%;
    width: 100%;
    object-fit: cover; /* Ensures the images fit nicely within the container */
}

/* Menu Page */
.price {
    position: absolute;
    right: max(1rem, 5%);
    font-size: medium;
}

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

@media (min-width: 768px) {
    .side-price {
        display: block;
        font-size: medium;
    }
}
@media (max-width: 768px) {
    .side-price {
        display: block;
        right: max(1rem, 5%);
        font-size: medium;
    }
}

/* About Page */
.socials a {
    text-decoration: none;
}