@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700;900&display=swap");
@font-face {
  font-family: knockOut;
  src: url("../fonts/Knockout-Light.otf");
}

@font-face {
  font-family: hwt-artz;
  src: url("../fonts/HWT-Artz.ttf");
}

@font-face {
  font-family: alabama-light;
  src: url("../fonts/alabama-light.otf");
}

@font-face {
  font-family: Arvo-Bold-Italic;
  src: url("../fonts/Arvo-Bold-Italic.ttf");
}

@font-face {
  font-family: BebasNeue;
  src: url("../fonts/BebasNeue-Regular.ttf");
}

@font-face {
  font-family: Myriad-Pro-Regular;
  src: url("../fonts/Myriad-Pro-Regular.ttf");
}

@font-face {
  font-family: knockOut-Light-Weight;
  src: url("../webfonts/knockout-htf49-liteweight_bigfontsite.com.ttf");
}

@keyframes pulse {
  0% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes mymove {
  0% {
    top: 200px;
  }
  50% {
    top: 300px;
  }
  100% {
    top: 300px;
  }
}

:root {
  --white: #ffffff;
  --black: #000000;
  --pink: #fa0043;
  --fadePink: rgba(250, 0, 67, 0.25);
  --fadeBlack: rgba(0, 0, 0, 0.7);
  --fadeGreen: rgba(206, 255, 223, 0.4);
  --fadeWhite: rgba(255, 255, 255, 0.5);
  --fadeBlue: rgba(45, 67, 85, 0.8);
  --darkGray: #696868;
  --darkBlue: #2d4355;
  --fullDarkBlue: #1e2b36;
  --lightGray: #ebeaea;
  --mediumGray: #eeeeee;
  --mediumFadeGray: #efeeee;
  --lightPink: #ffeef2;
  --orange: #ff9900;
  --darkblueMix: #4885b7;
  --royaleBlue: #1604e6;
  --fbColor: #ae4302;
  --instaColor: #e8564a;
  --youtubeColor: #ff0000;
  --twitterColor: #ae4302;
  --skinColor: #f8e6cc;
  --offerGray: #414141;
  --skyBlue: #aee0fa;
  --purple: #ae76e6;
  --seaGreen: #c4f7e0;
  --lightgreen: #74c5bd;
  --green: #3ad900;
  --navydarkblue: #27305a;
  --lightCustomGrey: #e8e8e8;
  --darkGreen: #179600;
  --darkYellow: #e9901b;
  --lightBrown: #ae4302;
}

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--white);
}

::-webkit-scrollbar-thumb {
  background: var(--darkBlue);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--darkBlue);
}

::selection {
  color: var(--white);
  background: var(--darkYellow);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Poppins, sans-serif;
  background-color: var(--white) !important;
}

.hideOverFlow {
  overflow: hidden !important;
}

ul {
  list-style: none !important;
}

a {
  text-decoration: none !important;
}

.form-control {
  background-color: var(--lightCustomGrey);
}

input.form-control::placeholder {
  color: #aaaaaa !important;
}

.form-control:hover,
.form-control:focus {
  border-color: transparent !important;
  outline: 0px !important;
  background-color: var(--white) !important;
  box-shadow: 0 0 0 0.12rem var(--lightCustomGrey) !important;
}

.btn {
  outline: none !important;
  box-shadow: none !important;
}

section {
  display: block;
}

.mainWrapper {
  position: relative;
  overflow: hidden;
}

.mainContentContainer {
  position: relative;
  z-index: 55;
  background: var(--white);
  min-height: 100vh;
  transition: all 0.5s linear 0s;
}

.activeMenuSideBar {
  transform: translate(31%, 100px);
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.05) -3px -7px 14px 3px;
}

.aciveOverlay {
  position: relative;
  transition: opacity 0.3s linear 0s;
}

.mainWrapper.aciveOverlay::before {
  content: "";
  background: var(--white);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.noScroll {
  overflow: hidden !important;
}

.sideBarContainer {
  background: var(--white);
  width: 30%;
  height: 100vh;
  overflow: hidden scroll;
  position: fixed;
  left: 0px;
  border: var(--fadeWhite);
  padding: 1rem 0.5rem;
  top: 0px;
  z-index: 2;
}

.sideBarContainer .logoBar {
  width: 100%;
  display: flex;
  align-items: center;
}

.sideBarLogo {
  display: flex;
  flex: 1 1 0%;
}

.sideBarLogo img {
  width: 57%;
}

button.closeBtn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#closeSideBar img {
}

a.closeBtn img {
  width: 95%;
}

.logoutButtonContainer {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  margin: 1rem 0px;
}

.logoutButtonContainer button.btn.logOutButton {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--darkBlue);
}

.logoutButtonContainer button.btn.logOutButton:hover {
  color: var(--darkYellow);
}

button.btn.logOutButton span img {
  width: 25px;
}

ul.subMenu {
  position: relative;
  padding-left: 1rem;
}

ul.menuItems {
  padding-left: 0.5rem;
}

ul.menuItems li {
  margin-bottom: 1rem;
}

ul.menuItems li a img {
  margin-bottom: 1rem;
  width: 1.3vw;
}

ul.menuItems li a {
  color: var(--darkBlue);
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
}

ul.menuItems li a:hover {
  color: var(--darkYellow);
}

ul.subMenu {
  transition: all 0.5s linear 0s;
  height: 0px;
  overflow: hidden;
}

ul.subMenu.activeMenu {
  height: max-content;
  margin: 1rem auto;
}

ul.subMenu li a {
  font-size: 1rem;
  font-weight: 500;
}

ul.menuItems li a span {
  margin: 0px 0.5rem;
}

ul.menuItems li a span.caratSign img {
  width: 1rem;
}

.mobileCommandBtn {
  text-align: center;
}

.mobileCommandBtn ul {
  display: none;
  padding: 0px !important;
  margin: 1rem auto !important;
}

.mobileCommandBtn ul a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin: 0.5rem auto;
  background: var(--darkYellow);
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  border-radius: 50px;
  transition: all 0.3s linear 0s;
}

.mobileCommandBtn ul a:hover {
  background: var(--darkBlue);
}

.headerContainer {
  position: relative;
  z-index: 55555;
}

.mainNav {
  background: var(--white);
  /* padding: 1rem 0px; */
  display: block;
  box-shadow: rgba(155, 155, 155, 0.16) 0px 3px 3px 2px;
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 100;
}

.navRow {
  display: flex;
  align-items: center;
}

.centerNavLink {
  flex: 1 1 0%;
}

.centerNavLink ul {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0px !important;
  margin: 0px !important;
}

.brandContainer {
  flex: 1 1 0%;
}

.centerNavLink ul li a {
  margin: 0px 10px;
  cursor: pointer;
}

nav.mainNav a {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--darkBlue);
  transition: all 0.3s linear 0s;
  position: relative;
}

nav.mainNav a:hover {
  color: var(--darkYellow);
}

.centerNavLink ul li {
  position: relative;
}

.centerNavLink ul li:first-child::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 80%;
  background: var(--darkBlue);
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
}

.rightNavItems {
  flex: 1 1 0%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

a.navTel {
  position: relative;
}

a.navTel img {
  width: 25px;
  transform: rotate(-15deg);
}

a.navTel span {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

button.btn.cartBtn {
  position: relative;
  margin: 0px;
  padding: 0px;
}

ul.navSideIcons {
  display: flex;
  padding: 0px;
  align-items: center;
  margin: 0px 0px 0px 30px !important;
}

button.btn.cartBtn span.cartIcon svg {
  width: 35px;
}

button.btn.cartBtn span.cartCounterIcon {
  position: absolute;
  top: -17px;
  left: 22px;
}

button.btn.cartBtn span.cartCounterIcon svg {
  width: 20px;
}

button.btn.cartBtn span.cartCounterIcon span.cartCounter {
  position: absolute;
  font-size: 14px;
  left: 50%;
  top: calc(45% - 1px);
  transform: translate(-50%, -50%);
}

.brandContainer a {
  display: block;
  width: fit-content;
}

img.logoImg {
  width: 150px;
}

a.userIcon svg {
  width: 26px;
}

a.userIcon2 svg {
  width: 26px;
}

ul.navSideIcons li {
  display: flex;
  position: relative;
  margin: 0px 8px;
}

.hamBurgerIcon {
  position: relative;
}

button.btn.HumBurgerBtn {
  padding: 0px !important;
  margin: 0px !important;
}

.hamBurgerIcon button#menuBtn span {
  width: 30px;
  height: 4px;
  background: var(--darkBlue);
  display: block;
  border-radius: 50px;
}

.hamBurgerIcon button#menuBtn span:nth-child(2) {
  margin: 0.5rem 0px;
  width: 40px;
}

button.btn.HumBurgerBtn:hover span {
  background: var(--darkYellow) !important;
}

nav.mainNav button:hover svg path,
nav.mainNav a:hover svg path {
  fill: var(--darkYellow) !important;
}

.cartDrawerContainer {
  box-shadow: rgba(155, 155, 155, 0.26) 0px 0px 5px 4px;
  width: 660px;
  background: rgb(255, 255, 255);
  overflow: hidden;
  border-radius: 20px;
  position: fixed;
  top: 41px;
  right: 28px;
  transition: all 0.3s linear 0s;
  z-index: 55;
  transform: translateY(-150%);
}

.cartDrawerContainer.activeDrawer {
  transform: translateY(7%) !important;
}

.drawerInnerContainer {
  padding: 1rem 1rem 5rem 2rem;
  height: 75vh;
  overflow: hidden scroll;
}

.cartTitleAndCloseBtn {
  background: var(--white);
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem;
}

.cartTitleAndCloseBtn h3 {
  margin: 0px;
  color: var(--darkBlue);
  display: flex;
  flex: 1 1 0%;
}

nav.mainNav.stickyHeader {
  background: transparent;
  box-shadow: none !important;
}

nav.mainNav.stickyHeader button.btn.HumBurgerBtn span {
  background: var(--white) !important;
}

nav.mainNav.stickyHeader a.userIcon svg path {
  fill: var(--white);
}

nav.mainNav.stickyHeader a.userIcon2 svg path {
  fill: var(--white);
}

nav.mainNav.stickyHeader button.btn.cartBtn span.cartIcon svg path {
  fill: var(--white);
}

nav.mainNav.stickyHeader button.btn.cartBtn span.cartCounter {
  color: var(--white);
}

nav.mainNav.stickyHeader .centerNavLink ul li a,
nav.mainNav.stickyHeader a.navTel {
  font-size: 0px;
}

nav.mainNav.stickyHeader .centerNavLink ul li:first-child::before {
  opacity: 0;
}

nav.mainNav.stickyHeader a.navTel img {
  width: 0px !important;
}

span.stickyHeaderLogo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 55;
}

span.stickyHeaderLogo.hideStickyLogo {
  opacity: 0;
}

.cartItemsContainer {
  position: relative;
  width: 100%;
}

.cartItemRow {
  margin: 1.5rem 0px;
  position: relative;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 6px 6px;
  padding: 0.5rem;
}

.cartItemRoww {
  margin: 1.5rem 0px;
  position: relative;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 6px 6px;
  padding: 1.5rem;
}

.cartDrawerContainer .cartItemRow {
  width: 97%;
  float: right;
}

.cartDrawerContainer .prodCartImg {
  left: -50px;
}

img.img-fluid.prodCartImg {
  width: calc(100% + 20px);
  max-width: calc(100% + 20px);
  position: relative;
  top: 0px;
}

.cartProdDetail {
  position: relative;
  width: 100%;
}

.cartItemNameAndPrice {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  margin: 0.5rem 0px;
}

.cartItemNameAndPrice h2.cartItemName {
  flex: 1 1 0%;
  margin: 0px;
  color: var(--darkBlue);
  font-size: 18px;
  width: 100%;
  font-weight: 600;
}

.cartItemNameAndPrice h3.cartItemPrice {
  font-size: 18px;
  color: var(--navydarkblue);
  font-weight: 600;
  margin: 0px;
}

p.caertItemExtraDetail,
p.cartItemDetail {
  font-size: 1rem;
  color: var(--darkBlue);
  margin: 0px;
}

.cartItemDetail {
  font-size: 10px;
}

span.DetailBold {
  color: var(--darkBlue);
  font-weight: 600;
}

.cartItemIncDec {
  margin: 0.5rem 0px;
}

.quantSelContainer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  overflow: hidden;
}

.quantSelContainer input {
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0px;
  margin: 0px;
  font-weight: 600;
  background: transparent !important;
  border: none !important;
  font-size: 15px !important;
}

.quantSelContainer input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.quantSelContainer span {
  cursor: pointer;
}

.quantSelContainer span.minus svg {
  width: 22px;
}

.quantSelContainer span.plus svg {
  width: 25px;
  position: relative;
  top: 1px;
}

.yourChoiceContainer,
.promoCodeContainer {
  width: 100%;
  background-color: white;
  margin: 1rem 0px;
}

.shadowBoxx {
  box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 6px 6px;
  padding: 10px;
  border-radius: 11px;
  margin: 10px 0px 30px;
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 10px 0px;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 6px 6px;
  border-radius: 6px;
  width: 100%;
}

.input-groupp {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 10px 0px;
  padding: 10px;
  border-radius: 6px;
  width: 100%;
}

.yourChoiceContainer input.form-control,
.promoCodeContainer input.form-control {
  color: var(--darkBlue);
  background: var(--lightGray) !important;
  border: 1px solid var(--lightGray) !important;
  padding: 0.8rem !important;
  font-size: 1rem !important;
  border-radius: 10px !important;
  width: calc(85% - 5px) !important;
}

button.btn.inputSubmittBtn {
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--darkYellow) !important;
  border-radius: 10px !important;
  margin-left: 5px !important;
}

button.btn.inputSubmittBtn:hover {
  background: var(--darkBlue) !important;
}

.offerOrderAndDiscountArea {
  margin: 0.5rem 1rem;
  width: 100%;
}

.offerOrderAndDiscountArea h2.offerCartHeading {
  color: var(--darkBlue);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0px;
}

.discountInfo {
  display: flex;
  align-items: center;
  margin: 0.5rem 0px;
}

.discountInfo span {
  margin-right: 5px;
  position: relative;
  top: -1px;
}

.discountInfo span svg {
  width: 20px;
}

.discountInfo span svg path {
  fill: var(--darkBlue);
}

.discountInfo p {
  color: var(--darkBlue);
  font-size: 1rem;
  font-weight: 500;
  margin: 0px;
}

.cartTotal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 1rem 0px;
}

.cartTotal h3.totalMoney {
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px;
  color: var(--darkBlue);
  font-size: 1.6rem;
}

.cartTotal h3.totalMoney span {
  color: var(--darkYellow);
  margin-left: 1.2rem;
}

.formActionBtn,
.validateOrderContainer {
  width: 100%;
  margin: 0.5rem 0px;
  text-align: center;
}

.validateBtn {
  position: relative;
  z-index: 5;
  padding: 0px 0.5rem;
  color: white;
}

a.btn.normalBtn,
a.btn.normalBtn:hover,
.formActionBtn button.btn.validateBtn {
  background: var(--darkBlue) !important;
  color: var(--white) !important;
}

a.btn.normalBtn,
button.btn.validateBtn {
  width: 580px;
  margin: 20px 53px 20px 89px;
  color: var(--white);
  padding: 0.8rem 0px;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  background: var(--darkYellow) !important;
  border: 1px solid var(--darkYellow) !important;
}

button.btn.validateBtn:hover {
  background: var(--darkBlue) !important;
}

.formActionBtn button.btn.validateBtn:hover {
  background: var(--darkYellow) !important;
}

span.CartIconAndPrice {
  display: flex;
  align-items: center;
  margin-left: 11px;
}

span.CartIconAndPrice span.cartBtnIcon {
  margin-left: 3px;
  position: relative;
  margin-right: 12px;
}

span.CartIconAndPrice span.cartBtnIcon img {
  width: 35px;
  filter: invert(100%);
}

span.CartIconAndPrice span.cartBtnIcon img:hover {
  width: 35px;
}

span.CartIconAndPrice span.cartBtnIcon::before {
  content: "";
  background: var(--white);
  width: 2px;
  height: 100%;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
  right: -10px;
}

span.TotalCartItemsAndPrice {
  font-size: 13px;
  margin-left: 6px;
  font-weight: 500;
  text-align: left;
}

.validateBtnPrimary button.btn.validateBtn {
  font-size: 1rem;
}

.validateBtnPrimary button.btn.validateBtn .row {
  display: flex;
  align-items: center;
}

span.priceBold {
  font-size: 19px;
  font-weight: 600;
}

.heroContainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--black);
}

.sliderContainer {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.slideItem {
  position: relative;
  overflow: hidden;
}

.slideImg {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

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

.slideImg::before {
  content: "";
  background: var(--black);
  height: 98%;
  width: 98%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}

.slideTextContainer {
  position: absolute;
  top: 50%;
  width: 60%;
  left: 3%;
  transform: translateY(-50%);
  z-index: 3;
}

.slideTextContainer h1 {
  font-family: "Passion One", cursive;
  font-weight: 700;
  font-size: 15vh;
  line-height: 16.3vh;
  opacity: 0;
  transform: translate(0px, 0px) rotate(0deg) skewX(-6deg);
  color: var(--white);
}

.slideTextContainer h1 span {
  font-size: 20vh;
  color: var(--darkYellow);
}

.slideTextContainer h1 span.outlineLetter {
  color: transparent;
  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color: var(--white);
}

.centerTxtElement {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  opacity: 0;
  transition: all 0.8s linear 0s;
}

.centerTxtElement span {
  font-size: 145vh;
  color: transparent;
  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color: var(--darkYellow);
  transition: all 0.3s linear 0s;
}

.centerTxtElement span.fillLetter {
  color: var(--darkYellow);
}

.heroMenuBtnContainer {
  position: relative;
  z-index: 7;
  display: flex;
  margin-left: 70px;
}

.heroMenuBtnContainer a {
  color: var(--white);
  font-family: "Passion One", cursive;
  font-size: 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  padding: 1rem 10rem 1rem 1.5rem;
  width: max-content;
  border: 10px solid var(--fadeWhite);
  position: relative;
  border-radius: 50px;
}

.heroMenuBtnContainer a span svg {
  width: 55px;
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.heroMenuBtnContainer a span svg path.st0 {
  fill: var(--white);
}

.heroMenuBtnContainer a span svg path.st1 {
  fill: var(--darkYellow);
}

.heroSocialsIcons {
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
  background: var(--fadeBlack);
  border-radius: 10px 0px 0px 10px;
  padding: 1rem;
  z-index: 10;
}

.heroSocialsIcons ul {
  text-align: center;
  padding: 0px !important;
  margin: 0px !important;
}

.heroSocialsIcons ul a {
  color: var(--darkYellow);
  transition: all 0.3s linear 0s;
  font-size: 1.5rem;
  margin: 0.5rem 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heroSocialsIcons ul a:hover {
  color: var(--white);
}

.owl-item.active .centerTxtElement {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.owl-item.active .slideTextContainer h1 {
  opacity: 1;
  animation: 2s ease 0s 1 normal none running skewAnim;
}

@keyframes skewAnim {
  0% {
    transform: skewX(10deg);
  }
  50% {
    transform: skewX(5deg);
  }
  100% {
    transform: skewX(-6deg);
  }
}

.sliderBtnNProgressContainer {
  position: absolute;
  bottom: 10%;
  z-index: 555;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px auto;
  width: 80%;
  right: 45px;
}

.sliderProgressContainer {
  width: 100%;
  height: max-content;
  flex: 1 1 0%;
  display: flex;
}

.sliderProgressContainer .prgoressBar {
  width: 100%;
  background: var(--fadeWhite);
  height: 8px;
  margin: 0px auto;
  position: relative;
  overflow: hidden;
  border-radius: 50px;
}

.sliderProgressContainer .prgoressBar::before {
  content: "";
  background: var(--white);
  width: 0px;
  height: 100%;
  position: absolute;
  opacity: 1;
  left: 0px;
  top: 0px;
  animation: 15s ease 0s infinite normal none running progress;
}

@keyframes progress {
  0% {
    width: 0px;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}

button.mvToBtm {
  width: 40px;
  height: 60px;
  position: absolute;
  bottom: 12px;
  left: 50%;
  border: 3px solid var(--white);
  border-radius: 50px;
  z-index: 6;
  transition: all 0.3s linear 0s;
  overflow: hidden;
  transform: translateX(-50%);
  background: none !important;
  box-shadow: none !important;
}

button.mvToBtm span {
  width: 10px;
  height: 10px;
  background: var(--white);
  border-radius: 100%;
  position: absolute;
  top: 25%;
  left: calc(50% - 5px);
  animation: 2s ease 0s infinite normal none running bounce;
}

.mainCategories {
  position: relative;
  text-align: center;
  margin-top: 93px !important;
}

.mainCategoriess h1,
.mainCategoriess2 h1 {
  text-transform: uppercase;
  padding: 30px 0px;
  font-family: alabama-light;
  font-weight: 900;
  font-size: 4rem;
}

.mainCategoriess h1 span,
.mainCategoriess2 h1 span {
  color: var(--darkYellow);
}

.mainCategoriess {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../img/CARD1-BG.png") center center / cover no-repeat;
  margin-top: 10px !important;
}

.mainCategoriess .container {
  position: relative;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-top: 30px !important;
  display: flex !important;
}

.mainCategoriess2 {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../img/CARD1-BG.png") center center / cover no-repeat;
  margin-top: 10px !important;
  display: none;
}

.mainCategoriess2 .container {
  position: relative;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-top: 10px !important;
  display: flex !important;
}

h2.secSubTitlte {
  margin: 0px;
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--darkBlue);
}

h1.secTitlte {
  font-size: 2.2rem;
  margin: 0px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--darkYellow);
}

.categoryBox {
  width: 100%;
  background: var(--white);
  box-shadow: rgba(155, 155, 155, 0.16) 0px 0px 3px 4px;
  margin: 1rem 0px;
  transform: scale(0.9);
  top: 0px;
  position: relative;
  transition: all 0.3s linear 0s;
  padding: 2rem 0px;
}

.categoryBox a {
}

.catProdImg {
  width: 95%;
  margin: 1rem auto;
  transform: rotate(0deg);
  transition: all 0.3s linear 0s;
}

.categoryBox:hover .catProdImg {
  transform: rotate(20deg);
}

h3.catTitle {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--darkBlue);
  margin-top: 2rem;
}

.categoryBox:hover {
  top: -20px;
  transform: scale(1);
  box-shadow: rgba(155, 155, 155, 0.2) 0px 0px 3px 4px;
}

footer.footer {
  display: block;
  width: 100%;
}

.footerDetailArea {
  background: url("../img/footerBg.jpg") center center / cover no-repeat;
  padding: 5rem 0px;
  color: var(--black);
}

.storeIcons {
  display: flex;
  align-items: center;
}

.storeIcons a {
  margin: 0px 0.5rem;
}

.storeIcons a img {
  max-width: 100%;
}

.ftTxtContainer h2 {
  font-size: 1.8rem;
  color: var(--black);
}

.ftTxtContainer p {
  font-size: 1rem;
  color: var(--black);
}

.ftBotttomRow {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 1.5rem 0px;
  background: var(--darkYellow);
}

.bottomRowItemsList {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.bottomRowItemsList span {
  font-size: 1.2rem;
  color: var(--white);
}

.bottomRowItemsList span a {
  color: var(--white);
}

.bottomRowItemsList span a:hover {
  color: var(--white);
}

ul.ft-socials {
  display: flex;
  justify-content: center;
  margin: 0px !important;
  padding: 0px !important;
}

ul.ft-socials img {
  width: 50px;
}

ul.ft-socials a {
  transition: all 0.3s linear 0s;
  margin: 0px 0.5rem;
  position: relative;
  top: 0px;
}

ul.ft-socials a:hover {
  top: -5px;
}

.leftBtmRowItm {
  display: flex;
  flex: 1 1 0%;
  justify-content: flex-start;
}

.centerBtmRowItem {
  display: flex;
  flex: 1 1 0%;
  justify-content: center;
}

.rightBtmRowItm {
  display: flex;
  flex: 1 1 0%;
  justify-content: flex-end;
}

.linkPageContainer {
  position: relative;
  padding: 7.5rem 0px 5rem 0px;
  min-height: 100vh;
}

.modelInerBox {
  margin: 3rem 0px;
}

.modelContainer {
  margin: 2rem 0px;
  position: relative;
}

h2.modelHeading {
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--darkYellow);
}

.modelBtnsContainer ul {
  display: flex;
  align-items: center;
  padding: 0px !important;
}

.btnItem {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btnItem a {
  color: var(--darkBlue);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 0.5rem 1rem;
  background: var(--white);
  font-size: 1.2rem;
  margin: 1rem 1rem 1rem 0px;
  box-shadow: rgba(0, 0, 0, 0.18) 0px 0px 8px 1px;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s linear 0s;
  width: max-content;
}

.menuListeBtns .owl-dots {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menuListeBtns .owl-dots button.owl-dot span {
  width: 35px;
  height: 5px;
  border-radius: 0px;
  background: var(--darkBlue);
  padding: 0px !important;
  margin: 0px !important;
}

.menuListeBtns .owl-dots button.owl-dot span:hover,
.menuListeBtns .owl-dots button.owl-dot.active span {
  background: var(--darkYellow);
}

.btnItem.activeMenuItem a,
.btnItem a:hover {
  background: var(--darkYellow);
  color: var(--white);
}

.modelBtnsContainer ul a {
  color: var(--darkBlue);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 0.5rem 1rem;
  background: var(--white);
  font-size: 1.2rem;
  margin: 1rem 1rem 1rem 0px;
  box-shadow: rgba(0, 0, 0, 0.18) 0px 0px 8px 1px;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s linear 0s;
}

.modelBtnsContainer ul a.active {
  background: var(--darkYellow) !important;
  color: white !important;
}

.modelBtnsContainer ul li.activeMenuItem a,
.modelBtnsContainer ul a:hover {
  background: var(--darkYellow);
  color: var(--white);
}

.prodImageShadeBox {
  padding: 0.5rem 1rem;
  background: var(--white);
  font-size: 1.2rem;
  margin: 1rem 0px;
  box-shadow: rgba(0, 0, 0, 0.18) 0px 0px 8px 1px;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s linear 0s;
  text-align: center;
}

.prodImageShadeBox .prodShadeContainer {
  width: 80%;
  margin: 0px auto;
}

.prodImageShadeBox .prodShadeContainer img {
  width: 100%;
  margin: 0px auto;
}

.prodImageShadeBox h4 {
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0.5rem auto;
  color: var(--darkBlue);
}

.prodImageShadeBox.active h4 {
  color: var(--white);
}

.prodImageShadeBox:hover {
  background: var(--darkYellow);
}

.prodImageShadeBox:hover h4 {
  color: var(--white);
}

.prodImageShadeBox.d-flex.align-items-center .prodShadeContainer {
  width: 60px;
}

.popupForDelAndPic {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: var(--fadeBlue);
  z-index: 555;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

.popupForDelAndPic .popupItemsContainer {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.popupForDelAndPic .popupItemsContainer .innerPopupBox {
  width: 65%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  background: var(--white);
  padding: 2rem;
  border-radius: 20px;
}

.popupForDelAndPic .popupItemsContainer .innerPopupBoxx {
  width: 28%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  background: var(--white);
  padding: 1rem 1rem 0.9rem;
  border-radius: 20px;
}

.takeAwayContainer .popupHeadingIcon,
.deliverySelector .popupHeadingIcon {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 1rem;
  border-radius: 10px 10px 0px 0px;
}

.takeAwayContainer .popupHeadingIcon {
  background: var(--darkYellow);
}

.deliverySelector .popupHeadingIcon {
  background: var(--darkBlue);
}

.popupHeadingIcon h5 {
  font-size: 1.2rem;
  color: var(--white);
  margin: 0px;
  display: flex;
  flex: 1 1 0%;
}

.popupHeadingIcon a {
  color: var(--white);
}

.popupHeadingIcon span {
  font-size: 1.5rem;
  color: var(--white);
}

.optionsContainer {
  position: relative;
  overflow: hidden;
}

.innerPopupBox select.form-control {
  box-shadow: none !important;
  background: var(--lightGray) !important;
  cursor: pointer !important;
  outline: none !important;
  border: none !important;
  /* padding: 1rem !important; */
  border-radius: 0px 0px 10px 10px !important;
  color: var(--darkBlue) !important;
  font-size: 1vw !important;
  font-weight: 600 !important;
}

.optionsContainer::before {
  content: "" !important;
  height: 0px !important;
  width: 0px !important;
  position: absolute !important;
  top: 30% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  border-bottom: none !important;
  border-image: initial !important;
  border-top: 7px solid var(--darkBlue) !important;
  border-left: 7px solid transparent !important;
  border-right: 7px solid transparent !important;
}

.adressAndDeliveryBtns {
  margin: 1rem 0px;
  padding: 1rem 0px;
  overflow: hidden;
  position: relative;
}

.delTakeInnerContainer {
  width: 80%;
  margin: 0px auto;
}

.adressAndDeliveryBtns h2.nomralDetail {
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0px;
}

.adressAndDeliveryBtns h2.nomralDetail span {
  display: block;
  font-weight: normal;
  font-size: 1rem;
}

.deliveryDetailBox,
.takeAwayDetailBox {
  padding: 1.5rem;
  position: relative;
}

.takeAwayDetailBox {
  background: var(--darkYellow);
  border-radius: 10px 0px 0px 10px;
}

.deliveryDetailBox {
  background: var(--darkBlue);
  border-radius: 0px 10px 10px 0px;
}

a.changeDetailPencil {
  position: absolute;
  right: 15px;
  bottom: 15px;
  z-index: 5;
}

a.changeDetailPencil img {
  width: 20px;
}

.menuListeBtns .modelBtnsContainer ul {
  justify-content: flex-start;
}

.menuListeBtns .modelInerBox {
  overflow: hidden;
  margin: 0px !important;
}

.prodShadowBox {
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.18) 0px 0px 8px 1px;
  background: var(--white);
  padding: 1rem;
  border-radius: 0px;
  text-align: center;
  margin: 1rem 0px;
  top: 0px;
  transition: all 0.3s linear 0s;
}

.prodShadowBox:hover {
  top: -20px;
  border-radius: 15px;
}

.prodShadowBox .prodImageContainer {
  width: 85%;
  margin: 1rem auto;
  transform: scale(1);
  transition: all 0.3s linear 0s;
}

.prodImageContainer img.img-fluid.productBoxImage {
  width: 100%;
  transition: all 0.3s linear 0s;
}

h3.prodTitle {
  font-size: 24px;
  color: var(--darkYellow);
  font-family: knockOut-Light-Weight, sans-serif, bold;
  letter-spacing: 1px;
}

p.prodDetail {
  color: var(--darkBlue);
  font-size: 0.9rem;
  overflow-wrap: break-word;
}

.poductExtra,
.cutsomProdSizes,
.poductSizesSimple {
  margin: 1.5rem -12px;
  width: 111%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poductExtra ul,
.cutsomProdSizes ul,
.poductSizesSimple ul {
  background: var(--mediumFadeGray);
  flex-flow: row wrap;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  box-shadow: rgba(0, 0, 0, 0.11) 0px 0px 7px 4px;
  padding: 0px !important;
}

.poductExtra ul li a,
.cutsomProdSizes ul li a,
.poductSizesSimple ul li a {
  color: var(--darkBlue);
  font-weight: 500;
  font-size: 0.8vw;
  margin: 0.1rem;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  transition: all 0.3s linear 0s;
}

.poductExtra ul li:hover a,
.poductExtra ul li.activeExtra a,
.cutsomProdSizes ul li.activeSize a,
.poductSizesSimple ul li:hover a,
.cutsomProdSizes ul li:hover a,
.poductSizesSimple ul li.activeSize a {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 7px 4px;
  background: var(--darkYellow) !important;
  color: var(--white) !important;
}

.prodPriceAndAddBtn {
  margin: 0.5rem 0px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 1.5rem 0px;
}

.prodPriceAndAddBtn .prodPrice {
  flex: 1 1 0%;
  display: flex;
  width: 100%;
  color: var(--navydarkblue);
  font-size: 1.2rem;
  margin: 0px;
  font-weight: 600;
  align-items: center;
}

button.directAddToCart,
button.btn.prodTypShowBtn {
  justify-content: flex-end;
  transition: all 0.5s linear 0s;
  padding: 0px !important;
  margin: 0px !important;
}

span.AddIcon svg {
  width: 25px;
}

.prodTypeBtns {
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  text-align: center;
  padding: 1rem 0px;
  background: var(--white);
  border: 2px solid var(--darkYellow);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transform: translateX(120%);
  transition: all 0.3s linear 0s;
}

.prodTypeBtns a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 8px;
  color: var(--darkBlue);
  font-size: 1.2vw;
  font-weight: 600;
  position: relative;
}
@media (max-width: 1700px) {
  .prodTypeBtns a {
    font-size: 1.1vw;
  }
}
@media (max-width: 1550px) {
  .prodTypeBtns a {
    font-size: 1vw;
  }
}

.prodTypeBtns button.btn.closeProdTypeBtn {
  position: absolute;
  right: 5px;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  padding: 0px;
  margin: 0px;
}

.prodTypeBtns button.btn.closeProdTypeBtn span svg {
  width: 20px;
}

button.directAddToCart:hover span.AddIcon svg circle,
button.btn.prodTypShowBtn:hover span.AddIcon svg circle {
  fill: var(--darkBlue);
}

.prodTypeBtns button.btn.closeProdTypeBtn:hover span circle {
  fill: var(--darkYellow);
}

.prodTypeBtns.show {
  transform: translateX(0px);
}

.prodTypeBtns a:first-child::before {
  content: "";
  background: var(--darkYellow);
  width: 2px;
  height: 90%;
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
}

.zeroOpacity {
  pointer-events: none;
  opacity: 0;
}

.offerAdsMainContainer .owl-carousel.off {
  display: block;
}

.customProductContainer {
  position: relative;
  margin: 1rem 0px;
  padding: 0px;
}

.customProdBox {
  text-align: center;
}

.customProdBox h2.productName {
  color: var(--darkBlue);
  font-size: 2.2rem;
  text-transform: uppercase;
  font-weight: 600;
  margin: 1.5rem 0px;
}

.prodImagWithIngContainer {
  text-align: center;
  margin: 2rem 0px;
  padding: 0px 0.5rem;
}

.productImageContainer {
  width: 100%;
  position: relative;
}

.productImageContainer img.img-fluid {
  width: 100%;
}

.prodQunatitChanger {
  margin: 1rem 0px;
}

div.prodSideIng {
  padding: 0px;
  margin: 2rem 0px 0px !important;
}

div.prodSideIng li {
  display: inline-table;
}

div.prodSideIng button.btn {
  margin: 0px;
  position: relative;
}

div.prodSideIng button.btn img {
  width: 100%;
}

.quantitSelector {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.quantitSelector input#numberofItems {
  width: 36px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--darkBlue);
  padding: 0px !important;
  margin: 0px !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.quantitSelector input#numberofItems::-webkit-outer-spin-button,
.quantitSelector input#numberofItems::-webkit-inner-spin-button {
  appearance: none;
  margin: 0px;
}

.quantitSelector input#numberofItems[type="number"] {
}

.quantitSelector input#numberofItems:focus {
  border-radius: 10px;
  border: 3px solid var(--darkYellow) !important;
}

.customProdDetail {
  margin: 3.5rem 0px 2rem;
  padding: 0px 0.5rem;
}

h2.productExtraIngHeading,
h2.descriptionTitle {
  color: var(--darkBlue);
  font-size: 2.2rem;
  text-transform: uppercase;
  font-weight: 600;
  margin: 1.5rem 0px 0px;
}

.extraSpecialIng {
  position: relative;
  margin: 0.5rem 0px;
  width: 100%;
}

p.prodDescription {
  color: var(--darkBlue);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1rem 0px;
}

.extraSpecialIng ul#extraIngredients {
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  border: none;
  position: relative;
  z-index: 5;
}

.extraSpecialIng ul#extraIngredients button.nav-link {
  color: var(--darkBlue);
  font-weight: 500;
  font-size: 1rem;
  margin: 0.5rem;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  border: 1px solid var(--darkBlue);
  transition: all 0.3s linear 0s;
}

.extraSpecialIng ul#extraIngredients button.nav-linkk {
  color: var(--darkBlue);
  font-weight: 500;
  font-size: 1rem;
  margin: 0.5rem;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  border: 1px solid var(--darkBlue);
  transition: all 0.3s linear 0s;
}

.menuOfferItems ul a.nav-link:hover,
.menuOfferItems ul a.nav-link.active,
.extraSpecialIng ul#extraIngredients button.nav-link.active {
  background: var(--darkYellow);
  border-color: var(--darkYellow);
  color: var(--white);
}

.menuOfferItems ul a.nav-link:hover,
.menuOfferItems ul a.nav-link.active,
.extraSpecialIng ul#extraIngredients button.nav-linkk.active {
  background: var(--darkYellow);
  border-color: var(--darkYellow);
  color: var(--white);
}

.extraSpecialIng div.tab-content {
  width: calc(100% + 2rem);
  margin-left: -1rem;
}

.extraSpecialIng div.tab-content {
  overflow: hidden;
  padding-left: 5rem;
  margin: 0.5rem 0px;
  width: 100%;
}

ul.extraList {
  padding: 0px;
  margin: 0px;
}

ul.extraList button.btn.extraIngBtn {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0px;
  margin: 0.5rem 0px;
  font-size: 1.2rem;
  color: var(--darkBlue);
  font-weight: 600;
  cursor: pointer;
  position: relative;
}

ul.extraList button.btn.extraIngBtn img {
  width: 85px;
  margin: 0px 0.5rem 0px 1rem;
}

ul.extraList button.btn.extraIngBtn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0px;
  background: var(--white);
  width: 30px;
  border: 4px solid var(--darkBlue);
  height: 30px;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: all 0.3s linear 0s;
}

ul.extraList button.btn.extraIngBtn.fadeDisabled,
ul.extraList button.btn.extraIngBtn:hover {
  color: var(--darkYellow);
}

ul.extraList button.btn.extraIngBtn.fadeDisabled::before,
ul.extraList button.btn.extraIngBtn:hover::before {
  border: 4px solid var(--darkYellow);
}

ul.extraList button.btn.extraIngBtn span.removIcon {
  position: absolute !important;
  left: -34px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

ul.extraList button.btn.extraIngBtn span.removIcon img {
  width: 15px !important;
}

.ingrCheckBoxes {
  display: none !important;
}

img.ingPack {
  opacity: 0;
  z-index: -1;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(6);
  transition: all 0.8s linear 0s;
}

.activeIngredient {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  z-index: 2 !important;
}

span.removIcon {
  padding: 0px;
  border-radius: 55%;
  background: white;
  transform: translate(500%, -71%) !important;
  width: 28px !important;
}

span.removIcon1 {
  padding: 0px;
  border-radius: 55%;
  background: white;
  transform: translate(415%, -71%) !important;
  width: 28px !important;
}

span.removIcon2 {
  padding: 0px;
  border-radius: 55%;
  background: white;
  transform: translate(370%, -71%) !important;
  width: 28px !important;
}

span.removIcon3 {
  padding: 0px;
  border-radius: 55%;
  background: white;
  transform: translate(508%, -71%) !important;
  width: 28px !important;
}

span.removIcon img {
  margin: 0px auto;
  opacity: 0;
  display: none;
  position: relative;
  width: 30px !important;
}

span.removIcon1 img {
  margin: 0px auto;
  opacity: 0;
  display: none;
  position: relative;
  width: 30px !important;
}

span.removIcon2 img {
  margin: 0px auto;
  opacity: 0;
  display: none;
  position: relative;
  width: 30px !important;
}

span.removIcon3 img {
  margin: 0px auto;
  opacity: 0;
  display: none;
  position: relative;
  width: 30px !important;
}

span.remIcon {
  padding: 0px;
  border-radius: 55%;
  background: white;
  transform: translate(500%, -71%) !important;
  width: 28px !important;
}

span.remIcon1 {
  padding: 0px;
  border-radius: 55%;
  background: white;
  transform: translate(415%, -71%) !important;
  width: 28px !important;
}

.remIcon2 {
  padding: 0px;
  position: relative;
  bottom: 25px;
  display: none;
  left: 15px;
  border-radius: 55%;
  background: white;
  width: 28px !important;
}

span.remIcon3 {
  padding: 0px;
  border-radius: 55%;
  background: white;
  transform: translate(508%, -71%) !important;
  width: 28px !important;
}

span.remIcon img {
  margin: 0px auto;
  opacity: 0;
  display: none;
  position: relative;
  width: 30px !important;
}

span.remIcon1 img {
  margin: 0px auto;
  opacity: 0;
  display: none;
  position: relative;
  width: 30px !important;
}

.remIcon2 img {
  display: none;
}

span.remIcon3 img {
  margin: 0px auto;
  opacity: 0;
  display: none;
  position: relative;
  width: 30px !important;
}

.addIcon {
  padding: 0px;
  border-radius: 55%;
  background: white;
  transform: translate(515%, -71%) !important;
  width: 28px !important;
}

.addIcon1 {
  padding: 0px;
  border-radius: 55%;
  background: white;
  transform: translate(424%, -71%) !important;
  width: 28px !important;
}

.addIcon2 {
  padding: 0px;
  border-radius: 55%;
  background: white;
  transform: translate(370%, -71%) !important;
  width: 28px !important;
}

.addIcon3 {
  padding: 0px;
  border-radius: 55%;
  background: white;
  transform: translate(515%, -71%) !important;
  width: 28px !important;
}

.addIcon img {
  margin: 0px auto;
  opacity: 0;
  display: none;
  position: relative;
  left: 11px;
  width: 30px !important;
}

.addIcon1 img {
  margin: 0px auto;
  opacity: 0;
  display: none;
  position: relative;
  left: 11px;
  width: 30px !important;
}

.addIcon2 img {
  margin: 0px auto;
  opacity: 0;
  display: none;
  position: relative;
  left: 11px;
  width: 30px !important;
}

.addIcon3 img {
  margin: 0px auto;
  opacity: 0;
  display: none;
  position: relative;
  left: 11px;
  width: 30px !important;
}

.fadeDisabled span.removIcon img {
  display: block;
  opacity: 1 !important;
}

.fadeDisabled span.removIcon1 img {
  display: block;
  opacity: 1 !important;
}

.fadeDisabled span.removIcon2 img {
  display: block;
  opacity: 1 !important;
}

.fadeDisabled span.removIcon3 img {
  display: block;
  opacity: 1 !important;
}

.addPlusIcon {
  padding: 0px;
  position: relative;
  bottom: 25px;
  left: 15px;
  border-radius: 55%;
  background: white;
  width: 28px !important;
}

.addPlusIcon1 {
  padding: 0px;
  position: relative;
  bottom: 25px;
  left: 15px;
  border-radius: 55%;
  background: white;
  width: 28px !important;
}

.addPlusIcon2 {
  padding: 0px;
  position: relative;
  bottom: 25px;
  left: 15px;
  border-radius: 55%;
  background: white;
  width: 28px !important;
}

.addPlusIcon3 {
  padding: 0px;
  position: relative;
  bottom: 25px;
  left: 15px;
  border-radius: 55%;
  background: white;
  width: 28px !important;
}

.addPlusIcon img {
  margin: 0px auto;
  opacity: 0;
  display: none;
  position: relative;
  left: 11px;
  width: 30px !important;
}

.addPlusIcon1 img {
  margin: 0px auto;
  opacity: 0;
  display: none;
  position: relative;
  left: 11px;
  width: 30px !important;
}

.addPlusIcon2 img {
  margin: 0px auto;
  opacity: 0;
  display: none;
  position: relative;
  left: 11px;
  width: 30px !important;
}

.addPlusIcon3 img {
  margin: 0px auto;
  opacity: 0;
  display: none;
  position: relative;
  left: 11px;
  width: 30px !important;
}

.fadeDisabled span.remIcon img {
  display: block;
  opacity: 1 !important;
}

.fadeDisabled span.remIcon1 img {
  display: block;
  opacity: 1 !important;
}

.fadeDisabled .remIcon2 {
  display: block;
}

.fadeDisabled span.remIcon3 img {
  display: block;
  opacity: 1 !important;
}

.fadeDis button.CustomExtraButton {
  border: 1px solid var(--youtubeColor) !important;
}

.fadeDis button.CustomExtraButton {
  border: 1px solid var(--youtubeColor) !important;
}

.fadeDis button.CustomExtraButton {
  border: 1px solid var(--youtubeColor) !important;
}

.fadeDis button.CustomExtraButton {
  border: 1px solid var(--youtubeColor) !important;
}

.fadeDisabledPlus img.addIcon {
  display: none;
  opacity: 1 !important;
}

.fadeDisabledPlus img.addIcon1 {
  display: none;
  opacity: 1 !important;
}

.fadeDisabledPlus img.addIcon2 {
  display: none;
  opacity: 1 !important;
}

.fadeDisabledPlus img.addIcon3 {
  display: none;
  opacity: 1 !important;
}

.fadeDisabledPlus img.addPlusIcon {
  display: none;
  opacity: 1 !important;
}

.fadeDisabledPlus img.addPlusIcon1 {
  display: none;
  opacity: 1 !important;
}

.fadeDisabledPlus img.addPlusIcon2 {
  display: none;
  opacity: 1 !important;
}

.fadeDisabledPlus img.addPlusIcon3 {
  display: none;
  opacity: 1 !important;
}

h2.prodPrice {
  color: var(--darkYellow);
  font-size: 2.2rem;
  text-transform: uppercase;
  font-weight: 600;
  margin: 1.5rem 0px 0px;
}

.totalPrice {
  margin: 1.5rem 0.5rem;
  font-size: 8rem;
  font-weight: 500;
}

.totalPricee {
  margin: 1.5rem 0.5rem;
  font-size: 8rem;
  font-weight: 500;
}

.customAddCartContainer {
  position: relative;
  overflow: hidden;
  margin: 1rem 0px;
}

button.btn.addToCartCustom {
  transition: all 0.3s linear 0s;
  min-width: 60%;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin-left: 72px;
  font-weight: 600;
  padding: 0.5rem 1rem;
  overflow: hidden;
  border-radius: 10px;
  background: var(--darkYellow) !important;
  color: var(--white) !important;
}

@media (max-width: 1000px) {
  button.btn.addToCartCustom {
    margin-left: 0px;
  }
}

button.btn.addToCartCustomm {
  transition: all 0.3s linear 0s;
  min-width: 60%;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin-left: 166px;
  font-weight: 600;
  padding: 0.5rem 1rem;
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--white) !important;
  color: var(--navydarkblue) !important;
  border: var(--darkYellow) 1px solid !important;
}

button.btn.addToCartCustom span.btnTxt {
  display: flex;
  flex: 1 1 0%;
  justify-content: flex-start;
}

button.btn.addToCartCustom span.btnIcon {
  position: relative;
  left: 0px;
  transition: all 0.3s linear 0s;
}

button.btn.addToCartCustom span.btnIcon svg {
  width: 45px;
}

button.btn.addToCartCustom:hover {
  background: var(--darkBlue) !important;
}

button.btn.addToCartCustomm:hover span.btnIcon {
  left: 10px;
}

button.btn.addToCartCustomm span.btnTxt {
  display: flex;
  flex: 1 1 0%;
  justify-content: flex-start;
}

button.btn.addToCartCustomm span.btnIcon {
  position: relative;
  left: 0px;
  transition: all 0.3s linear 0s;
}

button.btn.addToCartCustomm span.btnIcon svg {
  width: 45px;
}

button.btn.addToCartCustomm:hover {
  background: var(--darkYellow) !important;
  color: white !important;
}

button.btn.addToCartCustomm:hover span.btnIcon {
  left: 10px;
}

.animatedPizzaBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 0;
  width: 100%;
  transition: all 0.5s linear 0s;
}

.pizzaBoxContainer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 0px;
  perspective: 1100px;
  perspective-origin: 50% -414px;
}

.pizzaBoxCube {
  margin-bottom: 100px;
  position: relative;
  width: 100%;
  height: 200px;
  transform-style: preserve-3d;
}

.pizzaBoxCube div {
  background-size: cover;
  background-position: center center;
  opacity: 1;
  position: absolute;
  width: 200px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 30px 10px inset;
}

.BurgerBoxCube {
  margin-bottom: 100px;
  position: relative;
  width: 100%;
  height: 200px;
  transform-style: preserve-3d;
}

.BurgerBoxCube div {
  background-size: cover;
  background-position: center center;
  opacity: 1;
  position: absolute;
  width: 200px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 30px 10px inset;
}

.BoxBack {
  background: url("../img/cardBoard.jpg") center center / cover;
  height: 20px;
  transform: translateZ(-100px) rotateY(180deg);
}

.BoxRight {
  background: url("../img/cardBoard.jpg") center center / cover;
  height: 20px;
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: right top;
}

.BoxLeft {
  background: url("../img/cardBoard.jpg") center center / cover;
  height: 20px;
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: left center;
}

.BoxBottom {
  background: url("../img/cardBoard.jpg") center center / cover;
  height: 200px;
  transform: rotateX(90deg) translateY(100px) translateZ(180px);
  transform-origin: center bottom;
}

.BoxFront {
  background: url("../img/cardBoard.jpg") center center / cover;
  height: 20px;
  transform: translateZ(100px);
}

.BoxTop {
  background: url("../img/PizzaBoxTop.png") center center / cover;
  height: 200px;
  transform: translateZ(-100px) rotateX(90deg);
  transform-origin: center top;
  transition-duration: 2s;
}

.BurgerTop {
  height: 150px;
  background-position: center center;
  transform-origin: center top;
  transition-duration: 2s;
  box-shadow: none !important;
}

.PizzaBoxBigCube {
  position: relative;
  width: 200px;
  height: 30px;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
}

.PizzaBoxBigCube .BoxTop {
  transform-origin: center top;
  transform: translateZ(-100px) rotateX(120deg);
}

.productInnerContainer.activePizza {
  top: -65px;
  display: flex;
  transform: translateZ(-63px) rotateX(70deg) rotateZ(184deg) translateY(15px)
    scale(0.5);
}

.animatedPizzaBox.activeBox {
  transform: translate(-50%, -50%) scale(1.6);
}

.animatedPizzaBox.activeBox .PizzaBoxBigCube .BoxTop {
  transform: translateZ(-100px) rotateX(90deg);
  transform-origin: center top;
}

.readForPackingBox {
  transition: all 2s linear 0s;
}

.productInnerContainer.activePizza .readForPackingBox {
  opacity: 0;
}

.productInnerContainer.activeBox.BoxAddedIntoCart {
  transform: scale(0.3) translate(-50%, -50%) rotate(44deg);
  left: 15%;
  z-index: 10;
}

.productInnerContainer {
  position: relative;
}

.productInnerContainer,
.cutomProdContainer {
  transition: all 0.7s linear 0s;
}

.productInnerContainer img {
  width: 100%;
}

.productInnerContainer.activePizza {
  opacity: 0;
  display: flex;
  transform: translateZ(-63px) rotateX(70deg) rotateZ(184deg) translateY(10px)
    scale(0.3);
}

h2.cartPageHeading {
  margin: 2rem auto;
  text-align: center;
  color: var(--darkYellow);
  font-weight: 600;
  text-transform: uppercase;
}

@media only screen and (min-width: 991px) {
  .cartPageContainer img.img-fluid.prodCartImg {
    width: 100%;
  }
  .cartPageContainer
    button.btn.validateBtn
    span.CartIconAndPrice
    span.cartBtnIcon
    img {
    width: 45px;
  }
  .cartPageContainer span.TotalCartItemsAndPrice {
    font-size: 18px;
    margin-left: 6px;
    font-weight: 500;
  }
  .cartPageContainer span.cartBtnTxt {
    font-size: 18px;
    text-transform: uppercase;
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;
  }
  .cartPageContainer .cartItemNameAndPrice h3.cartItemPrice {
    font-size: 25px;
  }
}

.formMainContainer {
  position: relative;
  padding: 2rem 0px;
  overflow: hidden;
}

.comDetailPrice {
  font-weight: 500;
  font-size: 17px;
}

.formShadowContainer {
  border-radius: 20px;
  padding: 2rem;
  font-weight: 700;
  color: var(--navydarkblue);
  font-size: 10px;
  box-shadow: rgba(45, 67, 85, 0.15) 1px 1px 6px 5px;
  margin: 2.1rem auto;
}

span#select2-js3m-container {
  display: none !important;
}

span#select2-afrq-container {
  display: none !important;
}

.formShadowContainerFix {
  border-radius: 20px;
  padding: 2rem 0.5rem 2rem 2rem;
  font-weight: 700;
  width: 50%;
  font-size: 10px;
  box-shadow: rgba(45, 67, 85, 0.15) 1px 1px 6px 5px;
  margin: 2.1rem auto;
  color: var(--navydarkblue) !important;
}

.formShadowContainerr {
  border-radius: 20px;
  padding: 2rem 0rem 2rem 1rem;
  font-weight: 400;
  box-shadow: rgba(45, 67, 85, 0.15) 1px 1px 6px 5px;
  width: 90%;
  font-size: 7px;
  margin: 2.1rem 0rem 2.1rem 4.2rem;
  color: var(--darkblue) !important;
}

.CustomTextView {
  transform: translate(-70px, 10px);
  width: 70%;
}

.formShadowContainer .userFormContainer {
  width: 50%;
  text-align: center;
  color: var(--navydarkblue);
  margin: 0.5rem auto;
}

.tabForm .userFormContainer {
  width: auto !important;
}

h2.formHeading {
  text-align: center;
  margin: 1rem 0px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--darkBlue);
}

.inputWithIcon {
  position: relative;
}

span.inputBoxIcon {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
}

span.inputBoxIcon img.lengthIcon {
  width: 20px;
}

span.inputBoxIcon img.wideIcon {
  width: 25px;
}

.userFormContainer input.form-control.rounded-pill.customInput {
  padding: 1rem;
  background: transparent;
  font-size: 16px;
  margin: 0rem 0px 1.5rem;
  color: var(--darkBlue) !important;
}

.inputWithIcon input.form-control.rounded-pill.customInput {
  padding-left: 3rem !important;
}

.formActionBtn button.btn.validateBtn {
  width: 70%;
  height: 50px;
  text-transform: uppercase;
  color: var(--white);
  margin: 1rem auto;
  transition: all 0.5s linear 0s;
  background: var(--darkYellow) !important;
}

.formActionBtn button.btn.validateBtn:hover {
  width: 95%;
  background: var(--darkBlue) !important;
}

p.formSubTxt {
  color: var(--darkBlue);
  text-align: center;
  margin-top: -9px;
  margin-bottom: 16px;
  opacity: 0.8;
}

.timePicekerWrapper,
.datePickerWrapper {
  position: relative;
}

#datepicker {
  position: relative;
}

span.BtmArrowIcon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

#ui-datepicker-div {
  display: none;
  background-color: var(--white);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0.125rem 0.5rem;
  margin-top: 0.25rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

table {
  border-collapse: collapse;
  border-spacing: 0px;
}

.ui-datepicker-calendar thead th {
  padding: 0.25rem 0px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--darkBlue);
}

.ui-datepicker-calendar tbody td {
  width: 2.5rem;
  text-align: center;
  padding: 0px;
}

.ui-datepicker-calendar tbody td a {
  display: block;
  border-radius: 0.25rem;
  line-height: 2rem;
  transition: all 0.3s ease 0s;
  color: var(--darkBlue);
  font-size: 0.875rem;
  text-decoration: none;
}

.ui-datepicker-calendar tbody td a:hover {
  background-color: var(--mediumGray);
}

.ui-datepicker-calendar tbody td a.ui-state-active {
  background-color: var(--darkYellow);
  color: var(--white);
}

.ui-datepicker-header a.ui-corner-all {
  cursor: pointer;
  position: absolute;
  top: 0px;
  width: 2rem;
  height: 2rem;
  margin: 0.5rem;
  border-radius: 0.25rem;
  transition: all 0.3s ease 0s;
}

.ui-datepicker-header a.ui-corner-all:hover {
  background-color: var(--fadePink);
}

.ui-datepicker-header a.ui-datepicker-prev {
  left: 0px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==")
    50% center / 0.5rem no-repeat;
  transform: rotate(180deg);
}

.ui-datepicker-header a.ui-datepicker-next {
  right: 0px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==")
    50% center / 10px no-repeat;
}

.ui-datepicker-header a > span {
  display: none;
}

.ui-datepicker-title {
  text-align: center;
  line-height: 2rem;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding-bottom: 0.25rem;
}

.ui-datepicker-week-col {
  color: var(--darkBlue);
  font-weight: 400;
  font-size: 0.75rem;
}

.checkBoxNLbl,
.radioBoxNLbl {
  display: flex;
  width: 100%;
  align-items: center;
  margin: 0px 0px 1rem;
  text-align: left;
}

.checkBoxNLbl label,
.radioBoxNLbl label {
  margin: 0px !important;
  padding: 0px !important;
}

.checkBoxNLbl input[type="checkbox"],
.radioBoxNLbl input[type="radio"] {
  background: transparent;
  border-radius: 100%;
  position: relative;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.checkBoxNLbl input[type="checkbox"]::before,
.radioBoxNLbl input[type="radio"]::before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--white);
  position: absolute;
  top: -5px;
  left: -2px;
  box-shadow: rgba(151, 151, 151, 0.25) 0px 0px 3px 4px;
  z-index: 5;
}

.checkBoxNLbl input[type="checkbox"]::before {
  border-radius: 5px;
}

.radioBoxNLbl input[type="radio"]::before {
  border-radius: 100%;
}

.checkBoxNLbl input[type="checkbox"]::after,
.radioBoxNLbl input[type="radio"]::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 20px;
  height: 20px;
  left: -2px;
  z-index: 5;
  transform: scale(0);
  transition: all 0.3s linear 0s;
  background: var(--darkYellow) !important;
}

.checkBoxNLbl input[type="checkbox"]::after {
  border-radius: 2px;
}

.radioBoxNLbl input[type="radio"]::after {
  border-radius: 100%;
}

.checkBoxNLbl label span,
.radioBoxNLbl label span {
  font-size: 1rem;
  margin-left: 25px;
  color: var(--darkBlue);
  font-weight: 500;
  position: relative;
  top: 7px;
}

.checkBoxNLbl input[type="checkbox"]:checked::after,
.radioBoxNLbl input[type="radio"]:checked::after {
  transform: scale(1);
}

@media only screen and (max-width: 1410px) {
  .prodImageShadeBox h4 {
    font-size: 1rem;
  }
  .poductExtra ul li a,
  .poductSizesSimple ul li a {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 1300px) {
  .cartPageContainer img.img-fluid.prodCartImg {
    width: 100%;
  }
  .slideTextContainer h1 br {
    display: none;
  }
  .slideTextContainer h1 {
    font-size: 6rem;
  }
}

@media only screen and (max-width: 1100px) {
  img.logoImg {
    width: 180px;
  }
  nav.mainNav a {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 991px) {
  .formShadowContainer {
    padding: 1rem;
    color: var(--navydarkblue);
    margin: 1rem 0px;
  }
  .nav-pills .nav-item {
    width: 100%;
    margin: 5px;
  }
  .formShadowContainer .userFormContainer {
    width: 95%;
  }
  h2.cartPageHeading {
    margin: 1rem auto;
  }
  ul.prodSideIng {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px;
  }
  .linkPageContainer .customProductContainer {
    margin-top: -50px;
    margin-bottom: -50px;
  }
  .poductExtra,
  .poductSizesSimple {
    margin: 0.5rem auto;
  }
  .customProdDetail {
    margin: -50px 0px 0px;
    text-align: center;
    overflow: hidden;
  }
  p.prodDescription {
    font-size: 1rem;
    margin: 0px;
  }
  .customProdDetail h2.descriptionTitle {
    margin-top: 10px;
  }
  h2.productExtraIngHeading,
  h2.descriptionTitle {
    margin-top: 10px;
    font-size: 1.5rem;
  }
  ul.extraList button.extraIngBtn img {
    width: 60px;
  }
  ul.extraList button.extraIngBtn {
    font-size: 1rem;
  }
  button.btn.addToCartCustom span.btnTxt,
  h2.prodPrice {
    font-size: 1.5rem;
  }
  button.btn.addToCartCustom span.btnIcon svg {
    width: 30px;
  }
  button.btn.addToCartCustom {
    justify-content: center;
    width: 100%;
  }
  .extraSpecialIng ul#extraIngredients {
    justify-content: center;
  }
  .sideBarContainer {
    width: 80%;
  }
  .centerNavLink {
    display: none;
  }
  img.logoImg {
    width: 150px;
  }
  a.navTel {
    font-size: 0px !important;
  }
  ul.navSideIcons {
    margin: 0px !important;
  }
  button.btn.cartBtn span.cartIcon svg {
    width: 25px;
  }
  a.userIcon svg {
    width: 20px;
  }
  a.userIcon2 svg {
    width: 20px;
  }
  button.btn.cartBtn span.cartCounterIcon svg {
    width: 17px;
  }
  button.btn.cartBtn span.cartCounterIcon {
    top: -16px;
    left: 8px;
  }
  button.btn.cartBtn span.cartCounterIcon span.cartCounter {
    font-size: 12px;
    top: calc(45% - 0px);
  }
  .hamBurgerIcon button#menuBtn span {
    width: 25px;
    height: 4px;
  }
  .hamBurgerIcon button#menuBtn span:nth-child(2) {
    width: 30px;
  }
  .mobileCommandBtn ul {
    display: block;
  }
  .cartDrawerContainer {
    width: 60%;
    top: 80px;
  }
  .cartDrawerContainer.activeDrawer {
    transform: translateY(0%);
  }
  .drawerInnerContainer {
    height: 65vh;
  }
  .footerDetailArea {
    text-align: center;
  }
  .footerDetailArea .storeIcons {
    justify-content: center;
  }
  .footerDetailArea,
  .mainCategories {
    padding: 2rem 0px;
  }
  .footerDetailArea,
  .mainCategoriess {
    padding: 2rem 0px;
  }
  .footerDetailArea,
  .mainCategoriess2 {
    padding: 2rem 0px;
  }
  .categoryBox {
    transform: scale(1);
  }
  .mainCategories .row.mt-5.mb-5 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .mainCategoriess .row.mt-5.mb-5 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .mainCategoriess2 .row.mt-5.mb-5 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  h2.secSubTitlte {
    font-size: 1.5rem;
  }
  .ftTxtContainer h2,
  h1.secTitlte {
    font-size: 1.8rem;
  }
  .modelBtnsContainer ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  .prodImageShadeBox.d-flex.align-items-center .prodShadeContainer {
    width: 60%;
  }
  .adressAndDeliveryBtns {
    padding: 0rem 0.5rem;
  }
  .deliveryDetailBox,
  .takeAwayDetailBox {
    border-radius: 10px;
    margin: 0.5rem 0px;
  }
  .delTakeInnerContainer {
    width: 100%;
    margin: 0px auto;
  }
  .modelBtnsContainer {
    overflow: hidden !important;
  }
  .menuListeBtns .modelBtnsContainer ul {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow: scroll hidden;
    padding: 0px 5px !important;
    margin: 0px !important;
  }
  .modelBtnsContainer ul a {
    min-width: max-content;
  }
  .modelBtnsContainer ul::-webkit-scrollbar {
    width: 0px !important;
  }
  .modelBtnsContainer ul::-webkit-scrollbar-track {
    background: var(--white);
  }
  .modelBtnsContainer ul::-webkit-scrollbar-thumb {
    background: transparent;
  }
  .modelBtnsContainer ul::-webkit-scrollbar-thumb:hover {
    background: transparent;
  }
  .bottomRowItemsList {
    flex-direction: column;
  }
  ul.ft-socials,
  .rightBtmRowItm,
  .leftBtmRowItm {
    justify-content: center;
    margin: 0.5rem auto;
    width: 100%;
  }
  .ftBotttomRow {
    padding: 0.5rem 0px;
  }
  .linkPageContainer {
    padding: 5rem 0px 3rem;
  }
  .slideTextContainer {
    width: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .slideTextContainer h1 {
    text-align: center;
    font-size: 3rem;
    line-height: normal;
  }
  .slideTextContainer h1 span {
    font-size: 5rem;
  }
  .centerTxtElement span {
    opacity: 0.6;
    font-size: 100vh;
  }
  .centerTxtElement span {
    opacity: 0.6;
    font-size: 100vh;
  }
  .heroMenuBtnContainer a {
    border: 5px solid var(--fadeWhite);
    padding: 0.5rem 10rem 0.5rem 0.5rem;
    font-size: 1.2rem;
  }
  .heroMenuBtnContainer a span svg {
    width: 40px;
    right: 0.5rem;
  }
  button.mvToBtm {
    bottom: 3%;
    height: 40px;
    width: 30px;
  }
  .sliderBtnNProgressContainer {
    flex-direction: column-reverse;
    width: 95%;
    right: unset;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%);
  }
  .sliderProgressContainer {
    margin: 1rem auto;
  }
  .heroMenuBtnContainer {
    margin: 1rem auto;
  }
}

@media only screen and (max-width: 600px) {
  .cartDrawerContainer {
    width: 95%;
    top: 80px;
    left: 50%;
    right: unset;
  }
  .cartDrawerContainer.activeDrawer {
    transform: translate(-50%, 0%) !important;
  }
  .popupForDelAndPic .popupItemsContainer .innerPopupBox {
    width: 90%;
    padding: 1rem;
  }
  .popupForDelAndPic .popupItemsContainer .innerPopupBoxx {
    width: 90%;
    padding: 1rem;
  }
  .innerPopupBox select.form-control option,
  .innerPopupBox select.form-control {
    font-size: 1rem !important;
  }
  .owl-item.active .slideTextContainer h1 {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 335px) {
  img.logoImg {
    width: 110px;
  }
}

nav.mainNav.stickyHeader .rightNavItems {
  display: none;
}

.retourBtn {
  position: relative;
  left: 10px;
}

.retourBtn img {
  position: relative;
  left: 10px;
  height: 50px;
}

.linkPageTxtDetails {
  padding: 0.5rem 0px;
}

.linkPageTxtDetails p {
  color: var(--darkBlue);
  font-size: 1rem;
  font-weight: 500;
}

.linkPageTxtDetails h2.linkPageHeading {
  color: var(--darkBlue);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.75rem !important;
}

.linkPageTxtDetails h1.linkPageHeading {
  color: var(--darkBlue);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

.linkPageTxtDetails p a {
  color: var(--darkYellow);
}

.mapArea {
  width: 100%;
  margin: 1rem 0px;
}

.mapArea img {
  width: 100%;
}

ul.bulletList {
  padding-left: 18px;
  color: var(--darkBlue);
  font-size: 1rem;
  font-weight: 500;
  text-align: justify;
  margin: 1rem 0px !important;
  list-style: disc !important;
}

textarea {
  box-shadow: rgba(129, 128, 128, 0.09) 0px 0px 3px 4px;
  background: transparent;
  margin: 0rem 0px 1.5rem;
  color: var(--darkBlue) !important;
  border: none !important;
  border-radius: 20px !important;
  font-size: 16px !important;
}

.icoRefresh {
  margin-top: 15px;
}

.customTab {
  display: none;
}

.customTab.show {
  display: block;
}

.carouselTabContainer .btnItem a {
  font-size: 1rem;
  font-weight: 500;
  border-radius: 50px;
}

.smallinput {
  width: 15px;
  border: 0px;
}

.tabTxt {
  font-size: 1.2rem;
  color: var(--darkBlue);
  font-weight: 600;
}

.pinkContainer {
  background: rgb(254, 232, 237);
  padding: 50px 20px;
  border-radius: 20px;
  border: 1px solid#e9901b;
}

.identify .checkBoxNLbl input[type="checkbox"],
.radioBoxNLbl input[type="radio"] {
  width: 10px !important;
  height: 10px !important;
}

.pinkContainer hr {
  border: 1px solid#e9901b;
}

select {
  box-shadow: rgba(129, 128, 128, 0.09) 0px 0px 3px 4px;
  padding: 1rem;
  background: transparent;
  font-size: 16px;
  margin: 0rem 0px 1.5rem;
  width: 100%;
  border-radius: 100px;
  color: var(--darkBlue) !important;
  border: none !important;
}

select option {
  background: rgb(255, 255, 255) !important;
  border-radius: 100px !important;
  border: 0px !important;
}

select.customInput {
  box-shadow: rgba(129, 128, 128, 0.09) 0px 0px 3px 4px;
  padding: 1rem;
  background: transparent;
  font-size: 16px;
  margin: 0rem 0px 1.5rem;
  color: var(--darkBlue) !important;
  border: none !important;
}

select.customInput option {
  border-radius: 15px !important;
}

div.form-control.rounded-pill.customInput {
  padding: 1rem;
  background: transparent;
  font-size: 16px;
  margin: 0rem 0px 1.5rem;
  color: var(--darkBlue) !important;
  border: 1px solid rgb(176, 176, 176) !important;
}

.custom-select.form-control.rounded-pill.customInput {
  padding: 0px !important;
}

.custom-select {
  position: relative;
}

span#select2-l42t-container {
  display: none;
}

span#select2-lg5s-container {
  display: none;
}

.custom-select select {
  display: none;
}

.select-selected {
  background-color: white;
  text-align: start;
}

.select-selected::after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0px;
  height: 0px;
  border-width: 6px;
  border-style: solid;
  border-image: initial;
  border-color: rgb(255, 255, 255) transparent transparent;
}

.options {
  box-shadow: rgba(129, 128, 128, 0.09) 0px 0px 3px 4px;
  padding: 1rem;
  background: transparent;
  font-size: 14px;
  margin: 0.8rem 0px 1.5rem;
  width: 84%;
  height: 24%;
  border-radius: 0px;
  color: var(--darkBlue) !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
}

.select-items div,
.select-selected {
  color: var(--darkBlue);
  padding: 1rem;
  border-color: rgb(176, 176, 176);
  cursor: pointer;
  user-select: none;
  border-radius: 50px;
}

.select-items {
  position: absolute;
  background-color: white;
  top: 100%;
  left: 0px;
  right: 0px;
  z-index: 99;
  margin-top: 5px;
  text-align: start;
  background:#e9e0e0;
  border-bottom-left-radius:10px;
   border-bottom-right-radius:10px;
    overflow-y:scroll;
  max-height:170px;
  min-height:70px;
  padding:10px 0px;
}
.select-items::-webkit-scrollbar {
  width: 10px;
}
/* Track */
.select-items::-webkit-scrollbar-track {
  background: #d7d5d5;
}
/* Handle */
.select-items::-webkit-scrollbar-thumb {
  background: var(--darkYellow);
}
/* Handle on hover */
.select-items::-webkit-scrollbar-thumb:hover {
  background: var(--darkYellow);
}
.select-hide {
  display: none;
}

.select-items div:hover,
.same-as-selected {
  background-color: rgb(201, 201, 201);
}

.cartItemDetail span strong {
  color: var(--darkYellow);
}

.detailPrice {
  color: var(--lightCustomGrey);
}

.cartItemIncDec span strong {
  color: var(--darkYellow);
}

.cartItemIncDec span {
  font-size: 21px;
  font-weight: 400 !important;
}

.nav-pills .nav-link {
  color: var(--dark);
  border: 1px solid var(--darkYellow);
  position: relative;
  height: 44px;
  padding-left: 30px;
  outline-color: var(--darkYellow);
  margin: 0px 5px;
  font-size: 14px !important;
}

.nav-pills .nav-linkk {
  color: var(--dark);
  position: relative;
  height: 44px;
  padding-left: 30px;
  margin: 0px 5px;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -3px;
  width: 0px;
  height: 0px;
  border-left: 25px solid var(--white);
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  margin-right: 10px !important;
}

.nav-link::before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0px;
  z-index: 2;
  width: 0px;
  height: 0px;
  border-left: 22px solid var(--white);
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--darkYellow);
  border: var(--darkYellow);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-linkk {
  background-color: var(--darkYellow);
  border: var(--darkYellow);
}

.nav-pills .nav-link.active::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -3px;
  width: 0px;
  height: 0px;
  border-left: 25px solid var(--white);
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  margin-right: 10px !important;
}

.nav-pills .nav-linkk.active::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -3px;
  width: 0px;
  height: 0px;
  margin-right: 10px !important;
}

.nav-pills .nav-link.active::before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0px;
  z-index: 2;
  width: 0px;
  height: 0px;
  border-left: 22px solid var(--darkYellow);
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
}

.nav-pills .nav-linkk.active::before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0px;
  z-index: 2;
  width: 0px;
  height: 0px;
}

.mesCommandes h5 {
  color: var(--darkYellow);
  font-size: 1rem;
}

.tabFidelite span:nth-child(1) {
  color: var(--darkYellow);
}

.tabFidelite span:nth-child(2) {
  color: var(--darkYellow);
}

.mesDetails a {
  color: var(--dark);
}

.extraList .minus {
  color: var(--darkYellow);
}

.cartIcon img {
  width: 35px;
}

.cartDrawerContainer.activeDrawer .validateBtnPrimary {
  bottom: -11px;
  width: 38vw;
  margin-bottom: 10px;
  z-index: 111;
  padding: 0px 0px 0px 20px;
  margin-left: -109px;
  background: white;
}

.cartDrawerContainer.activeDrawer .validateBtnPrimary {
  position: fixed;
  bottom: -9px;
  width: 49vw;
  z-index: 111;
  background: white;
}

.customRadio {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  user-select: none;
}

.customRadio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0px;
  width: 0px;
}

.checkmark {
  position: absolute;
  top: 24px;
  left: 0px;
  height: 30px;
  width: 30px;
  background: none;
  border-radius: 8px;
  border: 4px solid rgb(39, 48, 90);
}

.customRadio:hover input ~ .checkmark {
  background-color: rgb(249, 249, 249);
  color: var(--darkYellow) !important;
}

.customRadio input:checked ~ .checkmark {
  background-color: rgb(249, 249, 249);
  border: 5px solid#e9901b;
  color: var(--darkYellow) !important;
}

.customRadio input:checked + label {
  background-color: rgb(249, 249, 249);
  border: 5px solid#e9901b;
  color: var(--darkYellow) !important;
}

.checkmark::after {
  content: "";
  position: absolute;
  color: var(--darkYellow);
  display: none;
}

.customRadio input:checked ~ .checkmark::after {
  display: block;
  color: var(--darkYellow) !important;
}

.customRadio .checkmark::after {
  left: 8px;
  top: 3px;
  width: 7px;
  height: 13px;
  border-style: solid;
  border-color: #e9901b;
  border-image: initial;
  border-width: 0px 4px 4px 0px;
  transform: rotate(45deg);
  color: var(--darkYellow) !important;
}

span.select2.select2-container.select2-container--default {
  display: none;
}

.customCheck {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  user-select: none;
}

.customCheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0px;
  width: 0px;
}

.checkmarkTwo {
  position: absolute;
  top: 25px;
  left: 0px;
  height: 30px;
  width: 30px;
  background: none;
  border-radius: 100px;
  border: 5px solid rgb(39, 48, 90);
}

.customCheck:hover input ~ .checkmarkTwo {
  background-color: rgb(249, 249, 249);
}

.customCheck input:checked ~ .checkmarkTwo {
  border: 5px solid#e9901b;
  color: var(--darkYellow);
}

.customCheck input:checked + label {
  border: 5px solid#e9901b;
  color: var(--darkYellow) !important;
}

.checkmarkTwo::after {
  content: "";
  position: absolute;
  display: none;
}

.customCheck input:checked ~ .checkmarkTwo::after {
  display: block;
  color: var(--darkYellow);
}

.customCheck .checkmarkTwo::after {
  left: 5px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: #e9901b !important;
}

.customCheck img {
  width: 100px;
}

.validationCom h6,
.validationCom p {
  text-align: left !important;
}

.validateBtn h5 {
  margin: 0px 30px;
}

.appliquerBtn {
  padding: 0px 10px;
  font-size: 0.7rem !important;
}

.confirmation h5 {
  color: var(--darkYellow);
  margin: 30px 0px;
}

.confirmation h6 {
  color: var(--darkYellow);
}

.confirmation input[type="radio"] {
  margin-right: 10px;
}

.confirmation span {
  color: #e9901b;
}

.confirmation h2 {
  color: var(--darkYellow) !important;
}

.confirmation p strong {
  line-height: 40px;
  color: var(--fbColor) !important;
}

.tabTitle {
  margin: 10px 0px 50px;
  font-weight: bold;
  text-align: center;
}

.votreFidelite {
  margin: 50px 0px;
}

.votreFidelite strong {
  color: var(--darkYellow);
}

.votreFidelite p {
  margin-top: 90px;
  text-align: left !important;
}

.prodImageContainer img.img-fluid.productBoxImage {
  /* background: url("../img/woodenPlate.png") center top no-repeat; */
}

.catProdImg img {
  width: 280px !important;
}

.detailsBtn {
  background-color: var(--darkYellow);
  width: 80px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
}

.detailsBtn a {
  color: var(--white);
}

.detailsBtn a:hover {
  text-decoration: underline;
  color: rgb(0, 0, 0);
}

.comDetailHead span {
  color: var(--darkblueMix);
  font-weight: 700;
}

p.comDetailHead.pt-3 {
  font-weight: 700;
}

.comDetailPrice span {
  color: var(--darkYellow);
}

.allergeneLinks a {
  color: var(--darkYellow);
  margin: 0px 10px;
}

.allergeneLinks a:nth-child(1) {
  margin-left: 0px;
}

.allergeneLinks a:hover {
  color: var(--black);
}

tbody,
td,
tfoot,
th,
thead,
tr {
  padding: 10px;
  border-width: initial !important;
  border-image: initial !important;
  border-color: inherit !important;
  border-style: none !important;
}

tbody.CustomTableBorder,
td,
tfoot,
th,
thead,
tr {
  border-width: 1px;
  border-image: initial;
  padding: 10px;
  border-color: inherit !important;
  border-style: none !important;
}

.zoneAreas ul li {
  line-height: 40px;
}

.zoneAreas ul li a {
  color: var(--navydarkblue) !important;
}

.zoneAreas ul li a:hover {
  color: var(--darkYellow);
}

.greyIcons img {
  filter: invert(50%);
}

.MonTabCart {
  left: -100px;
}

.cartHeadSmall {
  color: var(--darkYellow);
  font-size: 25px;
  font-weight: bold;
  margin-top: 30px;
  margin-left: 40px;
}

.fidliteVotre span {
  color: var(--darkYellow);
}

.BtnFull {
  width: 100%;
  background-color: var(--darkYellow);
  border-radius: 5px;
  font-size: 15px;
  line-height: 30px;
  text-align: center;
}

.BtnFull a {
  color: var(--white);
  font-size: 13px;
  font-weight: 400;
}

.secTwo {
  background-color: rgb(255, 255, 0);
  padding: 150px 0px;
  color: var(--darkBlue);
  margin-top: 258px;
}

.secTwo .BtnFull {
  border-radius: 20px;
  width: 59%;
  font-size: 1.8rem;
  letter-spacing: 3px;
  text-align: center;
  background-color: var(--darkBlue);
  padding: 16px;
  margin: 30px auto;
  font-family: hwt-artz !important;
  height: 82px !important;
  line-height: 50px !important;
}

.secTwo span {
  color: var(--darkYellow);
}

.secTwo h2 {
  font-size: 2.8rem;
  letter-spacing: 1px;
  font-family: hwt-artz !important;
}

.secThree {
  padding-top: 50px;
  font-size: 18px;
  letter-spacing: 1px;
  position: relative;
  font-family: hwt-artz !important;
}

.secThree h2 {
  color: var(--darkYellow);
  font-size: 2.8rem;
  letter-spacing: 1px;
  padding-top: 50px;
  font-family: hwt-artz !important;
}

.secThree {
  color: var(--darkBlue);
}

img.vert-move {
  animation: 0.2s ease 0s infinite alternate none running mover;
}

img.vert-move {
  animation: 0.2s ease 0s infinite alternate none running mover;
}

.supp-color {
  color: var(--darkYellow) !important;
}

.prodPrice {
  color: var(--navydarkblue);
}

.prodTitle {
  font-family: "knockoutLiteweight sans serif bold";
}

h6.linkPageHeading.ouertTxt.mt-3 {
  text-align: right;
  font-weight: 600;
}

.custom-btn {
  color: var(--darkYellow);
  font-weight: 600;
  font-size: 20px;
}

.paraPromo {
  color: var(--twitterColor);
  opacity: 0.7;
}

.customReciptClass {
  font-weight: 600;
}

.customTotalClass {
  color: var(--darkYellow);
  font-weight: 600;
  font-size: 20px;
  margin: auto;
}

.cartTitleMon {
  color: var(--darkYellow);
  font-weight: 600;
  text-align: center;
  font-size: 40px;
  margin: 30px;
}

.container-fluid {
}

.customcolorr {
  color: var(--fbColor) !important;
}

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}

.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}

.rating > span:hover::before,
.rating > span:hover ~ span::before {
  content: "★";
  position: absolute;
  color: rgb(231, 231, 130);
}

.rightNavItems {
  flex: 1 1 0%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.radioclass {
  background-color: var(--white);
  border-color: var(--fadeBlack);
}

.radioclass:checked {
  border: var(--white);
  background-color: var(--darkYellow) !important;
}

.customSize {
  font-size: 55px;
  text-align: left;
}

.col-lg-6.col-12.my-auto {
  position: relative;
  bottom: 96px;
}

.fa {
  font-size: 25px;
}

.checked {
  color: orange;
}

.ShadowContainerBox {
  border-radius: 20px;
  padding: 3rem;
  box-shadow: rgba(45, 67, 85, 0.15) 1px 1px 6px 5px;
  width: 74%;
  height: 249px;
  font-weight: 600;
  font-size: 17px !important;
}

.totalPriceBorder {
  border-top: 1px solid rgba(0, 0, 0, 0.13);
}

@-webkit-keyframes mover {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(-5px);
  }
  75% {
    transform: translateY(-7px);
  }
  100% {
    transform: translateY(-10px);
  }
}

@keyframes mover {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(-5px);
  }
  75% {
    transform: translateY(-7px);
  }
  100% {
    transform: translateY(-10px);
  }
}

.vert-move {
  margin-left: 160px;
  position: absolute;
  bottom: 0px;
}

.talkCloud {
  font-size: 25px;
  position: relative;
  left: 373px;
  top: 125px;
  z-index: 1;
}

.talkCloud .contNo {
  animation: 0.2s ease 0s infinite alternate none running mover;
}

.talkCloud.contNo {
  animation: 0.2s ease 0s infinite alternate none running mover;
}

@-webkit-keyframes Contmover {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(-5px);
  }
  75% {
    transform: translateY(-7px);
  }
  100% {
    transform: translateY(-10px);
  }
}

@keyframes Contmover {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(-5px);
  }
  75% {
    transform: translateY(-7px);
  }
  100% {
    transform: translateY(-10px);
  }
}

.cubes {
  position: absolute;
  width: 23%;
  left: 29%;
  top: -69%;
  transform: scale(1.6);
}

img.cubes {
  animation: 1s ease 0s infinite alternate none running cubesMover;
}

img.cubes {
  animation: 1s ease 0s infinite alternate none running cubesMover;
}

@-webkit-keyframes cubesMover {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(-5px);
  }
  75% {
    transform: translateY(-7px);
  }
  100% {
    transform: translateY(-10px);
  }
}

@keyframes cubesMover {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(-5px);
  }
  75% {
    transform: translateY(-7px);
  }
  100% {
    transform: translateY(-10px);
  }
}

@media only screen and (max-width: 1200px) {
  .cubes {
    position: relative;
    left: 38%;
    width: 28%;
    top: -48%;
  }
}

@media only screen and (max-width: 991px) {
  .secTwo .BtnFull {
    width: 80%;
    font-size: 18px;
    letter-spacing: 0px;
  }
  .cubes {
    left: 40%;
  }
  .vert-move {
    margin-left: 80px;
  }
  .talkCloud {
    left: 295px;
  }
}

.videoSec {
  padding: 50px 20px 80px;
  background: f7fafb;
}

.videoSec video {
  border-radius: 30px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 18px 0px;
}

.inputSmall {
  font-size: 13px !important;
  margin: 0rem 0px 0.4rem !important;
}

.ouertTxt {
  color: var(--darkGreen) !important;
}

.mapLeftDetails {
  position: absolute;
  top: 62px;
  left: 0px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 18px 3px;
}

.prodSideIng img {
  width: 100px;
}

.burgerOffer {
  width: 100%;
  height: 78%;
  padding: 0px;
  z-index: 1;
  transform: scale(3.2);
  margin: -23px 41px;
  position: absolute !important;
}

.burgerOfferDiv {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.5%;
}

@media only screen and (max-width: 1460px) {
  .burgerOffer {
    transform: scale(2.2);
    width: 80%;
    left: 7%;
  }
  .secTwo {
    margin-top: 210px;
  }
}

@media only screen and (min-width: 1900px) {
  .cubes {
    position: absolute;
    width: 17%;
    left: 43%;
    top: -75%;
    transform: scale(1.6);
  }
}

@media only screen and (max-width: 1300px) {
  .burgerOffer {
    transform: scale(2.2);
    width: 80%;
    left: 7%;
  }
  .customSize {
    font-size: 55px;
    text-align: left;
    margin: 64px 31px 0px 0px;
  }
  .secTwo .BtnFull {
    font-size: 1.5rem;
    letter-spacing: 0px;
    margin: 0px 0px 0px 191px;
  }
  .secTwo h2 {
    font-size: 2.8rem;
  }
  .secTwo {
    padding: 50px 0px;
  }
  .secTwo br {
    display: none;
  }
  .secThree h2 {
    padding-top: 0px !important;
  }
}

@media only screen and (max-width: 990px) {
  .burgerOffer {
    position: absolute;
  }
  .burgerOffer {
    position: absolute;
    width: 100%;
  }
  .secTwo {
    margin-top: 50px;
  }
  .vert-move {
    right: 0px;
  }
  .mobile {
    position: relative;
    left: -150px;
  }
}

.sliderHeading {
  position: relative;
  top: 107px;
  z-index: 1;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 3rem;
  color: rgb(45, 67, 85);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.sliderHeading span {
  color: var(--darkYellow);
  display: inline-block;
  text-decoration: underline dotted;
}

.glow {
  text-align: center;
  color: var(--darkYellow) !important;
  width: max-content;
  display: inline-block;
}

@-webkit-keyframes glow {
  0% {
    text-shadow: #e9901b 0px 0px 10px, #e9901b 0px 0px 20px,
      rgb(255, 255, 255) 0px 0px 30px, rgb(255, 255, 255) 0px 0px 40px,
      rgb(255, 255, 255) 0px 0px 50px, rgb(255, 255, 255) 0px 0px 60px,
      rgb(255, 255, 255) 0px 0px 70px;
  }
  100% {
    text-shadow: #e9901b 0px 0px 20px, #e9901b 0px 0px 30px,
      rgb(255, 255, 255) 0px 0px 40px, rgb(255, 255, 255) 0px 0px 50px,
      rgb(255, 255, 255) 0px 0px 60px;
  }
}

.span.img-wrap {
  filter: drop-shadow(rgb(34, 34, 34) 5px 5px 5px);
}

.PizzaCustomAnimation {
  color: rgb(45, 67, 85);
  position: relative;
  font-size: 40px;
  top: -6%;
  left: 49%;
}

.PizzaPrice {
  color: var(--darkYellow);
  font-weight: 700;
  width: 75px;
  line-height: 34px;
  font-size: 42px;
}

p.pizzaName {
  font-weight: 700;
  line-height: 34px;
  width: 20px;
  text-align: right;
}

.arrow-img {
  width: 6%;
  height: 10%;
  position: fixed;
  left: 44%;
  opacity: 0.69;
  bottom: 38%;
  transform: rotate(303deg);
}

.ImageCustomClass {
  max-width: 100%;
  height: auto;
  color: rgb(45, 67, 85);
  position: relative;
  left: -5%;
  z-index: 1;
  bottom: 29px;
  transform: scaleX(-1);
}

.customColorClass {
  color: var(--darkBlue);
}

.CustomCartImage {
  z-index: 0;
  position: absolute;
  left: -5%;
  top: 9%;
}

.CustomCartImagee {
  z-index: 0;
  transform: translate(-77px, 10px);
  width: 27%;
}

.CustomCartText {
  font-weight: 700;
  width: fit-content;
  border-radius: 5%;
  font-size: 2px;
  height: max-content;
  box-shadow: rgba(45, 67, 85, 0.15) 1px 1px 6px 5px;
  margin: 0rem 2rem 2rem 4rem;
  padding: 3% 2% 2% 9%;
}

.CustomCartTextt {
  font-weight: 700;
  width: 89%;
  font-size: 15px;
  height: auto;
  border-radius: 3%;
  box-shadow: rgba(45, 67, 85, 0.15) 1px 1px 6px 5px;
  margin: 0rem 2rem 2rem 3rem;
}

.ImageBurgerCustom {
  width: 100%;
  height: 100%;
}

.CustomTabClass {
  padding-top: 20px;
}

.ProductTitleCustom {
  text-align: left;
  font-size: 18px;
  color: var(--navydarkblue);
  font-weight: 700;
}

.CustomExtraImage {
  width: 100px;
  border: 1px solid palevioletred;
  border-radius: 33%;
  display: inline-block;
}

.CustomExtraImagee {
  width: 68px;
  height: 62px;
  margin: -12px;
}

.CustomExtraText {
  margin: 6px;
  display: inline-block;
  text-align: center;
}

.CustomExtraButton {
  padding: 8px;
  border: 1px solid var(--darkYellow);
  background-color: var(--white);
  height: 59px;
  display: inline-block;
  text-align: center;
  border-radius: 18px;
  width: max-content;
}

button.CustomExtraButton::before {
  content: image-set(url("img/check-circle-fill.svg") 1x);
  font-size: 2rem;
  display: inline-table;
  position: absolute;
  left: -8%;
  top: 8%;
  color: rgb(255, 144, 0);
}

.CustomClassVotre {
  font-size: 16px;
  padding: 0px;
  color: var(--navydarkblue);
}

.formShadowContainer2 {
  border-radius: 20px;
  padding: 2rem;
  font-weight: 700;
  font-size: 10px;
  box-shadow: rgba(45, 67, 85, 0.15) 1px 1px 6px 5px;
  margin: 0rem auto;
  color: var(--darkblue) !important;
}

.row.prodSideIngg {
  width: 655px !important;
}

.prodImageShadeBox.active {
  opacity: 1;
  background: var(--darkYellow) !important;
  color: var(--white) !important;
}

.ProductPizzaImage {
  width: 110px;
  height: 110px;
  padding: 0px;
  margin: 0px 2px 2px 0px;
  /* margin: 0px 2px 2px 16px; */
  align-items: center;
}

.PizzaPic {
  width: 363px;
  height: 362px;
  padding: 0px;
  margin: 0px 2px 2px 16px;
  align-items: center;
}

.CustomColorPizza {
  color: var(--darkYellow) !important;
  font-size: 1vw !important;
}
.CustomColorPizza ul li {
  width: 16vw;
}
.ColorClassMenu {
  color: var(--navydarkblue) !important;
}

#CustomButtonsPizza {
  transform: translate(-38px, 3px);
}

@media (min-width: 992px) {
  .paddingClass {
    padding-right: 0rem !important;
    padding-left: 2.5rem !important;
  }
}

.CustomMapMsgBox {
  width: 250px;
  height: 100px;
  background-color: white;
  bottom: 430px;
  font-size: 10px;
  left: 548px;
  top: 183px;
  color: var(--navydarkblue);
  border: var(--darkYellow) solid 1px;
  border-radius: 10px !important;
  text-align: center !important;
}

.CustomMapMsgBoxx {
  width: 350px;
  height: 100px;
  background-color: white;
  bottom: 430px;
  font-size: 10px;
  left: 420px;
  top: 266px;
  color: var(--navydarkblue);
  border: var(--darkYellow) solid 1px;
  border-radius: 10px !important;
  text-align: center !important;
}

.CustomMapMsgBox::after {
  content: " ";
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid var(--darkYellow);
  border-right: 11px solid var(--darkYellow);
  border-left: 10px solid transparent;
  position: absolute;
  outline-offset: 1px;
  right: 94%;
  top: 93%;
  transform: rotate(209deg);
}

.CustomMapMsgBox::before {
  content: " ";
  width: 0px;
  height: 0px;
  border-width: 11px 14px 6px 10px;
  border-style: solid;
  border-color: transparent white white transparent;
  position: absolute;
  z-index: 1;
  outline-offset: 1px;
  right: 92%;
  top: 93%;
  transform: rotate(206deg);
}

.CustomMapMsgBoxx::after {
  content: " ";
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid var(--darkYellow);
  border-right: 11px solid var(--darkYellow);
  border-left: 10px solid transparent;
  position: absolute;
  outline-offset: 1px;
  right: 96%;
  top: 93%;
  transform: rotate(209deg);
}

.CustomMapMsgBoxx::before {
  content: " ";
  width: 0px;
  height: 0px;
  border-width: 11px 14px 6px 10px;
  border-style: solid;
  border-color: transparent white white transparent;
  position: absolute;
  z-index: 1;
  outline-offset: 1px;
  right: 94%;
  top: 93%;
  transform: rotate(206deg);
}

h4.TextMsgBox {
  font-size: 15px;
  font-weight: 800;
}

p.textMsgBox {
  font-size: 15px;
  text-align: center;
  padding: 0px;
  margin: 0px;
}

img.icon {
  width: 46px;
  height: 32px;
  margin: 8px 2px 6px 112px;
  padding: 0px;
}

.CustomIconMsgBox {
  font-size: 10px;
  width: 20px;
}

ul#extraIngredients {
  width: 100%;
  align-items: center;
  border: none;
  position: relative;
  z-index: 5;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow: scroll hidden;
}

ul#extraIngredients {
  width: 100%;
  align-items: center;
  border: none;
  position: relative;
  z-index: 5;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow: scroll hidden;
}

ul#extraIngredients::-webkit-scrollbar {
  width: 1px;
}

ul#extraIngredients::-webkit-scrollbar-track {
  background: var(--white);
}

ul#extraIngredients::-webkit-scrollbar-thumb {
  background: var(--white);
}

ul#extraIngredients::-webkit-scrollbar-thumb:hover {
  background: var(--white);
}

ul#extraIngredients button.nav-link {
  color: var(--darkBlue);
  font-weight: 500;
  font-size: 1rem;
  margin: 0.5rem;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  border: 1px solid var(--darkBlue);
  transition: all 0.3s linear 0s;
}

ul#extraIngredients button.nav-link.active {
  background: var(--darkYellow);
  border-color: var(--darkYellow);
  color: var(--white);
}

ul#extraIngredients button.nav-link::after {
  border: none;
  content: " " !important;
}

ul#extraIngredients button.nav-link::before {
  border: none;
  content: " " !important;
}

.formShadowContainer.aos-init.aos-animate {
  font-size: 15px;
}

.BodaySectionTwo {
  overflow: scroll;
  height: 400px;
}

.HeaderSection {
  height: 50px !important;
}

.CustomHeaderSection {
  border-bottom: 1px solid var(--lightGray);
  width: 80%;
  margin: 14px 0px 7px 19px;
}

.CustomHeaderSection h3.HeadingTwo {
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--darkYellow) !important;
}

.BodaySectionTwo h4 {
  font-weight: 700;
  padding: 0rem 2rem 0rem 1.2rem;
}

.BodaySectionTwo p {
  padding: 0rem 2rem 0rem 1.2rem;
}

.BodaySectionTwo {
  margin: 2rem 0rem 0rem;
}

.CustomList li {
  margin: 0rem 0rem 0rem 0.3rem;
  color: var(--black);
}

.CustomList li label {
  margin: 0rem 0rem 0rem 0.3rem;
  font-weight: 500;
  font-size: 18px !important;
}

.CustomList li label img {
  width: 86px;
}

.CustomList li label span {
  width: 25px !important;
  height: 25px !important;
}

.CustomList li label span::after {
  left: 5px !important;
  top: 2px !important;
  width: 7px !important;
  height: 10px !important;
}

.footerSection h2 {
  font-weight: 600;
  font-size: 1.3rem !important;
}

.footerSection .ButtonClass {
  height: 50px;
  padding: 10px;
  font-size: 18px;
  font-weight: 600;
  background-color: var(--darkYellow) !important;
  color: var(--white) !important;
  width: 130px !important;
  margin: 4vh 0vh 0vh 19vh !important;
  border-radius: 13px !important;
}

.customNewDesign span {
  font-size: 20px;
  padding: 10px 0px 10px 1px;
  vertical-align: sub;
  font-weight: 600;
  color: rgb(238, 196, 57) !important;
}

.customNewDesign img {
  width: 70px;
  vertical-align: middle;
  height: 70px;
}

.customNewDesign {
  color: var(--darkYellow);
  display: inline-block;
  position: inherit;
  right: 80px;
}

img.leaflet-marker-icon.leaflet-zoom-animated.leaflet-interactive {
  width: 27px !important;
  height: 41px !important;
}

.userIcon2::before {
  content: "";
  width: 10px;
  height: 10px;
  padding: 0px;
  border-radius: 110%;
  transform: scale(1);
  display: block;
  position: absolute;
  left: 15px;
  top: -3px;
}

.userIcon::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--green);
  padding: 0px;
  border-radius: 110%;
  transform: scale(1);
  display: block;
  position: absolute;
  left: 15px;
  top: -3px;
}

.productMainPrice strike {
  font-size: 1rem;
  color: rgba(39, 48, 90, 0.69);
  padding-right: 10px;
}

.tabForm .userFormContainer {
  text-align: left !important;
}

.tabForm label {
  padding-left: 20px;
}

.cartDrawerContainer,
.entryDrawerContainer {
  width: 660px;
  background: var(--white);
  overflow: hidden;
  border-radius: 0px 0px 20px 20px;
  position: fixed;
  top: 19px;
  right: 28px;
  transition: all 0.3s linear 0s;
  z-index: 55;
  transform: translateY(-150%);
  padding: 15px 10px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 30px 1px !important;
}

.entryDrawerContainer {
  width: 320px !important;
}

.cartDrawerContainer.activeDrawer {
  transform: translateY(7%) !important;
}

.entryDrawerContainer.activeDrawer {
  transform: translateY(31%) !important;
}

.cartDrawerContainer .cartItemRow,
.entryDrawerContainer .cartItemRow {
  width: 97%;
  float: right;
}

.cartDrawerContainer .prodCartImg,
.entryDrawerContainer .prodCartImg {
  left: -50px;
}

.bonjourTxt {
  width: 16rem;
  border-radius: 10px;
  letter-spacing: 0.4px;
  background-color: var(--white);
}

.bonjourTxt h4 {
  font-weight: 600;
  color: var(--darkBlue);
  font-size: 1.2vw;
  text-align: center;
}

.bonjourTxt h4,
.bonjourTxt h3 {
  text-transform: none;
  line-height: 2;
}

.bonjourTxt h3 {
  font-size: 1.1rem;
  text-align: left;
  margin-left: 15px;
  display: flex;
  align-items: center;
  font-weight: 400;
  cursor: pointer;
  color: var(--darkBlue);
}

.bonjourSubHeading img {
  width: 22px;
  margin-right: 7px;
}

button.closeBtn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.entryTitleAndCloseBtn {
  background: var(--white);
  float: right;
}

.prodTypShowBtn svg path {
  fill: var(--white) !important;
}

.prodTypShowBtn svg circle {
  fill: var(--darkYellow) !important;
}

.prodTypShowBtn svg circle:hover {
  fill: var(--bs-gray-700) !important;
}

.directAddToCart svg path {
  fill: var(--white) !important;
}

.directAddToCart svg circle {
  fill: var(--darkYellow) !important;
}

.directAddToCart svg circle:hover {
  fill: var(--bs-gray-700) !important;
}

.AddIcon svg path {
  fill: var(--white) !important;
}

.AddIcon svg circle {
  fill: var(--darkYellow) !important;
}

.AddIcon svg circle:hover {
  fill: var(--bs-gray-700) !important;
}

.secondList a img {
  width: 8vw !important;
}

.secondList a {
  display: flex;
  flex-direction: column;
}

.thirdList a img {
  width: 5vw !important;
}

.shadowBoxx .input-groupp .form-control {
  width: 80% !important;
}

.dayActive {
  color: var(--darkYellow) !important;
}

.closeProdTypeBtn svg path {
  fill: var(--white) !important;
}

.closeProdTypeBtn svg circle {
  fill: var(--bs-gray-700);
}

.closeProdTypeBtn svg circle:hover {
  fill: var(--darkYellow) !important;
}

#accompprod0 font,
#accompprod1 font,
#accompprod2 font,
#accompprod3 font,
#accompprod4 font,
#accompprod5 font,
#accompprod6 font,
#accompprod7 font,
#accompprod8 font,
#accompprod9 font,
#accompprod10 font {
  color: var(--darkBlue) !important;
}

.carousalParentDiv {
  position: relative;
  top: 11vh;
  width: 102%;
  background: url(../img/slider-main-bg.jpg) center center no-repeat;
  background-size: cover;
}

.carousel-indicators .active,
.carousel-indicators li {
  cursor: pointer;
  height: 6px !important;
  background-color: var(--darkYellow);
}

.animImg {
  display: flex;
  background: url("../img/sliderBg.png") center center / cover no-repeat !important;
}

.animImg img {
  margin-right: -6vw;
}

.animImg .img-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.animImg:nth-child(2) .img-container {
  justify-content: flex-end !important;
  margin-right: 6vw !important;
}

.carousel-indicators li {
  opacity: 0.7;
}

.carousel-indicators .active {
  opacity: 1;
}

.animText {
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.animText h2 {
  font-weight: bold;
  font-family: Arvo-Bold-Italic;
}

.animText h2 .text-container {
  line-height: 7vw;
}

.animText h2 span {
  font-family: Arvo-Bold-Italic;
  font-size: 4rem;
}

.whttxt {
  font-family: Myriad-Pro-Regular;
  font-size: 1.8vw;
  line-height: 2.2vw;
  margin: 1vw 0vw;
  color: rgb(0, 0, 0);
}

.animImg .smallImages img {
  animation: 1s linear 0s infinite normal none running img;
  width: 7vw;
}

.smallImages {
  position: absolute;
  width: 100%;
  height: 100%;
}

a.animLink {
  color: rgb(255, 255, 255);
  padding: 20px 30px;
  border-radius: 50px;
  font-size: 1.2rem;
  letter-spacing: 5px;
  transition: all 1s ease 0s;
  background: var(--darkYellow);
}

a.animLink:hover {
  color: rgb(255, 255, 255);
  background: rgb(0, 0, 0);
}

.imgCont {
  width: 0vw;
  height: 7vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imgCont1 {
  top: 5vw;
  position: relative;
  left: -4vw;
  width: 10vw !important;
}

.imgCont2 {
  right: 2vw;
  position: relative;
  top: 11vw;
  z-index: 11;
}

.imgCont3 {
  top: 12vw;
  position: relative;
  left: 1vw;
}

@keyframes img {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.flashPizza1 {
  position: absolute;
  width: 32vw;
  left: 6vw;
  top: 5vw;
  animation: 25000ms linear 0s infinite normal none running spin;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.pizzaPic:hover img[src="./img/pizza1.png"],
.pizzaFour:hover .pizzaDessert,
.containerImg2:hover img[src="img/prod-img1.png"],
.containerImg2:hover img[src="img/prod-img3.png"],
.containerImg2:hover img[src="img/prod-img4.png"],
.containerImg2:hover img[src="img/prod-img8.png"] {
  animation: 4000ms linear 0s infinite normal none running spin;
}

.pizzaDessert {
  position: absolute;
  top: 8vw;
  right: -8.5vw;
  width: 15vw !important;
}

.containerImg2:hover img {
  transform: rotate(-10deg);
}

#street {
  width: 46vw;
  animation: 2s linear 0s infinite normal none running img;
  position: relative;
  left: -7%;
  -webkit-animation-name: shake;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-transform-origin: 50% 100%;
}

#street2 {
  position: absolute;
  width: 46vw;
  animation: 3s linear 0s infinite normal none running img;
  left: -7%;
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-2deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(3deg);
  }
  30% {
    -webkit-transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(2px, 1px) rotate(-2deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(4deg);
  }
  90% {
    -webkit-transform: translate(2px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
  }
}

.text-container > span {
  animation: 4.25s ease-in-out 0s infinite normal none running glow;
  font-size: 6vw;
}

@keyframes glow {
  0%,
  100% {
    color: rgb(233, 144, 27);
    text-shadow: rgb(233, 144, 27) 0px 0px 10px, rgb(233, 144, 27) 0px 0px 50px,
      rgb(233, 144, 27) 0px 0px 100px;
  }
  10%,
  90% {
    text-shadow: none;
  }
}

.text-container > span:nth-child(2) {
  animation-delay: 0.25s;
}

.text-container > span:nth-child(3) {
  animation-delay: 0.5s;
}

.text-container > span.thirditem {
  margin-right: 0px !important;
}

.text-container > span:nth-child(4) {
  animation-delay: 0.75s;
}

.text-container > span:nth-child(4) .text-container > span:nth-child(5) {
  animation-delay: 1s;
}

.text-container > span:nth-child(6) {
  animation-delay: 1.25s;
}

.text-container > span:nth-child(7) {
  animation-delay: 1.5s;
}

.text-container > span:nth-child(8) {
  animation-delay: 1.75s;
}

.text-container > span:nth-child(9) {
  animation-delay: 2s;
}

.text-container > span:nth-child(10) {
  animation-delay: 2.25s;
}

.text-container > span:nth-child(10),
.text-container > span:nth-child(11),
.text-container > span:nth-child(12),
.text-container > span:nth-child(13),
.text-container > span:nth-child(14),
.text-container > span:nth-child(15) {
  color: rgb(202, 20, 19);
}

.text-container > span:nth-child(11) {
  animation-delay: 2.5s;
}

.text-container > span:nth-child(12) {
  animation-delay: 2.75s;
}

.text-container > span:nth-child(13) {
  animation-delay: 3s;
}

.text-container > span:nth-child(14) {
  animation-delay: 3.25s;
}

.text-container > span:nth-child(15) {
  animation-delay: 3.5s;
}

.text-container span {
  font-family: DEFUSED;
}

.slider-buttons {
  position: relative;
  top: 30%;
}

.slider-buttons .btn-floating-left {
  position: absolute;
  left: -13% !important;
}

.slider-buttons .btn-floating-right {
  position: absolute;
  right: -12% !important;
}

.card {
  display: flex;
  align-items: center;
  flex-direction: column;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.card-img-top {
  width: 70%;
  padding-top: 15px;
}

h4.card-title {
  font-family: alabama-light;
  font-weight: 900;
  font-size: 3rem;
}

.card-btns {
  display: flex;
  justify-content: center;
  padding: 5px;
}

.card-btns .btn {
  padding: 10px 20px;
  color: rgb(0, 0, 0);
  margin: 3px 5px;
  outline: none;
  cursor: pointer;
}

.card-btns .btn.active,
.card-btns .btn:hover {
  border: 1px solid rgb(233, 144, 27);
}

a.card-comBtn {
  padding: 5px 30px;
  border-radius: 50px;
  margin-top: 10px;
  background: var(--darkYellow);
  color: var(--white) !important;
}

a.card-comBtn:hover {
  background: rgb(0, 0, 0) !important;
}

p.card-text {
  margin: 0px !important;
}

.carousel-indicators {
  bottom: 15% !important;
}

.vidPosition {
  position: absolute;
  max-width: 97%;
  border-radius: 30px;
  z-index: 1 !important;
}

.vidPosition:hover {
  opacity: 0;
  transition: all 1s ease 0s;
}

.sectionThree img {
  max-width: 100%;
}

.sectionThree .col-lg-6 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.SecTwoText {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: url("../img/sec-oneTextBg.png") center center / cover no-repeat;
  padding: 145px !important;
}

.SecTwoText h1 {
  text-align: center;
  color: var(--white);
  width: 80%;
  margin-left: -5vw !important;
}

.sectionFour img {
  max-width: 100%;
}

.SecFourText {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0rem 50px !important;
}

.mainTxt h2 span {
  color: var(--darkYellow) !important;
}

.mainTxt::first-letter {
  font-size: 5rem !important;
}

.mainTxt span::first-letter {
  font-size: 5rem !important;
}

.SecFourText h1 {
  text-align: center;
  width: 100%;
  margin-bottom: 3vw !important;
}

.socialIcons {
  display: flex;
  justify-content: center;
  align-items: center;
}

.socialIcons img {
  margin: 0px 10px;
}

.my-text-align {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1600px) {
  .flashPizza1 {
    width: 29vw;
    left: 8vw;
  }
}

.ftTxtContainer img {
  width: 90%;
}

.sectionFour {
  background-color: #f7fafb;
}

.w3-pink,
.w3-hover-pink:hover {
  color: #fff !important;
  background-color: var(--darkYellow) !important;
}

.custom-select {
  height: 100% !important;
}

.formShadowContainer hr {
  color: #b4b4b4 !important;
}

.cartDrawerContainer a h3 {
  color: var(--lightBrown);
}

.cartDrawerContainer a:hover h3 {
  color: var(--black);
}

#menu6 .formShadowContainer a {
  color: var(--lightBrown);
}

#menu6 .formShadowContainer a:hover {
  text-decoration: underline !important;
}

.formShadowContainer a {
  color: var(--lightBrown);
}

.formShadowContainer a:hover {
  text-decoration: underline !important;
}

.BtnFull a {
  color: var(--white) !important;
}

.check-box-img {
  display: flex;
  justify-content: center;
  align-items: center;
}

.check-box-img img {
  margin-left: 10px;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
  flex: 0 0 100% !important;
  /* max-width: 100% !important; */
}
.formShadowContainer table a b {
  color: var(--black);
  font-size: 18px;
  font-weight: normal;
}
.mobileAnim {
  position: absolute;
  overflow-y: scroll;
  height: 27vw;
  width: 12.5vw;
  border-radius: 32px;
  left: 19vw;
  top: 2.56vw;
  z-index: 1;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 0px;
}

.owl-carousel .owl-item {
  width: max-content !important;
}
.owl-carousel .owl-item img{
  width: 50% !important;
}
@media (max-width:1680px) {
  .owl-carousel .owl-item img{
    width: 45% !important;
  }
}
@media (max-width:1550px) {
  .owl-carousel .owl-item img{
    width: 40% !important;
  }
}
@media (max-width:1390px) {
  .owl-carousel .owl-item img{
    width: 35% !important;
  }
}
.owl-theme .owl-controls .owl-page span {
  display: block !important;
  width: 50px !important;
  height: 7px !important;
  opacity: 1 !important;
  border-radius: 0 !important;
  background: var(--darkBlue) !important;
  margin: 0px !important;
}
.owl-theme .owl-controls .owl-page span:hover,
.owl-theme .owl-controls .owl-page.active span {
  background: var(--darkYellow) !important;
}

#zoneRechargement .customProductContainer .col-lg-6:nth-child(2),
#zoneRechargement .linkPageTxtDetails .mx-lg-5 .col-lg-7{
  position:relative;
  left:100px !important;

}

.CustomColorPizza ul li{
  width:60%;
}


#extraIngredientsContent .extraList .minus {
  color: var(--darkYellow);
  margin-left:20px;
}

.extraList .cartItemIncDec img {
  order:1;
}
.extraList .cartItemIncDec .tabTxt{
  order:2;
}
.extraList .cartItemIncDec .minus {
  order:3;
  margin-left:20px;
}
.extraList .cartItemIncDec input {
  order:4;
}
.extraList .cartItemIncDec .plus {
  order:5;
}


#zonePage .btnSliders .owl-dots{display:none;}
#zonePage .btnSliders .owl-dots:nth-child(3){display:block !important;}