*{
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}
body {
  overflow-x: hidden;
}

/* Navbar */
.header {
background-color: white;
padding: 15px 20px !important;
height: 90px;
position: fixed; /* Fixed to top */
width: 100%; /* Ensure full width */
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
top: 0;
z-index: 1020;
position: relative;
}


.navbar-img  img{
  width: 150px;
}
@media (max-width: 768px) {
/* Align logo next to the hamburger */
.navbar-toggler {
    border: none;
    outline: none;
}

.navbar{
padding: 10px 5px !important;

}


.custom-gap {
  gap: 100px;
}

.navbar-img img {
    width: 120px; /* Slightly smaller logo in mobile view */
}

/* Make the navbar collapse menu full width */
.navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    padding: 10px;
    z-index: 1000;
}

/* Centering the button inside mobile menu */
.navbar-collapse .primary-btn {
    width: 100%;
}
}
.nav-item{
  font-size: 17px;
  font-weight: 900;
  color: black;
}


@media (min-width: 992px) {
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Align navigation links to the left */
.navbar-nav {
    margin-right: auto;
}

/* Center the logo */
.navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Ensure the order button stays on the right */
.d-none.d-lg-block {
    margin-left: auto;
}
}



.primary-btn {
background-color: #ED1D24;
color: white;
border: none;
text-transform: uppercase;
white-space: nowrap;
border-radius: 2rem;
min-width: 10rem;
height: 2.6rem;
padding: 0.35rem 1rem;
font-family: ATCDuelRound-V4, sans-serif;
font-size: 0.8rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease-in-out;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .primary-btn {
    min-width: 5rem; /* Reduce width for smaller screens */
    height: 2rem;  /* Slightly decrease height */
    font-size: 0.55rem; /* Reduce font size */
    padding: 0.3rem 0.66rem;
  }
  }
  




.secondary-btn{
background-color: #FFD02D;
color: #ED1D24;
border: none;
text-transform: uppercase;
white-space: nowrap;
border-radius: 2rem;
min-width: 10rem;
height: 2.6rem;
padding: .55rem 1.2rem;
font-family: ATCDuelRound-V4, sans-serif;
font-size: 0.8rem;
font-weight: 900;
;
}

/* Navbar END */

















/* hOME PAGE STRAT HERE */
.banner {
  position: relative; /* Add this line */
  height: 560px;
  /*height: 100vh;*/
  width: 100%;
  background-image: url(../images/homeimg/momo-banner-2.png) ; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Mobile View (Show Mobile Banner) */
@media (max-width: 767px) {
  .banner {
    background-image: url(../images/homeimg/momo-mobile-2.png) !important ; 
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;
    height: 400px;
  }

  .banner-text h1 {
    font-size: 1.6rem;
    text-align: center;
    margin-top: 5px;
    padding: 0 5px;
  }

  .banner-btn button {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    top: auto !important; /* Cancel any 'top' setting */
  }
}

.banner-text {
  display: flex;
  justify-content: center;
}

.banner-text h1 {
  font-weight: 900;
  text-transform: uppercase;
  padding-top: 30px;
  font-size: 3.5rem;
  text-align: center;
  color: #ED1D24;
}

.banner-btn button {
  position: absolute;
  text-transform: uppercase;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
}



/* home page end */


/* aboutr  start here*/
.about{
overflow-x: hidden;
  background-color: #ED1D24;
  color: white;
  padding: 25px;
  height: 250px;
  position: relative;
  align-items: center;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.about-heading h1{
  font-size: 5rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #FFD340;
  line-height: 70px;
}

.about-heading{
  width: 500px;
}

.about-content{
  padding: 0px 100px;
}

.about-content p{
  font-size: 15px;
  font-weight: 700;
}

.about-carousel{
  height: 90vh;
  width: 100%;
  background-color: #3A6ECF;
}

@media (max-width: 767px) {

.about{
  display: flex;
  padding: 15px;

  align-items: center;
  flex-direction: column;
  height: auto;
}
.about-content{
  padding: 0px 0px ;
}

.about-heading h1 {
    font-size: 2.5rem; /* Reduce heading size */
    text-align: center;
}

.about-content p {
    font-size: 14px; /* Adjust text size */
    text-align: center;
    padding: 0 5px; /* Add padding for better spacing */
}

.about button {
    display: block;
    margin: 10px auto; /* Center the button */
}
}

/* aboout end here */


/* para first starrt here */
.para-first {
  overflow-x: hidden;
    height: 9rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: red;
    overflow: hidden;
    position: relative;
  }
  
  .para-img {
    background-image: url(../images/homeimg/Paralex.png);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    width: 100%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.2s ease-out;
  }




/* para first end here */



/* first carousel starrt */

.first-carousel{
overflow-x: hidden;
background-color: white;
width: 100%;
}
.img-responsive {
width: 100% !important;
height: 250px !important;
}  

.item-details {
width: 100% !important;
height: 150px !important;  
}


.carousel-heading h1{
  padding-top: 60px;
  margin-bottom: 50px ;
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 3rem;
  color: #ED1D24;
}

.carousel-heading {
background-color: white;
}

#customers-testimonials .item-details {
/* background-color: #4f036d; */
color: black;
padding: 10px 10px;
text-align: center;
}
#customers-testimonials .item-details h5 {
margin: 0 0 15px;
font-size: 22px;
text-transform: uppercase;
font-weight: 900 !important;
}
.item-details span{
color: red;
margin: 0px 15px;
}

#customers-testimonials .item {
text-align: center;
margin-bottom: 40px;
}

.owl-carousel .owl-nav [class*=owl-] {
transition: all 0.3s ease;
}

.owl-carousel .owl-nav [class*=owl-].disabled:hover {
background-color: white;
}

.owl-carousel {
position: relative;
}

.owl-carousel .owl-next,
.owl-carousel .owl-prev {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
position: absolute;
top: 30%;
font-size: 20px;
color: #fff;
border: 1px solid #ddd;
text-align: center;
}

.owl-carousel .owl-prev {
left: -70px;
}

.owl-carousel .owl-next {
right: -70px;
}



.owl-dots {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
background: grey !important;
}
.owl-dots button.owl-dot {
width: 15px;
height: 15px;
border-radius: 50%;
display: inline-block;
background: lemonchiffon !important;
margin: 0 3px;
}
.owl-dots button.owl-dot.active {
background-color: teal !important;
}
.owl-dots button.owl-dot:focus {
outline: none;
}



html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html,
body {

  width: 100%;
  height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;

}

ul li {
  list-style-type: none;
}

.slider--teams {
  position: relative;
  top: 50%;
  left: 50%;
  max-width: 750px;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.slider--teams__team {
  position: relative;
  overflow: hidden;
}

#list {
  position: relative;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

#list li {
  position: relative;
  display: inline-block;
  float: left;
  text-align: center;
}

#list li figure {
  cursor: pointer;
  margin: 1em;
  opacity: 0.5;
  backface-visibility: hidden;
  transition: transform 450ms cubic-bezier(0.445, 0.050, 0.550, 0.950), opacity 450ms ease-in-out;
  transform: scale(0.5) translateZ(0px);
}

#list li figure:hover {
  opacity: 0.8;
  transform: scale(0.6) translateZ(0px);
}

#list li figure:active {
  opacity: 1;
  transform: scale(0.7) translateZ(0px);
}

#list li figure > div {
  border-radius: 5px;
  position: relative;
  margin: 2rem auto;
  width: 120px;
  height: 120px;
  overflow: hidden;
  transform: rotate(45deg) translateZ(0px);
}

#list li figure > div > div {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/teams.jpg) no-repeat;
  background-size: cover;
  background-position: 0px 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170px;
  height: 170px;
  transform: rotate(-45deg) translate(0%, -70%);
}

#list li:nth-child(1) figure > div > div {
  background-position: 0px 0px !important;
}

#list li:nth-child(2) figure > div > div {
  background-position: 0px 20% !important;
}

#list li:nth-child(3) figure > div > div {
  background-position: 0px 40% !important;
}

#list li:nth-child(4) figure > div > div {
  background-position: 0px 60% !important;
}

#list li:nth-child(5) figure > div > div {
  background-position: 0px 80% !important;
}

#list li:nth-child(6) figure > div > div {
  background-position: 0px 100% !important;
}

.active {
  opacity: 1 !important;
  transform: scale(1) translateZ(0px) !important;
}

.cf::before,
.cf::after {
  content: " ";
  display: table;
}

.cf::after {
  clear: both;
}

.cf {
  *zoom: 1;
}

@media (max-width: 767px) {
  .shadow-effect img{
width: 90%;
  }


  .carousel-heading h1 {
      font-size: 2.5rem; /* Reduce heading size */
      padding-top: 30px;
  }

  .img-responsive {
      height: 100% !important; /* Reduce image height */
      object-fit: cover;
  }

  .item-details {
      height: auto !important; /* Allow content to adjust */
      padding: 10px;
  }

  #customers-testimonials .item {
      margin-bottom: 20px; /* Reduce spacing */
  }

  /* Adjust carousel controls */
  .owl-carousel .owl-prev {
      left: -10px; /* Bring navigation buttons closer */
  }

  .owl-carousel .owl-next {
      right: -10px;
  }

  /* Adjust dot indicators */
  .owl-dots {
      padding: 5px 0;
  }

  .owl-dots button.owl-dot {
      width: 10px;
      height: 10px;
  }
}


.owl-carousel{
  margin-top: -13px !important;
}

.img-container {
  display: flex;
  align-items: center;
}

.testing {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: flex-start;
}

@media (max-width: 768px) {
  .testing {
      flex-direction: column;
  }
}
.card {
  padding: 0 !important;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
}

.card:hover {
  transform: scale(1.05);
}

.card img {
  object-fit: cover;
}
.card {
  /* padding: 10px 6px; */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* Card body layout */
.card-body {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding:10px 10px !important;
}

/* Title styling */
.card-title {
  font-size: 18px;
  font-weight: bold;
}

/* Star rating styling */
.stars {
  display: flex;
  gap: 5px;
  cursor: pointer;
}

.stars i {
  font-size: 18px;
  color: #ddd;
  transition: color 0.3s;
}

.stars i.active {
  color: #FFD700;
}

/* Button positioning */

/* Veg/Non-Veg Label */
.product-label {
  position: absolute;
  top: 20px;
  left: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
  color: white;
}

.veg {
  background-color: green;
}

.nonveg {
  background-color: red;
}
.jain {
    background-color: #FF9933 !important;
}

/* Mobile View: Adjust layout */
@media (max-width: 768px) {
  .product-label {
      font-size: 10px;
      padding: 2px 5px;
      top: 20px;
      left: 5px;
  }
  
  .btn-container {
      align-self: flex-start;
  }
  .card-title{
      font-size: 14px;
      margin-bottom: 5px !important;
  }
  .card-body p{
      font-size: 11px;
  }
}


.seller-row{
  min-height: 410px;
  border: 1px solid gainsboro;
}

.img-container2{
padding: 0px 20px;
}




@media (max-width: 768px) {
  .card-body {
    padding: 10px 20px !important;
  }
  .seller-row{
    min-height: 160px;
  }
  .card-title{
    margin-bottom: 5px;
  }
}



/* first carousel end */

/* kitchenn start */

.kitchen{
  margin-top: 40px;
}

@media (max-width: 767px) {
.kitchen1{
  margin: 20px 0px;
}

.kitchen2{
  margin: 20px 0px;
}
}

/* kitchenn end */


/* marquwww lex startr */

      .marquee-container {
        overflow-x: hidden;
          overflow: hidden;
          height: 9rem;
          background-color: #ED1D24 !important;
          white-space: nowrap;
          display: flex;
          align-items: center;
          background: #f8f8f8;
          padding: 10px 0;
          position: relative;
          width: 100%;
      }

      .marquee {
          display: flex;
          /* gap: 50px; */
          width: max-content;
          animation: scroll 28s linear infinite;
      }

      @keyframes scroll {
          from {
              transform: translateX(0);
          }
          to {
              transform: translateX(-50%);
          }
      }

      .order-item {
          display: flex;
          font-style: italic;
          align-items: center;
          gap: 20px;
          font-size: 7rem;
          font-weight: bold;
          color: #FFD340;
          font-weight: 900;
      }


      @media (max-width: 767px) {
        .marquee-container {
            height: 5rem; /* Reduce height */
            padding: 0px 0; 
            overflow: hidden;
            margin: 20px 0px;
            width: 100vw; /* Ensure it doesn't exceed viewport width */
            position: relative;
        }
    
        .order-item {
            font-size: 2rem; /* Decrease font size */
            gap: 10px; /* Reduce gap */
        }
    
        .marquee {
          display: flex;
          width: max-content;
          animation: scroll 28s linear infinite;
        }
    
        @keyframes scroll-mobile {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-100%);
            }
        }
    }
    
/* marqueee end */


/* form start */

.background-container {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  overflow: hidden;
  transform: rotate(-7deg) translate(-50%, -50%);
}

.marquee-wrapper {
  display: flex;
  width: 200%;
}

.marquee-text1 {
  display: flex;
  gap: 50px;
  font-weight: 900;
  font-size: 6rem;
  color: #ED1D24;
  text-transform: uppercase;
  white-space: nowrap;
}


.marquee-text2 {
  display: flex;
  gap: 50px;
  font-size: 6rem;
  color: #FFD02D;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee-text2 span {
  -webkit-text-stroke: 2px #FFD02D;
  color: transparent;
}



.marquee-1, .marquee-3 {
  animation: scroll-left 20s linear infinite;
}
.marquee-2, .marquee-4 {
  animation: scroll-right 20s linear infinite;
}

@keyframes scroll-left {
  from {
      transform: translateX(0);
  }
  to {
      transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  from {
      transform: translateX(-50%);
  }
  to {
      transform: translateX(0);
  }
}


.main-form{
  height: 100vh;
  width: 100%;

  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  justify-content: center;
}



*, *:before, *:after {
box-sizing: border-box;
}

html {
overflow-y: scroll;
}

.form-border {
background-color: #FFF7E3;
padding: 20px;
border: 1px solid black;
}

/* Form */
.form {
border: 1px solid black;
background-color: #ED1D24;
padding: 17px 20px;
color: white;
width: 530px;  /* Desktop size */
border-radius: 4px;
}

/* Labels */
label {
font-weight: 700;
font-size: 1rem;
margin-bottom: 5px;
text-transform: uppercase;
margin-left: 10px;
}

/* Form Heading */
.tab-content h1 {
font-weight: 900;
text-align: center;
text-transform: uppercase;
margin-bottom: 1rem;
}

/* Input Fields */
input {
font-size: 1rem;
display: block;
width: 95%;
border: none;
height: 2.5rem;
/* background-color: #dd7272; */
padding: 12px 18px;
border-radius: 50px;
color: #000000;
}

/* Input Hover */
.form input:hover {
background-color: white;
}

/* Textarea */
textarea {
font-size: 1rem;
display: block;
border: none;
/* background-color: #99BDFF; */
padding: 15px 20px;
border-radius: 50px;
color: black;
resize: vertical;
width: 100%;
}

/* Textarea Hover */
.form textarea:hover {
background-color: white;
}

/* Form Fields Wrapper */
.field-wrap {
position: relative;
margin-bottom: 30px;
}

/* Form Button */
.form-btn {
display: flex;
justify-content: center;
align-items: center;
}


/* Top Row (Two Inputs Side by Side) */
.top-row {
&:after {
    content: "";
    display: table;
    clear: both;
}
}
label {
margin-bottom: 3px !important;
margin-top: 10px;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}

.top-row > div:last-child {
margin: 0;
}

/* Forgot Password Text */
.forgot {
margin-top: -20px;
text-align: right;
}


/* Mobile Fix for form */
@media (max-width: 768px) {
.top-row > div {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
}
.form-border{
  padding: 10px 10px ;
  margin: 20px 10px;
}
.main-form{
  height: auto;
}
}


@media (max-width: 768px) {
input,
textarea {
    width: 100%;  
    font-size: 0.8rem;
}
}

@media (max-width: 768px) {
.form {
    width: 100%;  
}
}

/* form end*/


/* team start here */

.team{
background-color: #ED1D24 !important;
padding: 0px 30px;
}

.team h1{
font-weight: 900;
font-size: 4.5rem;
color: #FFD02D;
}
.team p{
color: white;
margin-right: 100px;
}
.team-img{
background-color: #ED1D24;
width: 100%;
padding-bottom: 20px;
}

.team-img img{
width: 70%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid black;
}

.team-border img{
padding: 15px;
background-color: white;
}

.team-border {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}




@media (max-width: 767px) {
.team h1 {
    font-size: 2.5rem; /* Reduce size for mobile */
    text-align: center;
    font-weight: 900;
}
.team {
    padding: 10px 5px ;
}
.team p {
    margin: 0; /* Remove extra margin */
    text-align: center; /* Center text */
    font-size: 14px; /* Adjust font size for readability */
}

.team .row {
    text-align: center; /* Center align content */
}

.team .col-12 {
    margin-bottom: 20px; /* Add spacing between sections */
}

.team .secondary-btn {
    display: block;
    margin: 0 auto; /* Center button */
}
.team-img img{
    width: 96%;
}
.team-img{
  padding-bottom: 20px;
}

}



/* team end here */










































































/* FOPTTER START HERE*/
.footer{
  background-color: white;
  border-top: 0.5px solid black;
  /* border-top: 1px solid white; */
}
.footer-logo img{
  width: 150px;
}


.footer-links{
  font-weight: 900;
  font-size: 17px;
  color: white !important;
}


.footer-social i{
font-size: 1.5rem;
}


.bi-instagram {
color: #E4405F; /* Instagram color */
}

.bi-twitter {
color: #1DA1F2; /* Twitter (X) color */
}

.bi-facebook {
color: #1877F2; /* Facebook color */
}

@media (max-width: 768px) {
.footer .row {
    flex-direction: column;
    text-align: center;
}
.footer-logo{
  ;
}

.footer-logo,
.footer-links,
.footer-social {
    margin-bottom: 20px;
}

.footer-links a {
    display: block;
    margin: 5px 0;
}
}
