/* ***************************************
Template Name: RegFood || Restaurant HTML Template
Author: Ramen Biswas
Author Email: printrb72@gmail.com
website: http://www.devsramen.com/
Version: 1.0
Description: RegFood is Multi Page HTML Template designed for Restaurants, cafes, Seafood, Bakeries, bars, Catering, and Food business websites. It is designed with a Unique and clean & modern Look. This template is designed based on Bootstrap5 Grid System. You can customize it very easily to fit your needs. RegFood is a fully responsive layout. It fits perfectly on various displays and resolutions from regular desktop screens to tablets, iPads, iPhones, and small mobile devices.
***************************************

CSS TABLE OF CONTENTS
===================================
01. GLOBAL CSS 
02. HOME PAGE
03. ABOUT US PAGE
04. MENU PAGE
05. CONTACT PAGE
06. BLOG DETAILS PAGE
07. MENU DETAILS PAGE
08. CART VIEW PAGE
09. CHECKOUT PAGE
10. SIGN IN PAGE
11. PAYMENT PAGE
12. FAQ PAGE
13. TERMS AND CONDITION PAGE
14. 404 PAGE
15. DASHBOARD PAGE


/*================================
    GLOBAL CSS START
================================*/
html, body{
    scroll-behavior: unset !important;
}

* {
    margin: 0;
    padding: 0;
}

ul,
ol,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    display: inline-block;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-family: var(--headingFont);
    color: var(--colorBlack);
}

p,
a,
span {
    font-size: 16px;
    font-weight: 400;
    padding: 0;
    margin: 0;
    color: var(--paraColor);
}
button {
    background-color: transparent;
}

body {
    overflow-x: hidden;
    scroll-behavior: smooth;
    color: var(--paraColor);
    font-family: var(--paraFont);
}

img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

input,
textarea {
    width: 100%;
    padding: 12px 20px;
    outline: none;
    resize: none;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 300;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

input::placeholder,
textarea::placeholder {
    color: #a6a6ac;
    text-transform: capitalize;
}

button {
    border: none;
    box-shadow: none !important;
}

:root {
    --colorPrimary: #ff7c08;
    --colorRed: #eb0029;
    --paraColor: #484747;
    --colorBlack: #231f40;
    --colorWhite: #ffffff;
    --paraFont: 'Manrope', sans-serif;
    --headingFont: 'Barlow', sans-serif;
    --cursiveFont: 'Oleo Script', cursive;
    --boxShadow: rgba(100, 100, 111, 0.15) 0px 7px 29px 0px;
}

.heading_1 {
    font-family: var(--headingFont);
    font-size: 58px;
    font-weight: 700;
    color: var(--colorWhite);
    text-transform: capitalize;
}

.heading_2 {
    font-size: 35px;
    font-weight: 800;
    text-transform: capitalize;
}

.heading_3{
    font-family: var(--cursiveFont);
    font-size: 30px;
    font-weight: 600;
    color: var(--colorPrimary);
    text-transform: capitalize;
}

.heading_4 {
    color: var(--colorPrimary);
    font-family: var(--cursiveFont);
    font-size: 24px;
    font-weight: 600;
    text-transform: capitalize;
    position: relative;
    display: inline-block;
}

.heading_4::after {
    position: absolute;
    content: "";
    background: url(../images/heading_shapes_1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 65px;
    height: 23px;
    top: 3px;
    right: -80px;
}
.heading_5 {
    font-family: var(--cursiveFont);
    font-size: 20px;
    font-weight: 500;
    color: var(--colorPrimary);
    text-transform: capitalize;
    display: inline-block;
}

.heading_span {
    display: block;
    max-width: 250px;
    margin: 0 auto;
}

.heading_para {
    text-align: center;
    margin-top: 10px;
    padding: 0px 60px;
}
.common_btn {
    background: var(--colorPrimary);
    text-transform: capitalize;
    color: var(--colorWhite);
    padding: 12px 40px 12px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.common_btn::after {
    position: absolute;
    content: "";
    width: 23px;
    height: 24px;
    background: url(../images/arrow_icon.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    left: 0px;
    opacity: 0;
    transform: translateY(-50%);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.common_btn:hover {
    background: var(--colorBlack);
    padding: 12px 25px 12px 55px;
    color: var(--colorWhite);
}

.common_btn:hover::after {
    opacity: 1;
    left: 17px;
}

.form-check-input:focus {
    border-color: #eb002975;
    box-shadow: none;
}
.commonArrowWrapper {
    text-align: right;
    margin-top: 35px;
    margin-right: 10px;
}
.common_btn_redmore {
    font-size: 17px;
    font-weight: 700;
    color: var(--colorBlack);
    text-transform: capitalize;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}
.common_btn_redmore i{
    margin-left: 5px;
}
.common_btn_redmore:hover{
    color: var(--colorPrimary);
}
.arrows{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.prevArrow, .nextArrow{
    width: 30px;
    height: 30px;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    color: var(--colorWhite);
    background-color: var(--colorPrimary);
    border-radius: 50%;
    transition: all linear 0.3s;
}
.prevArrow:hover{
    cursor: pointer;
    background-color: var(--colorBlack);
}
.nextArrow:hover{
    cursor: pointer;
    background-color: var(--colorBlack);
}
/* Common Banner Start */
#commonBanner{
    background-image: linear-gradient(to bottom, #231f40a3, #231f40a3), url('../images/breadcrumb_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}    
#commonBanner .heading_1{
    font-size: 50px;
    font-weight: 600;
    text-transform: capitalize;
}
.commonBannerText{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.commonBannerIcon{
    color: var(--colorWhite);
}
.commonBannerHome{
    font-size: 16px;
    font-weight: 600;
    color: var(--colorWhite);
    text-transform: capitalize;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}
.commonBannerHome:hover{
    font-size: 16px;
    font-weight: 600;
    color: var(--colorPrimary);
    text-transform: capitalize;
}
.commonBannerContent{
    color: var(--colorPrimary);
    text-transform: capitalize;
}
.commonRadioBtn{
    width: initial;
}
    /* Common Banner Ended */
/*================================
    GLOBAL CSS END
    ==============================*/

/* ===============================
        HEADER START
   =============================== */
   
/* Topper Section Start */
#topper{
    width: 100%;
    background-color: var(--colorBlack);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
.toperInfo{
    background-color:var(--colorPrimary);
    clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
    justify-content: center;
    gap: 30px;
}
.toperInfo li a{
    color: var(--colorWhite);
    line-height: 50px;
    transition: all linear 0.3s;
}
.toperInfo li a i{
    margin-right: 8px;
}
.toperInfo li a:hover{
    color: var(--colorBlack);
}
.topperIcon{
    line-height: 50px;
}
.topperIcon li a{
    width: 30px;
    height: 30px;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    color: var(--colorWhite);
    background-color: var(--colorPrimary);
    border-radius: 50%;
    transition: all linear 0.3s;
}
.topperIcon li a:hover{
    color: var(--colorPrimary);
    background-color: var(--colorWhite);
}

/* Topper Section Ended */
/* NAV Menu Section Start */
#navMenu{
    width: 100%;
    height: 80px;
    line-height: 80px;
    background-color: var(--colorWhite);
    border-bottom: 1px solid #eee;
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 9999;
    transition: all linear 0.3s;
}
.menu_fix {
    top: 0 !important;
}
.navbarToggler{
    margin-right: 30px;
    position: relative;
}
.menu_icon_bar, .close_icon_close{
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.menu_icon_bar{
    background-color: var(--colorPrimary);
}
.close_icon_close{
    background-color: var(--colorRed);
    display: none;
}
.menu_icon_bar.show{
    display: block;
}
.close_icon_close.show{
    display: block;
}
.navBarMain li{
    position: relative;
}
.navBarMain li a{
    font-weight: 600;
    text-transform: capitalize;
    position: relative;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}
.nvaDownArrow{
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}
.navBarMain .navItem .navLink.active{
    color: var(--colorPrimary);
}
.navBarMain li a::after{
    content: "";
    width: 0;
    height: 2px;
    background-color: var(--colorPrimary);
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}
.navBarMain li .navLink:hover{
    color: var(--colorPrimary);
}
.navBarMain li .navLink:hover::after{
    width: 100%;
}
.navBarMain li:hover .subMenu{
    opacity: 1;
    visibility: visible;
    top: 100%;
}
.navItem .subMenu{
    width: 250px;
    max-height: 500px;
    line-height: 50px;
    background-color: var(--colorWhite);
    box-shadow: var(--boxShadow);
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    top: 120%;
    left: 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.navItem .subMenu{
    opacity: 0;
    visibility: hidden;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}
.navItem .subMenu .subMenuItem{
    border-bottom: 1px solid #eee;
}
.navItem .subMenu .subMenuItem .subMenuLink{
    font-size: 16px;
    font-weight: 500;
    color: var(--colorBlack);
    padding: 0 15px 0 30px;
    display: block;
    position: relative;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}
.navItem .subMenu .subMenuItem .subMenuLink::after{
    content: "";
    width: 7px;
    height: 7px;
    background-color: var(--colorPrimary);
    position: absolute;
    left: 15px;
    top: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}
.navItem .subMenu .subMenuItem .subMenuLink:hover{
    color: var(--colorPrimary);
    padding-left: 35px;
}
.navItem .subMenu .subMenuItem .subMenuLink:hover::after{
    opacity: 1;
    visibility: visible;
}
.manuIconWrapper a{
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #ff7c0826;
    position: relative;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}
.manuIconWrapper li a span{
    width: 25px;
    height: 25px;
    color: var(--colorWhite);
    font-size: 12px;
    line-height: 25px;
    text-align: center;
    background-color: var(--colorPrimary);
    border: 1px solid var(--colorWhite);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    top: -10px;
    right: -10px;
}
.manuIconWrapper li a button{
    width: 100%;
}
.manuIconWrapper li a button i{
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}
.manuIconWrapper a:hover{
    color: var(--colorWhite);
    background-color: var(--colorPrimary);
}
.manuIconWrapper a:hover button i{
    color: var(--colorWhite);
}
/* NAV Menu Section Ended */   
      
   /* ================================
           HEADER END
      ================================ */

   /* ================================
           FOOTER START
      ================================ */
      #footer {
        background-image: url(../images/footer_bg.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    /* Footer Top Start */
    .footerOverlay {
        background-color: #231f40e0;
    }
     .footerPara {
        color: var(--colorWhite);
        margin: 30px 0;
    }
    .bottomIcon {
        gap: 10px;
    }
    .bottomIcon li a {
        color: var(--colorWhite);
        line-height: 50px;
        transition: all linear 0.3s;
    }
    .bottomIcon li a:hover {
        color: var(--colorBlack);
        background-color: var(--colorWhite);
    }
    .bottomIcon {
        line-height: 50px;
    }
    .bottomIcon li a {
        width: 30px;
        height: 30px;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        color: var(--colorWhite);
        background-color: var(--colorPrimary);
        border-radius: 50%;
        transition: all linear 0.3s;
    }
    .footerSLTitle{
        font-size: 22px;
        font-weight: 700;
        color: var(--colorWhite);
        text-transform: capitalize;
        margin-bottom: 12px;
        display: inline-block;
        position: relative;
    }
    .footerSLTitle::after{
        content: "";
        width: 100%;
        height: 1px;
        background-color: var(--colorPrimary);
        position: absolute;
        left: 50%;
        bottom: -5px;
        transform: translateX(-50%);
    }
    .footerContent li .footerSL{
        font-size: 16px;
        color: #dfdddd;
        text-transform: capitalize;
        letter-spacing: 2px;
        margin-top: 15px;
        padding-left: 15px;
        display: block;
        position: relative;
        transition: all linear .3s;
        -webkit-transition: all linear .3s;
        -moz-transition: all linear .3s;
        -ms-transition: all linear .3s;
        -o-transition: all linear .3s;
    }
    .footerContent li .footerSL:hover{
        color: var(--colorPrimary);
    }
    .footerContent li .footerSL:hover::before{
        background-color: var(--colorWhite);
    }
    .footerContent li .footerSL::before{
        content: "";
        width: 7px;
        height: 7px;
        background-color: var(--colorPrimary);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        transition: all linear 0.3s;
    
    }
    .footerContactItem{
        margin-top: 15px;
        border-bottom: 1px solid #ff7c0885;
        padding-bottom: 25px;
    }
    .footerContactItem i{
        color: var(--colorPrimary);
    }
    .footerContactItem span{
        color: #dfdddd;
        position: relative;
    }
    /* Footer Top Ended */
    /* Footer Bottom Start */
    
    .footerBottom{
        background-color: var(--colorPrimary);
        padding: 20px 0;
    }
    .footerBottom p{
        color: var(--colorWhite);
        text-align: center;
    }
    /* Footer Bottom Ended */
/* ================================
        FOOTER END
   ================================ */
/* ================================
        SCROLL START
   ================================ */
.scrool_btn{
    width: 45px;
    height: 45px;
    line-height: 45px;
    color: var(--colorWhite);
    text-align: center;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    text-transform: capitalize;
    background: var(--colorPrimary);
    border: 1px solid var(--colorWhite);
    border-radius: 50%;
    animation: scroll_amini linear 2s infinite alternate;
    -webkit-animation: scroll_amini linear 2s infinite alternate;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    cursor: pointer;
    opacity: .5;
}
.scrool_btn i{
    font-size: 20px;
}
/* .scrool_btn:hover{
    opacity: 1;
} */
/* ================================
           SCROLL END
   ================================ */