html,body{
    background-image: url(../images/background.png);
    overflow-x: hidden;
    width: 100%;
    
}

.banner-head{
    font-family: Libre Baskerville;
    font-weight: 700;
    color: #4A010A;
}

.banner-subhead{
    font-family: Averia Serif Libre;
    
    font-weight: 700;
    color: #524617;
}
.container {
    max-width: 1200px;
    margin-top: 20px;
}




.banner-img {
    width: 190px;
    height: 190px;
    margin-top: -50%;
    border-radius: 55px;
    border: 2px solid #4A010A;
}

.banner-img2 {
    position: relative;
    width: 190px;
    height: 190px;
    margin-bottom: -50%;
    border: 2px solid #4A010A;
    border-radius: 55px;
}

.gourmet-descrpt{
    font-family: Lateef;
    font-weight: 700;
    color: #524617;
}

.img-fluid {
    height: 300px !important;
    object-fit: cover;
    border-radius: 55px;
    border: 2px solid #4A010A;
}

.instagram{
    margin-left: 46%;
    
}


/* Image Animation Keyframes */
@keyframes slideFromTop {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideFromBottom {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Frame Image Animation */


/* First Row Images - Slide from Top */
.banner-img {
    animation: slideFromTop 1s ease-out forwards;
    transition: all 0.9s ease;
    opacity: 1;
}

/* Second Row Images - Slide from Bottom */
.banner-img2 {
    animation: slideFromBottom 1s ease-out forwards;
    transition: all 0.9s ease;
    opacity: 1;
}

/* Staggered Animation Delays */
/* .col-3:nth-child(1) .banner-img,
.col-3:nth-child(1) .banner-img2 {
    animation-delay: 0.3s;
} */

/* .col-3:nth-child(2) .banner-img,
.col-3:nth-child(2) .banner-img2 {
    animation-delay: 0.6s;
}

.col-3:nth-child(3) .banner-img,
.col-3:nth-child(3) .banner-img2 {
    animation-delay: 0.9s;
} */

/* Hover Effects */
.banner-img:hover,
.banner-img2:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}


