@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500;1,700&display=swap');



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

body {
    font-family: 'Roboto', sans-serif;
}

/* default html styling */
html {
    font-size: 62.5%;
}

a {
    font-size: 1.6rem;
    text-decoration: none;
}

p, li {
    font-size: 1.6rem;
    margin-bottom: 0.5em;
}

h1, h2, h3 {
    margin-bottom: 0.5em;
    font-weight: 700;
}

ul li {
    list-style: none;
}

/* ############# utility class ############# */

/* to center */
.container-center {
    display: block;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* for text color */
.text-black {
    color: black;
}

.text-white {
    color: #fff;
}

.text-gray {
    color: #666666;
}

.text-green {
    color: #117964;
}

/* for background */
.bg-green {
    background-color: rgb(19, 151, 122);
}

.bg-light-gray {
    background-color: #ededf3e7;
    /* background-color: #5e5e685d; */
}

.bg-dark-gray {
    background-color: #414141;
}

/* for fonts */
.lg-font {
    font-size: 3.2rem;
}

.md-font {
    font-size: 2.5rem;
}

.small-font {
    font-size: 2rem;
}

.normal-font {
    font-size: 1.6rem;
}

.extra-small-font {
    font-size: 1.2rem;
}

.btn {
    /* border: 2px solid red; */
    color: white;
    text-transform: uppercase;
    padding: 0.5em 1.5em;
    border-radius: 4rem;
    display: inline-block;
    margin-top: 0.5em;
}

.gold-star {
    color: #ff9529;
    font-size: 2rem;

}

/* ############# navigation styling ############# */
.up {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    z-index: 200;
}
.nav-right input[type="checkbox"],.nav-right .hamburger-lines{
    display: none;
}
.nav-bar {
    display: flex;
    justify-content: space-between;
}

.logo {
    margin: 0;
    margin: 0.5em 0;
}

.nav-bar .nav-right {
    width: 50%;

}

.nav-right .nav-items {
    /* border: 2px solid green; */
    display: flex;
    justify-content: space-between;
    height: 100%;
    align-items: center;
}

.nav-right .nav-items .item a {
    font-size: 2rem;
    color: inherit;
}

.nav-right .nav-items .item a:hover {
    color: rgb(19, 151, 122);
}


/* ############# header styling ############# */
.header {
    height: 70vh;
    /* border: 4px solid black; */
    position: relative;
}

.header .header-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.header .content-box {
    /* border: 2px solid green; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 1em;
}

/* ############# about us section styling #############*/
section.about-us {
    /* border: 2px solid red; */
    padding: 6rem 0;
}

section.about-us .about-wrapper {
    height: 350px;
    display: flex;
    padding: 1em;
}

.about-wrapper .about-content {
    /* border: 2px solid black; */
    width: 55%;
    height: 100%;
    padding: 1em;
    animation: move-LR 2s ease-in-out 0s 1 alternate none;
}
.about-wrapper .about-img {
    /* border: 2px solid black; */
    width: 45%;
    height: 100%;
    animation: move-RL 2s ease-in-out 0s 1 alternate none;
}
.about-wrapper .about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
}

.about-wrapper .about-content .about-heading {
    font-weight: 500;
    margin-bottom: 0;
}

.about-wrapper .about-content .about-title {
    line-height: 1.4em;
    letter-spacing: 0.2rem;
}

.about-wrapper .about-content .about-para {
    line-height: 1.5em;
    word-spacing: 0.3em;
    letter-spacing: 0.1rem;
}

/* ############# section types of food ############# */
section.food-types {
    /* border: 2px solid black; */
    margin: 10em 0;
}

/* .food-types .container-center{
    border: 2px solid green;
} */
.food-types .container-center .food-heading {
    font-weight: 500;
    text-align: center;
}

.food-types .container-center .food-imgs {
    /* border: 3px solid darkgreen; */
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.food-types .container-center .food-imgs .food-box {
    /* border: 2px solid black; */
    width: 32%;
    position: relative;
}

.food-imgs .food-box .food-img {
    /* border: 2px solid palevioletred; */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.food-box .food-content {
    /* border: 2px solid coral; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 40%);
    text-align: center;
    opacity: 0;
    transition: all 500ms ease-out;
}

.food-imgs .food-box::after {
    content: "";
    display: inline-block;
    /* border: 2px solid lightseagreen; */
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0%;
    height: 0%;
    opacity: 0;
    color: white;
    transition: all 500ms ease-in-out;
    z-index: 1;
}

/* when hovers food-content comes to center from bottom and also overlay comes with transition from bottom to top */
.food-imgs .food-box:hover .food-content {
    transform: translate(-50%, -50%);
    opacity: 1;
    z-index: 2;
}

.food-imgs .food-box:hover::after {
    opacity: 1;
    height: 100%;
    top: 0;
    background-color: rgba(0, 0, 0, 0.8);
}

.btn-food {
    padding: 1.2em 2em;
}

/* ############# menu-item styling ############# */
.food-menu {
    /* border: 2px solid red; */
    margin-bottom: 10rem;
}

.menu-wrapper .menu-heading {
    text-align: center;
}

.menu-items {
    /* border: 2px solid green; */
    display: flex;
    flex-wrap: wrap;
}

.menu-items .menu-item {
    width: 50%;
    /* border: 2px solid black; */
    display: flex;
    align-items: center;
    margin-bottom: 3em;
}

.menu-item .menu-img {
    width: 50%;
    /* border: 2px solid lightseagreen; */
}

.menu-item .menu-img img {
    width: 100%;
    height: 285px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.menu-item .menu-item-content {
    width: 50%;
    /* border: 2px solid palevioletred; */
    padding-left: 1em;
    overflow-wrap: break-word;
}

.menu-item-content h2 {
    font-weight: 500;
}




/* ############# customers feedback styling ############# */

.customers {
    /* border: 2px solid black; */
    padding: 10rem 0;
    margin-bottom: 10rem;
}

/* .customers .container-center{
    border: 3px solid goldenrod;
} */
.container-center .customer-heading {
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
}

.container-center .feedbacks {
    /* border: 3px solid darkcyan; */
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 2em;
}

.feedbacks .feedback {
    width: 32%;
    text-align: center;
    /* border: 2px solid darkred; */
}

.feedback .customer-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

.feedback span h2 {
    font-weight: 500;
}

.feedback .ratings {
    margin-bottom: 1.5em;
}





/* ############# contact us styling ############# */
.contact-us {
    /* border: 2px solid brown;  */
    background-color: #e2e2e2;
    padding: 6rem 0;
}

.contact-us .container-center {
    /* border: 2px solid coral; */
    display: flex;
}

.contact-img, .contact-form {
    width: 50%;
    /* border: 2px solid black; */
    background-color: white;
}

.contact-img{
    padding-bottom: 1rem;
}
.contact-form {
    padding: 1rem;
}

.contact-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.contact-form input {
    outline: none;
    display: block;
    width: 100%;
    border-width: 2px;
    border-style: none none solid none;
    border-color: #666;
    padding: 1rem;
    margin-bottom: 1rem;
}

.contact-form textarea {
    border-width: 2px;
    border-style: none none solid none;
    border-color: #666;
    display: inline-block;
    width: 100%;
    margin-bottom: 1rem;
}

.contact-form input[type="submit"] {
    width: auto;
    margin: 0 auto;
    padding: 1.2rem 3rem;
}

/* ############# footer styling ############# */
footer{
    display: flex;
    justify-content: center;
}
footer .footer-heading{
    margin: 1em 0;
    text-align: center;
}





/*############# animations used ############# */
/* used in about-content */
@keyframes move-LR {
    from{
        transform: translate(-120%);
    }
    to{
        transform: translate(0);
    }
}

/* used in about-img */
@keyframes move-RL {
    from{
        transform: translate(120%);
    }
    to{
        transform: translate(0);
    }
}


/* Responsiveness using media queries */
@media (max-width:500px){
    /* navbar */
    /* make a hamburger menu */
    html{
        font-size: 8px;
    }
    .nav-bar{
        flex-direction: row-reverse;
    }
    .nav-right input[type="checkbox"],.nav-right .hamburger-lines{
        display: inline-block;
    }
    .nav-bar .nav-right{
        width: auto;

    }
    .nav-right .nav-items{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
        /* border: 2px solid green; */
        position: absolute;
        background-color: rgba(255, 255, 255, 0.849);
        top: 0;
        left: 0;
        height: 100vh;
        padding: 10rem 2rem 7rem 7rem;
        transform: translateX(-120%);
        transition: transform 1s ease-out;
    }
    input[type="checkbox"]:checked ~ .nav-items{
        transform: translateX(0);
    }
    .nav-items .item{
        margin-bottom: 2rem;
        color: black;
    }
    .nav-bar .nav-items .item a{
        font-size: 2.5rem;
    }
    .nav-right input[type="checkbox"]{
        display: inline-block;
        width: 5rem;
        height: 4rem;
        position: absolute; 
        top: 2rem;
        left: 2rem;
        z-index: 5;
        opacity: 0;
    }
    .nav-right .hamburger-lines{
        /* border: 2px solid darkcyan ; */
        width: 5rem;
        height: 4rem;
        position: absolute; 
        top: 2rem;
        left: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 2;
        
    }
    .hamburger-lines .line{
        height: 5px;
        background: #000;
        border-radius: 1rem;
        transform-origin: left center;
        transform: rotate(0);
        transition: transform 500ms ease-in-out;
    }
    input[type="checkbox"]:checked ~ .hamburger-lines .line-1{
        transform: rotate(45deg);
    }
    input[type="checkbox"]:checked ~ .hamburger-lines .line-2{
        opacity: 0;
    }
    input[type="checkbox"]:checked ~ .hamburger-lines .line-3{
        transform: rotate(-45deg);
    }
    

    /* header section */
    .header{
        height: 50vh;
    }
    .header .content-box .content-heading{
        display: none;
    }

    /* about us section */
    /* about-wrapper > about-content > about img  */
    section.about-us .about-wrapper{
        flex-direction: column;
        height: auto;
    }
    .about-wrapper .about-content,.about-wrapper .about-img{
        width: 100%;
        text-align: center;
        height: auto;
    }

    /* types of food section */
    /* food-types > container-center > food-imgs > food-box--> img tag and food-content  */
    .container-center .food-imgs{
        flex-direction: column;
    }
    .food-types .container-center .food-imgs .food-box{
        width: 100%;
        margin-bottom: 3rem;
    }

    /* menu-items */
    /* section.food-menu > menu-wrapper --> h2 and menu-items > 6 menu-item ---> menu-img and menu-item-content */
    .food-menu .menu-wrapper .menu-items{
        flex-direction: column;
    }
    .food-menu .menu-wrapper .menu-items .menu-item{
        width: 100%;
    }

    .menu-items .menu-item{
        flex-direction: column;
        text-align: center;
    }
    .menu-item .menu-img{
        width: 70%;
    }
    .menu-item .menu-item-content{
        width: 100%;
    }

    .menu-items .menu-item .menu-img img{
        height: 230px;
    }

    /* customers feedbacks  */
    /* section.customers > .container-center --> h2 and .feedbacks > .feedback */
    section.customers .container-center .feedbacks{
        flex-direction: column;
    }
    .feedbacks .feedback{
        width: 100%;
        margin-bottom: 3em;
    }

    /* contact-us  */
    /* section.contact-us > .container-center ---> .contact-img and .contact-form */
    section.contact-us .container-center{
        flex-direction: column;
        padding: 1rem;
        background: white;
    }
    .container-center .contact-img{
        width: 100%;
        height: 400px;
    }
    .container-center .contact-form{
        width: 100%;
    }

    /* footer */
    footer .footer-heading{
        text-align: center;
    }
}

@media (min-width:500px) and (max-width: 768px){
    /* navbar */
    /* make a hamburger menu */
    html{
        font-size: 9px;
    }
    .nav-right input[type="checkbox"],.nav-right .hamburger-lines{
        display: inline-block;
    }
    .nav-bar .nav-right{
        width: auto;

    }
    .nav-right .nav-items{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
        /* border: 2px solid green; */
        position: absolute;
        background-color: rgba(255, 255, 255, 0.849);
        top: 0;
        right: 0;
        height: 100vh;
        padding: 10rem 2rem 7rem 7rem;
        transform: translateX(120%);
        transition: transform 1s ease-out;
    }
    input[type="checkbox"]:checked ~ .nav-items{
        transform: translateX(0);
    }
    .nav-items .item{
        margin-bottom: 2rem;
        color: black;
    }
    .nav-bar .nav-items .item a{
        font-size: 2.5rem;
    }
    .nav-right input[type="checkbox"]{
        display: inline-block;
        width: 5rem;
        height: 4rem;
        position: absolute; 
        top: 2rem;
        right: 2rem;
        z-index: 5;
        opacity: 0;
    }
    .nav-right .hamburger-lines{
        /* border: 2px solid darkcyan ; */
        width: 5rem;
        height: 4rem;
        position: absolute; 
        top: 2rem;
        right: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 2;
        
    }
    .hamburger-lines .line{
        height: 5px;
        background: #000;
        border-radius: 1rem;
        transform-origin: left center;
        transform: rotate(0);
        transition: transform 500ms ease-in-out;
    }
    input[type="checkbox"]:checked ~ .hamburger-lines .line-1{
        transform: rotate(45deg);
    }
    input[type="checkbox"]:checked ~ .hamburger-lines .line-2{
        opacity: 0;
    }
    input[type="checkbox"]:checked ~ .hamburger-lines .line-3{
        transform: rotate(-45deg);
    }
    
    /* header section */
    .header{
        height: 50vh;
    }
    .header .content-box .content-heading{
        display: none;
    }

    /* about us section */
    /* about-wrapper > about-content > about img  */
    section.about-us .about-wrapper{
        flex-direction: column;
        height: auto;
    }
    .about-wrapper .about-content,.about-wrapper .about-img{
        width: 100%;
        text-align: center;
        height: auto;
    }

    /* types of food section */
    /* food-types > container-center > food-imgs > food-box--> img tag and food-content  */
    .container-center .food-imgs{
        flex-direction: column;
    }
    .food-types .container-center .food-imgs .food-box{
        width: 100%;
        margin-bottom: 3rem;
    }

    /* menu-items */
    /* section.food-menu > menu-wrapper --> h2 and menu-items > 6 menu-item ---> menu-img and menu-item-content */
    .food-menu .menu-wrapper .menu-items{
        flex-direction: column;
    }
    .food-menu .menu-wrapper .menu-items .menu-item{
        width: 100%;
    }

    .menu-items .menu-item{
        flex-direction: column;
        text-align: center;
    }
    .menu-item .menu-img{
        width: 70%;
    }
    .menu-item .menu-item-content{
        width: 100%;
    }

    .menu-items .menu-item .menu-img img{
        height: 350px;
    }

    /* customers feedbacks  */
    /* section.customers > .container-center --> h2 and .feedbacks > .feedback */
    section.customers .container-center .feedbacks{
        flex-direction: column;
    }
    .feedbacks .feedback{
        width: 100%;
        margin-bottom: 3em;
    }

    /* contact-us  */
    /* section.contact-us > .container-center ---> .contact-img and .contact-form */
    section.contact-us .container-center{
        flex-direction: column;
        padding: 1rem;
        background: white;
    }
    .container-center .contact-img{
        width: 100%;
        height: 400px;
    }
    .container-center .contact-form{
        width: 100%;
    }

    /* footer */
    footer .footer-heading{
        text-align: center;
    }
}
@media (min-width: 769px) and (max-width: 1024px){

    html{
        font-size: 10px;
    }
    /* navbar */
    .nav-bar{
        flex-direction: column;
    }
    .nav-bar .nav-left,.nav-bar .nav-right{
        width: 100%;
        text-align: center;
    }

    /* about us section */
    /* about-wrapper > about-content > about img  */
    section.about-us .about-wrapper{
        flex-direction: column;
        height: auto;
    }
    .about-wrapper .about-content,.about-wrapper .about-img{
        width: 100%;
        text-align: center;
    }
    .about-wrapper .about-img img{
        height: 400px;
        object-fit: cover;
        object-position: right;
        width: 80%;
    }

    /* types of food section  */
    .food-box .food-content{
        transform: translate(-50%,-30%);
        transition: all 200ms;
    }

    /* menu-items */
    /* section.food-menu > menu-wrapper --> h2 and menu-items > 6 menu-item ---> menu-img and menu-item-content */
    .food-menu .menu-wrapper .menu-items{
        flex-direction: column;
    }
    .food-menu .menu-wrapper .menu-items .menu-item{
        width: 100%;
    }

    .menu-items .menu-item{
        flex-direction: column;
        text-align: center;
    }
    .menu-item .menu-img{
        width: 40%;
    }
    .menu-item .menu-item-content{
        width: 100%;
    }
    
    .menu-items .menu-item .menu-img img{
        height: 350px;
    }

    /* customers feedbacks  */
    /* section.customers > .container-center --> h2 and .feedbacks > .feedback */
    section.customers .container-center .feedbacks{
        flex-direction: column;
    }
    .feedbacks .feedback{
        width: 100%;
        margin-bottom: 3em;
    }

    /* contact-us  */
    /* section.contact-us > .container-center ---> .contact-img and .contact-form */
    section.contact-us .container-center{
        flex-direction: column;
        padding: 1rem;
        background: white;
    }
    .container-center .contact-img{
        width: 100%;
        height: 400px;
    }
    .container-center .contact-form{
        width: 100%;
    }

    /* footer */
    footer .footer-heading{
        text-align: center;
    }

}
@media (max-height: 500px) and (orientation: landscape){
    .header{
        height: 50vmax;
    }
}
@media (min-height: 1000px) and (max-width:1000px){
    .header{
        height: 50vmin;
    }
    .menu-items .menu-item .menu-img{
        width: 50%;
    }
}