.navbar.navbar-expand-lg.bg-body-tertiary  {
    padding-top: 3vh;
    padding-bottom: 3vh;
}

.hero-container {
    padding: 30px 10px 100px 10px
}

.hero-header {
    font-size: 3em;
}

.hero-subheader {
    font-size: 1.2em;
}

.home-cards {
    height: 30vh;
}

.recommend-col-vertical {
    height: 35vh;
    background-size: cover;
    background-position: center center;
    border-radius: 15px;
}

.recommend-col-vertical p {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.recommend-col-vertical h3 {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}


.recommend-col-vertical-condensed {
    height: 20vh;
    background-size: cover;
    background-position: center center;
    border-radius: 15px;
}

.recommend-col-vertical-condensed p {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.recommend-col-vertical-condensed h3 {
    color: white;
    font-size: 1.2rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

@media (max-width: 992px) {
    .recommend-col-horizontal {
        height: 50vh;
        background-size: cover;
        background-position: center center;
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 15px;
    }
    .tile-link-recommend-col-horizontal {
        text-decoration: none; 
        width: 75vw !important;
    }
    .recipe-tile-horizontal {
        height: 90%;
    }
    .recipe-tile-horizontal p {
        color: white;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Adjust the values as needed */
    }
    .recipe-tile-horizontal h3 {
        color: white;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Adjust the values as needed */
    }
}

@media (min-width: 992px){
    .recommend-col-horizontal {
        height: 50vh;
        background-size: cover;
        background-position: center center;
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 15px;
    }
    .tile-link-recommend-col-horizontal {
        text-decoration: none; 
        width: 27vw !important;
    }
    .recipe-tile-horizontal {
        height: 90%;
    }
    .recipe-tile-horizontal p {
        color: white;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Adjust the values as needed */
    }
    .recipe-tile-horizontal h3 {
        color: white;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Adjust the values as needed */
    }

    .reco-horiz-container {
        position: relative;
    }

    #btn-next-reco-horiz, #btn-prev-reco-horiz {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: #ffffff; /* Light background for a clean look */
        color: #007bff; /* Bootstrap primary color for consistency */
        border: none;
        border-radius: 50%; /* Circular shape */
        width: 40px; /* Adjust size as needed */
        height: 40px; /* Adjust size as needed */
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow for depth */
        z-index: 2; /* Ensure arrows are above other content */
    }
    
    #btn-next-reco-horiz {
        right: 0;
    }
    
    #btn-prev-reco-horiz {
        display: none;
        left: 0;
    }

    #btn-prev-reco-horiz:hover, #btn-next-reco-horiz:hover {
        background-color: #007bff; /* Darker or different color on hover */
        color: #ffffff;
    }
    
    #btn-prev-reco-horiz:hover::before, #btn-next-reco-horiz:hover::before {
        border-color: #ffffff; /* Arrow color change on hover */
    }
}


.custom-rounded {
    border-radius: 15px; /* adjust the value as per your design */
    overflow: hidden; /* to ensure content doesn't overflow outside the rounded corners */
}

.categories-col {
    border: 1px solid #ddd;
    padding: 15px;
    margin: 10px;
    border-radius: 15px
}

.categories-tile {
    width: 40vw;
}

.overflow-auto {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.clickable-tile {
    /* border: 1px solid #002156; */
    background-color: white;
    padding: 15px;
    margin: 10px;
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);  /* x-offset, y-offset, blur-radius, color */
}
.clickable-tile h3 {
    color: #002156;
}

.previews-tile-wrapper {
    height: 50vh;
    background-size: cover;
    background-position: center center;
    border: 1px solid #ddd;
    padding: 15px;
    margin: 10px;
    border-radius: 15px
}
.previews-tile h3 {
    color: white;
}
.previews-tile p {
    color: white;
}

.tile-links {
    text-decoration: none;
    color: black
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: rgb(111, 161, 255)!important;
}

.nav-tabs .nav-link {
    color: rgb(72, 72, 72);
}

@media (max-width: 992px) {
    .rounded-tile {
        border-radius: 10px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1),
                0 4px 6px -2px rgba(0, 0, 0, 0.2);
        padding: 10px 5px 0px 5px;
        background-color: white;
        margin: 10px 0px 10px;
        display: flex;
        justify-content: space-between; /* This spreads out the child elements */
        align-items: center;
        width: 50vw;
      }
    .rounded-tile img {
        margin-left: auto; /* Ensures the image stays on the right */
        border-radius: 69%;
        margin-right: 20px;
        margin-bottom: 7px;
        width: 30%;
        height: 30%; 
      }
    .rounded-tile p {
        margin-right: auto; /* Ensures the paragraph stays on the left */
        margin-left: 20px;
        margin-top: 8px;
    }
}

/* makes sure the prev/next buttons do not ever show up on mobile, per bug */
#btn-next-category-tiles, #btn-prev-category-tiles {
    display: none;
}

/* Category tiles styling for desktop */
@media (min-width: 992px) {
    .rounded-tile {
        border-radius: 10px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1),
                0 4px 6px -2px rgba(0, 0, 0, 0.2);
        padding: 10px 5px 0px 5px;
        background-color: white;
        margin: 10px 0px 10px;
        display: flex;
        justify-content: space-between; /* This spreads out the child elements */
        align-items: center;
        width: 20vw;
      }
    .rounded-tile img {
        margin-left: auto; /* Ensures the image stays on the right */
        border-radius: 69%;
        margin-right: 20px;
        margin-bottom: 7px;
        width: 30%;
        height: 30%; 
      }
    .rounded-tile p {
        margin-right: auto; /* Ensures the paragraph stays on the left */
        margin-left: 20px;
        margin-top: 8px;
    }
    .category-tiles-container {
        position: relative
    }
    #btn-next-category-tiles, #btn-prev-category-tiles {

        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: #ffffff; /* Light background for a clean look */
        color: #007bff; /* Bootstrap primary color for consistency */
        border: none;
        border-radius: 50%; /* Circular shape */
        width: 40px; /* Adjust size as needed */
        height: 40px; /* Adjust size as needed */
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow for depth */
        z-index: 2; /* Ensure arrows are above other content */
    }
    
    #btn-next-category-tiles {
        display: block;
        right: 0;
    }
    
    #btn-prev-category-tiles {
        display: none;
        left: 0;
    }

    #btn-prev-category-tiles:hover, #btn-next-category-tiles:hover {
        background-color: #007bff; /* Darker or different color on hover */
        color: #ffffff;
    }
    
    #btn-prev-category-tiles:hover::before, #btn-next-category-tiles:hover::before {
        border-color: #ffffff; /* Arrow color change on hover */
    }
}

/* Only show scroll left and right buttons on desktop */
@media (max-width: 992px) {
    .btn-next, .btm-prev {
        display: none
    }
}

.rounded-tile-category-pages {
    border-radius: 10px;
    padding: 17px 5px 5px 5px;
    background-color: white;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between; /* This spreads out the child elements */
    align-items: center;
  }

  .rounded-tile-category-pages img {
    margin-left: auto; /* Ensures the image stays on the right */
    border-radius: 69%;
    margin-right: 20px;
    margin-bottom: 7px;
    width: 20%;
    height: 20%; 
  }

  .rounded-tile-category-pages p {
    margin-right: auto; /* Ensures the paragraph stays on the left */
    margin-left: 30px;
    margin-top: 8px;
  }

.card-box-shadow {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.meal-plan-graphic-container {
    background-image: url('/static/cuisine/pics/meal_plan_graphic.png');
    background-size: cover;
    background-position: center
}

.no-auth-hp-container {
    padding-top: 60px
}


.block-content-child {
    margin-top: 100px;
    margin-bottom: 50px
}

@media (max-width: 992px) {
    .block-content {
      margin: auto;
      width: 95%;
    }
  }


@media (min-width: 992px) {
    .block-content {
      margin: auto;
      width: 55%;
    }
  }


@media (min-width: 992px) {
    .main-nav {
        margin: auto;
        width: 65% !important;
    }
  }

  .main-nav-links {
    color: black !important;
  }