@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap');

    *,
    *::after,
    *::before{
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    ul, ol{
        margin: 0;
        padding: 0;
    }
    a,a:hover {
    text-decoration: none;
    }
    a:hover {
    color: var(--primary-color);
    }
    :active,
    :hover,
    :focus{
        outline: 0 !important;
        outline-offset: 0;
    }

    .text-content{
        width: 70%;
        margin: auto;
    }
    
    /* variable define */
    :root{
        --primary-color: #d10f32;
        --darkred-color:rgb(97, 50, 50);
        --secondary-color:#575253;
        --third-color:#f5930a;
        --white-color:#ffff;
        --text-color:#706e6c;
        --text-grey:#616060;
        --black-color:#000;
        --primary-font: 'Roboto', sans-serif;

    }
    html{
        scroll-behavior: smooth;
    }
    body{
        font-family: var(--primary-font);
        font-size: 100%;
        font-weight: 400;
    }
    /* custom scrollbar */
    ::-webkit-scrollbar{
        width: 0.625rem;
    }
    ::-webkit-scrollbar-track{
        background: var(--white-color);
    }
    ::-webkit-scrollbar-thumb{
        background: var(--primary-color);
    }

    .main-btn{
        display: inline-block;
        padding: 0.400rem 1.1rem;
        line-height: 25px;
        background-color: var(--primary-color);
        border: 0.2rem solid var(--primary-color);
        color: var(--white-color);
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: capitalize;
        box-shadow:0px 2px 10px -1px rgb(0 0 0/ 19%) ;
        -webkit-transition: all .4s ease-out 0;
        -o-transition: all .4s ease-out 0;
        -moz-transition: all .4s ease-out 0;
        transition: all .4s ease-out 0;
    }
    .white-btn{
        display: inline-block;
        padding: 0.400rem 1.1rem;
        line-height: 25px;
        background-color: var(--white-color);
        border: 0.2rem solid var(--white-color);
        color: var(--primary-color);
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: capitalize;
        box-shadow:0px 2px 10px -1px rgb(0 0 0/ 19%);
        -webkit-transition: all .4s ease-out 0;
        -o-transition: all .4s ease-out 0;
        -moz-transition: all .4s ease-out 0;
        transition: all .4s ease-out 0;
    }
    .main-btn:hover{
        background-color: transparent;
        color: var(--primary-color);
        border-color: var(--primary-color);
    }
    .white-btn:hover{
        background-color: var(--primary-color);
        color: var(--white-color);
        border-color: var(--primary-color);
    }
    h1{
        font-size: 3rem;
        font-weight: 900;
        margin-bottom: 3rem;
        color: var(--darkred-color);
        text-transform: capitalize;
    }
    h2{
        font-size: 2.25rem;
        font-weight: 700;
        margin-bottom: 3rem;
        color: var(--darkred-color);
        text-transform: capitalize;
        line-height: 3rem;
    }
    h3{
        font-size: 2.25rem;
        font-weight: 700;
        color: var(--darkred-color);
        text-transform: capitalize;
        line-height: 3rem;
    }
    h4{
        color: var(--darkred-color);
        font-size: 1.3rem;
    }
    h5{
        color: var(--primary-color);
        font-size: 1rem;
    }
    p{
        font-size: 1rem;
        font-weight: 400;
        color: #575253;
        line-height: 1.75rem;
        letter-spacing: 1px;
    }
    


    /* header design */
    .navigation-wrap{
        position: fixed;
        width: 100%;
        left: 0;
        z-index: 1000;
        background-color: white;
        transition: all 0.3s ease-out;
        -webkit-transition: all 0.3s ease-out;
    }
    .navigation-wrap .nav-item{
        padding: 0 0.625;
        transition: all 200ms linear;
    }
    .navbar-toggler:focus{
        outline: unset;
        border: unset;
        box-shadow: none;
    }
    .nav-link{
        font-size: 0.9rem;
        font-weight: 600;
        text-transform: capitalize;
        letter-spacing: 1px;
        color: var(--primary-color);
    }
    
    .fa-bars{
        color: var(--primary-color);
    }
    
    .navigation-wrap .main-btn{
        padding: 0.3rem 1.4rem;
        box-shadow: none;
        margin-left: 0.625rem;
    }

    /* change navbar styling on scroll */
    .navigation-wrap.scroll-on{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: var(--white-color);
        box-shadow: 0 0.115rem 0.75rem 0 rgb(0, 0, 1.9) ;
        transition: all .15s ease-in-out 0s;

    }
    /* top banner design */
    .top-banner{
        width: 100%;
        background:url("https://img.freepik.com/free-photo/elevated-view-fresh-raw-tagliatelle-pasta-with-tomato-garlic-black-pepper-white-plank_23-2148194997.jpg?w=2000") no-repeat center;
        background-size:100% 100%;
        padding: 17rem 0 9rem;
    }

    /* counter design */

    .counter-section{
        background-color: var(--primary-color);
        padding: 2.5rem 0;
    }
    .counter-section p{
        color: var(--white-color);
        text-transform: uppercase;
    }


    /* about section design */

    .about-section{
        background-color: var(--white-color);
    }
    .about-section .card ,
    .about-section .card img{
        border-radius: 0.625rem;
    }
    .about-section .text-sec{
        padding-left: 2rem;
    }
    /* food type section design */

    .food-type{
        padding: 3.25rem;
    }
    .food-type ul li{
        font-size: 1rem;
        color: var(--text-color);
        line-height: 32px;
        position: relative;
        margin-left: 30px;
    }
    .food-type ul li::before{
        position: absolute;
        left: -2.1875rem;
        color: var(--primary-color);
        font-size: 1.25rem;
        font-family: "Font Awesome 5 Free";
        content:'\f00c';
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight: 900;
    }
    .story-section{
        width: 100%;
        height: 30rem;
        background: url('https://img.freepik.com/free-photo/bread-slices-with-topping-tomato-cheese-olives-white-table_23-2148194999.jpg?w=2000') no-repeat center;
        background-size: cover;
        padding-top: 90px;
        text-align: center;
    }
    .story-section h2{
        color: var(--primary-color);
    }

    /* explore food section design */

    .explore-food .card{
        border: none;
        background-color: transparent;
        border-radius: 0.9375rem;
    }
    .explore-food img{
        border-radius: 0.9375rem;
    }
    .explore-food .card span{
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-color);
        padding-bottom: 1rem;
        border-bottom: 0.0625rem solid #eee;
    }
    .explore-food .card span del{
        color: rgb(102, 101, 101);
        margin-left: 0.5rem;
    }


    /* testimonial section design */
    .testimonial-section{
        background-color: var(--primary-color);
        padding-bottom: 2rem;
        
    }
    .testimonial-section .carousel-item{
        margin-top: 3rem;
        padding: 10rem 3.125rem;
        background-color: var(--white-color);
        border-radius: 0.9375rem;
        text-align: center;
        margin-bottom: 3rem;
    }
    .testimonial-section .carousel-caption img{
        max-width: 5rem;
        border-radius: 50%;
        padding: .3125rem;
    }
    .testimonial-section .carousel-item .carousel-caption p{
        font-size: 1.28rem;
        line-height: 2rem;
        padding: 0 11% 0.625rem;
    }
    .testimonial-section .carousel-indicators button{
        width: 15px;
        height: 15px;
        outline: none;
        border: none;
        border-radius: 50%;
        margin-right: 0.5rem;
        opacity: 0.2;
    }
    .testimonial-section .carousel-indicators button.active{
        opacity: 1;
    }


    /* FAQ SECTION DESIGN */

    .faq h4 span{
        color: var(--primary-color);
        font-size: 1.8rem;
        margin-right: 0.3rem;
    }

    .book-food{
        width: 100%;
        height: 250px;
        background: url("https://e1.pxfuel.com/desktop-wallpaper/844/1009/desktop-wallpaper-good-food-ultra-backgrounds-for-u-tv-cuisine.jpg")no-repeat center;
        background-size: cover;
        background-attachment: fixed;
        background-position: 0 72px;
        padding: 4.3rem 0;
    }

    /* form control design */

    .newsletter{
        width: 65%;
        margin: 0 auto;
    }
    .newsletter .form-control{
        height: 3.225rem;
        padding: 0 1.25rem;
        font-size: 0.875rem;
        width: 100%;
        border: none;
        border-radius: 0;
        background: transparent;
        border: 0.1875rem solid var(--text-grey);
        color: var(--black-color);
        font-weight: 700;
    }
    .newsletter .form-control:hover,
    .newsletter .form-control:focus{
        outline: none;
        box-shadow: none;
        border-color: var(--primary-color);
    }


    /* footer design */

    .footer{
        background-color: var(--primary-color);
    }
    .footer .footer-link{
        font-size: 1rem;
        color: var(--white-color);
        padding: 0 1.875rem;
    }
    .footer a i{
        font-size: 1.5rem;
        color: var(--white-color);
        padding: 0 1rem;
    }