/*
*{
border: 1px solid #2ac75f;
}
*/
/*  
*::after {
content: attr(class);
display: inline-block;
background-color: #333;
color: #fff;
padding: 2px 4px;
margin-left: 5px;
font-size: 12px;
font-family: Arial, sans-serif;
}
*/


/* Define styles for the container div */
.heroPicture {
position: relative;
text-align: center;
background-color: rgba(255, 255, 255, 0.5); /* Light semi-transparent white */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow */
color: rgb(255, 255, 255);
margin-bottom: 10%;
}
.breadcrumb{
position: absolute;
top: 8vh;
left: 50%;
transform: translateX(-50%);
}

/* Style for the blurred image */
.background-image {
background-image: url(''); /* Replace 'your-image.jpg' with the URL or path to your image */
filter: blur(5px); /* Adjust the blur level as needed */
height: 36vh; /* Adjust the height as needed */
background-size: cover;
background-position: center;
height: 36vh;
}

/* Style for the restaurant name */
.restaurant-name {
position: absolute;
top: 14vh;
left: 50%;
transform: translateX(-50%);
font-size: 40px;
font-weight: bold;
}

/* Style for the restaurant description */
.description {
font-weight: bold;
position: absolute;
top: 26vh;
width: 70%; /* Allow 20% margin */
margin-left: 15%;
}


.shell {
    width: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    margin-top:5%;
    margin-bottom:5%;
}

.blog-posts {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping to the next row */
    align-items: center; /* Align items vertically in the middle */
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide the scrollbar in Firefox */
    -ms-overflow-style: none; /* Hide the scrollbar in IE/Edge */
    margin-top: 3%;/* geet distance from text above */
    width: 80%; /* Allow 20% margin */
    margin-left: 10%;
}

.blog-post {
    flex: 0 0 calc(33.33%); /* 3 posts per row with a 2% gap */
    display: flex;
    flex-direction: column; /* Allow text to wrap below */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text within the post */
    scroll-snap-align: start;
 /* These 2 allow text to not displace image in the carousel */
    height: 18vh;
    overflow: visible;
}

.blog-post img {
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
    margin-bottom: 10px; /* Add space between image and text */
}

.blog-post h3 {
    width: 10vh;
    text-align: center;
}