body {
    background-color: #f8f9fa;
}
.modalbg-lightgray {
    background-color: #f8f9fa;
}
.nav-link {
    color: #b22228;
    font-weight: 600;
    font-size: 16px;
}
    .nav-link:hover {
        color: #000000;
        background-color: #f8f9fa;
        border-radius: 24px;
    }
        .active {
            color: #ffffff;
            background-color: #b22228;
            border-radius: 24px;
        }
.offcanvas-title {
    color: #b22228;
    font-weight: 700;
    font-size: 24px;
    text-align:center;
    margin-left:25%;
}
.page-title {
    margin-top: 0px;
}
.scrollablediv {
    margin-top: 0px;
    overflow: auto;
    height: 100vh
}
.fbmenuscrollablediv {
    margin-top: 0px;
    margin-left: 0;
    margin-right: 0;
    overflow: auto;
    height: 80vh;
}
.rightmediadiv {
    display: block;
}
.divbgpic1 {
    height: 99vh;
    min-height: 680px;
    background-image: url('../images/menu/mix_gyro_plate.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.divbgpic2 {
    height: 99vh;
    min-height: 680px;
    background-image: url('../images/menu/Beef_Gyro_Sandwich.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.8s ease-in-out; /* Smooth transition */
}
.divbgpic3 {
    height: 99vh;
    min-height: 680px;
    background-image: url('../images/menu/Beef_Gyro_Wrap.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.pgheader {
    color: #b22228;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom:30px;
    margin-left:20px;
}
.redheader {
    color: #b22228;
    font-weight: 700;
}
.blacklink {
    color: #000000;
    font-weight: 600;
}
.redlink {
    color: #b22228;
    font-weight: 400;
}
.btn-outline-red {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #b22228;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-color: #b22228;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-hover-border-color: #b22228;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #b22228;
    --bs-btn-active-bg: #b22228;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-gradient: none;
}
.make-button:hover {
    cursor: pointer;
}
.menu-card {
    margin-top: 15px;
    margin-bottom: 15px;
}
.menu-category {
    color: #b22228;
    font-weight: 600;
    margin-top: 20px;
}
.menu-item {
    color: #444444;
    font-weight: 700;
    font-size:17px;
}
.menu-description {
  font-style:italic;
  color:#666666;
}

.accordion {
    --bs-accordion-border-color: #000000;
    --bs-accordion-btn-color: #b22228;
    --bs-accordion-btn-focus-box-shadow: #b22228;
    --bs-accordion-active-color: #ffffff;
    --bs-accordion-active-bg: #b22228;
}
        
/* Make sidebar persistent on large screens and overlay on mobile */
@media (min-width: 992px) {
    .sidebar {
        width: 250px;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
    }
    /* Push main content to the right on large screens */
    main {
        margin-left: 250px;
    }
}
@media (max-width: 768px) {
    .scrollablediv {
        margin-top: 0px;
        overflow: revert;
    }
    .rightmediadiv {
        display:none;
    }
    .page-title {
        margin-top: 120px;
    }
    .fbmenuscrollablediv {
        margin-top: 0px;
        overflow: revert;
    }
}