/* Global styles */
body {
  font-family: "Onest", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*----------------------------------- NAV BAR CSS------------------------------------------------------- */
.get-vending-btn {
  text-decoration: none;
  background: #233d4d;
  border-radius: 10px;
  padding: 5vw;
  padding-top: 1vw;
  padding-bottom: 1vw;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* position: relative; */
  padding-left: 0;
  padding-right: 0;
  width: 14.32vw;


  /* position: relative; */
}

.contact-us {
  color: #000a20;
  text-align: left;
  font-family: "Onest-Regular", sans-serif;
  font-size: 0.8vw;
  font-weight: 400;
  position: relative;
}

.component-4 {
  background: #ffffff;
  border-radius: 25px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;

  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 147px;
  height: 44px;
  position: relative;
  box-shadow: 0px 4px 68px 0px rgba(255, 255, 255, 0.5);
  margin-right: 5%;
  margin-top: 1%;
}

.contact-us {
  color: #000a20;
  text-align: left;
  font-family: "Roboto-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
}

.logo img {
  width: 100px; /* Adjust size as needed */
}

.section-6-mobile--{

  display: none;
}

.header {
  background-color: #233d4d;
  color: #fff;
  text-align: center;
  /* padding: 100px 20px; */
  /*  height: 100vh; */
}

.header p {
  font-size: 18px;
}

#myCanvas {
  width: 100%; /* Set canvas width to 100% of its parent element (innerDiv) */
  height: 300px; /* Set canvas height */
}

.header-mobile {
  display: none;
}

.RequestCallBackContent {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 16px;
  font-weight: 600;
  position: relative;
}

nav {
  top: 0px;
  height: 5rem;
  justify-content: space-between;
  width: 100%;
  background: #2d2d2d6e;
  backdrop-filter: blur(15.25px);

  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);

  display: flex;
  position: fixed;
  z-index: 10000000000000000;
  justify-content: space-between;
}

/*Styling logo*/
.logo {
  padding: 1vh 1vw;
  text-align: center;
}
.logo img {
  width: 132px;
  height: 125px;
}
.section-9-mobile-{
  display: none;
}
/*Styling Links*/
.nav-links {
  display: flex;
  list-style: none;
  width: 58vw;
  padding: 0 0.7vw;
  justify-content: space-evenly;
  align-items: center;
}
.nav-links li a {
  color: rgba(255, 255, 255, 0.77);

  font-family: "Inter-Medium", sans-serif;
  font-size: 1vw;
  font-weight: 500;
  text-decoration: none;
}
/*   .nav-links li a:hover {
        color: #61DAFB;
    } */
.nav-links li {
  position: relative;
}

.nav-links li a:hover::before {
  width: 80%;
}

/*Styling Buttons*/
.login-button {
  background-color: transparent;
  border: 1.5px solid #f2f5f7;
  border-radius: 2em;
  padding: 0.6rem 0.8rem;
  margin-left: 2vw;
  font-size: 1rem;
  cursor: pointer;
}
.login-button:hover {
  color: #131418;
  background-color: #f2f5f7;
  border: 1.5px solid #f2f5f7;
  transition: all ease-in-out 350ms;
}
.join-button {
  color: #131418;
  background-color: #61dafb;
  border: 1.5px solid #61dafb;
  border-radius: 2em;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  cursor: pointer;
}
.join-button:hover {
  color: #f2f5f7;
  background-color: transparent;
  border: 1.5px solid #f2f5f7;
  transition: all ease-in-out 350ms;
}

.page-4-section-5-{
display: block;
}
/*Styling Hamburger Icon*/
.hamburger div {
  width: 30px;
  height: 3px;
  background: #f2f5f7;
  margin: 5px;
  transition: all 0.3s ease;
}
.hamburger {
  display: none;
}

.nav-active {
  font-weight: bold;
  color: #ffffff;
}

.contact-us-nav {
  color: #000;
}

.contact-menu {
  background: white;
  height: 45px;
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 18px;
}

.contact-menu {
  display: none;
}
.section-8-mobile-{
  display: none;
    }

    .section-6-mobile--{
      display: none;
        }

@media (max-width: 767px) {

  .section-6-mobile--{

    display: none;
  } 

  .section-9-mobile-{
    display: block;
  }
  .nav-links li a {
    font-size: 6vw;
  }
  .section-6-mobile--{
    display: block;
      }
  .page-4-section-5-{
    display: none;
  }

  .contact-menu {
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 800px) {
  .nav-links {
    position: fixed;
    background: #2d2d2d;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    clip-path: circle(50px at 90% -20%);
    -webkit-clip-path: circle(50px at 90% -10%);
    transition: all 1s ease-out;
    pointer-events: none;
    margin-top: 0px;
    margin-top: 0px;
    justify-content: start;
    padding-top: 10vh;
    gap: 5vh;
  }
}

@media screen and (max-width: 800px) {
  .nav-links.open {
    clip-path: circle(1000px at 90% -10%);
    -webkit-clip-path: circle(1000px at 90% -10%);
    pointer-events: all;
    justify-content: start;
    padding-top: 10vh;
    gap: 5vh;
  }
}

@media (max-width: 767px) {
  .component-4 {
    display: none;
  }

  .section-8-mobile-{
display: block;
  }
}

@media screen and (max-width: 800px) {
  .hamburger {
    display: block;
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 2;
    transition: all 0.7s ease;
  }
}

@media screen and (max-width: 800px) {
  .logo img {
    width: 101px;
    height: 87px;
  }
}

@media screen and (max-width: 800px) {
  nav {
    position: fixed;
    z-index: 99999999999;
    height: 3rem;
  }
}

/* ===========================================END NAV BAR CSS===================================== */

/* ------------------------------------------------SECTION-1- CSS --------------------------------------------------------------- */

.frame-3 {
  background: #233d4d;
  border-radius: 10px;
  border-style: solid;
  border-color: transparent;
  border-width: 1.5px;

  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 15%;
  position: relative;
  top: 2vw;
  z-index: 999;
  padding: 1.2vw;
}

.header-content {
  position: relative;
  top: 8vw;
}

.india-first-heading {
  font-size: 2vw;
  line-height: 3vw;
}
.typing {
  color: #fe7f2d;
}
.header-vm {
  width: 25%;
  margin-top: 5vw;
  aspect-ratio: 6 / 9;
  object-fit: cover;
}
.header-desktop {
  margin-top: -21px;
}
.bg-layout-div {
  margin-top: -30%;
}
.start-section-1 {
  width: 100%;
  position: absolute;
  top: 50%;
}
.header-mobile-content {
  position: relative;
  top: 70px;
}

.india-first-heading-mobile {
  font-size: 8vw;
}
.bg-2-svg {
  width: 100%;
  position: relative;
  z-index: 9;

  margin-top: 5vw; /* Margin at the top */
  aspect-ratio: 11 / 3; /* Example aspect ratio of 16:9 */
}
.bg-layout-div-mobile {
  margin-top: -30%;
}
.header-vm-mobile {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 5;
}

.get-started-today-mobile-btn-div {
  display: flex;
  justify-content: center;
  position: relative;
  top: -15rem;
}

.bg-svg-mobile {
  width: 100%;
  position: relative;
  top: -9rem;

  height: auto;
  aspect-ratio: 6 / 5;
}
.bg-3-svg {
  position: relative;
  z-index: 99;
  aspect-ratio: 6 / 2;
}
.section-1-btn {
  display: flex;
  justify-content: center;
  margin-top: -5%;
}

.get-started-today {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 1vw;
  font-weight: 600;
  position: relative;
}

.img-2 {
  width: 100%;
  margin-top: -25%;
}

.get-started-today-mobile {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 4vw;
  font-weight: 400;
  position: relative;
}

.frame-3-mobile {
  background: #233d4d;
  border-radius: 10px;
  border-style: solid;
  border-color: transparent;
  border-width: 1.5px;
  padding: 18px 44px 18px 44px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  row-gap: 0px;
  align-items: center;
  justify-content: center;
  position: relative;
}

/*Stying for small screens*/

@media screen and (max-width: 800px) {
  .nav-links {
    position: fixed;
    background: #2d2d2d;
    height: fit-content;
    width: 100%;
    flex-direction: column;
    clip-path: circle(50px at 90% -20%);
    -webkit-clip-path: circle(50px at 90% -10%);
    transition: all 1s ease-out;
    pointer-events: none;
    margin-top: 0px;
    gap: 5vh;
    justify-content: start;
    padding-top: 10vh;
    padding-bottom: 10vh;
  }
}
@media screen and (max-width: 800px) {
  .header-desktop {
    display: none;
  }

  .header-mobile {
    display: block;
    margin-top: -7%;
  }
  .bg-1 {
    width: 100;
    height: 100vh;
  }

  .logo img {
    width: 101px;
    height: 87px;
  }

  .hamburger {
    display: block;
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 2;
    transition: all 0.7s ease;
  }
  .nav-links {
    position: fixed;
    background: #2d2d2d;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    clip-path: circle(50px at 90% -20%);
    -webkit-clip-path: circle(50px at 90% -10%);
    transition: all 1s ease-out;
    pointer-events: none;
    margin-top: 0px;
  }
  .nav-links.open {
    clip-path: circle(1000px at 90% -10%);
    -webkit-clip-path: circle(1000px at 90% -10%);
    pointer-events: all;
  }
  .nav-links li {
    opacity: 0;
  }
  .nav-links li:nth-child(1) {
    transition: all 0.5s ease 0.2s;
  }
  .nav-links li:nth-child(2) {
    transition: all 0.5s ease 0.4s;
  }
  .nav-links li:nth-child(3) {
    transition: all 0.5s ease 0.6s;
  }
  .nav-links li:nth-child(4) {
    transition: all 0.5s ease 0.7s;
  }
  .nav-links li:nth-child(5) {
    transition: all 0.5s ease 0.8s;
  }
  .nav-links li:nth-child(6) {
    transition: all 0.5s ease 0.9s;
    margin: 0;
  }
  .nav-links li:nth-child(7) {
    transition: all 0.5s ease 1s;
    margin: 0;
  }
  li.fade {
    opacity: 1;
  }
}
/*Animating Hamburger Icon on Click*/
.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
  transition: all 0.7s ease;
  width: 0;
}
.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

.component-4,
.component-4 * {
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .image-container img {
    width: 80%;
    max-width: none;
    position: relative;
    top: 4rem;
  }

  .component-4 {
    display: none;
  }
}

/* ==========================================END SECTION-1 CSS =========================================== */

.india-s-first-under-9-vending-machine {
  color: #233d4d;
  text-align: left;
  font-family: "Inter-Bold", sans-serif;
  font-size: 2vw;
  font-weight: 700;
  position: relative;
}
.section-2-model-container-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.section-2-model-container-desktop {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Experience247 {
  color: #233d4d;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 1vw;
  line-height: 1.5vw;
  font-weight: 400;
  position: relative;
  margin-top: 1vw;
}
.choices-1-text {
  font-family: "Roboto-Light", sans-serif;
  color: white;
  font-size: 1vw;
  font-weight: 300;
  line-height: 1.5vw;
}

.RequestCallBackbtnDiv {
  display: flex;
  width: 100%;
}

section-2-modalimg {
  width: 100%;
}

.section-2-mobile {
  display: none;
}

.section-2-desktop {
  padding: 10%;
  margin-top: -5vw;
}
.RequestCallBackbtnDiv {
  display: flex;
  width: 100%;
}
.Modal3dSection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.RequestCallBackbtn {
  background: #233d4d;
  border-radius: 10px;

  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  position: relative;
  margin-top: 2vw;
  padding: 1.2vw;
}

.RequestCallBackContent-s-2 {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 1vw;
  font-weight: 600;
  position: relative;
}
.modalimg {
  width: 21vw;
}
.sceneContainer1 {
  /* padding: 5%; */

  display: flex;
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .section-2-mobile {
    display: block;
  }
  .Experience247 {
    font-size: 4vw;
    line-height: 24px;
  }

  .sceneContainer1 {
    display: block;
  }
  .Modal3dSection {
    display: block;
  }
  .section-2-desktop {
    display: none;
  }

  .section-2-mobile {
    margin-top: -8rem;
  }

  .section-2-modalimg {
    width: 80%;
  }

  .section-2-bg {
    width: 100%;
  }

  .india-s-first-under-9-vending-machine {
    font-size: 30px;
    text-align: center;
  }
  .frame-6 {
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    position: relative;
    padding: 5%;
  }

  .india-s-first-under-9-vending-machine {
    font-size: 6vw;
    text-align: center;
    line-height: 8vw;
  }

  .Experience247 {
    text-align: center;
  }

  .RequestCallBackbtnDiv {
    display: flex;
    justify-content: center;
  }

  .RequestCallBackContent {
    color: #ffffff;
    text-align: left;
    font-family: "Inter-SemiBold", sans-serif;
    font-size: 4vw;
    font-weight: 600;
    position: relative;
  }

  .modalimg {
    margin-left: 8px;
  }
}

/*------------------ SECTION-3---CSS -------------------------------------------------------------- */

/* Default styles for .accessible-24-7 */
.accessible-24-7 {
  position: relative;
  top: -3rem;
  color: #ffffff;
  text-align: left;
  font-family: "Roboto-Light", sans-serif;
  font-size: 20px;
  line-height: 148%;
  font-weight: 300;
  padding: 5%;
}

.vmimg {
  width: 50%;
}

.creating-india-s-largest-intelligent-network-through-smart-vending-machine {
  background: linear-gradient(
    90.17deg,
    rgba(35, 61, 77, 1) 0%,
    rgba(81, 142, 179, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 16px;
  line-height: 21px;
  font-weight: 700;
  position: relative;
}

/* Default styles for .card-image */
.card-image {
  position: relative;
  top: 10rem;
}

/* Default styles for .redcircleimgDiv */
.redcircleimgDiv {
  background: orange;
  position: relative;
  z-index: 9;
  top: -321px;
  left: 212px;
  width: 82px;
  border-radius: 50%;
}

/* Default styles for .bolt-icon */
.bolt-icon {
  height: 75px;
  width: 44px;
  margin-left: 21%;
}

/* Default styles for .card-container */
.card-container {
  width: 65%;
  z-index: 999;
}

/* Default styles for .b0x */
.b0x {
  margin-top: 11%;
}

/* Default styles for .section3bg1 and .section3bg2 */
.section3bg1,
.section3bg2 {
  width: 100%;
}

/* Specific styles for .section3bg2 */
.section3bg2 {
  margin-top: -25rem;
}

/* Default styles for .section3b */
.section3b {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  top: -50rem;
}

/* Default styles for .imgground */
.imgground {
  position: relative;
  width: 100%;
  top: -9rem;
  z-index: 0;
}

/* Default styles for .imgbase */
.imgbase {
  position: relative;
  z-index: 999999;
  width: 50%;
}

/* Default styles for .frame-6 */
.frame-6 {
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  position: relative;
}

/* Default styles for .container and its children */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 23px;
}

/* Grid area styles for .box00, .box01, .box10, .box11 */
.box00 {
  grid-area: 1 / 1 / 2 / 2;
}
.box01 {
  grid-area: 1 / 2 / 2 / 3;
}
.box10 {
  grid-area: 2 / 1 / 3 / 2;
}
.box11 {
  grid-area: 2 / 2 / 3 / 3;
}

/* Media Queries for Responsive Design */

/* iPhone SE (320px wide) */

.section-3-mobile {
  display: none;
}

.centered-heading {
  margin-bottom: 20px;
  text-align: center;
}

.image-containerr {
  width: 100%;
}

.image-containerr {
  width: 100%; /* Adjust size as needed */
  height: auto;
  margin: 10px;
}
.img2 {
  margin-top: -18%;
  position: relative;
  z-index: -1;
  width: 100%;
}

.img1 {
  width: 100%;
}

.img3 {
  width: 100%;
  margin-top: -72%;
  position: relative;
  z-index: -3;
  top: -1rem;
}
.img4 {
  width: 100%;
  position: relative;
  margin-top: -72%;
  top: -2rem;
  z-index: -2;
}

.Review-card-main-div {
  padding: 5%;
  position: absolute;
  /* top: 74rem; */

  display: flex;
}

.review-Card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px 25px 35px 25px;
  display: flex;
  flex-direction: column;
  /* gap: 32px; */
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  position: relative;
  box-shadow: 0px 28.93px 61.56px 0px rgba(21, 21, 21, 0.15);
  width: 100%;

  margin: 2%;
}

.review-star {
  position: relative;
  left: 31%;
  position: relative;
  top: -18%;
  width: 80%;
}

.creating-india-s-largest-intelligent-network-through-smart-vending-machine {
  background: linear-gradient(
    90.17deg,
    rgba(35, 61, 77, 1) 0%,
    rgba(81, 142, 179, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 2vw;
  line-height: 121.33%;
  font-weight: 700;
  position: relative;
  top: 19vw;
  z-index: 99;
}

.company-card-main-div {
  display: flex;

  justify-content: space-between;
  padding: 5%;
}

.company-img {
  width: 75%;
  padding: 5%;
}

.vm-section-3 {
}

.vm-base {
  position: relative;
  left: -26rem;
  top: 24rem;
}

.section-3 {
  /* Add any necessary styles for the section */
}

.section-3-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Responsive grid */
  gap: 20px; /* Gap between cards */
  padding: 20px; /* Padding around the grid */
  z-index: 99;
}

.ccard {
  position: relative; /* Ensure relative positioning for absolute content */
  overflow: hidden; /* Hide overflow to contain absolute content */
  border-radius: 8px; /* Card border radius */
}

.card-bg {
  width: 100%; /* Ensure the card background image fills its container */
  display: block;
  border-radius: 8px; /* Match the card border radius */
}

.card-content1 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 5vw;
  /*  top: 50%; */
  font-size: 1vw;

  color: #fff; /* Text color */
  padding: 20px; /* Padding inside the card content */
  border-bottom-left-radius: 8px; /* Ensure bottom corners match card */
  border-bottom-right-radius: 8px;
}

.iconDiv {
  position: relative;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1;
  width: 9%;
  height: 14%;
  background: orange;
}

.icon {
  width: 100%; /* Ensure the icon fills its container */
  height: auto; /* Maintain aspect ratio */
}

.card-text {
  text-align: center;
}

.section-3-grid {
  display: grid;
  padding: 5%;
  grid-template-columns: 50% 50%;
  align-items: center;
}
.complete-vm {
  margin-left: -8%;
}

.convenience {
  color: #ffffff;
  text-align: center;
  font-family: "Roboto-SemiBold", sans-serif;
  font-size: 25px;
  line-height: 119.1%;
  font-weight: 600;
  position: relative;
  width: 181px;
  height: 41px;
}

.accessible {
  color: #ffffff;
  text-align: left;
  font-family: "Roboto-Light", sans-serif;
  font-size: 20px;
  line-height: 148%;
  font-weight: 300;
  position: relative;
}

.instant {
  color: #ffffff;
  text-align: center;
  font-family: "Onest-SemiBold", sans-serif;
  font-size: 16px;
  line-height: 129.58%;
  font-weight: 600;
  position: relative;

  height: 25px;
}

.section-3-desktop {
  margin-top: -15%;
}

@media (max-width: 767px) {
  .choices-mobile {
    color: #ffffff;
    text-align: center;
    font-family: "Onest-SemiBold", sans-serif;
    font-size: 16px;
    line-height: 129.58%;
    font-weight: 600;
    position: relative;

    height: 26px;
  }

  .section-3-desktop {
    display: none;
  }

  .creating-india-s-largest-intelligent-network-through-smart-vending-machine {
    font-size: 6vw;
    margin-bottom: 20%;
    top: 6vw;
    line-height: 8vw;
  }

  .section-3-mobile {
    display: block;
  }

  .discovery {
    color: #ffffff;
    text-align: center;
    font-family: "Onest-SemiBold", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    position: relative;
    margin-bottom: 5px;
  }

  .vorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit-etiam-eu-turpis-molestie-dictum-est-a-mattis-tellus-sed-dignissim-metus-nec {
    color: #ffffff;
    text-align: center;
    font-family: "Onest-Light", sans-serif;
    font-size: 14px;
    line-height: 148%;
    font-weight: 300;
    position: relative;
    width: 311px;
    height: 63px;
  }

  .vorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit-etiam-eu-turpis-molestie-dictum-est-a-mattis-tellus-sed-dignissim-metus-nec {
    color: #ffffff;
    text-align: center;
    font-family: "Onest-Light", sans-serif;
    font-size: 14px;
    line-height: 148%;
    font-weight: 300;
    position: relative;
    width: 311px;
    height: 63px;
  }

  .vorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit-etiam-eu-turpis-molestie-dictum-est-a-mattis-tellus-sed-dignissim-metus-nec {
    color: #ffffff;
    text-align: center;
    font-family: "Onest-Light", sans-serif;
    font-size: 14px;
    line-height: 148%;
    font-weight: 300;
    position: relative;
    width: 315px;
  }

  .section-3-main {
    display: block;
    margin-top: -30%;
  }
  .section-3-grid {
    display: block;
  }
  .complete-vm {
    display: none;
  }

  .instant-mobile {
    color: #ffffff;
    text-align: center;
    font-family: "Onest-SemiBold", sans-serif;
    font-size: 6vw;
    line-height: 24px;
    font-weight: 600;
    position: relative;
    margin-bottom: 1.5vw;
  }

  .vorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit-etiam-eu-turpis-molestie-dictum-est-a-mattis-tellus-sed-dignissim-metus-nec {
    color: #ffffff;
    text-align: center;
    font-family: "Onest-Light", sans-serif;
    font-size: 4vw;
    line-height: 148%;
    font-weight: 300;
    position: relative;
    width: 100%;
    height: 63px;
  }
  .card-content1 {
    font-size: 20px;
    top: 34%;
  }
  .imgground {
    display: none;
  }
}

@media (max-width: 1500px) {
  .card-content1 {
    top: 30%;
  }
}

@media (max-width: 767px) {
  .convenience-mobile {
    color: #ffffff;
    text-align: center;
    font-family: "Onest-SemiBold", sans-serif;
    font-size: 16px;
    line-height: 129.58%;
    font-weight: 600;
    position: relative;

    height: 26px;
  }

  .section-3-grid {
    margin-top: 6rem;
  }
  .section-3-mobile {
    margin-top: -59%;
  }
  .section-3-desktop {
    display: none;
  }
}

/*------------------------------------------------ FOOTER FOOTER ------------------------------------------------------ */

:root {
  --background-color: #233d4d;
}

#footer {
  font-family: "inter", sans-serif;
  display: flex;
  justify-content: center;

  align-content: center;
  color: #fff;
}

.footer-icon {
  aspect-ratio: 1/1;
}

#footer-container {
  background-color: var(--background-color);
  max-width: var(--boundary);
  width: 100%;
}

/* ===================================== Links containers ===================================== */

/* Individual links css */
.links {
  list-style-type: none;
  padding: 0;
  margin: 0;
  line-height: 2rem;
  font-weight: 300;
}

.links li a {
  color: white;
  text-decoration: none;
  font-size: 1.2em;
}

/* links container  */
.policy-text-link {
  text-decoration: none;
  color: #fff;
}

.footer-logo {
  aspect-ratio: 6/5;
  height: auto;
  width: auto;
}
#footer-links {
  background-color: var(--background-color);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 70px;
  padding-left: 5vw;
  padding-right: 5vw;
}

#footer-links > div {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  margin: 30px;
}

#city-links-container {
  display: flex;
  gap: 50px;
}

/* links titile h3  */

.links-title {
  padding-bottom: 20px;
  border-bottom: 1px solid white;
  color: #fff;
  font-size: 1.5em;
  margin-bottom: 30px;
}

/* Categories container */
#categories-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5vw;
  justify-content: space-between;
}

/* ===================================== Social media icons ===================================== */

#footer-options-contact {
  background-color: var(--background-color);
  display: flex;
  flex-wrap: wrap;
  max-width: var(--boundary);
  margin-top: 40px;
  justify-content: space-between;
  padding-left: 5.5vw;
  padding-right: 5.5vw;
}

#contact-options-col-1 {
  display: flex;
  gap: clamp(30px, 3vw, 30px);
  flex-wrap: wrap;
  justify-content: space-between;
  padding-right: 3vw;
  margin-bottom: 3vw;
}

#contact-email-link {
  color: white;
  text-decoration: none;
}

#contact-options-col-2 {
  display: flex;
  gap: 2vw;
  margin-bottom: 20px;
}

.contact-buttons {
  cursor: pointer;
  transition: all ease-in 0.3;
  padding: 0;
}

.contact-buttons:hover {
  scale: 1.1;
  transition: all ease-in 0.3;
}

.contact-options {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* screens below 1670px */
@media (max-width: 1670px) {
  #contact-options-col-2 {
    margin-top: 20px;
    width: 100%;
  }
  .contact-options {
    width: 100%;
  }
  #contact-options-col-1 {
    justify-content: start;
  }
  #contact-options-col-2 {
    justify-content: center;
  }

  .contact-buttons img {
    height: 40px;
  }
}

/* screens below 370px */
@media screen and (max-width: 370px) {
  #contact-options-col-2 {
    flex-wrap: wrap;
  }
}

/* ===================================== Trademark ===================================== */

#footer-trademark {
  margin-top: 40px;
  background-image: url("../home/footerWaves.svg");
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  height: 150px;
  background-size: cover;
  font-size: 0.8em;
  padding-top: 30px;
  padding-left: 60px;
  padding-right: 60px;
}

#trademark-logo {
  display: flex;
  flex-wrap: wrap;
  font-size: 20px;
  gap: clamp(30px, 2vw, 60px);
  padding-right: 40px;
  align-items: center;
}

#policy-text {
  display: flex;
  align-items: center;
  gap: clamp(30px, 2vw, 60px);
}

.policy-text a {
  color: white;
  font-size: 20px;
}

#trademark-policy-text {
  display: none;
}

@media screen and (max-width: 970px) {
  #footer-trademark {
    align-items: center;
    justify-content: center;
    text-align: justify;
    padding-left: 10px;
    padding-right: 10px;
  }

  #trademark-logo {
    margin-bottom: 20px;
    padding-right: 0px;
    gap: 50px;
    justify-content: center;
  }

  #trademark-policy-text {
    display: flex;
    gap: 30px;
  }

  #trademark-text {
    margin-top: -50px;
  }

  #policy-text {
    display: none;
  }
}

@media screen and (max-width: 500px) {
  #trademark-logo-img {
    height: 80px;
  }
  #trademark-text {
    font-size: 16px;
  }
  .policy-text a {
    font-size: 16px;
  }
}

@media screen and (max-width: 400px) {
  #footer-trademark {
    margin-top: 5px;
    height: 220px;
    padding: 5px;
  }
}

/*----------------------------------------------------- section-4--css------------ ----------------------*/

.section4 {
  display: grid;
  grid-template-columns: 50% 50%;

  padding: 10%;
  align-items: center;
}

.section4-mobile-1 {
  display: grid;
  grid-template-columns: 50% 50%;

  align-items: center;
}
._47-cities {
  color: #233d4d;
  text-align: left;
  position: relative;
  width: 120.81px;
}
._1600-stores-span {
  color: #233d4d;
  font-family: "Onest-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
}
._1600-stores-span2 {
  color: #233d4d;
  font-family: "Onest-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.section-4-mobile {
  display: none;
}
.convenient-solutions {
  color: #233d4d;
  text-align: left;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 1.2vw;
  font-weight: 600;
  /* position: relative; */
}

.vending-machines {
  color: #fe7f2d;
  text-align: left;
  font-family: "Inter-Bold", sans-serif;
  font-size: 2vw;
  font-weight: 700;
  /*  position: relative; */
}

.rent-our {
  color: #233d4d;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 1vw;
  line-height: 1.5vw;
  font-weight: 400;
  position: relative;
}

.sectionLeftSide {
  position: relative;
}

.section4Btn {
  display: flex;
  padding-top: 5%;
}

.get-vending-btn-desktop {
  background: #233d4d;
  border-radius: 10px;
  padding: 18px 44px 18px 44px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.Know-More-btn-desktop {
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(35, 61, 77, 0.47);
  border-width: 1px;
  padding: 18px 44px 18px 44px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 177px;
  position: relative;
  margin-left: 8%;
}



.get-vending {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 1vw;
  font-weight: 600;
  /*   position: relative; */
}

.Know-More-btn {
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(35, 61, 77, 0.47);
  border-width: 1px;
  padding: 5%;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  position: relative;
  width: 70%;
  color: #233d4d;
}

.Know-More {
  color: #233d4d;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 1vw;
  font-weight: 600;
  position: relative;
  width: 144px;
}

.section-4-desktop {
  margin-top: -50%;
}

.section-4-desktop .section4RightSide {
  position: relative;
}

.Location-1 {
  position: relative;
  top: -41rem;
  left: 9rem;
  z-index: 99;
}
.Location-1-img {
  position: relative;
  top: -39rem;
  left: 5rem;
}
.Location-2 {
  position: relative;
  top: -31rem;
  left: 5rem;
  z-index: 99;
}
.Location-2-img {
  position: relative;
  top: -29rem;
  left: 0rem;
}

.Location-3 {
  position: relative;
  top: -26rem;
  left: -8rem;
  z-index: 99;
}
.Location-3-img {
  position: relative;
  top: -24rem;
  left: -14rem;
}

.Location-4 {
  position: relative;
  top: -26rem;
  left: -28rem;
  z-index: 99;
}
.Location-4-img {
  position: relative;
  top: -29rem;
  left: 1rem;
}

.Location-5 {
  position: relative;
  top: -28rem;
  left: 1rem;
  z-index: 99;
}

.Location-5-img {
  position: relative;
  top: -24rem;
  left: -4rem;
}

.Location-6 {
  position: relative;
  top: -29rem;
  left: 2rem;
  z-index: 99;
}

.Location-6-img {
  position: relative;
  top: -27rem;
  left: -2.5rem;
}

.Location-man {
  position: relative;
  top: -27rem;
  left: 9rem;
}

.store-city {
  display: flex;
  align-items: center;
  position: relative;
  top: -74rem;
  left: -17rem;
}

.storeDiv {
  text-align: center;
}
.cityDiv {
  text-align: center;
}

.group-1000002741,
.group-1000002741 * {
  box-sizing: border-box;
}

.group-1000002741 {
  position: relative;
}

.ornament {
  opacity: 0.5;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 91.76px;
  height: 201.87px;
  position: absolute;
  left: 1.82px;
  top: 348.02px;
  transform-origin: 0 0;
  transform: rotate(-90deg) scale(1, 1);
}

.row-01 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}

.ellipse-5 {
  background: linear-gradient(
    180deg,
    rgba(254, 127, 45, 1) 0%,
    rgba(248, 181, 113, 1) 100%
  );
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  position: relative;
}

.ellipse-6 {
  background: linear-gradient(
    180deg,
    rgba(254, 127, 45, 1) 0%,
    rgba(248, 181, 113, 1) 100%
  );
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  position: relative;
}

.ellipse-7 {
  background: linear-gradient(
    180deg,
    rgba(254, 127, 45, 1) 0%,
    rgba(248, 181, 113, 1) 100%
  );
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  position: relative;
}

.ellipse-8 {
  background: linear-gradient(
    180deg,
    rgba(254, 127, 45, 1) 0%,
    rgba(248, 181, 113, 1) 100%
  );
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  position: relative;
}

.ellipse-9 {
  background: linear-gradient(
    180deg,
    rgba(254, 127, 45, 1) 0%,
    rgba(248, 181, 113, 1) 100%
  );
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  position: relative;
}

.ellipse-10 {
  background: linear-gradient(
    180deg,
    rgba(254, 127, 45, 1) 0%,
    rgba(248, 181, 113, 1) 100%
  );
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  position: relative;
}

.ellipse-11 {
  background: linear-gradient(
    180deg,
    rgba(254, 127, 45, 1) 0%,
    rgba(248, 181, 113, 1) 100%
  );
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  position: relative;
}

.ellipse-12 {
  background: linear-gradient(
    180deg,
    rgba(254, 127, 45, 1) 0%,
    rgba(248, 181, 113, 1) 100%
  );
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  position: relative;
}

.row-02 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}

.row-03 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}

.row-04 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}

.ornament2 {
  opacity: 0.5;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 80px;
  height: 177px;
  position: absolute;
  left: 677.27px;
  top: 177px;
  transform-origin: 0 0;
  transform: rotate(-180deg) scale(1, 1);
}

.group-1000002724 {
  width: 177.81px;
  height: 165.78px;
  position: static;
}

.group-1000002686 {
  width: 177.81px;
  height: 165.78px;
  position: static;
}

.group-1000002666 {
  width: 177.81px;
  height: 63.54px;
  position: static;
}

.rectangle-34624254 {
  border-radius: 28px;
  border-style: solid;
  border-color: transparent;
  border-width: 2px;
  width: 159.25px;
  height: 47.07px;
  position: absolute;
  left: 139px;
  top: 141.43px;
}

._47-cities {
  color: #233d4d;
  text-align: left;
  position: relative;
  left: 44.5vw;
  top: -33.5vw;
  width: 120.81px;
  height: 63.54px;
}

._47-cities-span {
  color: #233d4d;
  font-family: "Roboto-Bold", sans-serif;
  font-size: 2vw;
  font-weight: 700;
}

._47-cities-span2 {
  color: #233d4d;
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1, 5vw;
  font-weight: 500;
}

.group-1000002455 {
  width: 91.03px;
  height: 91.03px;
  position: static;
}

.group-1000002452 {
  width: 91.03px;
  height: 91.03px;
  position: static;
}

.group-1000002418 {
  width: 91.03px;
  height: 91.03px;
  position: static;
}

.ellipse-18 {
  background: #ffbb90;
  border-radius: 50%;
  width: 91.03px;
  height: 91.03px;
  position: absolute;
  left: calc(50% - 229.71px);
  top: calc(50% - 304.02px);
}

.ellipse-17 {
  background: #fe7f2d;
  border-radius: 50%;
  width: 78.54px;
  height: 78.54px;
  position: absolute;
  left: 185.09px;
  top: 36.52px;
}

.group-1000002419 {
  width: 47.49px;
  height: 47.49px;
  position: absolute;
  left: 201px;
  top: 55.43px;
  overflow: visible;
}

.map-of-india {
  width: 553.32px;
  height: 623.06px;
  position: absolute;
  /*  left: 263.61px;
    top: 45.37px; */
  overflow: visible;
}

.group-1000002702 {
  width: 67.58px;
  height: 52.89px;
  position: static;
}

.image-46 {
  border-radius: 75.5px;
  width: 67.58px;
  height: 52.89px;
  position: absolute;
  left: 290.82px;
  top: 321.75px;
  object-fit: cover;
}

.group-1000002729 {
  width: 123px;
  height: 174px;
  position: static;
}

.group-1000002723 {
  width: 106px;
  height: 64px;
  position: static;
}

.group-1000002665 {
  width: 106px;
  height: 64px;
  position: static;
}

._1600-stores {
  color: #233d4d;
  text-align: left;
  position: relative;
  left: 35vw;
  top: -37vw;
  width: 106px;
}

._1600-stores-span {
  color: #233d4d;
  font-family: "Roboto-Bold", sans-serif;
  font-size: 2vw;
  font-weight: 700;
}

._1600-stores-span2 {
  color: #233d4d;
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1.5vw;
  font-weight: 500;
}

.group-1000002728 {
  width: 109.04px;
  height: 109.04px;
  position: static;
}

.group-1000002459 {
  width: 109.04px;
  height: 109.04px;
  position: static;
}

.group-1000002456 {
  width: 109.04px;
  height: 109.04px;
  position: static;
}

.group-1000002422 {
  width: 109.04px;
  height: 109.04px;
  position: static;
}

.group-10000024182 {
  width: 109.04px;
  height: 109.04px;
  position: static;
}

.ellipse-182 {
  background: #ffbb90;
  border-radius: 50%;
  width: 91.03px;
  height: 91.03px;
  position: absolute;
  left: calc(50% - 399.71px);
  top: calc(50% - 305.02px);
}

.ellipse-19 {
  background: rgba(244, 222, 88, 0);
  border-radius: 50%;
  width: 109.04px;
  height: 109.04px;
  position: absolute;
  left: calc(50% - 408.47px);
  top: calc(50% - 313.78px);
  filter: blur(10.6px);
}

.ellipse-172 {
  background: #fe7f2d;
  border-radius: 50%;
  width: 78.54px;
  height: 78.54px;
  position: absolute;
  left: 15.09px;
  top: 35.52px;
}

.group-1000002726 {
  width: 25px;
  height: 44px;
  position: static;
}

.group-1000002725 {
  width: 25px;
  height: 44px;
  position: static;
}

.rectangle-34624264 {
  border-radius: 2px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  width: 25px;
  height: 44px;
  position: absolute;
  left: 42px;
  top: 53.43px;
}

.rectangle-34624265 {
  border-radius: 2px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  width: 25px;
  height: 9px;
  position: absolute;
  left: 42px;
  top: 53.43px;
}

.rectangle-34624266 {
  border-radius: 2px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  width: 25px;
  height: 9px;
  position: absolute;
  left: 42px;
  top: 61.43px;
}

.rectangle-34624267 {
  border-radius: 2px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  width: 25px;
  height: 9px;
  position: absolute;
  left: 42px;
  top: 69.43px;
}

.rectangle-34624268 {
  border-radius: 2px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  width: 25px;
  height: 9px;
  position: absolute;
  left: 42px;
  top: 77.43px;
}

.rectangle-34624269 {
  background: #ffffff;
  border-radius: 1px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 0.5px;
  width: 19px;
  height: 6px;
  position: absolute;
  left: 45px;
  top: 88.43px;
}

.rectangle-34624270 {
  background: #ffffff;
  border-radius: 1px;
  width: 6px;
  height: 33px;
  position: absolute;
  left: 61px;
  top: 53.43px;
}

.rectangle-34624271 {
  background: #ffffff;
  width: 2px;
  height: 4px;
  position: absolute;
  left: 46px;
  top: 57.43px;
}

.rectangle-34624274 {
  background: #ffffff;
  width: 2px;
  height: 4px;
  position: absolute;
  left: 46px;
  top: 65.43px;
}

.rectangle-34624277 {
  background: #ffffff;
  width: 2px;
  height: 4px;
  position: absolute;
  left: 46px;
  top: 73.43px;
}

.rectangle-34624280 {
  background: #ffffff;
  width: 2px;
  height: 4px;
  position: absolute;
  left: 46px;
  top: 81.43px;
}

.rectangle-34624272 {
  background: #ffffff;
  width: 2px;
  height: 4px;
  position: absolute;
  left: 51px;
  top: 57.43px;
}

.rectangle-34624275 {
  background: #ffffff;
  width: 2px;
  height: 4px;
  position: absolute;
  left: 51px;
  top: 65.43px;
}

.rectangle-34624278 {
  background: #ffffff;
  width: 2px;
  height: 4px;
  position: absolute;
  left: 51px;
  top: 73.43px;
}

.rectangle-34624281 {
  background: #ffffff;
  width: 2px;
  height: 4px;
  position: absolute;
  left: 51px;
  top: 81.43px;
}

.rectangle-34624273 {
  background: #ffffff;
  width: 2px;
  height: 4px;
  position: absolute;
  left: 56px;
  top: 57.43px;
}

.rectangle-34624276 {
  background: #ffffff;
  width: 2px;
  height: 4px;
  position: absolute;
  left: 56px;
  top: 65.43px;
}

.rectangle-34624279 {
  background: #ffffff;
  width: 2px;
  height: 4px;
  position: absolute;
  left: 56px;
  top: 73.43px;
}

.rectangle-34624282 {
  background: #ffffff;
  width: 2px;
  height: 4px;
  position: absolute;
  left: 56px;
  top: 81.43px;
}

.location {
  width: 77px;
  height: 77px;
  position: absolute;
  left: 284px;
  top: 261.43px;
  overflow: hidden;
}

.vector {
  width: 63.92%;
  height: 91.78%;
  position: absolute;
  right: 18.05%;
  left: 18.03%;
  bottom: 8.22%;
  top: 0%;
  overflow: visible;
}

.ellipse-64 {
  background: #ffffff;
  border-radius: 50%;
  width: 54.76%;
  height: 54.76%;
  position: absolute;
  right: 22.62%;
  left: 22.62%;
  bottom: 41.67%;
  top: 3.57%;
}

.group-1000002727 {
  position: absolute;
  inset: 0;
}

.group-10000027252 {
  width: 23.38%;
  height: 41.16%;
  position: absolute;
  right: 38.01%;
  left: 38.61%;
  bottom: 49.32%;
  top: 9.52%;
  overflow: visible;
}

.rectangle-346242712 {
  background: rgba(35, 61, 77, 0.71);
  width: 1.87%;
  height: 3.74%;
  position: absolute;
  right: 55.78%;
  left: 42.35%;
  bottom: 82.99%;
  top: 13.27%;
}

.rectangle-346242742 {
  background: rgba(35, 61, 77, 0.71);
  width: 1.87%;
  height: 3.74%;
  position: absolute;
  right: 55.78%;
  left: 42.35%;
  bottom: 75.51%;
  top: 20.75%;
}

.rectangle-346242772 {
  background: rgba(35, 61, 77, 0.71);
  width: 1.87%;
  height: 3.74%;
  position: absolute;
  right: 55.78%;
  left: 42.35%;
  bottom: 68.03%;
  top: 28.23%;
}

.rectangle-346242802 {
  background: rgba(35, 61, 77, 0.71);
  width: 1.87%;
  height: 3.74%;
  position: absolute;
  right: 55.78%;
  left: 42.35%;
  bottom: 60.54%;
  top: 35.71%;
}

.rectangle-346242722 {
  background: rgba(35, 61, 77, 0.71);
  width: 1.87%;
  height: 3.74%;
  position: absolute;
  right: 51.1%;
  left: 47.03%;
  bottom: 82.99%;
  top: 13.27%;
}

.rectangle-346242752 {
  background: rgba(35, 61, 77, 0.71);
  width: 1.87%;
  height: 3.74%;
  position: absolute;
  right: 51.1%;
  left: 47.03%;
  bottom: 75.51%;
  top: 20.75%;
}

.rectangle-346242782 {
  background: rgba(35, 61, 77, 0.71);
  width: 1.87%;
  height: 3.74%;
  position: absolute;
  right: 51.1%;
  left: 47.03%;
  bottom: 68.03%;
  top: 28.23%;
}

.rectangle-346242812 {
  background: rgba(35, 61, 77, 0.71);
  width: 1.87%;
  height: 3.74%;
  position: absolute;
  right: 51.1%;
  left: 47.03%;
  bottom: 60.54%;
  top: 35.71%;
}

.rectangle-346242732 {
  background: rgba(35, 61, 77, 0.71);
  width: 1.87%;
  height: 3.74%;
  position: absolute;
  right: 46.43%;
  left: 51.7%;
  bottom: 82.99%;
  top: 13.27%;
}

.rectangle-346242762 {
  background: rgba(35, 61, 77, 0.71);
  width: 1.87%;
  height: 3.74%;
  position: absolute;
  right: 46.43%;
  left: 51.7%;
  bottom: 75.51%;
  top: 20.75%;
}

.rectangle-346242792 {
  background: rgba(35, 61, 77, 0.71);
  width: 1.87%;
  height: 3.74%;
  position: absolute;
  right: 46.43%;
  left: 51.7%;
  bottom: 68.03%;
  top: 28.23%;
}

.rectangle-346242822 {
  background: rgba(35, 61, 77, 0.71);
  width: 1.87%;
  height: 3.74%;
  position: absolute;
  right: 46.43%;
  left: 51.7%;
  bottom: 60.54%;
  top: 35.71%;
}

.group-10000027022 {
  width: 40.32px;
  height: 41.16px;
  position: static;
}

.image-47 {
  border-radius: 96.5px;
  width: 40.32px;
  height: 41.16px;
  position: absolute;
  left: 423.59px;
  top: 83.73px;
  object-fit: cover;
}

.group-1000002703 {
  width: 67.51px;
  height: 44.73px;
  position: static;
}

.image-45 {
  border-radius: 32.5px;
  width: 67.51px;
  height: 44.73px;
  position: absolute;
  left: 480.46px;
  top: 247.44px;
  object-fit: cover;
}

.group-10000027272 {
  width: 42.09px;
  height: 27.88px;
  position: static;
}

.image-452 {
  border-radius: 32.5px;
  width: 42.09px;
  height: 27.88px;
  position: absolute;
  left: 556.7px;
  top: 365.18px;
  object-fit: cover;
}

.group-1000002704 {
  width: 91.15px;
  height: 50.52px;
  position: static;
}

.image-462 {
  border-radius: 49px;
  width: 91.15px;
  height: 50.52px;
  position: absolute;
  left: 415.17px;
  top: 320.42px;
  object-fit: cover;
}

.group-1000002705 {
  width: 81.39px;
  height: 60.77px;
  position: static;
}

.image-48 {
  border-radius: 46.5px;
  width: 81.39px;
  height: 60.77px;
  position: absolute;
  left: 350.62px;
  top: 394.57px;
  object-fit: cover;
}

.location2 {
  width: 66px;
  height: 67px;
  position: absolute;
  left: 427px;
  top: 267.43px;
  overflow: hidden;
}

.vector2 {
  width: 63.92%;
  height: 91.78%;
  position: absolute;
  right: 18.05%;
  left: 18.03%;
  bottom: 8.22%;
  top: 0%;
  overflow: visible;
}

.group-10000027253 {
  width: 23.38%;
  height: 41.16%;
  position: absolute;
  right: 38.01%;
  left: 38.61%;
  bottom: 49.32%;
  top: 9.52%;
  overflow: visible;
}

.location3 {
  width: 78px;
  height: 80px;
  position: absolute;
  left: 474px;
  top: 185.43px;
  overflow: hidden;
}

.vector3 {
  width: 63.92%;
  height: 91.78%;
  position: absolute;
  right: 18.05%;
  left: 18.03%;
  bottom: 8.22%;
  top: 0%;
  overflow: visible;
}

.group-10000027254 {
  width: 23.38%;
  height: 41.16%;
  position: absolute;
  right: 38.01%;
  left: 38.61%;
  bottom: 49.32%;
  top: 9.52%;
  overflow: visible;
}

.location4 {
  width: 51px;
  height: 52px;
  position: absolute;
  left: 366px;
  top: 357.43px;
  overflow: hidden;
}

.vector4 {
  width: 63.92%;
  height: 91.78%;
  position: absolute;
  right: 18.05%;
  left: 18.03%;
  bottom: 8.22%;
  top: 0%;
  overflow: visible;
}

.group-10000027255 {
  width: 23.38%;
  height: 41.16%;
  position: absolute;
  right: 38.01%;
  left: 38.61%;
  bottom: 49.32%;
  top: 9.52%;
  overflow: visible;
}

.location5 {
  width: 55px;
  height: 57px;
  position: absolute;
  left: 549px;
  top: 317.43px;
  overflow: hidden;
}

.vector5 {
  width: 63.92%;
  height: 91.78%;
  position: absolute;
  right: 18.05%;
  left: 18.03%;
  bottom: 8.22%;
  top: 0%;
  overflow: visible;
}

.group-10000027256 {
  width: 23.38%;
  height: 41.16%;
  position: absolute;
  right: 38.01%;
  left: 38.61%;
  bottom: 49.32%;
  top: 9.52%;
  overflow: visible;
}

.location6 {
  width: 78px;
  height: 79px;
  position: absolute;
  left: 404px;
  top: 15.43px;
  overflow: hidden;
}

.vector6 {
  width: 63.92%;
  height: 91.78%;
  position: absolute;
  right: 18.05%;
  left: 18.03%;
  bottom: 8.22%;
  top: 0%;
  overflow: visible;
}

.group-10000027257 {
  width: 23.38%;
  height: 41.16%;
  position: absolute;
  right: 38.01%;
  left: 38.61%;
  bottom: 49.32%;
  top: 9.52%;
  overflow: visible;
}

.background,
.background * {
  box-sizing: border-box;
  /*  margin-top: -61px; */
}

.background {
  background: #ffffff;
  height: 1122px;
  position: relative;
}

.cta-bottom-wave-1920-2-svg {
  width: 100%;
  height: 1186px;
  position: absolute;
  left: 0px;
  bottom: -4.87px;
  overflow: hidden;
}

.india-s-largest,
.india-s-largest {
  box-sizing: border-box;
}

.india-s-largest {
  background: linear-gradient(
    90.17deg,
    rgba(35, 61, 77, 1) 0%,
    rgba(81, 142, 179, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 32px;
  line-height: 121.33%;
  font-weight: 700;
  position: relative;
}

.clip-path-group {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: visible;
}

.cta-bottom-wave-1920-1-svg {
  width: 100%;
  height: 1186px;
  position: absolute;
  left: 0px;
  bottom: -4.87px;
  overflow: hidden;
}

.cta-bottom-wave-1920-1-svg-fill {
  width: 100%;
  height: 1186px;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
}

.cta-bottom-wave-1920-1-svg2 {
  width: 100%;
  height: 1186px;
  position: absolute;
  left: calc(50% - 960px);
  top: calc(50% - 593px);
  overflow: hidden;
}

.clip-path-group2 {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0px;
  top: -53px;
  overflow: visible;
}

.group-1000002750 {
  position: absolute;
  inset: 0;
}

.rectangle-34624258 {
  border-radius: 0px;
  width: 26.2%;
  height: 21.42%;
  position: absolute;
  right: 35.21%;
  left: 38.59%;
  bottom: 36.5%;
  top: 42.09%;
  overflow: visible;
}
#trademark-text{
  color: #fff;
}

.group-1000002683 {
  width: 430px;
  height: 215px;
  position: static;
}

.accessible-24-7 {
  color: #ffffff;
  text-align: left;
  font-family: "Roboto-Light", sans-serif;
  font-size: 20px;
  line-height: 148%;
  font-weight: 300;
  position: relative;

  height: 5.06%;
  top: -10rem;
  width: 30rem;
  left: 5%;
}

.convenience {
  color: #ffffff;
  text-align: center;
  font-family: "Roboto-SemiBold", sans-serif;
  font-size: 25px;
  line-height: 119.1%;
  font-weight: 600;
  position: absolute;
  right: 44.01%;
  left: 46.56%;
  width: 9.43%;
  bottom: 49.31%;
  top: 47.23%;
  height: 3.46%;
}

.group-1000002655 {
  width: 64.89px;
  height: 64.89px;
  position: static;
}

.ellipse-51 {
  background: #fe7f2d;
  border-radius: 50%;
  width: 3.38%;
  height: 5.47%;
  position: absolute;
  right: 46.57%;
  left: 50.05%;
  bottom: 55.65%;
  top: 38.88%;
}

.bolt {
  width: 2.05%;
  height: 3.33%;
  position: absolute;
  right: 47.23%;
  left: 50.71%;
  bottom: 56.76%;
  top: 39.92%;
  overflow: visible;
}

.group-1000002751 {
  position: absolute;
  inset: 0;
}

.rectangle-346242582 {
  border-radius: 0px;
  width: 26.2%;
  height: 21.42%;
  position: absolute;
  right: 35.21%;
  left: 38.59%;
  bottom: 10.28%;
  top: 68.31%;
  overflow: visible;
}

.group-10000026832 {
  width: 430px;
  height: 245px;
  position: static;
}

.enjoy-effortless-transactions-with-various-payment-options-including-cards-mobile-wallets-and-digital-payments {
  color: #ffffff;
  text-align: left;
  font-family: "Roboto-Light", sans-serif;
  font-size: 20px;
  line-height: 148%;
  font-weight: 300;
  position: absolute;
  right: 37.08%;
  left: 40.52%;
  width: 22.4%;
  bottom: 14.24%;
  top: 78.17%;
  height: 7.59%;
}

.payments {
  color: #ffffff;
  text-align: center;
  font-family: "Roboto-SemiBold", sans-serif;
  font-size: 25px;
  line-height: 119.1%;
  font-weight: 600;
  position: absolute;
  right: 45.16%;
  left: 48.54%;
  width: 6.3%;
  bottom: 23.09%;
  top: 73.45%;
  height: 3.46%;
}

.redcircle {
  background: #fe7f2d;
  border-radius: 50%;
  width: 66px;
  height: 66px;
  margin-top: 65px;
  position: relative;
  top: -28rem;
  left: 220px;
}

.redcircleimgDiv {
  display: flex;
  background: #fe7f2d;
  align-items: center;
  width: 64px;
  height: 64px;
  justify-content: center;
  position: relative;
  /*  top: -81%; */
  left: 44%;
  border-radius: 50px;
}

.ellipse-512 {
  background: #fe7f2d;
  border-radius: 50%;
  width: 3.38%;
  height: 5.47%;
  position: absolute;
  right: 46.57%;
  left: 50.05%;
  bottom: 29.43%;
  top: 65.1%;
}

.good-choice {
  width: 2.12%;
  height: 3.43%;
  position: absolute;
  right: 47.21%;
  left: 50.67%;
  bottom: 30.46%;
  top: 66.1%;
  overflow: visible;
}

.group-1000002752 {
  position: absolute;
  inset: 0;
}

.rectangle-346242583 {
  border-radius: 0px;
  width: 26.2%;
  height: 21.42%;
  position: absolute;
  right: 7.29%;
  left: 66.51%;
  bottom: 36.5%;
  top: 42.09%;
  overflow: visible;
}

.from-healthy-snacks-to-tech-gadgets-our-machines-offer-an-extensive-selection-to-cater-to-all-your-needs {
  color: #ffffff;
  text-align: left;
  font-family: "Roboto-Light", sans-serif;
  font-size: 20px;
  line-height: 148%;
  font-weight: 300;
  position: absolute;
  right: 9.17%;
  left: 68.44%;
  width: 22.4%;
  bottom: 40.46%;
  top: 51.95%;
  height: 7.59%;
}

.choices {
  color: #ffffff;
  text-align: center;
  font-family: "Roboto-SemiBold", sans-serif;
  font-size: 25px;
  line-height: 119.1%;
  font-weight: 600;
  position: absolute;
  right: 16.46%;
  left: 75.78%;
  width: 7.76%;
  bottom: 49.31%;
  top: 47.23%;
  height: 3.46%;
}


.ellipse-513 {
  background: #fe7f2d;
  border-radius: 50%;
  width: 3.38%;
  height: 5.47%;
  position: absolute;
  right: 18.65%;
  left: 77.97%;
  bottom: 55.65%;
  top: 38.88%;
}

.magnifying {
  width: 1.99%;
  height: 3.22%;
  position: absolute;
  right: 19.33%;
  left: 78.68%;
  bottom: 56.78%;
  top: 40.01%;
  overflow: visible;
}

.group-1000002753 {
  position: absolute;
  inset: 0;
}

.rectangle-346242584 {
  border-radius: 0px;
  width: 26.2%;
  height: 21.42%;
  position: absolute;
  right: 7.29%;
  left: 66.51%;
  bottom: 10.36%;
  top: 68.22%;
  overflow: visible;
}

.our-machines-are-stocked-regularly-to-ensure-you-always-get-the-freshest-and-highest-quality-products-available {
  color: #ffffff;
  text-align: left;
  font-family: "Roboto-Light", sans-serif;
  font-size: 20px;
  line-height: 148%;
  font-weight: 300;
  position: absolute;
  right: 9.17%;
  left: 68.44%;
  width: 22.4%;
  bottom: 14.32%;
  top: 78.09%;
  height: 7.59%;
}

.freshness {
  color: #ffffff;
  text-align: center;
  font-family: "Roboto-SemiBold", sans-serif;
  font-size: 25px;
  line-height: 119.1%;
  font-weight: 600;
  position: absolute;
  right: 15.57%;
  left: 74.84%;
  width: 9.58%;
  bottom: 23.18%;
  top: 73.37%;
  height: 3.46%;
}

.get-vending-mobile {
  font-size: 1.04vw;
  color: #ffffff;
  color: #ffffff;
text-align: center;
font-family: 'Inter-SemiBold', sans-serif;

font-weight: 600;
position: relative;
}

.ellipse-514 {
  background: #fe7f2d;
  border-radius: 50%;
  width: 3.38%;
  height: 5.47%;
  position: absolute;
  right: 18.65%;
  left: 77.97%;
  bottom: 29.51%;
  top: 65.02%;
}

.save-time {
  width: 2.3%;
  height: 3.72%;
  position: absolute;
  right: 19.18%;
  left: 78.52%;
  bottom: 30.4%;
  top: 65.88%;
  overflow: visible;
}


@media (max-width: 767px) {
  .india-s-largest {
    font-size: 20px;
    padding: 5%;
  }

  .get-vending-btn{
    width: 60% ;
    /* width: 11vw; */
    padding: 6%;
    
  
    padding: 1.5vw vw;
    background-color: #233d4d;
    color: white;
    border: none;
    border-radius: 3vw;
    font-size: 1.04vw;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
  
    box-shadow: 0 0.21vw 0.31vw rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  
  }
  
}


.section3 {
  padding: 5%;
}

.card-container {
  width: 66rem;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between; /* Distribute cards evenly */
}

.card {
  flex: 1 1 calc(25% - 20px); /* Adjust width of cards; minus gap */
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Adds shadow for depth */
  position: relative; /* Ensure relative positioning for absolute positioning of redcircleimgDiv */
}

.card-image {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 44px;
}

.card-content {
  padding: 15px;
  background-color: #f9f9f9;
}

.redcircleimgDiv {
  position: absolute;
  top: 0px; /* Adjust positioning as needed */
  /* Adjust positioning as needed */
}

.bolt-icon {
  width: 30px; /* Adjust initial size of bolt icon */
  height: auto;
  display: block;
  max-width: 100%; /* Ensures the icon scales with its container */
}
.card {
  flex: 1 1 calc(50% - 20px);
}

/* Media query for responsiveness */
@media (max-width: 768px) {
  .card {
    flex: 1 1 calc(50% - 20px); /* 2 cards per row */
  }
}

@media (max-width: 480px) {
  .card {
    flex: 1 1 calc(100% - 20px); /* 1 card per row */
  }
}

.istockphoto-1295262491-612-x-612-removebg-preview-2,
.istockphoto-1295262491-612-x-612-removebg-preview-2 * {
  box-sizing: border-box;
}

.istockphoto-1295262491-612-x-612-removebg-preview-2 {
  height: 311px;
  position: relative;
  object-fit: cover;
  top: -15rem;
  left: 23rem;
}

.frame-1000002673,
.frame-1000002673 * {
  box-sizing: border-box;
}

.frame-1000002673 {
  /*  display: flex; */
  /*  flex-direction: row;
    gap: 18px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap; */
  position: relative;
  padding: 6rem;
}

.group-1000002690 {
  flex-shrink: 0;
  width: 696px;
  height: 167px;
  position: static;
}

.group-1000002687 {
  width: 465px;
  height: 29px;
  position: static;
}

.convenient-solutions-for-every-location {
  color: #233d4d;
  text-align: left;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 24px;
  font-weight: 600;
  position: absolute;
  left: 0px;
  top: 0px;
}

.group-1000002688 {
  width: 696px;
  height: 119px;
  position: static;
}

.vending-machines-for-rent {
  color: #fe7f2d;
  text-align: left;
  font-family: "Inter-Bold", sans-serif;
  font-size: 40px;
  font-weight: 700;
  position: absolute;
  left: 0px;
  top: 48px;
  width: 696px;
}

.rent-our-vending-machines-for-offices-schools-hospitals-and-more-reliable-customizable-and-hassle-free-service {
  color: #233d4d;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 20px;
  line-height: 31px;
  font-weight: 400;
  position: absolute;
  left: 0px;
  top: 105px;
  width: 696px;
}

.frame-1 {
  background: #233d4d;
  border-radius: 10px;
  padding: 18px 44px 18px 44px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 313px;
  position: relative;
}

.get-vending-machine {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  width: 170px;
}

.frame-2 {
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(35, 61, 77, 0.47);
  border-width: 1px;
  padding: 18px 44px 18px 44px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 177px;
  position: relative;
}

.know-more {
  color: #233d4d;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  width: 144px;
}

.section4btn {
  display: flex;
  position: relative;
  left: -141px;
  justify-content: space-around;
}

.section4Div {
  display: flex;
  padding: 5%;
}

.section-4-mobile .sectionLeftSide {
  position: relative;
}
.section-4-mobile {
  padding: 5%;
}
.section-4-mobile .section4 {
  display: block;
}
.section-4-mobile .section4RightSide .map {
  width: 100%;
}
.section-4-mobile .Location-man-mobile {
  position: relative;
  top: -27rem;

  width: 100%;
}
.section4Btn-mobile {
  display: block;
  position: relative;
  top: -27vw;
}



.Know-More-mobile {
  font-size: 4vw;
  color: #233d4d;
}

.get-vending-btn-mobile {
  display: flex;
  justify-content: center;
}
.Know-More-btn-mobile {
  display: flex;
  justify-content: center;
  margin-top: 5%;
}
.vending-machines-mobile {
  color: #fe7f2d;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 6vw;
  font-weight: 700;
  position: relative;
  top: -200vw;
}

.rent-our-mobile {
  color: #233d4d;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 4vw;
  line-height: 24px;
  font-weight: 400;
  position: relative;
  top: -37vw;
}

.convenient-solutions-mobile {
  color: #233d4d;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 6vw;
  font-weight: 600;
  position: relative;
  top: -30vw;
}
@media (max-width: 767px) {

  .get-vending-mobile {
    font-size: 4vw;
    color: #ffffff;
    color: #ffffff;
  text-align: center;
  font-family: 'Inter-SemiBold', sans-serif;
  
  font-weight: 600;
  position: relative;
  }
  .section-4-mobile {
    display: block;
    margin-top: 66vw;
  }
  ._1600-stores-span2 {
    color: #233d4d;
    font-family: "Roboto-Medium", sans-serif;
    font-size: 4vw;
  }

  .section-4-desktop {
    display: none;
  }
}

/* -------------------------------------------SECTION-5-CSS ------------------------------------------ */

.section5RightSide {
}
.sidevm {
  position: relative;
  top: -44rem;
  left: 3rem;
}
.coins {
  position: relative;
  top: -48rem;
  /*  left: -29rem; */
}

.vm-bg-desktop-img {
  width: 100%;
}
.man {
  position: relative;
  left: 20rem;
  top: -49rem;
}
.Leftsidesmallimg {
  position: relative;
  top: -32rem;
}
.growth {
  position: relative;
  left: -2rem;
  z-index: -9;
  top: -57rem;
}

.growData {
  position: relative;
  left: 30rem;
  top: -12rem;
}
.data {
  position: relative;
  left: -11rem;
  top: -92rem;
}
.franchise {
  text-align: center;
}
.invest {
  color: #233d4d;
  text-align: left;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 24px;
  font-weight: 600;
  /*  position: relative; */
}

.Be-your {
  color: #fe7f2d;
  text-align: left;
  font-family: "Inter-Bold", sans-serif;
  font-size: 40px;
  font-weight: 700;
  /*  position: relative; */
}
.Own-a-low {
  color: #233d4d;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 20px;
  line-height: 31px;
  font-weight: 400;
  /* position: relative;
 */
}

._23-franchise {
  color: #233d4d;
  text-align: center;
  position: relative;
  width: 56px;
  height: 35px;
}
._23-franchise-span {
  color: #233d4d;
  font-family: "Onest-Bold", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
._23-franchise-span2 {
  color: #233d4d;
  font-family: "Onest-Medium", sans-serif;
  font-size: 12px;
  font-weight: 500;
}

._23-franchise-1-mobile {
  color: #233d4d;
  text-align: center;
}
.Franchise23-mobile-1 {
  color: #233d4d;
  text-align: center;
  position: relative;
  left: 0vw;
  top: 0vw;
}

.section5Btn {
  background: #233d4d;
  border-radius: 10px;
  padding: 18px 44px 18px 44px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;

  position: relative;
}
.section5Btntxt {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 1vw;
  font-weight: 600;
  position: relative;
}

.section5Btntxt-mobile {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 4vw;
  font-weight: 600;
  position: relative;
}

.know-more-btn {
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(35, 61, 77, 0.47);
  border-width: 1px;
  padding: 18px 44px 18px 44px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 177px;
  position: relative;
  margin-left: 8%;
}
.know-more-txt {
  color: #233d4d;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 1vw;
  font-weight: 600;
  position: relative;
}

.section5BtnDiv {
  display: flex;
}

.section-5-mobile {
  display: none;
}

.section5 {
  display: grid;
  grid-template-columns: 1fr 1fr;

  align-items: center;
  gap: 4vw;
}
.section-5-mobile {
  display: none;
}
.section-5-desktop {
  padding: 10%;
  margin-top: -20%;
}
._23-franchise {
  color: #233d4d;
  text-align: left;
  position: relative;
  width: 154px;
  margin-left: 1.5vw;
}
._23-franchise-span {
  color: #233d4d;
  font-family: "Roboto-Bold", sans-serif;
  font-size: 32px;
  font-weight: 700;
}
._23-franchise-span2 {
  color: #233d4d;
  font-family: "Roboto-Medium", sans-serif;
  font-size: 1vw;
  font-weight: 500;
}
@media (max-width: 767px) {
  .growth {
    position: relative;
    left: -24rem;
    z-index: -9;
    top: -62rem;
  }

  .section5LiftSide {
    margin-top: 120%;
  }

  .vmbgimg {
    width: 100%;
  }

  .section-5-mobile {
    display: block;
    margin-top: -28rem;
  }
  .section-5-desktop {
    display: none;
  }

  .franchise {
    position: relative;
    top: -28rem;
  }
  .man {
    position: relative;
    left: 0rem;
    top: -27rem;
    width: 49%;
  }
  .data {
    position: relative;
    left: -30rem;
    top: -83rem;
  }

  .coins {
    top: -27rem;

    width: 40%;
  }

  .section5RightSide {
    margin-left: 0;
    padding: 5%;
  }
  .growData {
    display: none;
  }
  .know-more-btn {
    margin-left: 0;
    margin-top: 10%;
  }
  .invest {
    text-align: center;
  }
  .Be-your {
    text-align: center;
  }

  .Own-a-low {
    text-align: center;
  }
  .section5BtnDiv {
    display: flex;
    justify-content: space-evenly;
    position: relative;
    top: -14vw;
  }
  .sidevm {
    width: 100%;
    top: -33rem;
    left: -1rem;
  }

  .section5 {
    display: block;
  }

  .section-4-desktop {
    display: none;
  }
}

/*--------------------------------- SECTION-9--CSS------------------------------- */

.videos {
  background: linear-gradient(
    90.17deg,
    rgba(35, 61, 77, 1) 0%,
    rgba(81, 142, 179, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 16px;
  line-height: 121.33%;
  font-weight: 700;
  position: relative;
}
.iframe-video {
  width: 100%;
  height: 400px;
}



.mobile-video-more {
  display: none;
}

.desktop-video-more {
  display: flex;
  justify-content: center;
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6%;
  padding: 5%;
  /*  overflow-x: scroll; */
  position: relative;
  top: 30vw;
}

.videos-heading {
  background: linear-gradient(
    90.17deg,
    rgba(35, 61, 77, 1) 0%,
    rgba(81, 142, 179, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 2vw;
  line-height: 121.33%;
  font-weight: 700;
  position: relative;
  top: 28vw;
}
.video-section {
  margin-top: -39vw;
}

.frame-1000002846 {
  background: #233d4d;
  border-radius: 12px;
  padding: 18px 44px 18px 44px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 162px;

  position: relative;
}
.view-more {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 12px;
  font-weight: 400;
  position: relative;
  width: 144px;
}

.section-9-moblie {
  display: none;
}

.frame-37 {
  background: #233d4d;
  border-radius: 10px;
  padding: 18px 44px 18px 44px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  row-gap: 0px;
  align-items: center;
  justify-content: center;
  width: 215px;
  position: relative;
  z-index: 999;

  top: -5vw;
}
.view-more {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 1vw;
  font-weight: 600;
  position: relative;
  width: 144px;
}

@media (max-width: 767px) {
  .videos-heading {
    font-size: 5vw;
    top: 5vw;
  }

  .video-section {
    margin-top: 27vw;
  }
  .mobile-video-more {
    display: flex;
  }

  .iframe-video {
    width: auto !important;
    height: auto !important;
  }

  .desktop-video-more {
    display: none;
  }

  .video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6%;
    padding: 5%;
    overflow-x: scroll;
    position: relative;
    top: 15vw;
  }

  .section-9-desktop {
    display: none;
  }
  .section-9-moblie {
    display: block;
    margin-top: 48%;
  }

  .rectangle-34624216 {
    width: 140.65px;
    height: 80px;
  }
}

/*---------------------------------- SECTION-6-CSS---------------------------------------------------------------------------------- */

.section6RightSide {
}
.sidevm {
  position: relative;
  top: -44rem;
  left: 3rem;
}
.coins {
  position: relative;
  top: -48rem;
  /*  left: -29rem; */
}

.vm-bg-desktop-img {
  width: 35vw;
}
.man {
  position: relative;
  left: 20rem;
  top: -49rem;
}
.Leftsidesmallimg {
  position: relative;
  top: -32rem;
}
.growth {
  position: relative;
  left: -2rem;
  z-index: -9;
  top: -57rem;
}

.growData {
  position: relative;
  left: 30rem;
  top: -12rem;
}
.data {
  position: relative;
  left: -11rem;
  top: -92rem;
}
.franchise {
  text-align: center;
}
.invest {
  color: #233d4d;
  text-align: left;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 1.2vw;
  font-weight: 600;
  /*  position: relative; */
}

.Be-your {
  color: #fe7f2d;
  text-align: left;
  font-family: "Inter-Bold", sans-serif;
  font-size: 2vw;
  font-weight: 700;
  /*  position: relative; */
}
.Own-a-low {
  color: #233d4d;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 1vw;
  line-height: 1.5vw;
  font-weight: 400;
  /* position: relative;
 */
}

.section6Btn {
  background: #233d4d;
  border-radius: 10px;
  padding: 18px 44px 18px 44px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 177px;
  position: relative;
}
.section6Btntxt {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 4vw;
  font-weight: 600;
  position: relative;
  width: 144px;
}

.know-more-btn {
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(35, 61, 77, 0.47);
  border-width: 1px;
  padding: 18px 44px 18px 44px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 177px;
  position: relative;
  margin-left: 8%;
}
.know-more-txt {
  color: #233d4d;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 1vw;
  font-weight: 600;
  position: relative;
}

.know-more-txt-mobile {
  color: #233d4d;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 1vw;
  font-weight: 600;
  position: relative;
}

.know-more-txt-mobile {
  color: #233d4d;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 4vw;
  font-weight: 600;
  position: relative;
}
.section5BtnDiv {
  display: flex;
}

.section-6-mobile {
  display: none;
}

.section6 {
  display: grid;
  grid-template-columns: 1fr 1fr;

  align-items: center;
  gap: 17%;
}
.section-6-mobile {
  display: none;
}

.frame-36 {
  background: #233d4d;
  border-radius: 10px;
  padding: 18px 44px 18px 44px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  row-gap: 0px;
  align-items: center;
  justify-content: center;
  width: 215px;
  position: relative;
}
.view-in-news {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 1vw;
  font-weight: 600;
  position: relative;
}

.in-the-news {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 1.6vw;
  line-height: 121.33%;
  font-weight: 700;
  position: relative;
}
.section6BtnDiv {
  display: flex;
}

.section-6-desktop {
  padding: 10%;
  margin-top: -25%;
}

.section6Btntxt-mobile {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 4vw;
  font-weight: 600;
  position: relative;
  /* width: 144px; */
}

@media (max-width: 767px) {
  .Sell-With-Us {
    color: #fe7f2d;
    text-align: center;
    font-family: "Inter-Bold", sans-serif;
    position: relative;
    top: -159vw;
  }
  .growth {
    position: relative;
    left: -24rem;
    z-index: -9;
    top: -62rem;
  }

  .frame-36 {
    width: 110px;
  }
  .view-in-news {
    color: #ffffff;
    text-align: center;
    font-family: "Inter-SemiBold", sans-serif;
    font-size: 3vw;
  }
  .section6LiftSide {
    margin-top: 120%;
  }

  .vmbgimg {
    width: 100%;
  }

  .section-6-mobile {
    display: block;
    margin-top: -17rem;
    padding: 5%;
  }
  .section-6-desktop {
    display: none;
  }

  ._190 {
    color: #233d4d;
    text-align: center;
    font-family: "Onest-Bold", sans-serif;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    width: 66px;
    height: 20px;
  }

  .brands-cloud-kitchens {
    color: #233d4d;
    text-align: center;
    font-family: "Onest-Medium", sans-serif;
    font-size: 12px;
    font-weight: 500;
    position: relative;
    width: 83px;
    height: 51px;
    margin-left: -2vw;
  }

  .franchise {
    position: relative;
    top: -28rem;
  }
  .man {
    position: relative;
    left: 0rem;
    top: -27rem;
    width: 49%;
  }
  .data {
    position: relative;
    left: -30rem;
    top: -83rem;
  }

  .coins {
    top: -27rem;

    width: 40%;
  }

  .section6RightSide {
    margin-left: 0;
  }
  .growData {
    display: none;
  }

  .know-more-btn {
    margin-left: 0;
    margin-top: 10%;
  }
  .invest {
    text-align: center;
    font-size: 6vw;
    position: relative;
    top: -20vw;
    line-height: 8vw;
  }
  .Be-your {
    text-align: center;
    font-size: 24px;
  }
  .Be-your-s-6 {
    text-align: center;
    font-size: 24px;
    position: relative;
    top: -181vw;
  }

  .Own-a-low {
    text-align: center;
    font-size: 4vw;
    position: relative;
    top: -31vw;
    line-height: 6vw;
  }
  .section6BtnDiv {
    display: flex;
    justify-content: space-evenly;
    position: relative;
    top: -21vw;
  }
  .sidevm {
    width: 100%;
    top: -33rem;
    left: -1rem;
  }
  .section6 {
    display: block;
  }
}

/*---------------------------------------------------------- SECTION-7-CSS---------------------------------------------------- */

.section-7 {
  margin-top: -9rem;
}

.rectangle-34624216-mobile {
  background: #ffffff;
  border-radius: 7px;
  width: 142.65px;
  height: 97px;
  position: relative;
  box-shadow: 0px 4px 24.8px 0px rgba(0, 0, 0, 0.05);
}
.download-the-daalchini-app-now {
  color: #233d4d;
  text-align: left;
  font-family: "Inter-Bold", sans-serif;
  font-size: 48px;
  line-height: 74px;
  font-weight: 700;
  position: relative;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.enter-pickup-code-at-daalchini-anytime-in-the-next-30-mins-to-get-your-fresh-food {
  color: #233d4d;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 32px;
  line-height: 45px;
  font-weight: 400;
  position: relative;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.what-are-the-benefits-of-a-daalchini-smart-vending-machines {
  color: #233d4d;
  text-align: center;
  font-family: "Inter-Medium", sans-serif;
  font-size: 1vw;
  /* line-height: 135px; */
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 3%;
}
.rectangle-34624220 {
  background: #e7eaed;
  border-radius: 60px;

  position: relative;
}

.rectangle-34624214 {
  background: #ffffff;
  border-radius: 7px;
  width: 242.65px;
  height: 206px;
  position: relative;
  box-shadow: 0px 4px 24.8px 0px rgba(0, 0, 0, 0.05);
}

.what-our {
  background: linear-gradient(
    90.17deg,
    rgba(35, 61, 77, 1) 0%,
    rgba(81, 142, 179, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 2vw;
  line-height: 121.33%;
  font-weight: 700;
  /* position: relative; */
  margin-bottom: 5%;
  margin-top: -5%;

  position: relative;
}

.fa-qs {
  color: #233d4d;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 2vw;
  line-height: 135px;
  font-weight: 700;
  position: relative;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cardDiv {
  /* position: relative;
    top: -54rem;
    padding: 5%; */
}

.review {
  margin: 0px;
}

.profile-img {
  width: 60px;
  height: 60px;
  border-radius: 60px;
  position: relative;
  top: -3rem;
}

.reviewCard {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px 25px 35px 25px;
  display: flex;
  flex-direction: column;
  /* gap: 32px; */
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  position: relative;
  box-shadow: 0px 28.93px 61.56px 0px rgba(21, 21, 21, 0.15);
  width: 14rem;
}

.Ellipse-37 {
  width: 100%;
  position: relative;
  z-index: 10;
 
}
.view-more-btn{
   margin-top: -7vw;

}
.Vector-7 {
  width: 100%;
  margin-top: -15%;
  position: relative;
  z-index: 9;
}
.Vector-10 {
  width: 100%;
  margin-top: -99rem;
  position: relative;
  z-index: 1;
  transform: scale(0.9);
  margin-left: -55px;
  transform: rotateZ(15deg);
  top: -14rem;

  left: -7%;
}

.form-bg{
  top: 4vw;

}
.ques {

  z-index: 99999;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(254, 127, 45, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 250px;
  line-height: 135px;
  font-weight: 700;
  position: relative;
  width: 141px;
  height: 229px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Vector-9 {
  width: 100%;
  position: relative;

  margin-top: -94rem;
  z-index: 8;
}
.Vector-11 {
  width: 100%;
  margin-top: -119%;
}

.Vector-8 {
  width: 100%;
  margin-top: -80%;
  position: relative;
  z-index: 7;
}

.section-7-mobile {
  display: none;
}
.main {
  margin-top: -38vw;
}

.frame-35 {
  background: #233d4d;
  border-radius: 10px;
  padding: 18px 44px 18px 44px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 215px;
  position: relative;
}
.more-fa-qs {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 1vw;
  font-weight: 600;
  position: relative;
}

.section-7-mobile {
  display: none;
}

@media (max-width: 767px) {
  .rectangle-34624216 {
    width: 140.65px;
    height: 80px;
  }

  .form-bg{
    top: 10vw;
  
  }
  .view-more-btn{
    margin-top: 17vw;
  }

  .Ellipse-37 {
    width: 100%;
    position: relative;
    z-index: 10;
    top: -73vw;
  }

  .card-section-7 {
    background: #ffffff;
    border-radius: 7px;
    width: 99.65px;
    height: 94px;
    position: relative;
    box-shadow: 0px 4px 24.8px 0px rgba(0, 0, 0, 0.05);
  }
  .section-7-mobile {
  }

  .review-1 {
    background-color: #ffffff;
  }
  .card-1 {
    margin: 7px !important;
    margin-top: 8% !important;
  }

  .reviewCard-1 {
    width: 240px;
  }

  .in-the-news {
    font-size: 5vw;
    top: -15vw;
  }

  .Vector-7 {
    width: 100%;
    margin-top: 0%;
  }

  .container-1 {
    display: flex;
    overflow: auto;
  }
  .section-7-desktop {
    display: none;
  }
  .section-7 {
    margin-top: 20%;
  }

  .section-7-desktop {
    display: none;
  }

  .main {
    margin-top: -14rem;
  }

  .section-7-mobile {
    display: block;
  }
  .ques {
    font-size: 100px;
  }

  .what-our {
    font-size: 6vw;
  }

  .rectangle-34624220 {
   
  }

  .what-are-the-benefits-of-a-daalchini-smart-vending-machines {
    font-size: 12px;
  }
  .fa-qs {
    position: relative;
    top: -26vw;
    font-size: 20px;
  }

  .rectangle-34624216 {
    background: #ffffff;
    border-radius: 7px;
    width: 210.65px;
    height: 137px;
    position: relative;
    box-shadow: 0px 4px 24.8px 0px rgba(0, 0, 0, 0.05);
  }

  .frame-35 {
    background: #233d4d;
    border-radius: 10px;
    padding: 3%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;

    position: relative;
    width: 30%;
  }
  .more-fa-qs {
    color: #ffffff;
    text-align: center;
    font-family: "Inter-SemiBold", sans-serif;
    font-size: 12px;
    font-weight: 600;
    position: relative;
    width: 144px;
  }
}

/* ---------------------------------------------------------------------CARD.CSS --------------------------------------------*/

.scroll-container-1 {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 50px;
  scrollbar-width: none;
  margin-left: 5%;
  margin-right: 5%;
  position: relative;
  top: 36vw;
  z-index: 99;
}

.arrow-1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: rgb(218, 0, 0);
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 100;
}

.left-arrow {
  left: 10px;
}

.right-arrow {
  right: 10px;
}
.card-1 {
  flex: 0 0 210px;
  margin: 22px;
  margin-top: 8%;
  background: white;
  border-radius: 10px;
  padding: 30px;
  padding-bottom: 40px;
  box-shadow: 0px 28.93px 61.56px 0px #15151526;
  position: relative;
  transition: width 0.3s;
  height: fit-content;
  scroll-snap-align: center;
}

.card-1.active {
  /*     transform: scale(1.2); */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s, box-shadow 0.3s;
}

.reviewCard-1 {
  display: flex;
  flex-direction: column;
}

.profile-img-1 {
  width: 75.75px;
  height: 75.75px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: -38.875px;
  left: 20px;
}

.star-1 {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}

.star-1 img {
  width: 20px;
  height: 20px;
  margin-left: 2px;
}

.review-1 {
  background-color: #ffffff;
  font-size: 0.8vw;
  line-height: 1.4;
  margin-bottom: 15px;
  margin-top: 20px;
}

.auth-1 {
  font-weight: bold;
  color: #2c3e50;
  margin: 0;
  margin-bottom: 5px;
  margin-top: 15px;
}

.role-1 {
  color: #7f8c8d;
  margin: 0;
  font-size: 0.8vw;
}

@media (max-width: 767px) {
  .scroll-container-1 {
    padding: 50px;
    scrollbar-width: none;
    margin-left: 0% !important;
    margin-right: 0% !important;
    top: 66vw;
  }

  .review-desktop {
    display: none;
  }
}

.card-1-desktop {
  margin: 15px;
  margin-top: 8%;
  background: white;
  border-radius: 10px;
  padding: 15px;
  padding-bottom: 40px;
  box-shadow: 0px 28.93px 61.56px 0px #15151526;
  position: relative;
  transition: width 0.3s;
  /*  height: 12vw; */
  width: 35vw;
  scroll-snap-align: center;
}

/* --------------------------------------------SECTION-8-CSS-------------------------------------------- */

.enter-pickup-code-at-daalchini-anytime-in-the-next-30-mins-to-get-your-fresh-food {
  color: #233d4d;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
  position: relative;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
}
.daalchini-brings-desktop {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Medium", sans-serif;
  font-size: 1.2vw;
  line-height: 2vw;
  font-weight: 500;
  margin-top: 2vw;
  position: relative;
  height: 145px;
}
.about-daalchini-desktop {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 2vw;

  line-height: 121.33%;
  font-weight: 700;
  position: relative;
}
.scan-qr-to-download-the-app-desktop {
  color: #233d4d;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 1.2vw;
  line-height: 6vw;
  font-weight: 400;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.download {
  color: #233d4d;
  text-align: left;
  font-family: "Inter-Bold", sans-serif;
  /* font-size: 48px; */
  font-size: 2vw;
  line-height: 3.2vw;
  font-weight: 700;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.do-wnload-it-on-mobile {
  color: #ffffff;
  text-align: left;
  font-family: "Rubik-Regular", sans-serif;
  font-size: 5px;
  font-weight: 400;
  position: relative;
  width: 62.09px;
  height: 8.03px;
}

.google-mobile {
  color: #ffffff;
  text-align: left;
  font-family: "Rubik-Regular", sans-serif;
  font-size: 9px;
  font-weight: 400;
  position: relative;
  width: 62.09px;
  height: 8.03px;
}
.download-box {
  width: 25vw;
  height: 8vw;

  background-color: #000000;
  border-radius: 7px;
}

.about-daalchini {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 16px;
  line-height: 121.33%;
  font-weight: 700;
  position: relative;
}
.daalchini-brings {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Medium", sans-serif;
  font-size: 12px;
  line-height: 19px;
  font-weight: 500;
  position: relative;
  height: 158px;
}
.scan-qr-to-download-the-app {
  color: #233d4d;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 20px;
  line-height: 57px;
  font-weight: 400;
  position: relative;
  width: 308px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.rectangle-34 {
  background: #ffffff;
  border-radius: 2vw;
  width: 10.5vw;
  height: 10.5vw;
  position: relative;
  box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.1);
}

.playstore {
  width: 11vw;
  height: 4vw;
  position: relative;
  overflow: visible;
  background-color: rgb(21 17 17);
  border-radius: 1vw;
}
.enter-pickup {
  color: #233d4d;

  font-family: "Inter-Regular", sans-serif;
  font-size: 1.2vw;
  line-height: 2.4vw;
  font-weight: 400;
  position: relative;
  height: 7vw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.scrollable-container::-webkit-scrollbar {
  display: none; /* WebKit (Chrome, Safari) */
}

.rectangle-34624216 {
  background: #ffffff;
  border-radius: 7px;
  width: 210.65px;
  height: 137px;
  position: relative;
  box-shadow: 0px 4px 24.8px 0px rgba(0, 0, 0, 0.05);
}

.download-the-daalchini-app-now {
  color: #233d4d;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 14px;
  line-height: 74px;
  font-weight: 700;
  position: relative;

  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-7 {
  color: #ffffff;
  text-align: left;
  font-family: "Rubik-Regular", sans-serif;
  font-size: 0.8vw;
  font-weight: 400;
  position: relative;
}

.download-7-company {
  color: #ffffff;
  text-align: left;
  font-family: "Rubik-Regular", sans-serif;
  font-size: 1.5vw;
  font-weight: 400;
  position: relative;
}

.rectangle-34624190 {
  background: #ffffff;
  border-radius: 14px;
  width: 108.08px;
  height: 110px;
  position: relative;
  box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.1);
}

.enter-pickup-code-at-daalchini-anytime-in-the-next-30-mins-to-get-your-fresh-food {
  color: #233d4d;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
  position: relative;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vector-7 {
  width: 114.09px;
  height: 43.58px;
  position: relative;
  overflow: visible;
  background-color: black;
  border-radius: 7px;
}
.download-the-daalchini-app-now {
  color: #233d4d;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 14px;
  line-height: 74px;
  font-weight: 700;
  position: relative;
  width: 306px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-qr-to-download-the-app {
  color: #233d4d;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 12px;
  line-height: 57px;
  font-weight: 400;
  position: relative;
  width: 176px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rectangle-section-8 {
  background: #ffffff;
  border-radius: 14px;
  width: 125.08px;
  height: 126px;
  position: relative;
  box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.1);
}

.do-wnload-it-on {
  color: #ffffff;
  text-align: left;
  font-family: "Rubik-Regular", sans-serif;
  font-size: 5px;
  font-weight: 400;
  position: relative;
  width: 62.09px;
  height: 8.03px;
}

.section-8-desktop {
  margin-top: -9%;
}

.rectangle-1 {
  background: #ffffff;
  border-radius: 7px;
  width: 210.65px;
  height: 137px;
  position: relative;
  box-shadow: 0px 4px 24.8px 0px rgba(0, 0, 0, 0.05);
}

.section-8-mobile {
  display: none;
}

.video-txt-desktop {
  background: linear-gradient(
    90.17deg,
    rgba(35, 61, 77, 1) 0%,
    rgba(81, 142, 179, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-family: "Inter-Bold", sans-serif;
  font-size: 2vw;
  line-height: 121.33%;
  font-weight: 700;
  position: relative;
}

@media (max-width: 767px) {
  .rectangle-34624216 {
    width: 150.65px;
    height: 86px;
  }

  .section-8-desktop {
    display: none;
  }

  .section-8-mobile {
    display: block;
    margin-top: 105%;
  }
}

/* -----------------------------------------MODEL POPUP--------------------------------------------------------------------------- */

.modal-open .modal {
  overflow: hidden auto;
}

.modal {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0px;
  z-index: 99999999999;
}

.modal-dialog {
  height: 100vh;
  display: grid;
  place-items: center;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.modal.show .modal-dialog {
  transform: none;
}

.modal-content {
  border: 0px;
  border-radius: 0.25rem;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 30%;
  pointer-events: auto;
  background-color: rgb(255, 255, 255);
  background-clip: padding-box;
  border: 1px solid rgba(31, 45, 61, 0.2);
  border-radius: 0.25rem;
  box-shadow: rgba(31, 45, 61, 0.5) 0px 0.25rem 0.5rem;
  outline: 0px;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem;
  border-bottom: 1px solid rgb(239, 242, 247);
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 5%;
}

#kl__form-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: block;
  color: #2e384d;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  width: 100%;
  min-height: 500px;
  background-color: #fff;
}

.kl-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 70%;
}

@media (max-width: 767px) {
  .modal-content {
    width: 100%;
  }
}


/*------------------------------ SECTINO-10 CSS------------------------------------------------- */

.iframe-video{
    width: 100%;
    height: 400px;
  }
  .rectangle-34624228 {
      background: #ffffff;
      border-radius: 60px;
      border-style: solid;
      border-color: rgba(59, 59, 59, 0.44);
      border-width: 1.5px;
      height: 770px;
      position: relative;
      box-shadow: 0px -2px 28.6px 0px rgba(0, 0, 0, 0.10);
      }
  
  
  
  .rectangle-34624231 {
      background: rgba(35, 61, 77, 0.34);
      border-radius: 61px;
      width: 100%;
      height: 361px;
      position: relative;
      transform-origin: 0 0;
     /*  transform: rotate(90deg) scale(1, 1); */
      }
  
      .input-container {
          position: relative;
          margin-bottom: 1rem;
          width: 100%;
          display: flex;
          justify-content: center;
        }
      
        .input-container label {
          position: absolute;
          top: 50%;
          left: 10px; /* Adjust as needed */
          transform: translateY(-50%);
          background-color: white;
          padding: 0 5px;
          
          color: #aaa;
          transition: all 0.3s ease-out;
          pointer-events: none; /* Ensures label does not interfere with input */
  
      
              color: #233d4d;
            
              font-size: 12px;
           
              font-weight: 600;
             
              
        }
      
        .input-container input:focus + label,
        .input-container input:not(:placeholder-shown) + label {
          top: 0;
          font-size: 12px;
          color: #333;
          background-color: #fff;
          padding: 0 3px;
        }
      
        .input-container input {
          width: 100%;
          padding: 20px;
          font-size: 16px;
          border: 1px solid #ccc;
          border-radius: 5px;
          transition: border-color 0.3s ease-out;
        }
      
        .input-container input:focus {
          outline: none;
          border-color: #66afe9;
        }
  
  
        .frame-39 {
          background: #233d4d;
          border-radius: 14px;
          padding: 18px 44px 18px 44px;
          display: flex;
          flex-direction: row;
          gap: 10px;
          align-items: center;
          justify-content: center;
        
          height: 28px;
          position: relative;
          }
          .submit {
          color: #ffffff;
          text-align: center;
          font-family: 'Inter-SemiBold', sans-serif;
          font-size: 14px;
          font-weight: 600;
          position: relative;
          width: 144px;
          }
  
  
          .section-10-mobile{
              display: none;
          }
  
          .rectangle-28 {
            width: 90%;
            background: #ffffff;
            border-radius: 56px;
            border-style: solid;
            border-color: rgba(59, 59, 59, 0.44);
            border-width: 1.5px;
            height: 770px;
            position: relative;
            box-shadow: 0px -2px 28.6px 0px rgba(0, 0, 0, 0.10);
            }
            .rectangle-29 {
              background-color: rgba(35, 61, 77, 0.34);
              border-radius: 56px 0px 0px 56px;
              height: 770px;
              position: relative;
              border-radius: 54px;
              width: 100%;
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
              }
  
              .contact-us-1 {
                background: linear-gradient(90.17deg, rgba(35, 61, 77, 1.00) 0%, rgba(81, 142, 179, 1.00) 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                text-align: left;
                font-family: 'Inter-Bold', sans-serif;
                font-size: 32px;
                line-height: 121.33%;
                font-weight: 700;
                position: relative;
               
    top: -4rem;
                }
  
                .grid{
                  display: grid;
                  grid-template-columns: 1fr 1fr;
              
                }
  
  .form-img{
    display: grid; grid-template-columns: 1fr 1fr;     align-items: center;
  }
  .section-10-section
    { margin-top: -56vw;
      margin-bottom: -3vw;
      position: relative;
      z-index: 99;}
  

      .mobile-menu-contact{
        display: none;

      }
  .tahzeeb-mobile{
display: none;
  }
          @media (max-width: 767px) {

            .mobile-menu-contact{
              display: block;
      
            }
  
            .form-img{
              display: block;
            }
  
            .tahzeeb-desktop{
              display: none;}
          
            

             .rectangle-34624228{
              height: auto;
              border-radius: 22px;
             }

             .tahzeeb-mobile{

              display: block;
             }

             .section-10-section{ 
              padding: 5%;
              margin-top: 170%;

            }

            .contact-us-1{
              top: -100vw;
              font-size: 18px;
              text-align: center;
            }
          }

/*-------------------------- WHATSAPP -------CSS -------------------------------- */

/* General Widget Styles */
#whatsapp-widget {
    position: fixed;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 99999999;
    transition: all 2s ease 0s;
    height: max-content;
  }
  
  /* Widget Position Adjustments for Mobile */
  @media (max-width: 768px) {
    #whatsapp-widget {
      bottom: 5px;
    }
    #whatsapp-widget.ww-left {
      left: 5px;
      right: unset;
    }
  }
  
  /* Left Alignment for Desktop */
  #whatsapp-widget.ww-left {
    left: 20px;
    right: 2vw;
    bottom: 2vw;
    flex-direction: row-reverse;
  }
  
  /* Widget Icon Styles */
  #whatsapp-widget .ww-icon-link {
    padding: 5px;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    transition: all 0.5s ease 0s;
    position: absolute;
    right: 0;
    bottom: 0;
    background: #4dc247 !important;
    display: block;
  }
  
  /* Icon Link Size Adjustment */
  #whatsapp-widget.ww-medium .ww-icon-link {
    height: 65px;
    width: 65px;
  }
  
  /* SVG Styles */
  #whatsapp-widget svg {
    fill: #fff;
    border-radius: 50px;
    cursor: pointer;
    transition: transform 0.7s ease-in-out;
    width: 100%;
    height: 100%;
  }
  
  /* Root Variable Adjustments */
  :root {
    --df-messenger-chat-window-width: 300px;
  }
  
  @media (min-width: 768px) {
    :root {
      --df-messenger-chat-window-width: 500px;
    }
  }