/* ***************************************
Template Name: RegFood || Restaurant HTML Template
�������أ�http://www.bootstrapmb.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
================================*/
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800;900&family=Manrope:wght@300;400;500;600;700;800&family=Oleo+Script:wght@400;700&display=swap");

* {
  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;
  margin: 0;
  color: var(--paraColor);
  width: var(--colorPrimary);
}

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;
}

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

:root {
  --colorPrimary: #000;
  --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;
}

.bg-gray {
  background-color: #f5f5f5;
}

.bg-gray-light {
  background-color: #f8f6f6;
}

.cursorPoint {
  cursor: pointer;
}

.hoverImg {
  overflow: hidden;
}

.hoverImg img {
  transition: all linear 0.5s;
  -webkit-transition: all linear 0.5s;
  -moz-transition: all linear 0.5s;
  -ms-transition: all linear 0.5s;
  -o-transition: all linear 0.5s;
}

.hoverImg img:hover {
  transform: scale(1.1);
}

.form-check-input:focus {
  border-color: #eb002975;
  box-shadow: none;
}

/*================================
    GLOBAL CSS END
================================*/

/*============================
    HOME PAGE START
============================*/
/* menu start */
.main_menu {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  /* background: var(--colorWhite); */
  background: linear-gradient(
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.5)
  );
  border-bottom: 1px solid #eee;
  z-index: 999;
  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;
}

.main_menu_scroll {
  background: #ffffff !important;
}

.main_menu .navbar-brand {
  display: inline-block;
  width: 200px;
}

.main_menu .navbar-nav {
  line-height: 80px;
}

.main_menu .navbar-nav .nav-item {
  position: relative;
}

.main_menu .navbar-nav .nav-item .nav-link {
  font-size: 16px;
  font-weight: 600;
  color: var(--colorBlack);
  text-transform: capitalize;
  margin: 0px 15px;
  padding: 0;
  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;
  position: relative;
}

.main_menu .navbar-nav .nav-item .nav-link::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background: var(--colorPrimary);
  bottom: 0;
  left: 50%;
  opacity: 0;
  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;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

.main_menu .navbar-nav .nav-item:hover .nav-link,
.main_menu .navbar-nav .nav-item .nav-link.active {
  color: var(--colorPrimary) !important;
}

.main_menu .navbar-nav .nav-item:hover .nav-link::after,
.main_menu .navbar-nav .nav-item .nav-link.active::after {
  opacity: 1;
}

.main_menu .navbar-nav .nav-item .nav-link i {
  font-size: 14px;
  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;
}

.main_menu .menu_icon {
  align-items: center;
}

.main_menu .menu_icon li {
  position: relative;
}

.main_menu .menu_icon li a {
  font-size: 16px;
  font-weight: 600;
  color: var(--colorBlack);
  text-transform: capitalize;
  margin: 0px 10px;
  padding: 0;
  position: relative;
  cursor: pointer;
  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;
  width: 40px;
  height: 40px;
  background: #ff7c0826;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
}

.main_menu .menu_icon li a:hover,
.main_menu .menu_icon li a.active {
  background: var(--colorPrimary);
  color: var(--colorWhite);
}

.main_menu .menu_icon li a span {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--colorPrimary);
  color: var(--colorWhite);
  border: 1px solid var(--colorWhite);
  line-height: 24px;
  font-size: 12px;
  text-align: center;
  font-weight: 600;
  top: -10px;
  right: -10px;
}

.main_menu .menu_icon li:last-child a {
  margin-right: 0;
}

.main_menu .menu_icon li:last-child a::after,
.main_menu .menu_icon li:last-child a::before {
  display: none;
}

.menu_fix {
  top: 0 !important;
}

/* menu end */

/* banner start */

.carouselExampleAutoplaying {
  height: 100vh;
}

.carouselExampleAutoplaying .carousel-inner {
  height: 100%;
}

.carouselExampleAutoplaying .carousel-item {
  height: 100%;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  width: 4rem;
  height: 4rem;
}

.carousel-indicators .active {
  background-color: var(--colorPrimary) !important;
}

.carousel-indicators [data-bs-target] {
  width: 70px;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}

@keyframes zoom {
  from {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

  to {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
  }
}

@keyframes shake {
  from {
    margin-left: 10px;
  }

  to {
    margin-left: 0px;
  }
}

/* banner end */



/* companyProfile start */
#companyProfile h2{
font-size: 1.8vw;
}
#companyProfile p{
font-size: 1.2vw;
}
/* companyProfile end */


/* banner product start */
.banner-product-start {
  background: #f5f5f5;
}

.banner-product-start a {
  width: 100%;
}

.banner-product-title h2 {
  color: #333c4a;
  font-size: 28px;
  font-weight: 800;
  line-height: 30px;
  padding-bottom: 15px;
  display: inline-block;
  text-transform: uppercase;
  position: relative;
}

.banner-product-title h2:after {
  left: 0;
  bottom: 0;
  width: 80%;
  height: 3px;
  right: 0;
  content: "";
  margin: 0 auto;
  position: absolute;
  background-color: var(--colorPrimary);
}

.col1 {
  max-width: 50%;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 26.6%;
  flex: 1 0 26.6%;
}

@media only screen and (max-width: 767px) {
  .col1 {
    max-width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
    margin-bottom: 30px;
  }
}

.col2 {
  max-width: 25%;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 27.1%;
  flex: 1 0 27.1%;
}

@media only screen and (max-width: 767px) {
  .col2 {
    max-width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
    margin-bottom: 30px;
  }
}

/* offer item start */

.tf__offer_item {
  background: #eef6eb;
}

.tf__offer_item_single {
  background-color: #ffffff;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  padding: 25px 20px 25px 20px;
  border-radius: 5px;
  border: 10px solid var(--colorWhite);
  margin: 25px 12px 0px 12px;
  position: relative;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  height: 600px;
}

.tf__offer_item_single img {
  height: 100% !important;
}

.tf__offer_item_single span {
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  position: absolute;
  top: 35px;
  left: 115px;
  width: 60px;
  height: 60px;
  line-height: 18px;
  background: var(--colorPrimary);
  border: 2px solid var(--colorWhite);
  border-radius: 50%;
  color: var(--colorWhite);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.tf__offer_item_single .title {
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 700;
  margin: 10px 0px 5px;
  transition: all linear 0.3s;
  display: block;
  color: var(--colorBlack);
  font-family: var(--headingFont);
  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
}

.tf__offer_item_single p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tf__offer_item_single ul {
  margin-top: 15px;
}

.tf__offer_item_single ul li a {
  width: 30px;
  height: 30px;
  background: var(--colorPrimary);
  text-align: center;
  margin-right: 5px;
  line-height: 30px;
  color: var(--colorWhite);
  font-size: 14px;
  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;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.tf__offer_item_single {
  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;
}

.tf__offer_item_single:hover .title {
  color: var(--colorPrimary);
}

.tf__offer_item_single:hover {
  margin-top: 20px;
}

.tf__offer_item_single ul li a:hover {
  background: var(--colorBlack);
}

.team_slider .nextArrow,
.team_slider .prevArrow,
.offer_item_slider .nextArrow,
.offer_item_slider .prevArrow {
  width: 40px;
  height: 40px;
  background: var(--colorBlack);
  line-height: 40px;
  text-align: center;
  color: var(--colorWhite);
  border-radius: 50%;
  position: absolute;
  top: -65px;
  right: 12px;
  z-index: 1;
  cursor: pointer;
  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;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.offer_item_slider .prevArrow {
  right: 62px;
  background: var(--colorPrimary);
}

.banner-product-more-item img {
  height: 100%;
}

.nextArrow:hover,
.prevArrow:hover {
  background: var(--colorBlack);
}

/* offer item end */

/* footer start */
footer {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.footer_logo {
  width: 200px;
  margin: auto;
}

.footer_overlay {
  background: linear-gradient(to bottom, #41464b, #999);
  /* background: radial-gradient(circle, rgba(218, 182, 48, 0.5) 0.5%, rgba(0, 0, 0, 0) 83%); */
}
.footer_overlay span,h4{
 color: #fff;
}

.footer_title {
  display: block;
}

.followUs {
  margin-right: 700px;
}

.footer_overlay .icon-img {
  width: 30px;
  color: #fff;
  font-size: 25px;
}

.foot_record {
  font-size: 14px;
  text-align: center;
}

/* footer end */

/* scroll_btn start */
.tf__scroll_btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  cursor: pointer;
  text-align: center;
  color: var(--colorWhite);
  text-transform: capitalize;
  width: 45px;
  height: 45px;
  line-height: 45px;
  background: var(--colorPrimary);
  border: 1px solid var(--colorWhite);
  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;
  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%;
}

.tf__scroll_btn:hover {
  background: var(--colorBlack);
}

@keyframes scroll_amini {
  from {
    bottom: 30px;
  }

  to {
    bottom: 50px;
  }
}

/* scroll_btn end */
/*============================
    HOME PAGE  END
============================*/

.bloc-container-inner {
  padding: 10px;
}

.img-container {
  height: 100%;
  display: flex;
  align-items: stretch;
}

/*============================
    ABOUT PAGE  START
============================*/
.text-content {
  height: 19rem;
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fafafa;
  border-radius: 8px;
  transition: all linear 0.3s;
  padding: 8px;
}
.text-show{
  margin-top: 10px;
}

.text-content:hover {
  color: var(--colorPrimary);
}

.brand-story img {
  border-radius: 8px;
}

.brand-story .img-full {
  margin-top: 10px;
}

.Mask {
  /* background: rgba(255, 255, 255, 0.5); */
   /* background: rgba(255,255,255,0.2); */
  width: 1000px !important;
  position: absolute;
  top: 0;
  bottom: 0;
}
.brand-advantage-container ul {
  width: 1200px;
  /* height: 300px; */
  /* border: 1px solid; */
  margin: 50px auto;
  overflow: hidden;
}

.brand-advantage-container ul li {
  position: relative;
  width: 200px;
  height: 460px;
  float: left;
  transition: width 0.5s;
}

.brand-advantage-container ul li img {
  width: 1000px !important;
}
.brand-advantage-container ul:hover li {
  width: 200px;
}

.brand-advantage-container ul li:hover {
  width: 1000px;
}

.brand-advantage-container .text {
  position: absolute;
  top: 20%;
  left: 200px;
  width: 620px !important;
  font-weight: bold;
  line-height: 40px;
  font-size: 25px;
  color: #fff;
}
.brand-advantage-container .text-title {
  font-size: 40px;
  /* text-align: center; */
  margin-bottom: 10px;
  /* color: #fed43c; */
}
.brand-advantage-container .text-container{
  background: rgba(0, 0, 0, 0.2);
  padding: 10px 20px;
  margin-top: 30px;
}
#corporateculture h2{
  font-size: 2vw;
}
#corporateculture p{
 font-size: 1.8vw;
}
.indentation_2{
  text-indent: 2em;
}

/*============================
    ABOUT PAGE  END
    ============================*/