@import url("https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
body {
  overflow-y: hidden;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.what-yoda,
.info-origin {
  text-transform: capitalize;
  font-size: 10px;
  margin-top: 0px;
  background: #2e84b8;
  font-family: "Poppins", sans-serif;
  color: white;
  padding: 4px;
  position: relative;
  line-height: 17px;
  margin-bottom: 0px;
}

.info-origin-div {
    border: 1px solid;
    width: 3%;
    padding: 6px;
    border-radius: 3px;
    position: relative;
    top: 21vh;
    right: 42vh;
}

.what-yoda-heading {
  font-size: 13px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;

}
img.thirdslide-hover-card {
  height: 100% !important;
  width: 100% !important;
  margin-top: 21px;
}


#go-to-second-slide {
  cursor: pointer;
  background: #007bff;
  color: white;
  padding: 10px 20px;
  width: fit-content;
  border-radius: 4px;
}
ul {
  margin-left: -17px;
}
.circle.fifth-number {
  position: relative;
  margin-left: auto;
  top: -16.5vh;
  right: -17vw;
  width: 40px;
  height: 140px;
  border-radius: 50%;
}

.circle.fourth-number {
  position: relative;
  right: -13vh;
  top: 3.5vh;

  height: 140px;
}
.circle.third-number {
  position: relative;

  top: 22.5vh;
  height: 140px;
  right: 176%;
}
.circle.two-number {
  right: 33vh;
  position: relative;

  top: 41vh;
  height: 140px;
}

img.yodh-plus {
  position: absolute;
  z-index: 999;
  width: 16% !important;
  top: 56%;
  right: 1%;
}
img.second-hover-card {
  width: 90% !important;
  height: 100%;
}
img.third-hover-card {
  height: 100%;
  width: 99% !important;
  margin-top: 24px;
}
img.fifth-hover-card {
  width: 84% !important;

  margin-top: 4px;
}
img.s-to-c {
  position: absolute;
  top: 94%;
  width: 14% !important;
  right: 4%;
}
img.fourth-hover-card {
  width: 89% !important;
  height: 98%;
  margin-top: 6px;
}
h1.text-uppercase.Evolution-text {
  font-weight: 500;
  margin-top: 3px;
  margin-bottom: 3px;
}

img.yodh-slider-radio {
  position: absolute;
  width: 8% !important;
  top: 27.5%;
  left: 13%;
  width: -1% !important;
}

img.yodh-slider {
  display: block;
  top: 50%;
  left: 5%;
  position: absolute;
  z-index: 999;
  width: 15% !important;
}

.slide-item.slide-first {
  background-image: url("https://yodh.info/public/journey/yodh-new-slide-1.png");
  background-size: 100% 100%;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
  /* increased height for visibility */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-content.active {
  position: relative;
  top: -118px;
}

img.chemist-gif {
  width: 39% !important;
  position: relative;
  top: 267px;
}

img.jar-gif {
  position: relative;
  right: 42%;
  width: 41% !important;
  bottom: 27px;
}

.hover-card2,
.hover-card3,
.hover-card4,
.hover-card5,
.hover-card6 {
  display: none;
  background: #e2e2ff;
  /* padding: 8px; */
  margin-top: 5px;
  border-left: 4px solid #4a4aff;
}

.hover-card1.active,
.hover-card2.active,
.hover-card3.active,
.hover-card4.active,
.hover-card5.active,
.hover-card6.active {
  display: block;
}
.step-circle-div-second {
  background-image: url("assets/imgs/windows-slide-2.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  background-position: center;
  height: 600px;
  /* increased height for visibility */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1.fs-1.text-uppercase.Evolution-text {
  margin-top: 12px;
  margin-bottom: 12px;
}

/* .yodh-hop {
    position: absolute;
  background-color: #DD920D;
    padding: 4px;
    border: 1px solid;
    top: 0%;
    right: 83%;
} */

.timeline-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.content p {
  text-align: center;
  margin-top: 12px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  font-size: 10px;
}

.circle {
  width: 40px;
  height: 40px;
  line-height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  font-family: "Poppins", sans-serif;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.one-number,
.one-number-4,
.one-number-5 {
  cursor: pointer;
}

.bottom-line {
  border-right: 4px dashed #125c88;
  height: 27px;
  position: absolute;
  top: 89%;
}

.image-circle img {
  width: 30px;
  height: 30px;
}

/* Connector lines */
.connector-line {
  position: absolute;
  top: 45px;
  height: 5px;
  background-color: #be2e30;
  z-index: 0;
}

.connector-line-1,
.connector-line-2,
.connector-line-3,
.connector-line-4 {
  position: absolute;
  height: 5px;
  top: 45px;
}

.connector-line-1 {
  left: 26%;
  width: 27%;
  top: 71%;
}

.horizontal-line {
  width: 56%;
  border-top: 5px dashed #125c88;
  height: 5px;
  /* background: red; */
  position: absolute;
  top: -24%;
  right: -4%;
}
img.slider-yoda-garage-door-img {
  position: absolute;
  width: 18% !important;
  cursor: pointer;
  left: 4.5%;
  top: 55.2%;
}
img.slider-yoda-with-phone {
  position: absolute;
  width: 13% !important;
  left: 17%;
  top: 51%;
  z-index: 99;
}
.bottom-horizontal-line {
  width: 56%;
  border-top: 5px dashed #125c88;
  height: 5px;
  /* background: red; */
  position: absolute;
  top: 114%;
  right: 48%;
}

.image-circle {
  border: 4px dashed red;
  border-radius: 50%;
  padding: 16px;
  background-image: linear-gradient(to left, #cce1df 10%, #f6f0e9 90%);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -9px;
}

/* Hover Card */

/* Hover Card */

/* Hover Card */

/* Hover Card */

/* Hover Card */

/* timeline  */

.connector-line-4 {
  left: 55%;
  top: 71%;
  width: 20%;
  border-top: 5px dashed #be2e30;
  background: none;
}

.connector-line-3 {
  left: 43%;
  top: 71%;
  width: 14%;
  border-top: 5px solid #be2e30;
  background: none;
}

.connector-line-2 {
  left: 35%;
  width: 10%;
  top: 71%;
}

img.yodh-slider-digital-health {
  position: absolute;
  z-index: 999;
  width: 10% !important;
  top: 34%;
  left: 36%;
}
.vl {
  border-right: 4px dashed #125c88;
  height: 27px;
  position: absolute;
  top: -23%;
}
/* new styling starts here */
img.yodh-slider-digital-health {
  position: absolute;
  z-index: 999;
  width: 11% !important;
  top: 34%;
  left: 36%;
}
img.yodh-slider-fetus {
  position: absolute;
  z-index: 999;
  width: 12% !important;
  left: 22%;
  top: 2%;
}
img.yodh-slider-radio {
  position: absolute;
  width: 8% !important;
  top: 27.5%;
  left: 13%;
  width: -1% !important;
}
img.yodh-slider {
  display: block;
  top: 47%;
  left: 4%;
  position: absolute;
  z-index: 999;
  width: 16% !important;
}
img.yodh-slider-yodh-journey {
  position: absolute;
  width: 19% !important;
  top: 1%;
  left: 1%;
}
img.yodh-slider1 {
  position: absolute;
  width: 19% !important;
  top: -1%;
  right: 29%;
}
.hover-card2 {
    display: none;
    font-family: "Poppins", sans-serif;
    position: absolute;
    top: 4vh;
    width: 36vh;
    padding: 6px 0px 0px;
    background: #f5eee8;
    border: 1px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgb(0 0 0);
    z-index: 99999;
    text-align: start;
    font-size: 10px;
    right: 36vh;
    line-height: 17px;
    word-spacing: 2px;
    font-weight: 500;
}
.hover-card1 {
    display: none;
    position: absolute;
    width: 13vw;
    padding: 6px;
    background: #f5eee8;
    border: 1px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgb(0 0 0);
    z-index: 99999;
    text-align: start;
    font-size: 10px !important;
    line-height: 17px !important;
    word-spacing: 2px !important;
    font-family: "Poppins", sans-serif;
    top: 4vh;
    right: 65vh;
    font-weight: 500 !important;
}
img.Virus-tv-slide1 {
  width: 5% !important;
  position: absolute;
  top: 12%;
  right: 27%;
}

img.yodh-news-screen {
  position: absolute;
  z-index: 10;
  height: 43%;
  width: 9% !important;
  top: -1%;
  right: 3%;
}

.content-journey {
  border: 2px solid #a6a6a8;
  position: absolute;
  top: 0%;
  background-color: white;
  right: 80%;
  border-radius: 3px;
}
p.para-journye {
  background-color: #faa71a;
  padding: 14px;
  margin: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  border-radius: 3px;
}
.content-journey-FOURTH {
  border: 2px solid #a6a6a8;
  position: absolute;
  top: 2%;
  height: 23.5%;
  right: 70%;
  width: 19%;
  border-radius: 3px;
  background: white;
}

p.para-journye-FOURTH {
  background-color: #faa71a;
  padding: 13px;
  margin: 8px;
  color: rgb(48, 48, 48);
  font-size: 13px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  border-radius: 3px;
}
.hover-card4 {
    display: none;
    position: absolute;
    top: -30vh;
    width: 40vh;
    /* padding: 0px 4px 4px; */
    background: #f5eee8;
    border: 1px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgb(0 0 0);
    z-index: 99999;
    text-align: start;
    right: -36vh;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 18px;
    word-spacing: 2px;
}


.custom-nav button {
  padding: 10px 20px;

  cursor: pointer;

  border: 1px solid #9cd0b1;
  border-radius: 23px;
  background-image: linear-gradient(129deg, #71b28b, transparent);
}
.custom-nav {
  text-align: center;
  margin-bottom: 15px;
  position: relative;
  z-index: 999999;
  display: flex;
  justify-content: space-between;
  top: -6vh;
  align-items: center;
}

#customPrevBtn {
  display: none; /* Initially hidden */
}


.hover-card3 {
    display: none;
    position: absolute;
    top: -29vh;
    width: 25vh;
    padding: 0px 5px 0px 0px;
    background: #f5eee8;
    border: 1px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgb(0 0 0);
    z-index: 9999;
    text-align: start;
    font-size: 10px;
    right: 131%;
    line-height: 17px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
}
.circle.one-number {
  position: relative;
  right: 55vh;
  height: 140px;
  top: 60vh;
}
.hover-card5 {
    display: none;
    position: absolute;
    top: -71vh;
    width: 30vh;
    padding: 0px 4px 4px;
    line-height: 17px;
    word-spacing: 2px;
    font-family: "Poppins", sans-serif;
    background: #f5eee8;
    border: 1px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgb(0 0 0);
    z-index: 99999;
    text-align: start;
    font-size: 10px;
    font-weight: 500;
    left: 48vh;
}
/* Container for scrollable content */
/* .content-card {
    height: 100%;
    overflow: hidden; /* Hide overflow */
/* position: relative; */
/* animation: cardReveal 1s cubic-bezier(2, 2, 2, 1) both; */
/* } */

/* .content-card ul {
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: disc;
    animation: autoScroll 8s linear infinite;
 
    transform: translateY(100%);
} */

/* Animation to scroll content */
/* @keyframes autoScroll {
    0% {
        transform: translateY(100%); 
    }
    100% {
        transform: translateY(-100%); 
    }

} */

/* Pause animation on hover */
.content-card:hover ul {
  animation-play-state: paused;
}

/* Your existing reveal animation */

/* new styling starts here */
@media screen and (max-width:800px){
  section#desktop-div {
    display: none;
}
#mobile-screen{
  display: block;

}
}
@media screen and (min-width:800px){
  section#desktop-div {
    display: block;
}
#mobile-screen{
  display: none;

}
}
@media screen and (min-width: 1260px) and (max-width: 1280px) {
  img.yodh-slider1 {
    width: 19% !important;
    top: 6.5%;
    right: 29%;
  }
  img.yodh-plus {
    position: absolute;
    z-index: 999;
    width: 16% !important;
    top: 63%;
    right: 1%;
  }
  img.yodh-slider {
    display: block;
    top: 58%;
  }
  .circle.one-number {
    top: 4vh;

    right: 222%;
    height: 52px;
  }
  .circle.fifth-number {
    right: -117%;
    top: 4.5vh;
  }
  .circle.fourth-number {
    right: -34%;
    top: 4.5vh;
  }
  .circle.third-number {
    top: 4.5vh;

    right: 57%;
  }

  .hover-card5 {
    top: -990%;
    height: 423%;
    width: 388%;

    right: -625%;
  }
  .hover-card3 {
    top: -1111%;
    height: 351%;
    width: 325%;

    right: 34%;
  }
  .hover-card2 {
    top: -1076%;
    height: 709%;
    width: 294%;

    font-size: 0.79rem;
    right: 197%;
  }
  .hover-card1 {
    top: -855%;
    height: 182%;
    width: 473%;

    right: 403%;
    line-height: 15px;
  }
  img.yodh-slider-radio {
    position: absolute;
    width: 8% !important;
    top: 32%;
    left: 13%;
    width: -1% !important;
  }
  .circle.two-number {
    right: 137%;

    position: relative;
    top: 4.5vh;
  }
}

@media screen and (min-width: 1260px) and (min-height: 700px) and (max-width: 1280px) and (max-height: 720px) {
  .digital-health {
    width: 123.6%;

    top: 123px;

    right: 64px;
  }
  .timeline-container {
    top: 166px;
    width: 115%;
    right: 5%;
    padding-top: 4px;
    gap: 43px;
  }
  img.yodh-slider {
    display: block;
    top: 50%;
    left: 4%;
    position: absolute;
    z-index: 999;
    width: 16% !important;
  }
  img.yodh-plus {
    position: absolute;
    z-index: 999;
    width: 16% !important;
    top: 59.5%;
    right: 1%;
  }
  .hover-card5 {
    display: none;
    position: absolute;
    top: -243%;
    height: 97%;
    width: 239%;

    right: -233%;
  }
  .hover-card3 {
    top: -371%;
    height: 126%;
    width: 176%;

    right: 24%;
  }
  img.yodh-slider-radio {
    position: absolute;
    width: 8% !important;
    top: 29.5%;
    left: 13%;
    width: -1% !important;
  }
  .hover-card2 {
    top: -340%;
    height: 218%;
    width: 190%;

    right: 76%;
  }
  ul {
    margin-left: -20px;
  }
  .hover-card1 {
    top: -388%;
    height: 89%;
    width: 219%;

    right: 169%;
  }
  img.yodh-slider1 {
    position: absolute;
    width: 19% !important;
    top: 3%;
    right: 29%;
  }
  .digital-health {
    width: 123.6%;

    top: 123px;

    right: 64px;
  }
  .timeline-container {
    top: 166px;
    width: 115%;
    right: 5%;
  }
}
@media screen and (min-width: 1260px) and (min-height: 780px) and (max-width: 1280px) and (max-height: 800px) {
  .digital-health {
    width: 135%;
    top: 127px;
    right: 90px;
  }
  .timeline-container {
    top: 187px;
    width: 115%;
    right: 5%;
    gap: 31px;
  }
  img.yodh-slider-radio {
    width: 8% !important;
    top: 30.7%;
    left: 13%;
    width: -1% !important;
  }
  img.yodh-slider-digital-health {
    top: 36%;
  }
  img.yodh-slider-fetus {
    top: 4%;
  }

  .hover-card5 {
    top: -1039%;
    height: 277%;
    width: 607%;
    right: -784%;
  }
  .hover-card4 {
    top: -735%;
    height: 315%;
    width: 617%;
    right: -450%;
  }
  .hover-card2 {
    top: -992%;
    height: 595%;
    width: 375%;
    right: 234%;
  }
  .hover-card3 {
    top: -1386%;
    height: 393%;
    width: 334%;
    right: 64%;
  }
  ul {
    margin-left: -18px;
  }
  .content-journey {
    top: 2%;
    right: 80%;
  }
  p.para-journye {
    font-size: 12px;
  }
  .speech-bubble-click {
    top: 61%;
    right: 72%;
    z-index: 9999;
  }
  img.yodh-slider1 {
    width: 19% !important;
    top: 4.8%;
    right: 29%;
  }
  img.yodh-plus {
    width: 18% !important;
    top: 59.2%;
    right: 1%;
  }
  img.yodh-slider-yodh-journey {
    width: 19% !important;
    top: 3%;
    left: 1%;
  }
  img.yodh-slider {
    top: 59%;
    left: 4%;

    width: 16% !important;
  }
  .hover-card1 {
    display: none;
    position: absolute;
    top: -847%;
  }
}

@media screen and (min-width: 1346px) and (min-height: 555px) and (max-width: 1366px) and (max-height: 768px) {
  .hover-card4 {
    top: -31vh;
    font-size: 10px;
    line-height: 15px;
    right: -44vh;
}
  img.slider-yoda-garage-door-img {
    position: absolute;
    width: 18% !important;
    left: 4.5%;
    top: 58.2%;
  }
  img.slider-yoda-second-chemist {
    position: absolute;
    width: 16% !important;
    top: 65%;
    right: 40%;
  }
  .hover-card5 {
    top: -78vh;
    padding: 0px;
    font-size: 10px;
  }

  .hover-card3 {
    top: -39vh;
    font-size: 10px;
    right: 9vh;
    line-height: 13px;
}
.hover-card1 {
  top: 14vh;
  font-size: 10px;
  right: 67vh;
  line-height: 15px;
}
.hover-card2 {
  top: 10vh;
  z-index: 9999;
  font-size: 10px;
  right: 37vh;
}
  .circle.fourth-number {
    position: relative;
    right: -195%;
    /* background: red; */
    top: 2vh;
  }
  .circle.one-number {
    position: relative;
    top: 68vh;
    /* background: red; */
    right: 57vh;
    height: 143px;
  }
  img.yodh-slider {
    display: block;
    top: 51%;
    left: 5%;
    position: absolute;
    z-index: 999;
    width: 15% !important;
  }
  .circle.two-number {
    position: relative;
    /* background: red; */
    top: 44vh;
  }

  img.yodh-slider-yodh-journey {
    position: absolute;
    width: 19% !important;
    top: 3%;
  }
  img.yodh-plus {
    position: absolute;
    z-index: 999;
    width: 17% !important;
    top: 54%;
    right: 1%;
  }
  .circle.third-number {
    position: relative;
    top: 23vh;
    /* background: red; */
    right: 10vh;
  }

  img.yodh-slider-digital-health {
    position: absolute;
    z-index: 999;
    width: 10% !important;
    top: 35%;
    left: 36.5%;
  }

  img.yodh-slider-radio {
    position: absolute;
    width: 8% !important;
    top: 27.2%;
    left: 13%;
    width: -1% !important;
  }

  .circle.fifth-number {
    position: relative;
    /* background: red; */
    top: -21vh;
  }
  img.yodh-slider1 {
    position: absolute;
    width: 19% !important;
    top: -0.9%;
    right: 29%;
  }
  .circle.third-number {
    position: relative;
    top: 23vh;
    /* background: red; */
    right: 10vh;
  }

  ul {
    margin-left: -20px;
  }
}



/* @media screen and (min-width: 1522px) and (min-height: 710px) and (max-width: 1532px) and (max-height: 730px) {
  .digital-health {
    width: 134%;
    top: 120px;
    right: 106px;
  }
  img.yodh-plus {
    position: absolute;
    z-index: 999;
    width: 16% !important;
    top: 56%;
    right: 1%;
  }

  .timeline-container {
    top: 157px;
    width: 115%;
    right: 5%;
    padding-top: 4px;
    gap: 51px;
  }
  .content-journey {
    top: 1%;
  }

  img.yodh-slider-radio {
    position: absolute;
    width: 8% !important;
    top: 27.5%;
    left: 13%;
    width: -1% !important;
  }
  .hover-card5 {
    display: none;
    position: absolute;
    top: -296%;
  }
  .hover-card1 {
    top: -407%;
    height: 93%;
    width: 206%;
  }
  .hover-card4 {
    display: none;
    position: absolute;
    top: -243%;
  }
  .hover-card3 {
    display: none;
    position: absolute;
    top: -397%;
  }
  .hover-card2 {
    top: -348%;
    height: 202%;
    width: 211%;

    font-size: 12px;
    right: 76%;
  }
  .hover-card1 {
    top: -412%;

    right: 175%;
    line-height: 15px;
  }
  img.yodh-slider {
    display: block;
    top: 49%;
    left: 4%;
    position: absolute;
    z-index: 999;
  }
  img.yodh-slider-radio {
    position: absolute;
    width: 8% !important;
    top: 27.5%;
    left: 13%;
    width: -1% !important;
  }

  img.yodh-slider-yodh-journey {
    width: 19% !important;
    top: 2%;
    left: 1%;
  }

  img.yodh-slider1 {
    position: absolute;
    width: 19% !important;
    top: -1%;
    right: 29%;
  }
} */
@media screen and (min-width: 1420px) and (min-height: 866px) and (max-width: 1440px) and (max-height: 876px) {
  img.yodh-slider1 {
    top: 4.1%;
    right: 29%;
  }
  .hover-card2 {
    width: 25vw;
    top: 6vh;
    line-height: 20px;
    right: 28vh;
    font-size: 12px;
}

  .hover-card3 {
    top: -28vh;
    width: 20vh;
    right: 114%;
  }
  .hover-card5 {
    top: -71vh;
    width: 28vh;
}
  .hover-card4 {
    top: -32vh;
    right: -27vh;
    width: 19vw;
}
 
  .hover-card1 {
    top: 10vh;
    width:17vw;
    font-size: 11px;;
    line-height: 17px;
    right: 51vh;
  }
  img.yodh-plus {
    position: absolute;
    z-index: 999;
    width: 16% !important;
    top: 61%;
  }
  img.yodh-slider-radio {
    position: absolute;
    width: 8% !important;
    top: 30.5%;
    left: 13%;
    width: -1% !important;
  }
  img.yodh-slider {
    display: block;
    top: 53%;
  }

  .circle.fifth-number {
    position: relative;
    top: -14.5vh;
    height: 140px;
  }
  .circle.fourth-number {
    position: relative;
    right: -10vh;
    top: 1.5vh;
  }

  .circle.third-number {
    position: relative;
    top: 18.5vh;
    height: 156px;
  }
  .circle.two-number {
    right: 25vh;
    position: relative;
    top: 37.5vh;
    height: 175px;
  }
  .circle.one-number {
    position: relative;
    top: 57vh;
   
    height: 174px;
    right: 43vh;
  }
}

@media screen and (min-width: 1420px) and (min-height: 810px) and (max-width: 1440px) and (max-height: 812px) {
  img.yodh-plus {
    position: absolute;
    z-index: 999;
    width: 16% !important;
    top: 59.2%;
  }
  .circle.fifth-number {
    position: relative;
    right: -29vh;
    top: -12.5vh;
   
  }

  .circle.fourth-number {
    position: relative;
    right: -167%;
    top: 4.5vh;
   
  }

  .circle.one-number {
    position: relative;
    top: 57vh;
    right: 47vh;
   
    height: 156px;
  }
  .circle.two-number {
    right: 28vh;
    position: relative;
    top: 38.5vh;
 
  }
  .hover-card4 {
  }
  img.yodh-slider-radio {
    position: absolute;
    width: 8% !important;
    top: 29.7%;
    left: 13%;
    width: -1% !important;
  }

  img.yodh-slider1 {
    position: absolute;
    width: 19% !important;
    top: 3%;
    right: 29%;
  }
  p.para-journye {
    background-color: #faa71a;
    padding: 20px;
    margin: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    border-radius: 3px;
  }

  img.yodh-slider-yodh-journey {
    position: absolute;
    width: 21% !important;
    top: 2%;
    left: -1%;
  }
  .speech-bubble-click {
    top: 63%;
    right: 72%;
  }

  img.yodh-slider {
    display: block;
    top: 54%;
    left: 4%;
    position: absolute;
    z-index: 999;
    width: 16% !important;
  }

  .timeline-container {
    top: 201px;
    width: 115%;
    right: 5%;
    gap: 45px;
  }

  img.yodh-slider-digital-health {
    position: absolute;
    z-index: 999;
    width: 11% !important;
    top: 36%;
    left: 36%;
  }
  img.yodh-slider-fetus {
    position: absolute;
    z-index: 999;
    width: 12% !important;
    left: 22%;
    top: 5%;
  }

  .hover-card5 {
    top: -342%;
    height: 163%;
    width: 214%;
    right: -276%;
  }

  .hover-card3 {
    top: -26vh;
    font-size: 12px;
    width: 21vh;
    right: 118%;
  }
  .circle.third-number {
   
    
    position: relative;
    top: 22vh;
    
    right: 9vh;
  }
  .hover-card1 {
    top: 9vh;
    font-size: 12px;
    right: 56vh
;
}
  ul {
    margin-left: -16px;
  }

  .hover-card2 {
    top: 5vh;
    font-size: 11px;
    right: 29vh;
  }

  .hover-card4 {
    top: -26vh;
    font-size: 13px;
    right: -34vh;
  }
  .hover-card5 {
    top: -56vh;
    height: 22vh;
    width: 23vh;
    font-size: 12px;
    right: -61vh;
  }
}

@media screen and (min-width: 1502px) and (min-height: 813px) and (max-width: 1512px) and (max-height: 823px) {
  .digital-health {
    width: 135%;
    top: 127px;
    right: 107px;
  }
  .circle.one-number {
    position: relative;

   
    height: 140px;
  
}
  .timeline-container {
    top: 22vh;
  }
  img.yodh-slider-radio {
    width: 8% !important;
    top: 31.5%;

    left: 13%;
    width: -1% !important;
  }
  img.yodh-slider-fetus {
    top: 5%;
  }
  img.yodh-slider-digital-health {
    top: 37%;
    left: 36%;
  }
  .content-journey {
    border: 2px solid #a6a6a8;
    position: absolute;
    top: 3%;
    background-color: white;
    right: 81%;
  }
  img.slider-yoda-with-phone {
    position: absolute;
    width: 13% !important;
    left: 17%;
    top: 63%;
    z-index: 99;
  }
  img.slider-yoda-garage-door {
    position: absolute;
    width: 18% !important;
    right: 78%;
    top: 64.3%;
  }
  img.slider-yoda-garage-door-img {
    position: absolute;
    width: 18% !important;
    left: 4.5%;
    top: 67.2%;
  }
  img.slider-yoda-plus-brandaid {
    width: 62% !important;
    position: absolute;
    top: 10%;
  }
  img.yodh-news-screen {
    position: absolute;
    z-index: 9999;
    height: 43%;
    width: 8% !important;
    top: -1%;

    right: 3%;
  }
  img.Virus-tv-slide1 {
    width: 5% !important;
    position: absolute;
    top: 13%;
    right: 27%;
  }
  img.yodh-slider1 {
    width: 19% !important;
    top: 5.1%;
    right: 29%;
  }
  img.yodh-slider {
    top: 60%;
    left: 3%;

    width: 17% !important;
  }
  img.yodh-plus {
    position: absolute;
    z-index: 999;
    width: 17% !important;
    top: 61%;
    right: 1%;
  }
  img.slider-yoda-jar {
    position: absolute;
    width: 17% !important;
    left: 29%;

    top: 40%;
    height: 53%;
  }
  img.slider-yoda-second-chemist {
    position: absolute;
    width: 16% !important;
    top: 69%;
    right: 40%;
  }
  img.slider-yoda-pills-watch {
    width: 27% !important;
    right: 4%;
    top: 69%;
    position: absolute;
  }
  .hover-card5 {
    display: none;
    position: absolute;
    top: -358%;
    right: -295%;
    font-size: 13px;
    height: 146%;
  }
  .hover-card4 {
    top: -273%;
    height: 116%;
    right: -155%;
  }
  .hover-card3 {
    display: none;
    position: absolute;
    top: -458%;
    right: 4%;
  }
  .hover-card2 {
    display: none;
    position: absolute;
    top: -373%;
    height: 200%;
    font-size: 13px;
  }
  ul {
    margin-left: -19px;
  }
  .hover-card1 {
    top: -920%;
    right: 528%;
  }
  .circle.fifth-number {
    position: relative;
    margin-left: auto;
    top: -11.5vh;
    right: -17vw;
    width: 40px;
    height: 140px;
    border-radius: 50%;
}
.circle.fourth-number {
  position: relative;
  right: -11vh

;
  top: 5.5vh;
  height: 140px;
}
.circle.third-number {
  position: relative;
  top: 24.5vh

;
  height: 140px;
  right: 176%;
}
.circle.two-number {
  right: 29vh;
  position: relative;
  top: 39vh;
  height: 140px;
}
}
/* @media screen and (min-width: 1580px) and (min-height: 680px) and (max-width: 1601px) and (max-height: 900px) {
  .circle.fifth-number {
    position: relative;
    right: -235%;
    top: 3.5vh;
  }
  .circle.fourth-number {
    position: relative;
    right: -74%;
    top: 4.5vh;
  }
  .hover-card4 {
    top: -26.5vh;
    width: 613%;
    right: -410%;
  }
  img.yodh-slider {
    top: 49%;
    left: 4%;
  }
  img.yodh-slider-radio {
    width: 8% !important;
    top: 29.5%;
    left: 13%;
    width: -1% !important;
  }

  p.para-journye {
    background-color: #faa71a;
    padding: 15px;
    margin: 10px;
    font-size: 14px;
  }
  img.yodh-slider-fetus {
    position: absolute;
    z-index: 999;
    width: 10% !important;
    left: 23% !important;
    top: 2% !important;
  }
  .content-journey {
    border: 2px solid rgb(116, 116, 116);
    position: absolute;
    top: 2%;
    right: 80%;
  }
  .digital-health {
    width: 142%;
    top: 125px;
    right: 133px;
  }
  img.yodh-slider-yodh-journey {
    width: 19% !important;
    top: 3%;
    left: 1%;
  }

  ul {
    margin-left: -18px;
  }

  .hover-card5 {
    top: -44vh;
    width: 429%;
    right: -44vh;
  }

  img.yodh-plus {
    width: 17% !important;
    top: 58.4%;
    right: 1%;
  }
  img.yodh-slider1 {
    position: absolute;
    width: 19% !important;
    top: 3.2%;
    right: 29%;
  }
  .hover-card1 {
    display: none;
    position: absolute;
    top: -45vh;
    right: 591%;
  }
  .circle.third-number {
    position: relative;
    top: 3.5vh;
    right: 82%;
  }
  .hover-card3 {
    top: -43vh;
    width: 393%;
    right: 63%;
  }
  .hover-card2 {
    display: none;
    position: absolute;
    top: -39vh;
    width: 382%;
    right: 305%;
  }
  .circle.two-number {
    right: 262%;
    position: relative;
    top: 4.5vh;
  }
  .circle.one-number {
    position: relative;
    top: 3vh;
    right: 407%;
    height: 140px;
  }

  .connector-line-1 {
    left: 27%;
    width: 9%;
    top: 71%;
  }
} */

@media screen and (min-width: 1718px) and (max-width: 1728px) {
  .digital-health {
    width: 139.6%;
    top: 130px;
    right: 139px;
  }
  .timeline-container {
    top: 251px;
    width: 115%;
    right: 6%;
    gap: 69px;
  }
  img.slider-yoda-garage-door {
    position: absolute;
    width: 18% !important;
    right: 78%;
    top: 63.3%;
  }
  .speech-bubble-click {
    top: 64%;
    right: 73%;
    z-index: 9999;
  }
  .hover-card2 {
    top: -400%;
    right: 89%;
    font-size: 13px;
  }
  ul {
    margin-left: -15px;
  }
  .hover-card1 {
    top: -604%;
    height: 95%;
  }
  .hover-card4 {
    top: -319%;
    height: 116%;
    width: 283%;
    right: -161%;
  }
  .hover-card3 {
    top: -531%;
    height: 123%;
    width: 218%;
    right: 19%;
  }
  .hover-card5 {
    top: -442%;
    height: 123%;
    right: -351%;
  }

  img.slider-yoda-with-phone {
    position: absolute;
    width: 13% !important;
    left: 17%;
    top: 63%;
    z-index: 99;
  }
  img.yodh-slider-radio {
    position: absolute;
    width: 10% !important;
    top: 28.4%;
    left: 12%;

    width: -1% !important;
  }
  img.yodh-slider {
    display: block;
    top: 55%;
    left: 4%;
  }

  img.yodh-slider-fetus {
    position: absolute;
    z-index: 999;
    width: 12% !important;
    left: 22%;
    top: 5%;
  }
  img.yodh-plus {
    position: absolute;
    z-index: 999;
    width: 16% !important;
    top: 62%;
    right: 1%;
  }
  img.yodh-slider1 {
    position: absolute;
    width: 19% !important;
    top: 5%;
    right: 29%;
  }
  img.yodh-slider-digital-health {
    position: absolute;
    z-index: 999;
    width: 11% !important;
    top: 36%;
  }
}
@media screen and (min-width: 1900px) and (min-height: 1060px) and (max-width: 1920px) and (max-height: 1080px) {
  .digital-health {
    width: 147%;
    top: 129px;
    right: 175px;
  }
  p.para-journye {
    background-color: #faa71a;
    padding: 24px;
    margin: 16px;
    font-size: 16px;
  }

  .timeline-container {
    top: 241px;
    width: 116%;
    right: 5%;
    gap: 77px;
  }
  .speech-bubble-click {
    top: 64%;
    right: 71%;
    z-index: 9999;
  }
  img.yodh-slider-digital-health {
    width: 11% !important;
    top: 35%;
    left: 36%;
  }
  img.yodh-slider1 {
    width: 24% !important;
    top: -2%;
    right: 26%;
  }
  img.yodh-slider-yodh-journey {
    width: 20% !important;
    top: 2%;
    left: 0%;
  }
  img.yodh-slider {
    display: block;
    top: 56%;
  }
  img.yodh-plus {
    width: 17% !important;
    top: 58%;
    right: 1%;
  }
  img.yodh-slider-radio {
    width: 10% !important;
    top: 26.5%;
    left: 12%;
    width: -1% !important;
  }
  .hover-card5 {
    top: -428%;
    height: 134%;
    width: 219%;
    right: -387%;
  }
  .hover-card4 {
    top: -320%;
    height: 136%;
    width: 257%;
    right: -106%;
    font-size: 15px;
  }
  .hover-card3 {
    top: -516%;
    height: 125%;
    width: 231%;
    right: 42%;
    font-size: 13px;
  }
  .hover-card2 {
    top: -395%;
    height: 193%;
    width: 234%;
    right: 129%;
    font-size: 13px;
  }
  ul {
    margin-left: -14px;
  }

  .hover-card1 {
    top: -577%;
    height: 102%;
    width: 270%;
    font-size: 16px;
    right: 231%;
    line-height: 17px;
  }
  .connector-line-1 {
    left: 29%;
    width: 10%;
    top: 71%;
  }
}
@media screen and (min-width: 1900px) and (min-height: 1180px) and (max-width: 1920px) and (max-height: 1200px) {
  /* Your styles here */

  .digital-health {
    width: 145%;
    top: 126px;
    right: 168px;
  }
  .speech-bubble-click {
    top: 64%;
    right: 73%;
    z-index: 9999;
  }
  img.yodh-slider {
    display: block;
    top: 54%;
    left: 4%;
  }
  .hover-card5 {
    display: none;
    position: absolute;
    top: -496%;
    height: 123%;
    width: 239%;
    padding: 0px 4px 4px;
    background: #f5eee8;
    border: 1px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgb(0 0 0);
    z-index: 10;
    text-align: start;
    font-size: 12px;
    right: -342%;
  }
  .hover-card4 {
    top: -349%;
    height: 138%;
    width: 283%;
    font-size: 15px;
    right: -141%;
  }
  .hover-card3 {
    top: -593%;
    height: 146%;
    width: 218%;
    font-size: 14px;
    right: 12%;
  }
  .hover-card1 {
    display: none;
    position: absolute;
    top: -639%;
  }
  .hover-card2 {
    top: -436%;
    height: 210%;
    width: 252%;
    font-size: 14px;
    right: 76%;
  }

  .timeline-container {
    top: 253px;
    width: 116%;
    right: 5%;
    gap: 75px;
  }
  img.yodh-plus {
    position: absolute;
    z-index: 999;
    width: 16% !important;
    top: 61.4%;
    right: 1%;
  }
  .content-journey {
    top: 2%;

    right: 80%;
    border-radius: 3px;
  }
  p.para-journye {
    padding: 21px;

    font-size: 19px;
  }
  img.yodh-slider-radio {
    position: absolute;
    width: 8% !important;
    top: 31.1%;
  }
  img.yodh-slider1 {
    position: absolute;
    width: 19% !important;
    top: 4.8%;
    right: 29%;
  }
  .timeline-container {
    top: 258px;
    width: 124%;
    right: 11%;
    gap: 79px;
  }
}
/* @media only screen and (width: 2256px) and (height: 1504px) {
    .digital-health {
      width: 139%;
      top: 136px;
      right: 177px;
    }
    .timeline-container {
        top: 322px;
        width: 116%;
        right: 5%;
        gap: 121px;
    }
  } */

@media screen and (min-width: 1620px) and (max-width: 1682px) {
  .circle.fifth-number {
    right: -140%;
    top: 0.5vh;
  }
  .circle.fourth-number {
    right: -41%;
    top: 0.5vh;
  }
  .circle.third-number {
    top: 0.5vh;

    right: 62%;
  }
  .circle.two-number {
    right: 161%;

    top: 0.1vh;
  }
  .circle.one-number {
    top: -1vh;
    right: 262%;
  }
  img.yodh-slider-radio {
    position: absolute;
    width: 8% !important;
    top: 28.6%;
    left: 13%;
    width: -1% !important;
  }
}
@media only screen and (min-width: 2236px) and (min-height: 1420px) and (max-width: 2260px) and (min-height: 1440px) {
}

@media screen and (min-width: 2236px) and (min-height: 1420px) and (max-width: 2260px) and (min-height: 1440px) {
  .digital-health {
    width: 138%;
    top: 135px;
    right: 173px;
  }
  .hover-card5 {
    top: -599%;
    height: 169%;
    font-size: 14px;
    right: -409%;
  }
  .timeline-container {
    top: 308px;
    width: 116%;
    right: 5%;
    gap: 119px;
  }
  img.yodh-plus {
    width: 16% !important;
    top: 61.7%;
    right: 1%;
  }
  img.yodh-slider {
    top: 56%;
    left: 3%;

    width: 18% !important;
  }
  img.yodh-slider-radio {
    top: 31.2%;
    left: 13%;
  }

  img.yodh-slider1 {
    position: absolute;
    width: 19% !important;
    top: 5%;
    right: 29%;
  }
  .content-journey {
    top: 3%;
  }
  p.para-journye {
    padding: 31px;

    font-size: 21px;
  }

  .hover-card4 {
    top: -416%;
    height: 156%;
    width: 341%;
    font-size: 18px;
    right: -171%;
  }
  .hover-card3 {
    top: -726%;
    height: 202%;
    width: 277%;
    font-size: 18px;
    right: 14%;
  }
  .hover-card2 {
    top: -590%;
    height: 300%;
    width: 279%;
    font-size: 17px;
    right: 101%;
    line-height: 23px;
  }
  .hover-card1 {
    top: -779%;
    height: 158%;
    width: 291%;
    font-size: 20px;
    right: 205%;
    line-height: 23px;
  }
  .content-journey {
    top: 2%;
  }
}
@media screen and (min-width: 2239px) and (min-height: 1240px) and (max-width: 2240px) and (min-height: 1260px) {
  .digital-health {
    text-align: center;
    width: 199.6%;

    top: 131px;
    font-size: 19px;

    right: 329px;
  }
  .timeline-container {
    top: 274px;
    width: 174%;
    right: 34%;
    padding-top: 4px;
    gap: 54px;
  }
  .content-journey {
    border: 2px solid #a6a6a8;
    position: absolute;
    top: 0%;
    background-color: white;
    right: 80%;
    border-radius: 3px;
  }
  p.para-journye {
    padding: 31px;

    font-size: 21px;
  }
  .hover-card5 {
    top: -530%;
    height: 226%;
    width: 183%;

    font-size: 18px;
    right: -245%;
  }

  .hover-card4 {
    top: -388%;
    height: 171%;
    width: 259%;

    font-size: 21px;
    right: -130%;
  }
  .hover-card3 {
    top: -667%;
    height: 213%;
    width: 176%;

    font-size: 20px;
    right: 23%;
  }
  .hover-card2 {
    top: -593%;
    height: 349%;
    width: 171%;

    font-size: 19px;
    right: 80%;
  }
  .hover-card1 {
    top: -677%;
    height: 132%;
    width: 229%;

    font-size: 20px;
    right: 162%;
  }
  img.yodh-slider {
    display: block;
    top: 51%;
    left: 4%;
    position: absolute;
    z-index: 999;
    width: 16% !important;
  }
  img.yodh-plus {
    width: 16% !important;
    top: 59.3%;
    right: 1%;
  }
  img.yodh-slider-radio {
    top: 29.5%;
    left: 13%;
    width: -1% !important;
  }
  img.yodh-slider1 {
    width: 19% !important;
    top: 2.5%;
    right: 29%;
  }
}
@media screen and (min-width: 2540px) and (min-height: 1590px) and (max-width: 2560px) and (min-height: 1600px) {
  img.yodh-slider1 {
    position: absolute;
    width: 19% !important;
    right: 29%;
    top: 5%;
  }
  img.yodh-slider {
    top: 46%;
    left: 5%;

    width: 15% !important;
  }
  .hover-card5 {
    display: none;
    position: absolute;
    top: -448%;
    height: 191%;
    width: 239%;
    padding: 0px 4px 4px;
    background: #f5eee8;
    border: 1px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgb(0 0 0);
    z-index: 10;
    text-align: start;
    font-size: 16px;
    right: -405%;
  }
  .hover-card4 {
    display: none;
    position: absolute;
    top: -332%;
    height: 116%;
    width: 283%;
    padding: 0px 4px 4px;
    background: #f5eee8;
    border: 1px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgb(0 0 0);
    z-index: 10;
    text-align: start;
    font-size: 13px;
    right: -115%;
  }
  .hover-card3 {
    top: -549%;
    height: 136%;
    width: 270%;

    font-size: 16px;
    right: 17%;
    line-height: 21px;
  }
  .hover-card2 {
    top: -45vh;
    height: 302%;
    width: 276%;

    font-size: 18px;
    right: 96%;
  }
  .hover-card1 {
    top: -54vh;
    height: 140%;
    width: 246%;

    font-size: 17px;
    right: 195%;
    line-height: 22px;
  }
  .content-journey {
    top: 1%;
    right: 80%;
  }
  p.para-journye {
    padding: 25px;

    font-size: 18px;
  }
  img.yodh-plus {
    width: 16% !important;
    top: 53%;
    right: 1%;
  }

  img.yodh-slider-radio {
    top: 25.5%;
  }
}
@media screen and (min-width: 2540px) and (min-height: 1580px) and (max-width: 2560px) and (max-height: 1600px) {
}

@media screen and (min-width: 2540px) and (min-height: 1420px) and (max-width: 2560px) and (max-height: 1440px) {
  .digital-health {
    width: 136.4%;
    top: 151px;
    right: 14.2vh;
    padding: 16px;
  }
  .timeline-container {
    top: 292px;
    width: 115%;
    right: 5%;
    gap: 145px;
  }
  img.yodh-plus {
    width: 16% !important;
    top: 59.2%;
    right: 1%;
  }
  .hover-card3 {
    top: -696%;
    height: 174%;
    width: 298%;
    font-size: 18px;
    right: 17%;
    line-height: 21px;
  }
  .hover-card2 {
    top: -45vh;
    height: 302%;
    width: 317%;
    font-size: 20px;
    right: 96%;
  }
  .hover-card4 {
    top: -403%;
    height: 139%;
    width: 316%;

    font-size: 16px;
    right: -142%;
  }
  .hover-card5 {
    top: -599%;
    height: 128%;
    width: 239%;

    font-size: 12px;
    right: -472%;
  }
  .hover-card1 {
    top: -777%;
    height: 155%;
    width: 335%;
    font-size: 19px;
    right: 226%;
    line-height: 24px;
  }

  img.yodh-slider-radio {
    width: 8% !important;
    top: 29.5%;
    left: 13%;
    width: -1% !important;
  }
  .content-journey {
    top: 2%;
  }
  .content-journey {
    top: 2%;
  }
  p.para-journye {
    line-height: 42px;
    font-size: 27px;
  }
  img.yodh-slider1 {
    width: 19% !important;
    top: 2.8%;
    right: 29%;
  }
}
.circle.six-number {
  position: absolute;
  top: 63%;
  right: 40vh;
  height: 19%;
  background: rgba(255, 0, 0, 0);
  width: 6%;
}
@media screen and (min-width: 3820px) and (min-height: 2140px) and (max-width: 3840px) and (max-height: 2160px) {
  .timeline-container {
    top: 406px;
    width: 309%;
    right: 105%;
    padding-top: 4px;
    gap: 0px;
  }
  /* .speech-bubble-click {
          
            font-size: 37px;
         
            top: 64%;
            right: 73%;
            z-index: 9999;
        } */
  .hover-card1 {
    top: -55vh;
    height: 237%;
    width: 150%;

    font-size: 31px;
    right: 116%;
    line-height: 39px;
  }
  .hover-card2 {
    top: -803%;
    height: 392%;
    width: 139%;

    font-size: 27px;
    right: 60%;
  }
  .hover-card5 {
    top: -916%;
    height: 264%;
    width: 120%;

    font-size: 25px;
    right: -177%;
  }
  .hover-card4 {
    top: -632%;
    height: 241%;
    width: 154%;

    font-size: 30px;
    right: -62%;
  }
  .hover-card3 {
    top: -1087%;
    height: 308%;
    width: 123%;

    font-size: 30px;
    right: 25%;
  }
  .digital-health {
    width: 322%;
    top: 211px;
    padding: 44px;
    font-size: 25px;
    right: 37.5vh;
  }
  p.para-journye {
    background-color: #faa71a;
    padding: 50px;
    margin: 8px;
    font-size: 37px;
    border-radius: 3px;
    line-height: 57px;
  }
  img.yodh-slider-radio {
    position: absolute;
    width: 8% !important;
    top: 29.5%;
    left: 13%;
    width: -1% !important;
  }

  img.yodh-slider1 {
    position: absolute;
    width: 19% !important;
    top: 2.7%;
    right: 29%;
  }
  img.yodh-slider {
    display: block;
    top: 51%;
  }
  .content-journey {
    border: 2px solid #a6a6a8;
    position: absolute;
    top: 1%;
    background-color: white;
    right: 80%;
    border-radius: 3px;
  }
  /* .speech-bubble-click {
           
            top: 66%;
            right: 73%;
            z-index: 9999;
        } */
  img.yodh-plus {
    position: absolute;
    z-index: 999;
    width: 16% !important;
    top: 59.2%;
    right: 1%;
  }

  /* .speech-bubble-click {
            position: absolute;
            background-color: #be2e30;
            border-radius: 15px;
            padding: 8px 19px;
            width: max-content;
            max-width: 250px;
            color: white;
            font-size: 37px;
            font-family: "Poppins", sans-serif;
            font-weight: 500;
            text-align: left;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            top: 65%;
            right: 73%;
            z-index: 9999;
        }   */
}