/*Animations*/
.fadeinleft {
    opacity:0;
    transform: translateX(200px);
    transition: all 1.3s ease-out;
}

.fadeinright{
    opacity: 0;
    transform: translateX(-200px);
    transition: all 0.8s ease-out;
}

.fadeindown{
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1.2s ease-out;
}

.fade-in{
    opacity:0;
    transition: all 1.3s ease-in;
}

.active-left,.active,.active-right,.active-down{
    opacity:1;
    transform: translateX(0);
    transform: translateY(0);
}






















.scrolling-text-wrapper {
    display: inline-block; /* Allows text to be on one line */
    animation: scrollText 50s linear infinite; /* Adjust duration for speed */
    padding-right: 50px; /* Helps create a seamless loop transition */
}




@keyframes scrollText {
    from {
        transform: translateX(0%); /* Start at original position */
    }
    to {
        transform: translateX(-50%); /* Move half its duplicated width */
    }
}


.single-food-item-wrap:hover .food-item-name {
    color: #001C58;
}

@media (max-width: 768px) {
    .food-item-card-wrap {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        position: static !important;
        transform: none !important;
        width: 90%;
        margin: 15px auto !important;
        z-index: 1 !important; /* Ensure it's above any default z-index -1 */
    }
    /* Consider if you need to remove active class if JS adds it */
    .food-item-card-wrap.active {
        /* If the .active class is applied by JS, and you want it ignored on mobile,
           you might need to reset its properties here or ensure JS doesn't add it */
        /* For example, if .active was setting a different background: */
        background: initial !important;
    }
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .food-item-name {
        font-size: 3em;
    }
    .food-item-card-name {
        font-size: 2em;
    }
    .food-item-card {
        padding: 25px;
    }
    .food-item-details {
        font-size: 1em;
    }
    .banner-title {
        font-size: 160px;
    }
}

@media (max-width: 768px) {
    .food-item-name {
        font-size: 2em;
        padding: 0 15px;
    }
    .food-item-name-link {
        padding: 0 15px;
    }
    .single-food-item-wrap {
        padding: 15px 0;
    }
    .single-food-item-ticker,
    .scrolling-text-wrapper {
        display: none !important;
    }
    .food-item-absolate-wrap {
        position: static !important;
        height: auto !important;
        display: block !important;
        padding: 20px 0;
    }
    .food-item-card-wrap {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        position: static !important;
        transform: none !important;
        width: 90%;
        margin: 15px auto !important;
        z-index: 1 !important;
    }
    .food-item-card-name {
        font-size: 1.8em;
    }
    .banner-title {
        font-size: 160px;
    }
}

@media (max-width: 479px) {
    .food-item-name {
        font-size: 1.5em;
        padding: 0 10px;
    }
    .food-item-name-link {
        padding: 0 10px;
    }
    .food-item-card {
        padding: 20px;
    }
    .food-item-card-name {
        font-size: 1.5em;
    }
    .banner-title {
        font-size: 36px;
    }
}



.food-item-card-wrap {
    /* ... other positioning and size properties you like ... */
    opacity: 0;         /* Make it transparent */
    visibility: hidden; /* Hide from screen readers and interaction */
    pointer-events: none; /* Crucial: Allows clicks to pass through when hidden */
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease; /* For smooth show/hide */
    /* Ensure it's positioned correctly, e.g., absolute and centered if that's what you want */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centering */
    z-index: -1; /* Keep it behind other content when hidden */
}

/* This rule shows the card when the 'active' class is added by JavaScript */
.food-item-card-wrap.active {
    opacity: 1;         /* Make it fully visible */
    visibility: visible; /* Make it visible to screen readers and interaction */
    pointer-events: auto; /* Crucial: Allows interaction (e.g., clicking links inside the card) */
    z-index: 100;       /* Bring it to the front when active */
}




/* Navbar Link Spacing and Hover Effect */
.navbar-nav .nav-item {
    /* Add horizontal margin between list items for spacing */
    margin-right: 25px; /* Adjust this value as needed for more/less gap */
    margin-left: 25px;
}



/* Ensure nav-links have a default color if not already set by Bootstrap or inline style */
.navbar-nav .nav-link {
    color: #001C58; /* This color comes from your inline style on the <ul>.
                       It's good to define it here in CSS for consistency. */
    transition: color 0.3s ease-in-out; /* Smooth transition for the color change */
}

/* Hover effect: Change text color to light blue */
.navbar-nav .nav-link:hover {
    color: #47B6F1; /* Your desired hover color */
}

/* To maintain lightblue for the active link if Bootstrap applies the 'active' class */
.navbar-nav .nav-link.active {
    color: #47B6F1;
}



/* Navbar Link Spacing and Hover Effect (Keeping your existing settings) */
.navbar-nav .nav-item {
    margin-right: 25px; /* Adjust this value for more/less gap */
    margin-left: 25px;  /* Adjust this value for more/less gap */
}

.navbar-nav .nav-link {
    color: #001C58; /* Default text color for your links */
    transition: color 0.3s ease-in-out; /* Smooth transition for color change */
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #47B6F1; /* Text turns light blue on hover and for active link */
}








.animation-color-background {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%; 
    background-color: #001C58; 
    transform: translateY(0%); 
    transition: transform 1s ease-out; 
    z-index: 2; 
}




.reservation-image-wrap {
    transition: transform 0.6s ease;
}

.reservation-button-wrap {
    transition: transform 0.6s ease;
}

.reservation-title-flex {
    transition: transform 0.6s ease, filter 0.6s ease;
}




.testimonials-slide {
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}




















.menu-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    margin-bottom: 20px;
}  


@media (max-width: 1199.98px) {
    .navbar {
        height: auto !important;
        min-height: 100px;
    }
    
    .navbar-collapse {
        background-color: #F7F6F4;
        border-radius: 8px;
        margin-top: 10px;
        padding: 15px;
    }
    
    .language-flags {
        justify-content: center;
        margin-top: 15px;
    }
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:not(.collapsed) {
  border: none !important;
  box-shadow: none !important;
}








.section.about {
    position: relative; /* Needed for positioning the ticker */
    overflow: hidden; /* Hide overflowing parts of the ticker */
    /* Add padding/margin as needed for your layout */
}





.gallery-section {
    padding: 60px 0 40px 0;
    background: #F7F6F4;
}
.gallery-title {
    color: #001C58;
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.gallery-grid img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s;
}
.gallery-grid img:hover {
    transform: scale(1.04);
}




.contact-section {
    padding: 60px 0 40px 0;
    background: #F7F6F4;
}
.contact-title {
    color: #001C58;
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}
.contact-info {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 30px;
    margin-bottom: 30px;
}
.contact-form {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 30px;
}
.form-label {
    color: #001C58;
    font-weight: 500;
}

.get-in-touch-title{
   font-size: 4rem;;
}

/* Only for index-sq.html: Large screens banner title size */
@media (min-width: 992px) {
  body[data-page='index-sq'] .banner-title {
    font-size: 225px !important;
  }
}