/* ===========================
   GLOBAL SETTINGS
=========================== */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family: 'Poppins', sans-serif;
    color: #333;
    background: #fff;

}


h1,
h2,
h3,
h4 {

    font-family: 'Playfair Display', serif;

}


h2 {

    font-size: 42px;
    color: #1B4332;
    margin-bottom: 20px;

}


.section {

    padding: 90px 0;

}






/* ===========================
        NAVBAR
=========================== */

/* ===============================
   NAVBAR BRAND WITH LOGO
================================ */

.navbar-brand-container {

    display: flex;
    align-items: center;
    gap: 12px;

}


/* Logo */

.navbar-logo {

    width: 123px;
    height: 114px;
    border-radius: 50%;
}


/* Brand Text */

.navbar-brand {

    font-family: 'Playfair Display', serif;

    font-size: 28px;

    font-weight: 700;

    color: #D4AF37;

    text-decoration: none;

    letter-spacing: 1px;

    margin: 0;

    transition: 0.3s;

}



/* Hover Effect */

/* .navbar-brand-container:hover .navbar-logo {

    transform: rotate(5deg) scale(1.05);

} */


.navbar-brand:hover {

    color: #ffffff;

}






/* When navbar background changes */

.navbar.scrolled .navbar-brand {

    color: #1B4332;

}


.navbar.scrolled .navbar-brand:hover {

    color: #D4AF37;

}







/* Mobile Responsive */

@media(max-width:768px) {


    .navbar-logo {

        width: 45px;

        height: 45px;

    }


    .navbar-brand {

        font-size: 22px;

    }


    .navbar-brand-container {

        gap: 8px;

    }


}

.navbar {

    padding: 20px 0;
    transition: 0.4s;
    background: transparent;

}



.navbar.scrolled {

    background: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);

}



.navbar-brand {

    color: #D4AF37;
    font-size: 28px;
    font-weight: 700;

}


.nav-link {

    color: white;
    margin-left: 20px;
    font-weight: 500;
    transition: .3s;

}


.navbar.scrolled .nav-link {

    color: #1B4332;

}



.nav-link:hover {

    color: #D4AF37;

}



.btn-book {

    background: #D4AF37;
    color: white !important;
    padding: 10px 20px;
    border-radius: 30px;

}








/* ==========================
   HERO IMAGE SLIDER
========================== */


.hero {

    height: 100vh;

    position: relative;
    overflow: hidden;

}




.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item {

    height: 100%;

}



.hero-image {

    height: 100vh;

    object-fit: cover;

    filter: brightness(55%);

}




/* Fixed Text */


.hero-overlay {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 5;

}



.hero-overlay h1 {


    color: white;

    font-family: 'Playfair Display', serif;

    font-size: 90px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    animation: fadeIn 1.5s ease;


}




.hero-overlay p {

    color: white;

    font-size: 22px;

    margin-top: 20px;

}




@keyframes fadeIn {


    from {

        opacity: 0;

        transform: translateY(40px);

    }


    to {

        opacity: 1;

        transform: translateY(0);

    }


}






/* Mobile */


@media(max-width:768px) {


    .hero-overlay h1 {

        font-size: 45px;

    }


    .hero-overlay p {

        font-size: 16px;

    }


}


.main-btn,
.second-btn {

    padding: 15px 35px;
    border-radius: 30px;
    margin: 10px;
    transition: .3s;

}



.main-btn {

    background: #D4AF37;
    color: white;

}



.second-btn {

    border: 2px solid white;
    color: white;

}



.main-btn:hover,
.second-btn:hover {

    transform: translateY(-5px);
    background-color: #f2f3f2;
    color: black;

}








/* ===========================
        ABOUT
=========================== */


#about img {

    border-radius: 20px;

}



.features span {

    display: block;
    margin: 15px 0;
    color: #1B4332;
    font-weight: 500;

}



.features i {

    color: #D4AF37;
    margin-right: 10px;

}







/* ===========================
       TRIBAL CARDS
=========================== */


.cuisine-card {

    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, .1);

    transition: .4s;

}



.cuisine-card img {

    height: 260px;
    width: 100%;
    object-fit: cover;

}



.cuisine-card:hover {

    transform: translateY(-15px);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, .2);

}



.cuisine-card h4 {

    color: #1B4332;

}







/* ===========================
        MENU
=========================== */


.food-box {

    padding: 35px;
    border-radius: 20px;

    background: white;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .1);

    transition: .3s;

}



.food-box:hover {

    transform: scale(1.05);

}



.food-box h4 {

    color: #1B4332;

}



.food-box h5 {

    color: #D4AF37;
    font-size: 25px;

}








/* ===========================
        GALLERY
=========================== */


.gallery img {

    width: 100%;
    height: 300px;
    object-fit: cover;

    border-radius: 20px;

    transition: .4s;

}



.gallery img:hover {

    transform: scale(1.08);

}








/* ===========================
       RESERVATION
=========================== */


.booking {

    max-width: 700px;
    margin: auto;

    display: flex;
    flex-direction: column;
    gap: 20px;

}



.booking input {

    padding: 15px;

    border-radius: 10px;

    border: 1px solid #ddd;

    font-size: 16px;

}



.booking button {

    padding: 15px;

    border: none;

    border-radius: 30px;

    background: #1B4332;

    color: white;

    font-size: 18px;

    transition: .3s;

}



.booking button:hover {

    background: #D4AF37;

}







/* ===========================
        FOOTER
=========================== */


footer {

    /* background: #1B4332; */
    background: #3a300c;

    color: white;

    text-align: center;

    padding: 50px 20px;

}



footer h3 {

    color: #D4AF37;

    font-size: 35px;

}



footer i {

    font-size: 25px;

    margin: 15px;

    cursor: pointer;

    transition: .3s;

}



footer i:hover {

    color: #D4AF37;

}








/* ===========================
        ANIMATIONS
=========================== */


@keyframes fadeUp {

    from {

        opacity: 0;
        transform: translateY(40px);

    }


    to {

        opacity: 1;
        transform: translateY(0);

    }

}



.hero h1,
.hero p,
.hero a {

    animation: fadeUp 1s ease;

}








/* ===========================
        RESPONSIVE
=========================== */


@media(max-width:992px) {


    .hero h1 {

        font-size: 55px;

    }



    .navbar {

        background: white;

    }


    .nav-link {

        color: #1B4332;

    }


}





@media(max-width:576px) {


    .hero h1 {

        font-size: 40px;

    }



    .hero p {

        font-size: 16px;

    }



    h2 {

        font-size: 32px;

    }



    .section {

        padding: 60px 0;

    }


}