@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Allison&family=Bebas+Neue&family=Fenix&family=Fleur+De+Leah&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Lavishly+Yours&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Pacifico&family=Permanent+Marker&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Allison&family=Bebas+Neue&family=Fenix&family=Fleur+De+Leah&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Lavishly+Yours&family=Monoton&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Pacifico&family=Permanent+Marker&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

* {
        letter-spacing: .03rem;
        color: var(--black-market);
        font-family: "Rubik", sans-serif;
        /* border: 2px solid red; */
}

/* basic styling */
li {
        list-style: none;
}

a {
        text-decoration: none;
}

img {
        max-width: 100%;
        height: auto;
        object-fit: cover;
        transition: .3s ease-in-out;
}

.mb-md {
        margin-bottom: 1.8rem;
}

.pt-60 {
        padding-top: 3.75rem;
}

.mb-lg {
        margin-bottom: 3.75rem;
}

.pb-60 {
        padding-bottom: 3.75rem;
}

.pb-90 {
        padding-bottom: 5.6rem;
}

.p-block-60 {
        padding-block: 3.75rem;
}

:root {
        --white: #fff;
        --black-market: #231e41;
        --light-black-market: #6f6f87;
        --saffaron: #f5c332;
        --dark-gray: #f2f3f5;
        --light-gray: #f9fafc;
}

/* scroll bar */
::-webkit-scrollbar {
        width: .3rem;
}

::-webkit-scrollbar-thumb {
        background: var(--saffaron);
        border-radius: 100vw;
}

::-webkit-scrollbar-track {
        background: var(--light-gray);
}

/* navbar styling  */
.navbar {
        background: rgba(255, 255, 255, .92);
        height: 7.5rem;
        border-color: var(--dark-gray);
        border-width: .063rem 0 .063rem 0;
        border-style: solid;
        /* backdrop-filter: blur(8px); */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000 !important;
}

.navbar-brand {
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--black-market);
}

.fa-bowl-food,
.active,
.nav-link:hover {
        color: var(--saffaron) !important;
}

.nav-link {
        color: var(--black-market);
        font-size: .9rem;
        /* text-transform: uppercase; */
}

.nav-item {
        padding-inline: 1.5rem;
}

.nav-icons a {
        font-size: 1.2rem;
        padding-inline: .5rem;
}

.nav-icons i:hover {
        color: var(--saffaron);
}

.nav-icons .fa-bag-shopping {
        font-size: 1.1rem;
        background: var(--dark-gray);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
}

/* section styling */
.hero {
        margin-top: 3rem;
        position: relative;
}

.hero::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 90vh;
        background: var(--light-gray);
        z-index: -1;
        clip-path: polygon(100% 0, 1% 100%, 100% 100%);
}

.hero-content {
        padding-top: 3.3rem;
}

.sub-title {
        display: inline-block;
        padding: .12rem .31rem;
        font-size: .75rem;
        font-weight: 400;
        background: var(--dark-gray);
}

.heading {
        font-size: 4.5rem;
        letter-spacing: -.18rem;
        font-weight: 600;
        line-height: 100%;
}

.para {
        font-size: 1rem;
        color: var(--light-black-market);
}

.hero .btn {
        padding: .8rem 1.5rem;
        background-color: var(--saffaron);
        border-radius: 0;
        font-weight: 500;
        letter-spacing: 0;
}

.hero .btn:hover {
        background-color: #ffd148;
}

.heading span {
        background: var(--light-gray);
        letter-spacing: inherit;
}

.hero-img {
        height: calc(100vh - 9.5rem);
        width: 100%;
        /* background: green; */
        overflow: hidden;
        border-radius: 0 0 100vw 100vw;
        box-shadow: 0 8px 8px -9px rgba(0, 0, 0, .4);
}

.interior-frame {
        padding-bottom: 120%;
        width: 100%;
        background: var(--light-gray);
        margin-bottom: 5.6rem;
        position: relative;
}

.sub-interior {
        position: absolute;
        z-index: 2;
        width: 80%;
        height: 90%;
        bottom: 10%;
        left: 0;
        overflow: hidden;
}

.sub-interior img {
        width: 100%;
        height: 100%;
        margin-top: 50px;
        object-fit: cover;
}

h2 {
        font-size: 4rem;
        font-weight: bold;
        letter-spacing: rem;
}

/* .feature-item{
        display: flex;
} */
.number {
        min-width: 3.87rem;
        font-size: 2.62rem;
        line-height: 2.5rem;
        color: var(--saffaron);
        font-family: "Monoton", sans-serif;
        margin-right: 1.87rem;
}

h3 {
        font-size: 1.37rem;
        letter-spacing: -.06rem;
        font-weight: 600;
        line-height: 120%;
}

ul {
        margin: 0;
        padding: 0;
}

.mb-sm {
        margin-bottom: .93rem;
}

.exp {
        position: absolute;
        z-index: 3;
        background: var(--white);
        bottom: 0;
        right: 10%;
        padding: 1.87rem;
        box-shadow: 6px 6px 8px -6px rgba(0, 0, 0, .1);
        text-align: center;
}

.exp-content {
        padding: .100rem;
        border: .18rem dotted var(--dark-gray);
}

.exp-num {
        font-family: "Monoton", sans-serif;
        font-size: 4rem;
        line-height: 100%;
        letter-spacing: -.18rem;
        font-weight: 500;
        margin-bottom: .62rem;
}

.exp-text {
        font-size: 1.37rem;
        letter-spacing: -.06rem;
        font-weight: 600;
        line-height: 120%;
}

h2 span {
        background: var(--light-gray);
        letter-spacing: inherit;
}

.container .btn {
        padding: .8rem 1.5rem;
        background-color: var(--saffaron);
        border-radius: 0;
        font-weight: 500;
        letter-spacing: 0;
}

.container .btn:hover {
        background-color: #ffd148;
}

.category {
        display: block;
        box-shadow: 0 0 0 2px var(--white);
}

.card-body {
        display: flex;
        align-items: center;
        background: var(--light-gray);
        /* padding: 100%; */
}

.card-icon {
        width: 4.37rem;
        height: 4.37rem;
        margin-left: 20px;
        position: relative;
        isolation: isolate;
}

.card-icon::before {
        content: "";
        position: absolute;
        background: var(--saffaron);
        width: 1.87rem;
        height: 1.87rem;
        border-radius: 50%;
        left: 15px;
        /* top: 40px; */
        bottom: -5px;
        z-index: -1;
        transition: .3s ease-in-out;
}

.category:hover .card-icon::before {
        transform: scale(1.2);
}

.category:hover .card-icon img {
        transform: translateY(-10px);
}

.card-icon img {
        width: 3.75rem;
}

.card-des {
        padding-left: 1.87rem;
        padding: 1.30rem;
}

.card .para {
        font-size: .93rem;
        color: var(--light-black-market);
        margin: 0;
}

.card-top {
        margin-bottom: .93rem;
        background: var(--dark-gray);
        padding-left: .93rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
}

.menu-item {
        text-decoration: none;
}

.title {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
        /* text-decoration: none; */
}

sub {
        font-size: .60rem;
        font-weight: 400;
        /* text-decoration: none; */
}

.price {
        width: 3.75rem;
        height: 3.75rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--saffaron);
        font-size: 1.5rem;
        font-weight: 500;
        /* text-decoration: none; */
}

.menu-para {
        margin-bottom: .93rem;
        font-size: 1rem;
        color: var(--light-black-market);
}

.sb-star li {
        text-align: center;
}

.fa-star {
        color: var(--saffaron);
        font-size: .875rem;
        margin-left: 20px;
}

.menu-item :hover img {
        transform: scale(1.05);
}

.menu-cover {
        overflow: hidden;
}

.member-frame {
        border: 2px solid var(--white);
        margin-bottom: .31rem;
        background: var(--light-gray);
        position: relative;
        isolation: isolate;
        overflow: hidden;
}

.member-frame::before {
        content: "";
        position: absolute;
        bottom: 15%;
        left: 15%;
        width: 70%;
        height: 57%;
        background: var(--saffaron);
        border-radius: 50%;
        box-shadow: 0 0 0 3px var(--saffaron);
        filter: blur(5px);
        z-index: -1;
        transition: all .3s ease-in-out;
}

.team-member:hover .member-frame::before {
        transform: scale(.9) translateY(-10%);
}

.team-member:hover .member-frame img {
        transform: scale(1.05) translateY(3%);
}

.social {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
}

.social li {
        margin-right: .93rem;
}

.social li i:hover {
        color: var(--saffaron);
}

.phone-app {
        position: relative;
        padding-bottom: 90%;
}

.mobile-app {
        position: absolute;
        width: 113%;
        height: 105%;
        right: -10%;
        top: 0;
}

.call-to-action {
        position: relative;
}

.call-to-action::before {
        content: "";
        position: absolute;
        top: 0;
        left: -12%;
        width: 80%;
        height: 100%;
        background: var(--light-gray);
        z-index: -1;
        border-left: 1.85rem solid var(--white);
}

.footer-frame {
        padding-block: 1.8rem;
}

.copy {
        font-size: .75rem;
        color: var(--light-black-market);
}















@media screen and (max-width:990px) {
        .navbar-collapse {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: calc(100vh-5.6rem);
                background: rgba(255, 255, 255, .92);
                padding-top: 2rem;
                margin-top: 5.6rem;
                z-index: 99;
                opacity: 0;
                pointer-events: none;
                transform: translateY(60px);
                transition: .3s ease-in-out;
        }

        .collapse {
                opacity: 1;
                pointer-events: all;
                transform: translateY(0px);
        }

        .navbar-nav {
                align-items: center;
                gap: 1rem;
        }

        .navbar {
                height: 5.6rem;
        }
}