.chin2 {
  display: flex;
  justify-content: space-evenly;
  /* border: 1px solid black; */
  align-items: center;
}
.hero-section-sub-heading-text {
  font-size: 2rem;
}
.hero-section-sub-heading-right {
  text-align: left;
  /* border: 1px solid black; */
}
.see-the-menu-button {
  padding: 0.5rem 1rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  background-color: black;
  border-radius: 2rem;
  border: none;
  outline: none;
  /* border: 1px solid black; */
}
.hero-section-slide4-text-right {
  height: 30vh;
  /* border: 1px solid black; */
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: space-around;
} 

.brand-name,
body {
  font-family: Manrope;
  box-sizing: border-box;
}
body,
ul {
  padding: 0;
}
#contact-num,
.s-text button {
  border: none;
  background-color: #ee8a21;
}
#bowl2,
.brand-name,
/* .chin2 button, */
.hero {
  position: relative;
}
#animate-S1,
#styleoS1,
.hero #handi {
  animation: 2s ease-in-out infinite shake;
  transition: transform 0.5s;
}
#bowl3-S4,
.hero #bowl {
  position: absolute;
  bottom: 1rem;
  left: 22rem;
}
.center,
.hero .we-rreal,
.need-wcu,
.s-text2 {
  text-align: center;
}
.center,
.chin2,
.header-items,
header,
ul,
ul li {
  display: flex;
}
.koby #textbgw,
.slogan-C4E span {
  -webkit-text-fill-color: transparent;
}
.Categories,
.KababWaiting,
.Wht-CS,
.cCat div,
.need-wcu,
footer {
  overflow: hidden;
}
body {
  margin: 0;
  overflow: auto;
}
header {
  justify-content: space-around;
  align-items: center;
}
.header-items {
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
#desktop {
  height: 4rem;
}
.header-items .brand-name {
  padding: 0 10px;
  margin-top: 10px;
}
.brand-name {
  font-size: 2.5rem;
  color: #333;
  margin: 1rem;
}
.brand-name::after {
  content: "For Every Mood";
  font-size: 0.75rem;
  color: #898080;
  position: absolute;
  left: 10rem;
  width: max-content;
  margin-top: 2rem;
  letter-spacing: 2px;
  font-weight: 700;
  transform: translateX(-50%);
}
ul {
  list-style: none;
  margin: 1vh 0 0;
}
ul li {
  justify-content: space-between;
  margin: 0 3.7rem;
}
ul li a {
  text-decoration: none;
  color: #000;
  font-weight: 600;
}
#contact-num {
  color: #fff;
  font-size: 1rem;
  border-radius: 1000px;
  padding: 0.5rem 1.25rem;
  margin-top: 0.625rem;
}
.hero {
  width: 100vw;
  height: calc(100vh - 4rem);
  background: linear-gradient(145deg, #eda75c, #eeeae6, #d88c3b);
}
.hero #handi {
  position: absolute;
  right: 0;
  width: 70%;
  object-fit: contain;
}
.hero #handi:hover {
  transform: scale(1.05);
}
@keyframes shake {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}
.hero .s-text {
  position: absolute;
}
.hero .we-rreal {
  position: absolute;
  top: 3rem;
}
.s-text .seg {
  font-size: 2rem;
  font-weight: 500;
}
.s-text p,
.s-text2 p {
  margin: 0;
}
/* .chin2 button, */
.s-text button {
  /* margin: 1rem; */
  padding: 1rem 2.5rem;
}
.s-text .slide2 {
  font-size: 5rem;
}
.slogan-C4E {
  font-size: 5.5rem;
  margin: 0;
  font-weight: 600;
}
.s-text #curly-S1 {
  margin: 1.9rem;
}
.f-words {
  font-size: 2em;
}
.slogan-C4E span {
  background: linear-gradient(to right, #ee8a21, #000);
  background-clip: text;
}
/* .s-text button a,
.s-text2 button a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
} */
.hero #bowl {
  width: 44rem;
  bottom: 0;
  object-fit: contain;
}
.center {
  justify-content: center;
  align-items: center;
}
.center #new-upon {
  position: absolute;
  top: 2rem;
}
#given {
  position: absolute;
  top: 3rem;
  left: 3rem;
}
.chin2 p {
  /* left: -1rem; */
  text-align: left;
}
/* .chin2 button {
  right: 2rem;
  font-size: 1rem;
} */
#bowl2 {
  width: 40rem;
  top: 3.5rem;
}
#s3decor1 {
  position: absolute;
  left: 21rem;
  width: 9rem;
}
#s3decor2 {
  position: absolute;
  left: 33rem;
  top: 11rem;
  width: 9rem;
}
#s3decor3 {
  position: absolute;
  left: 29rem;
  top: 34rem;
  width: 9rem;
}
#animate-S1 {
  position: absolute;
  right: -33rem;
  top: -2.5rem;
}
#styleoS1 {
  position: absolute;
  right: -6rem;
  top: 3rem;
}
#needbg,
.cCat div {
  transition: 0.5s ease-in-out;
}
#d-arrow {
  position: absolute;
  left: 15rem;
  top: 9rem;
}
#d-arrow2 {
  position: absolute;
  right: 27rem;
  top: 18rem;
  height: 110px;
}
#give-J {
  position: absolute;
  left: 13rem;
}
#p-give-J2 {
  position: relative;
  top: 0;
  left: 47rem;
}
.hero .s-text2 {
  position: absolute;
  right: 0;
  top: 0;
  margin-right: 5vw;
}
.s-text2 .seg {
  font-size: 35px;
  font-weight: 500;
}
.citem1::after,
.citem2::after,
.citem3::after {
  bottom: 20px;
  font-size: 2em;
}
.s-text2 {
  margin-top: 10vh;
}
/* .s-text2 button {
  padding: 20px 35px;
  border: none;
  border-radius: 1000px;
  background-color: #ee8a21;
  margin: 30px 0;
} */
#bowl3-S4 {
  width: 37rem;
  bottom: -1.7rem;
  left: 28vw;
  position: absolute;
}
.need-wcu {
  height: 94vh;
  position: relative;
  margin-bottom: 5em;
}
#rdbox {
  width: 20vw;
  height: 40vh;
  z-index: -100;
}
#rdbox .rdot {
  width: 35px;
  height: 35px;
  margin: 10px;
  border-radius: 50%;
  z-index: -1000;
  display: inline-flex;
  flex-wrap: wrap;
  background-color: #f0e6daaf;
}
.need-wcu #bgcircle {
  position: absolute;
  left: 35%;
  top: -54vh;
  z-index: -100;
}
.wcU {
  position: absolute;
  font-size: 5em;
  left: 22rem;
  top: 5rem;
}
.citem1,
.citem2,
.citem3,
.citem4,
.citem5,
.citem6 {
  position: relative;
}
.need-wcu #Q-mark-sec2 {
  position: absolute;
  margin-left: 2.2rem;
}
.answer,
.main-footer .cols4 {
  display: flex;
  justify-content: space-evenly;
}
.whyimT {
  width: 250px;
}
.whyimT p {
  font-weight: 500;
  font-size: 1.1em;
}
.whyimT h1 {
  font-size: 1.5em;
  letter-spacing: 1px;
  font-weight: 900;
}
.whyimT #needbg {
  background-color: #ee8a21;
  border-radius: 50%;
  padding: 7px;
}
.Categories {
  height: 170vh;
  background: linear-gradient(125deg, #f3ae65, #e9dddda9, #eda85e);
  display: block;
}
.Categories .all-here {
  position: relative;
  z-index: 5;
}
.citem1::after,
.citem2::after,
.citem3::after,
.citem4::after {
  position: absolute;
  color: #fff;
  font-weight: 700;
}
.cCat {
  width: 100%;
  height: 60vh;
  margin-right: 5vw;
  display: grid;
  grid-template-columns: 320px 320px 320px 250px 320px 300px;
  grid-template-rows: 220px 220px 220px 175px;
  gap: 10px;
}
.cCat div {
  border-radius: 2rem;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px;
  /* &:hover {
    border: 4px solid #fff;
  } */
}
.cCat div img {
  transition: transform 700ms ease;
  &:hover {
    transform: scale(1.2);
  }
}
.citem1,
.citem2 {
  grid-column: 2/5;
}
.citem1::after {
  content: "Hyderabadi Biryani";
  right: 20px;
}
.citem1 img,
.citem2 img,
.citem3 img,
.citem4 img,
.citem5 img,
.citem6 img {
  width: 100%;
  height: 100%;
  transform: scale(1.09);
}
.citem2::after {
  content: "Lucknowi Biryani";
  left: 20px;
}
.citem3 {
  grid-column: 2/4;
}
.citem3::after {
  content: "Kebabs";
  right: 20px;
}
.citem4 {
  grid-column: 4/4;
  grid-row: 3/5;
}
.citem4::after {
  content: "Biryani Combo";
  left: 65px;
  bottom: 15px;
  letter-spacing: 1px;
  font-size: 2em;
}
.citem5::after,
.citem6::after {
  left: 80px;
  bottom: 20px;
  letter-spacing: 1px;
  font-size: 2em;
  position: absolute;
  color: #fff;
  font-weight: 700;
}
.citem5 {
  grid-column: 2/3;
}
.citem5::after {
  content: "Beverages";
}
.citem6 {
  grid-column: 3/4;
}
.citem6::after {
  content: "Desserts";
}
.Categories .category-inline {
  display: flex;
  padding: 3rem;
  left: 22vw;
  position: relative;
}
.category-inline p {
  font-size: 5em;
}
.category-inline img {
  height: 7em;
  margin-top: 18px;
  margin-right: 3em;
}
.categoriesBG {
  position: relative;
  opacity: 0.7;
}
.categoriesBG img {
  z-index: -11;
  position: absolute;
}
.categoriesBG #star1 {
  width: 600px;
  position: absolute;
  right: -10vh;
  z-index: -1;
}
.categoriesBG #star2 {
  width: 600px;
  position: absolute;
  z-index: -1;
  top: 102vh;
  left: -12vh;
}
.categoriesBG #star3 {
  width: 350px;
  position: absolute;
  right: -5vh;
  top: 120vh;
}
.categoriesBG #leftBottomBowl {
  position: absolute;
  left: 0;
  width: 198w;
  top: 115vh;
  z-index: 100;
}
.categoriesBG #topRightBowl {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
}
.Wht-CS,
.Wht-CS #wcsBG {
  position: relative;
  width: 100%;
}
.Wht-CS {
  height: 100vh;
}
.Wht-CS #wcsBG {
  z-index: -1;
}
.Wht-CS #wcs-center,
.main-ct {
  z-index: 1;
  position: absolute;
  top: 3rem;
  left: 8em;
  font-size: 3.5em;
}
.main-ct {
  margin-top: 2rem;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.main-ct .sanji img {
  width: 6em;
  position: absolute;
  top: 5rem;
  left: 0;
}
.main-ct .sanji {
  left: -18rem;
  top: -2.5rem;
  position: absolute;
}
.KababWaiting,
.main-footer,
.review .num {
  position: relative;
}
.sanji #sanji-img {
  width: 26rem;
  z-index: 10;
}

.review-carousel {
  position: relative;
  overflow: hidden;
  /* margin: auto; */
  margin-top: 10rem;
  margin-right: 33rem;
  margin-left: 15rem;
  width: 38vw;
  height: max-content;
  /* border: 1px solid black; */
  text-align: left;
}
.main-ct .review-carousel .review-slide {
  /* border: 1px solid black; */
  width: 100%;
  height: 100%;
  display: none;
}
@keyframes reviewSlide {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.review-carousel .review-slide.active {
  display: block;
  animation: reviewSlide 200ms ease-in;
}
.main-ct .review-slide .title {
  font-size: 0.5em;
  font-weight: 900;
}
.main-ct .review-slide .review-comment {
  font-size: 0.35em;
  font-weight: 500;
}
.review-slide .profile,
.review-slide .rating {
  display: flex;
  align-items: center;
}
.review-slide .name {
  margin: 0 1.3rem;
}
.review-slide .name::after {
  content: "Food Enthusiast";
  display: block;
  font-size: 0.7em;
  margin-top: 8px;
  letter-spacing: 0.5px;
  color: #4d4646;
}
.review-slide .num {
  position: relative;
  top: 0.5rem;
  margin: 1rem;
}
.KababWaiting {
  width: 100%;
  height: 90vh;
}
.KababWaiting #kebab-full {
  width: 100%;
  position: absolute;
  z-index: -10;
}
.KababWaiting #kebabbg-full {
  width: 100%;
}
.KababWaiting .koby {
  width: 33vw;
  color: #fff;
  position: absolute;
  top: -2rem;
  right: -7rem;
  font-weight: 800;
  font-size: 5rem;
  z-index: 10;
  text-transform: uppercase;
}
.koby #textbgw {
  background: linear-gradient(to right, #fca547, #fff);
  background-clip: text;
}
footer {
  height: 65vh;
  width: 100%;
  background: linear-gradient(145deg, #eda85e, #fff, #eda85e);
}
footer .social-icons {
  background-color: #ee8a21;
  height: 10vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.social-icons i {
  font-size: 50px;
  margin: 0 5vw;
}
.col ul {
  display: block;
  margin-top: 70px;
}
.col ul li {
  margin: 25px;
}
.col ul .headfo {
  font-weight: 700;
  font-size: 1.5em;
}
#footer-img {
  margin-top: 50%;
  width: 150px;
}
.main-footer #footer-img2 {
  position: absolute;
  top: 37vh;
}
.item button {
  transition: 0.5s;
  border: 1px solid #ee8a21;
}
.txt_line {
  text-decoration: underline;
}
/* styles.css */
.animateToRight {
  /* border: 2px solid black; */
  opacity: 0;
  transform: translateX(-200px);
  transition: opacity 0.8s ease, transform 1s ease;
}
.animateToRight.visible {
  opacity: 1;
  transform: translateX(0); 
}
.animateToLeft {
  /* border: 2px solid black; */
  opacity: 0;
  transform: translateX(200px);
  transition: opacity 0.8s ease, transform 1s ease;
}
.animateToLeft.visible {
  opacity: 1;
  transform: translateX(0); 
}
.animateToBottm {
  /* border: 2px solid black; */
  opacity: 0;
  transform: translateY(-200px);
  transition: opacity 0.8s ease, transform .3s ease;
}
.animateToBottm.visible {
  opacity: 1;
  transform: translateY(0); 
}
.animateToTop {
  /* border: 2px solid black; */
  opacity: 0;
  transform: translateY(200px);
  transition: opacity 0.8s ease, transform .7s ease;
}
.animateToTop.visible {
  opacity: 1;
  transform: translateY(0); 
}

.navbar-list{
  /* border: 2px solid black; */
  animation: load 500ms ease;
  transition: .5s ease;
}
@keyframes load {
  from{
    opacity: 0;
    transform: translateY(-200px);
  }
  to{
    opacity: 1;
    transform: translateY(0px);
  }
}
#contact-num{
  /* border: 2px solid black; */
  animation: loadR 500ms ease;
  transition: .5s ease;
}
@keyframes loadR {
  from{
    opacity: 0;
    transform: translateX(200px);
  }
  to{
    opacity: 1;
    transform: translateX(0px);
  }
}
.header-items{
  animation: loadL 500ms ease;
  transition: .5s ease;
}
@keyframes loadL {
  from{
    opacity: 0;
    transform: translateX(-200px);
  }
  to{
    opacity: 1;
    transform: translatX(0px);
  }
}