@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Ubuntu:wght@700&display=swap');


/* 
    font-family: 'Open Sans', sans-serif; pargraph
    font-family: 'Ubuntu', sans-serif; Heading */
:root {
    --color1: #32502e;
    --color2: #406343;
    --color3: #ECE7B4;
    --color4: #F3EFCC;
}

/*Navbar*/
.navbar {
    transition: all 0.5s;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(2px);
}

.navbar-brand h3 {
    color: white;
}

.navbar .navbar-nav .nav-item a {
    color: white;
}

.navbar .navbar-nav .nav-item .active {
    color: var(--color4);
}

.navbar-scrolled {
    background-color: var(--color2);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--color3) !important;
    transition: color 0.3s ease-in-out;
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--color3) !important;
    transition: color 0.3s ease-in-out;
}

.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

.navbar .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 1);
}

/*End of Navbar*/
/* Offcanvas */
#offcanvasNav {
    background-color: var(--color2);
}

.nav-canvas {
    text-align: start;
    max-height: max-content;
    margin: 50% 0% 0% 0%;
}

.link-canvas h1 {
    color: white;
    font-size: 40px;
    margin: 30px 0px 4dvh 0px;
    transition: color 0.3s ease-in-out;
}

.nav-canvas a {
    text-decoration: none;
}

.link-canvas h1:hover {
    color: var(--color3) !important;
}
/* End of offcanvas */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Ubuntu', sans-serif;
}


html,
body {
    max-width: 100%;
    overflow-x: hidden;
    /* background-color: var(--color4) !important; */
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    line-height: 24px;
}


/*BG on index*/
.homehead {
    background-size: cover;
    min-height: 100vh;
    position: relative;
    color: white;
    /* text-shadow: 2px 2px 2px rgba(0,0,0,.2); */
}

.homehead-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
}

.homehead-overlay h1 {
    font-size: 20ex;
    color: var(--color3);
}

.homehead-overlay h5 {
    font-size: 20px;
    font-family: 'Ubuntu', sans-serif !important;
}


ul {
    list-style-type: none;
}

/*End Section of BG on index*/

/*Hero on index*/
.homehead {
    background-size: cover;
    min-height: 100vh;
    position: relative;
    color: white;
    /* text-shadow: 2px 2px 2px rgba(0,0,0,.2); */
}

.homehead-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
}

.homehead-overlay h1 {
    font-size: 10dvw;
    color: var(--color3);
}

.homehead-overlay h5 {
    font-size: 3dvh;
}

/*End Section of Hero on index*/

.img-rest {
    width: 100%;
    height: 17cm;
    object-fit: cover;
}

.img-rest-2 {
    width: 100%;
    height: 17cm;
    object-fit: cover;
    margin-top: 50px;
}

.welcome-index {
    font-size: 48px;
    border-left: 7px solid var(--color2);
    padding-left: 10px;
    line-height: 48px;
}

.desk {
    width: 50%;
}

.c-item {
    height: 18cm;
}

.c-img {
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
}

/* Phone Style */
@media (max-width: 799px) {
    .navbar {
        background-color: var(--color2);
    }

    .welcome-index {
        font-size: 45px;
    }

    .img-rest {
        width: 4cm;
        height: 10cm;
    }

    .img-rest-2 {
        width: 4cm;
        height: 10cm;
        margin-top: 0px;
    }

    .homehead {
        min-height: 80vh;
    }

    .desk {
        width: 100%;
    }

    .homehead-overlay h1 {
        font-size: 15dvw;
    }

    .homehead-overlay h5 {
        font-size: 3.80dvw;
    }

}

/* start of large tablet styles */
@media screen and (min-width: 800px) and (max-width: 1080px) {
    .img-rest {
        width: 4cm;
        height: 17cm;
    }

    .img-rest-2 {
        width: 4cm;
        height: 17cm;
        margin-top: 50px;
    }

    .welcome-index {
        font-size: 55px;
    }

    .homehead-overlay h1 {
        font-size: 110px;
    }

    .homehead-overlay h5 {
        font-size: 18px;
    }

}


/*Carousel recomendation*/



/* heading bg*/
.abouthead {
    background-size: cover;
    margin-top: 60px;
    height: 85dvh;
    position: relative;
    color: white;
    /* text-shadow: 2px 2px 2px rgba(0,0,0,.2); */
}

.abouthead-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
}

.abouthead-overlay h1 {
    font-size: 5dvw;
    color: var(--color3);
}

@media (max-width: 799px) {
    .abouthead {
        height: 60dvh;
    }

    .abouthead-overlay h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: calc(1.525rem + 5.3vw);
    }

    .nav-colorfirst .nav-item a {
        color: white;
        font-size: 30px;
    }
    
    .nav-colorfirst .nav-item a:hover {
        color: var(--color3);
        transition: color 1s ease;
    }
    
    .nav-colorfirst .nav-item a.active {
        color: var(--color4);
        font-size: 30px;
        transition: all 1s;
        text-decoration: underline;
    }
}

/* start of large tablet styles */
@media screen and (min-width: 800px) and (max-width: 1080px) {
    .abouthead {
        height: 40dvh;
    }
    .abouthead-overlay h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: calc(1.525rem + 4.3vw);
    }
    .nav-colorfirst .nav-item a {
        color: white;
        font-size: 30px;
    }
    
    .nav-colorfirst .nav-item a:hover {
        color: var(--color3);
        transition: color 1s ease;
    }
    
    .nav-colorfirst .nav-item a.active {
        color: var(--color4);
        font-size: 30px;
        transition: all 1s;
        text-decoration: underline;
    }
}

/* End of heading bg */

/* Plans Card */
.card-plan {
    border-radius: 2px;
    outline-width: 100px;
    padding: 20px 20px;
    outline: .5px solid black;
    height: 35cm;
    background-color: var(--color2);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.card-plan p {
    color: white;
    font-size: 20px;
}

.card-plan h1,
.card-plan h3 {
    color: var(--color3);
}

.title-plan {
    font-size: 6.1dvh;
}

.goal-container {
    margin-top: 10px;
}

.img-plans {
    align-self: center;
    border-radius: 50%;
    width: 6cm;
    height: 6cm;
    object-fit: cover;
}
/* Phone Style */
@media (max-width: 799px) {
}

/* start of large tablet styles */
@media screen and (min-width: 800px) and (max-width: 1080px) {
    .img-plans {
        width: 3.5cm;
        height: 4cm;
    }
    .card-plan{
        height: 50cm;
    }
}

/* End of plan */

.image-container {
    position: relative;
}

.img-category {
    width: 5cm;
    height: 2cm;
    object-fit: cover;
    border-radius: 5px;
    filter: grayscale(100%);
}

.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Background color for the text overlay */
    color: white;
    /* Text color */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
    transition: background .5s ease, transform .2s ease;
}

.nav-link.active .image-container img {
    filter: grayscale(0%);
    transform: scale(1.1);
}

.nav-link.active .text-overlay {
    background: rgba(0, 0, 0, 0.4);
    /* Make the background transparent when selected */
    transform: scale(1.1);
    /* Optional: Enlarge the text overlay slightly when selected */
}

.nav-link.active .text-overlay h1 {
    color: var(--color3);
}

.text-overlay h1 {
    transition: color 0.3s ease;
    /* Add a color transition */
    font-size: 40px;
}

.text-overlay h1:hover {
    color: var(--color3) !important;
}

.btn-color {
    background-color: var(--color2);
}

/* menu card */
.food-card img {
    height: 10cm;
    width: 100%;
    object-fit: cover;
    border-radius: 0px;
}
.card.food-card{
    border-radius: 0cm;
    height: 100%;
    /* border: 0px; */
}
.card.food-card .card-body .card-title{
    height: 10dvh;
    margin-bottom: 40px;
    text-align: center;
    line-height: 38px;
    display: block;
}

/* Phone Style */
@media (max-width: 799px) {
    .card.food-card .card-body .card-title{
        height: 2dvh;
    }
    .food-card img {
        height: 6cm;
    }
}

/* start of large tablet styles */
@media screen and (min-width: 800px) and (max-width: 1080px) {
    .card.food-card .card-body .card-title{
        height: 4dvh;
    }

    
}

/*Tabs on Category*/
.nav-colorfirst .nav-item a {
    color: white;
    font-size: 30px;
}

.nav-colorfirst .nav-item a:hover {
    color: var(--color3);
    transition: color 1s ease;
}

.nav-colorfirst .nav-item a.active {
    color: var(--color4);
    font-size: 30px;
    transition: all 1s;
    text-decoration: underline;
}

/* about us */
.commit-bg {
    background-size: cover;
    width: 100%;
    min-height: 62dvh;
    position: relative;
    color: white;
    /* text-shadow: 2px 2px 2px rgba(0,0,0,.2); */
}

.abouttext{
    text-align: justify;
}

.comit-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
}

.grey-line {
    background-color: #ccc;
    height: 2px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.commit-card {
    width: 100%;
    min-height: 20cm;
    padding: 20px 0px 20px 0px;
    /* box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; */
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack child elements vertically */
}
.commit-card p{
    flex-grow: 1;
    font-size: 18px;
    text-align: justify;
    line-height: 28px !important;
}

.commit-title {
    margin-top: 12px;
    line-height: 32px;
}

.commit-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}


/* End of about us */
/*End of tabs*/

.contact-icon {
    font-size: 30px;
    color: var(--color2);
}

/*Footer*/
.footer {
    color: white;
    background-color: var(--color2);
}

.social {
    color: white;
}

.food{
    display:flex;
    flex-direction:column;
    width:400px;
    margin-bottom:60px;
  }
  .food>div{
    box-shadow:0 15px 20px 0 rgba(0,0,0,0.5);
  }
  .food-image{
    width:400px;
    height:250px;
  }
  .food-image>img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:bottom;
  }
  .food-text{
    margin:-20px auto;
    margin-bottom:-20px;
    height:auto;
    width:300px;
    background-color:var(--color2);
    color:#fff;
    padding:20px;
  }
  .food-meal-type{
    font-style:italic;
  }
  .food-title{
    font-size:2.2rem;
    margin-bottom:20px;
    margin-top:5px;
  }
  .food-body{
    font-size:16px;
  }
  .food-price{
    width:100px;
    height:100px;
    background-color:var(--color3);
    color:#fff;
    margin-left:auto;
    font-size:2rem;
    display:flex;
    justify-content:center;
    align-items:center;
  }