/** @format */

body {
  margin: 0;
  color: white;
}

.companyMain {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #181a1b;
  margin: 0;
  padding: 0;
}

.companySub {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* HEADER */
.companySection {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 80px 220px 145px 95px;
}

.companyTitle {
  color: #3ddc97;
  font-family: Anton;
  font-size: 80px;
  font-style: normal;
  font-weight: 400;
  line-height: 81px; /* 101.25% */
  letter-spacing: -1.236px;
  max-width: 780px;
  margin: 0px 0px 40px 0px;
}

.companyDescription {
  color: #def0de;
  font-family: "Rethink Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.449px;
  max-width: 600px;
  margin: 0px 0px 10px 0px;
}

.btnDiv {
  display: flex;
  /* justify-content: flex-end; */
}
.readBtn {
  width: 165px;
  margin-top: 20px;
  border-radius: 33px;
  /* border: 1px solid #0fa9a4; */
  padding: 3px 18px;
  background: transparent;
  color: #fff;
  font-family: "Rethink Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px; /* 155.556% */
  letter-spacing: -0.439px;
  display: inline-flex;
  border: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.readBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(90deg, #0fa9a4 0%, #064341 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}
.companyImage {
  width: 620px;
}
.ourStory {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px 95px 50px 95px;
}
.leftOurStory {
  /* width: 50%; */
  max-width: 760px;
  margin-right: 50px;
}
.leftStoryHeading {
  color: #3ddc97;
  font-family: Anton;
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px; /* 83.333% */
  letter-spacing: 0.369px;
  margin: 0px 0px 30px 0px;
}
.leftStoryPara {
  color: #def0de;
  font-family: "Rethink Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.449px;
}

.leftStoryPara p {
  margin-bottom: 15px;
}
/* .rightStoryMain {
  display: flex;
}
.rightOurStory {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.storyBox {
  display: flex;
  width: 704px;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  border: 1px solid rgb(73, 73, 73);
  border-radius: 12px;
  background: var(--Colorblackglasssss, rgba(24, 26, 27, 0.2));
}
.highlighted {
  background: var(
    --tele-grad-1,
    linear-gradient(114deg, #3ddc97 0%, #0099a8 50.94%, #0099a8 99.95%)
  );
  border: none;
}

.firstRightHeading {
  margin: 0px;
  color: var(--White, #fff);
  font-family: "Rethink Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
}
.firstRightPara {
  margin: 0px;
  color: var(--White, #fff);
  font-family: "Rethink Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; 
} */

/*css after vadd dot with line*/
.timelineContainer {
  position: relative;
  display: flex;
  gap: 40px;
  margin-top: 30px;
}

.timelineLine {
  position: absolute;
  left: 19px;
  right: 50%;
  top: 0px;
  height: 100%;
  width: 1px;
  background: linear-gradient(#00a6a8, #00c895);
}

/* Circles */
.dot {
  position: absolute;
  left: -4px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: white;
}
.active-dot {
  background: linear-gradient(
    114deg,
    #3ddc97 0%,
    #0099a8 50.94%,
    #0099a8 99.95%
  ) !important;
}

/* Position 5 circles aligned with boxes */
.dot:nth-child(2) {
  top: 0px;
}
.dot:nth-child(3) {
  top: 175px;
}
.dot:nth-child(4) {
  top: 330px;
}
.dot:nth-child(5) {
  top: 485px;
}
.dot:nth-child(6) {
  top: 660px;
}

/* STORY BOX STYLING */
.rightOurStory {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-left: 80px;
}

.storyBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 704px;
  padding: 24px;
  border-radius: 12px;
  /* border: 1px solid rgb(70, 70, 70); */
  border: 1px solid rgb(53, 53, 53);
  background: rgba(46, 46, 46, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(20, 20, 20, 0.5),
    inset 0 -1px 0 rgba(66, 66, 66, 0.1), inset 0 0 20px 10px rgb(24, 24, 24);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.storyBox::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.storyBox::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

/* .storyBox:hover, */
.storyBox.active {
  background: linear-gradient(
    114deg,
    #3ddc97 0%,
    #0099a8 50.94%,
    #0099a8 99.95%
  );
  border: 1px solid
    linear-gradient(114deg, #3ddc97 0%, #0099a8 50.94%, #0099a8 99.95%);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  background-blend-mode: normal;
}

/* .storyBox:hover .firstRightHeading, */
.storyBox.active .firstRightHeading {
  background: var(
    --tele-grad-1,
    linear-gradient(114deg, #ffffff 0%, #ffffff 50.94%, #ffffff 99.95%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.storyBox.active .firstRightPara {
  margin: 0px;
  color: var(--White, #fff);
}

.firstRightHeading {
  margin: 0px;
  font-family: Anton;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  background: var(
    --tele-grad-1,
    linear-gradient(114deg, #3ddc97 0%, #0099a8 50.94%, #0099a8 99.95%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.firstRightPara {
  margin: 0px;
  color: var(--White, #fff);
  font-family: "Rethink Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.strategicDiv {
  padding: 80px 95px;
  text-align: center;
  color: white;
  font-family: "Rethink Sans", sans-serif;
}
.strategicHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.strategicHeaderHeading {
  color: #3ddc97;
  text-align: center;
  font-family: Anton;
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px; /* 83.333% */
  letter-spacing: 0.369px;
  margin: 20px 0px 10px 0px;
}

.strategicHeaderPara {
  color: #def0de;
  text-align: center;
  font-family: "Rethink Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px; /* 105% */
  letter-spacing: -0.449px;
  margin: 10px 0px 65px 0px;
  max-width: 600px;
}

/* Container */
.strategicCards {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  align-items: stretch;
  gap: 58px;
  /* padding: 20px 0; */
}

/* Shared card styling */
/* .sCard {
  border-radius: 25px;
  background: rgba(0, 0, 0, 0);
  padding: 60px 40px;
  border: 0.5px solid rgb(255, 255, 255, 0.4);
  transition: 0.3s ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;/
}

.sideCard {
  cursor: pointer;
}

.sideCard:hover {
  border-radius: 25px;
  background: rgba(0, 0, 0, 0);
  box-shadow: -5px -4px 12.4px 4px rgba(0, 153, 168, 0.2),
    -7px -4px 14.9px -7px rgba(61, 220, 151, 0.2);
  scale: 1.05;
  transition: 0.3s ease;
} */

.sCard {
  padding: 60px 40px;
  background: rgba(46, 46, 46, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 25px;
  /* border: 1px solid rgba(255, 255, 255, 0.3); */
  border: 1px solid rgb(53, 53, 53);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(20, 20, 20, 0.5),
    inset 0 -1px 0 rgba(66, 66, 66, 0.1), inset 0 0 20px 10px rgb(24, 24, 24);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  scale: 0.99;
  width: 380px;
  display: flex;
  flex-direction: column;
}

.sCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.sCard::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

.sideCard:hover {
  border-radius: 25px;
  background: rgba(0, 0, 0, 0);
  box-shadow: -5px -4px 12.4px 4px rgba(0, 153, 168, 0.2),
    -7px -4px 14.9px -7px rgba(61, 220, 151, 0.2);
  /* transform: scale(1.05); */
  scale: 1.08;
  /* padding: 60px 40px; */
  transition: 0.3s ease;
}

/* .sideCard {
  transform: scale(0.92);
  opacity: 0.85;
} */

.sCardHeading {
  color: #0fa9a4;
  font-family: Anton;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 87.5% */
  letter-spacing: -0.449px;
  margin-bottom: 26px;
  word-break: break-word;
}

.sCardPara {
  color: #def0de;
  text-align: center;
  font-family: "Rethink Sans";
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 90.909% */
  letter-spacing: -0.312px;
  margin-bottom: 26px;
  word-break: break-word;
}

.tag {
  color: #3ddc97;
  text-align: center;
  font-family: "Rethink Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  word-break: break-word;
  margin-top: auto;
}

.teamSection {
  text-align: center;
  padding: 60px 0px 60px 95px;
  font-family: "Rethink Sans", sans-serif;
  color: #fff;
}

.teamSectionHeading {
  color: #3ddc97;
  text-align: center;
  font-family: Anton;
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px; /* 83.333% */
  letter-spacing: 0.369px;
  margin: 20px 0px;
}

.teamSectionPara {
  color: #def0de;
  text-align: center;
  font-family: "Rethink Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px; /* 105% */
  letter-spacing: -0.449px;
  margin: 0 auto 30px;
  max-width: 790px;
}
.teamScrollWrapper {
  /* width: 100%; */
  padding: 20px;
  overflow: hidden;
  padding-left: 100px;
  position: relative;
  white-space: nowrap;
  will-change: transform; /* smoother GPU animation */
}

.scrollTrack {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: scrollLoop 35s linear infinite;
}

/* @keyframes scrollLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
} */

@keyframes scrollLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.teamCards {
  display: flex;
  justify-content: center;
  /* align-items: start; */
  align-items: stretch;
  gap: 24px;
  flex-wrap: nowrap;
  /* overflow: hidden; */
}

.teamCard {
  /* box-shadow: 0 0 18px rgba(0, 255, 200, 0.06);
  border: 1px solid rgb(68, 68, 68);
  background: transparent; */
  border: 1px solid rgb(53, 53, 53);
  border-radius: 25px;
  padding: 30px;
  text-align: center;
  transition: 0.3s;
  text-decoration: none;
  background: rgba(46, 46, 46, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(20, 20, 20, 0.5),
    inset 0 -1px 0 rgba(66, 66, 66, 0.1), inset 0 0 20px 10px rgb(24, 24, 24);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  width: 360px;
  /* height: 180px;  */
  /* height: auto; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.teamCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.teamCard::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

.teamCard:hover {
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.7);
  /* dark glass */
  box-shadow: -5px -4px 12.4px 4px rgba(0, 153, 168, 0.2),
    -7px -4px 14.9px -7px rgba(61, 220, 151, 0.2);
}

/* .highlightedCard {
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  padding: 30px;
  box-shadow: -5px -4px 12.4px 4px rgba(0, 153, 168, 0.2),
    -7px -4px 14.9px -7px rgba(61, 220, 151, 0.2);
} */
.teamCard a {
  text-decoration: none !important;
  color: inherit !important;
  display: block;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.teamCard a:hover {
  color: inherit;
  text-decoration: none;
}

.teamCardImg {
  /* width: 163px; */
  height: 220px;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 14px;
  text-decoration: none;
}

.teamCardHeading {
  color: #3ddc97;
  font-family: Anton;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 87.5% */
  letter-spacing: -0.449px;
  margin: 5px 0px 0px;
  text-align: left;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* max 2 lines */
  -webkit-box-orient: vertical;
  overflow: visible;
  display: block;
  white-space: normal;
}

.teamCardPara {
  margin-top: 6px;
  color: #def0de;
  font-family: "Rethink Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.312px;
  text-align: left;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* max 2 lines */
  -webkit-box-orient: vertical;
  overflow: visible;
  display: block;
  white-space: normal;
}
/* Responsive Design */

@media (max-width: 1599px) {
  .companySection {
    padding: 100px 80px;
    /* flex-direction: column-reverse; */
    gap: 25px;
    align-items: flex-start;
  }
  .companyImage {
    width: 100%;
    max-width: 520px;
  }
  .companyTitle {
    font-size: 60px;
    line-height: 65px;
    margin-bottom: 25px;
    text-align: left;
  }
  .companyDescription {
    font-size: 19px;
    margin-bottom: 25px;
    text-align: left;
  }
  .readBtn {
    width: 190px;
    font-size: 18px;
    padding: 4px 18px;
    margin-top: 20px;
  }

  .ourStory {
    /* display: none; */
    /* flex-direction: column; */
    padding: 30px 80px;
    gap: 20px;
  }
  .leftOurStory {
    margin: 0;
    max-width: 550px;
  }
  .leftStoryHeading {
    color: #3ddc97;
    font-family: Anton;
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 166.667% */
    letter-spacing: 0.369px;
    margin: 20px 0px;
  }
  .leftStoryPara {
    color: #def0de;
    font-family: "Rethink Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.449px;
    margin: 10px 0px;
  }

  .rightOurStory {
    margin-top: 0px;
    width: 100%;
    margin-left: 60px;
  }
  .storyBox {
    width: 570px;
    padding: 24px;
    gap: 14px;
  }
  .dot {
    width: 46px;
    height: 46px;
    left: -3px;
  }

  .dot:nth-child(2) {
    top: 0px;
  }
  .dot:nth-child(3) {
    top: 170px;
  }
  .dot:nth-child(4) {
    top: 350px;
  }
  .dot:nth-child(5) {
    top: 530px;
  }
  .dot:nth-child(6) {
    top: 700px;
  }

  .firstRightHeading {
    color: var(--White, #fff);
    font-family: Anton;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 160% */
  }
  /* .highlightedHeading {
    font-family: Anton;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    background: var(
      --tele-grad-1,
      linear-gradient(114deg, #3ddc97 0%, #0099a8 50.94%, #0099a8 99.95%)
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  } */
  .firstRightPara {
    color: var(--White, #fff);
    font-family: "Rethink Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 10px;
    max-width: 500px;
  }
  .strategicDiv {
    /* display: none; */
    padding: 30px 80px;
  }
  .strategicHeaderHeading {
    color: #3ddc97;
    text-align: center;
    font-family: Anton;
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 166.667% */
    letter-spacing: 0.369px;
    margin: 15px 0px;
  }
  .strategicHeaderPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.449px;
    margin: 10px 0px 30px 0px;
  }
  .strategicCards {
    /* flex-direction: column; */
    align-items: stretch;
    justify-content: center;
    gap: 28px;
    padding: 10px 0;
  }
  .sCard {
    width: 360px;
    padding: 30px 30px;
  }
  .sideCard {
    /* transform: scale(1); */
    opacity: 1;
  }
  .sideCard:hover {
    scale: 1.06;
  }
  /* .centerCard {
    width: auto;
    padding: 25px 30px;
  }
  .centerCard:hover {
    scale: 1.04;
  } */

  .sCardHeading {
    color: #0fa9a4;
    font-family: Anton;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 116.667% */
    letter-spacing: -0.449px;
  }
  .sCardPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.312px;
    margin-bottom: 40px;
  }
  .tag {
    color: #3ddc97;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 80% */
  }

  .teamSection {
    padding: 30px 0px 30px 80px;
  }
  .teamSectionHeading {
    color: #3ddc97;
    font-family: Anton;
    font-size: 46px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 166.667% */
    letter-spacing: 0.369px;
  }
  .teamSectionPara {
    color: #def0de;
    font-family: "Rethink Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.449px;
  }

  .teamCards {
    gap: 18px;
    /* flex-direction: column; */
    align-items: stretch;
    /* flex-wrap: wrap; */
    /* display: block; */
  }
  .teamCard {
    width: 230px;
  }
  .highlightedCard {
    width: 230px;
  }
  .teamCardImg {
    max-width: 175px;
    height: 175px;
    margin-bottom: 7px;
  }
  .teamCardHeading {
    color: #3ddc97;
    text-align: center;
    font-family: Anton;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 116.667% */
    letter-spacing: -0.449px;
    margin: 0px;
    text-decoration: none;
  }
  .teamCardPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.312px;
    margin: 0px;
    text-decoration: none;
  }
}

@media (max-width: 1366px) {
  .companySection {
    padding: 100px 70px;
    /* flex-direction: column-reverse; */
    gap: 25px;
    align-items: flex-start;
  }
  .companyImage {
    /* width: 100%; */
    max-width: 480px;
  }
  .companyTitle {
    font-size: 48px;
    line-height: 50px;
    margin-bottom: 20px;
    text-align: left;
    max-width: 500px;
  }
  .companyDescription {
    font-size: 17px;
    margin-bottom: 20px;
    text-align: left;
  }
  .readBtn {
    width: 170px;
    font-size: 17px;
    padding: 4px 16px;
    margin-top: 20px;
  }

  .ourStory {
    /* display: none; */
    /* flex-direction: column; */
    padding: 30px 70px;
    gap: 20px;
  }
  .leftOurStory {
    margin: 0;
    max-width: 600px;
  }
  .leftStoryHeading {
    color: #3ddc97;
    font-family: Anton;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 166.667% */
    letter-spacing: 0.369px;
    margin: 0px;
  }
  .leftStoryPara {
    color: #def0de;
    font-family: "Rethink Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 100% */
    letter-spacing: -0.449px;
    margin: 10px 0px;
  }
  .rightOurStory {
    /* margin-top: 50px; */
    width: 100%;
  }
  .storyBox {
    width: 400px;
    padding: 24px;
    gap: 14px;
  }
  .dot {
    width: 44px;
    height: 44px;
    left: -2px;
  }
  .timelineLine {
    left: 20px;
  }
  .dot:nth-child(2) {
    top: 0px;
  }
  .dot:nth-child(3) {
    top: 192px;
  }
  .dot:nth-child(4) {
    top: 368px;
  }
  .dot:nth-child(5) {
    top: 545px;
  }
  .dot:nth-child(6) {
    top: 740px;
  }

  .firstRightHeading {
    color: var(--White, #fff);
    font-family: Anton;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 160% */
  }
  /* .highlightedHeading {
    font-family: Anton;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    background: var(
      --tele-grad-1,
      linear-gradient(114deg, #3ddc97 0%, #0099a8 50.94%, #0099a8 99.95%)
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  } */
  .firstRightPara {
    color: var(--White, #fff);
    font-family: "Rethink Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400; /* 100% */
    margin-bottom: 10px;
    max-width: 300px;
  }
  .strategicDiv {
    /* display: none; */
    padding: 30px 70px;
  }
  .strategicHeaderHeading {
    color: #3ddc97;
    text-align: center;
    font-family: Anton;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 166.667% */
    letter-spacing: 0.369px;
    margin: 15px 0px;
  }
  .strategicHeaderPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400; /* 100% */
    letter-spacing: -0.449px;
    margin: 10px 0px 30px 0px;
  }
  .strategicCards {
    /* flex-direction: column; */
    align-items: stretch;
    justify-content: center;
    gap: 24px;
    padding: 10px 0;
  }
  .sCard {
    width: 340px;
    padding: 25px 30px;
  }
  .sideCard {
    /* transform: scale(1); */
    opacity: 1;
  }
  /* .centerCard {
    width: auto;
    padding: 25px 30px;
  } */

  .sCardHeading {
    color: #0fa9a4;
    font-family: Anton;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 116.667% */
    letter-spacing: -0.449px;
  }
  .sCardPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.312px;
    margin-bottom: 40px;
  }
  .tag {
    color: #3ddc97;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 80% */
  }

  .teamSection {
    padding: 30px 0px 30px 70px;
  }
  .teamSectionHeading {
    color: #3ddc97;
    font-family: Anton;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 166.667% */
    letter-spacing: 0.369px;
  }
  .teamSectionPara {
    color: #def0de;
    font-family: "Rethink Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.449px;
  }

  .teamCards {
    gap: 18px;
    /* flex-direction: column; */
    align-items: stretch;
    flex-wrap: wrap;
    /* display: block; */
  }
  .teamCard {
    width: 230px;
  }
  .highlightedCard {
    width: 230px;
  }
  .teamCardImg {
    max-width: 175px;
    height: 175px;
    margin-bottom: 7px;
  }
  .teamCardHeading {
    color: #3ddc97;
    text-align: center;
    font-family: Anton;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 116.667% */
    letter-spacing: -0.449px;
    margin: 0px;
    text-decoration: none;
  }
  .teamCardPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.312px;
    margin: 0px;
    text-decoration: none;
  }
}

@media (max-width: 1024px) {
  .companySection {
    padding: 30px 40px;
    /* flex-direction: column-reverse; */
    gap: 25px;
    align-items: flex-start;
  }
  /* .rightDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  } */
  .companyImage {
    max-width: 430px;
    width: 100%;
  }

  .companyTitle {
    font-size: 36px;
    line-height: 42px;
    margin-bottom: 12px;
    text-align: left;
    max-width: 100%;
  }
  .companyDescription {
    font-size: 16px;
    margin-bottom: 15px;
    text-align: left;
    max-width: 100%;
  }
  .readBtn {
    width: 160px;
    font-size: 15px;
    padding: 4px 14px;
    margin-top: 20px;
  }

  .ourStory {
    /* display: none; */
    flex-direction: column;
    padding: 30px 40px;
  }
  .leftOurStory {
    margin: 0;
    max-width: 100%;
  }
  .leftStoryHeading {
    color: #3ddc97;
    font-family: Anton;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 166.667% */
    letter-spacing: 0.369px;
    margin: 0px;
  }
  .leftStoryPara {
    color: #def0de;
    font-family: "Rethink Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 100% */
    letter-spacing: -0.449px;
    margin: 10px 0px;
  }
  .rightOurStory {
    margin-top: 50px;
    width: 100%;
  }
  .storyBox {
    width: auto;
    padding: 16px;
    gap: 16px;
  }
  .timelineContainer {
    width: 100%;
  }
  .timelineLine {
    top: 45px;
    height: 93%;
    left: 18px;
  }
  .dot {
    width: 40px;
    height: 40px;
    left: -2px;
  }

  .dot:nth-child(2) {
    top: 45px;
  }
  .dot:nth-child(3) {
    top: 200px;
  }
  .dot:nth-child(4) {
    top: 360px;
  }
  .dot:nth-child(5) {
    top: 515px;
  }
  .dot:nth-child(6) {
    top: 670px;
  }
  .firstRightHeading {
    color: var(--White, #fff);
    font-family: Anton;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 160% */
  }
  .highlightedHeading {
    font-family: Anton;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 90% */
    background: var(
      --tele-grad-1,
      linear-gradient(114deg, #3ddc97 0%, #0099a8 50.94%, #0099a8 99.95%)
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .firstRightPara {
    color: var(--White, #fff);
    font-family: "Rethink Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400; /* 100% */
    margin-bottom: 20px;
    max-width: 100%;
  }
  .storyBox.active .firstRightPara {
    margin-bottom: 20px;
  }
  .strategicDiv {
    /* display: none; */
    padding: 30px 40px;
  }
  .strategicHeaderHeading {
    color: #3ddc97;
    text-align: center;
    font-family: Anton;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 166.667% */
    letter-spacing: 0.369px;
    margin: 10px 0px;
  }
  .strategicHeaderPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400; /* 100% */
    letter-spacing: -0.449px;
    margin: 10px 0px 30px 0px;
  }
  .strategicCards {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 24px;
    padding: 10px 0;
  }
  .sCard {
    width: 100%;
    padding: 25px 50px;
  }
  .sideCard {
    opacity: 1;
  }
  .sideCard:hover {
    scale: 1;
  }
  /* .centerCard {
    width: auto;
    padding: 25px 50px;
  }
  .centerCard:hover {
    scale: 1.05;
  } */

  .sCardHeading {
    color: #0fa9a4;
    font-family: Anton;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 116.667% */
    letter-spacing: -0.449px;
  }
  .sCardPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 100% */
    letter-spacing: -0.312px;
    margin-bottom: 40px;
  }
  .tag {
    color: #3ddc97;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 80% */
  }

  .teamSection {
    padding: 30px 40px;
  }
  .teamSectionHeading {
    color: #3ddc97;
    font-family: Anton;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 166.667% */
    letter-spacing: 0.369px;
    margin: 15px 0px;
  }
  .teamSectionPara {
    color: #def0de;
    font-family: "Rethink Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    margin: 0 auto 30px;
    letter-spacing: -0.449px;
  }
  .teamScrollWrapper {
    padding-left: 0px;
  }
  .scrollTrack {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    animation: none !important;
    transform: translateX(0) !important;
  }

  /* Make cards wrap normally on mobile */
  .teamScrollWrapper {
    overflow: visible; /* show normally */
    padding-left: 0; /* remove left space */
  }

  .teamCards {
    gap: 18px;
    /* flex-direction: column; */
    align-items: stretch;
    flex-wrap: wrap;
    /* display: block; */
  }
  .teamCard {
    width: 230px;
  }
  .highlightedCard {
    width: 230px;
  }
  .teamCardImg {
    max-width: 175px;
    height: 175px;
    margin-bottom: 7px;
  }
  .teamCardHeading {
    color: #0099a8;
    text-align: center;
    font-family: Anton;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 116.667% */
    letter-spacing: -0.449px;
    margin: 0px;
    text-decoration: none;
  }
  .teamCardPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.312px;
    margin: 0px;
    text-decoration: none;
  }
}

@media (max-width: 900px) {
  .timelineContainer {
    width: 100%;
  }
  .timelineLine {
    top: 45px;
    height: 93%;
  }
  .dot {
    width: 36px;
    height: 36px;
    left: 0px;
  }
  .dot:nth-child(2) {
    top: 45px;
  }
  .dot:nth-child(3) {
    top: 205px;
  }
  .dot:nth-child(4) {
    top: 360px;
  }
  .dot:nth-child(5) {
    top: 515px;
  }
  .dot:nth-child(6) {
    top: 675px;
  }
}

@media (max-width: 767px) {
  .companySection {
    padding: 30px 20px;
    flex-direction: column-reverse;
    gap: 25px;
    align-items: flex-start;
  }
  .rightDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .companyImage {
    width: 100%;
    max-width: 400px;
    margin-bottom: 30px;
  }
  .companyTitle {
    font-size: 36px;
    line-height: 42px;
    margin-bottom: 12px;
    text-align: left;
  }
  .companyDescription {
    font-size: 16px;
    margin-bottom: 10px;
    text-align: left;
  }
  .readBtn {
    width: 160px;
    font-size: 15px;
    padding: 4px 14px;
    margin-top: 20px;
  }

  .ourStory {
    /* display: none; */
    flex-direction: column;
    padding: 30px 20px;
  }
  .leftOurStory {
    margin: 0;
    max-width: 100%;
  }
  .leftStoryHeading {
    color: #3ddc97;
    font-family: Anton;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 166.667% */
    letter-spacing: 0.369px;
    margin: 0px;
  }
  .leftStoryPara {
    color: #def0de;
    font-family: "Rethink Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 100% */
    letter-spacing: -0.449px;
    margin: 10px 0px;
  }
  .rightOurStory {
    margin-top: 50px;
    width: 100%;
  }
  .storyBox {
    width: auto;
    padding: 16px;
    gap: 18px;
  }

  .timelineContainer {
    width: 100%;
  }
  .timelineLine {
    top: 45px;
    height: 93%;
  }
  .dot {
    width: 36px;
    height: 36px;
    left: 0px;
  }

  .dot:nth-child(2) {
    top: 45px;
  }
  .dot:nth-child(3) {
    top: 205px;
  }
  .dot:nth-child(4) {
    top: 360px;
  }
  .dot:nth-child(5) {
    top: 515px;
  }
  .dot:nth-child(6) {
    top: 675px;
  }
  .firstRightHeading {
    color: var(--White, #fff);
    font-family: Anton;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
  }
  .highlightedHeading {
    font-family: Anton;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 90% */
    background: var(
      --tele-grad-1,
      linear-gradient(114deg, #3ddc97 0%, #0099a8 50.94%, #0099a8 99.95%)
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .firstRightPara {
    color: var(--White, #fff);
    font-family: "Rethink Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
  }

  .strategicDiv {
    /* display: none; */
    padding: 30px 20px;
  }
  .strategicHeaderHeading {
    color: #3ddc97;
    text-align: center;
    font-family: Anton;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 166.667% */
    letter-spacing: 0.369px;
    margin: 10px 0px;
  }
  .strategicHeaderPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400; /* 100% */
    letter-spacing: -0.449px;
    margin: 10px 0px 30px 0px;
  }
  .strategicCards {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 24px;
    padding: 10px 0;
  }
  .sCard {
    width: 100%;
    padding: 25px 50px;
  }
  .sideCard {
    opacity: 1;
  }
  .sideCard:hover {
    scale: 1;
  }
  /* .centerCard {
    width: auto;
    padding: 25px 50px;
  } */

  .sCardHeading {
    color: #0fa9a4;
    font-family: Anton;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 116.667% */
    letter-spacing: -0.449px;
  }
  .sCardPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 100% */
    letter-spacing: -0.312px;
    margin-bottom: 40px;
  }
  .tag {
    color: #3ddc97;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 80% */
  }

  .teamSection {
    padding: 30px 20px;
  }
  .teamSectionHeading {
    color: #3ddc97;
    font-family: Anton;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 166.667% */
    letter-spacing: 0.369px;
    /* text-align: left; */
  }
  .teamSectionPara {
    color: #def0de;
    font-family: "Rethink Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    margin: 0 auto 30px;
    letter-spacing: -0.449px;
    /* text-align: left; */
    /* margin:0 auto 30px; */
  }

  .scrollTrack {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    animation: none !important;
    transform: translateX(0) !important;
  }

  /* Make cards wrap normally on mobile */
  .teamScrollWrapper {
    overflow: visible; /* show normally */
    padding: 0; /* remove left space */
  }

  .teamCards {
    gap: 18px;
    /* flex-direction: column; */
    align-items: stretch;
    flex-wrap: wrap;
    /* display: block; */
  }
  .teamCard {
    width: 230px;
  }
  .highlightedCard {
    width: 230px;
  }
  .teamCardImg {
    max-width: 175px;
    height: 175px;
    margin-bottom: 7px;
  }
  .teamCardHeading {
    color: #0099a8;
    text-align: center;
    font-family: Anton;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 116.667% */
    letter-spacing: -0.449px;
    margin: 0px;
    text-decoration: none;
  }
  .teamCardPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.312px;
    margin: 0px;
    text-decoration: none;
  }
}

@media (max-width: 747px) {
  .dot:nth-child(2) {
    top: 45px;
  }
  .dot:nth-child(3) {
    top: 225px;
  }
  .dot:nth-child(4) {
    top: 380px;
  }
  .dot:nth-child(5) {
    top: 530px;
  }
  .dot:nth-child(6) {
    top: 710px;
  }
}

@media (max-width: 675px) {
  .timelineContainer {
    width: 100%;
  }
  .timelineLine {
    top: 45px;
    height: 94%;
  }
  .dot {
    width: 36px;
    height: 36px;
    left: 0px;
  }

  .dot:nth-child(2) {
    top: 45px;
  }
  .dot:nth-child(3) {
    top: 220px;
  }
  .dot:nth-child(4) {
    top: 400px;
  }
  .dot:nth-child(5) {
    top: 580px;
  }
  .dot:nth-child(6) {
    top: 755px;
  }
  .firstRightPara {
    max-width: 400px;
  }
}

/* @media (max-width: 600px) {
  .companySection {
    padding: 30px 20px;
    flex-direction: column-reverse;
    gap: 25px;
    align-items: flex-start;
  }
  .rightDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .companyImage {
    width: 100%;
    max-width: 350px;
  }
  .companyTitle {
    font-size: 32px;
    line-height: 42px;
    margin-bottom: 12px;
    text-align: left;
  }
  .companyDescription {
    font-size: 14px;
    margin-bottom: 15px;
    text-align: left;
  }
  .readBtn {
    width: 140px;
    font-size: 14px;
    padding: 2px 12px;
    margin-top: 20px;
  }

  .ourStory {
    flex-direction: column;
    padding: 30px 20px;
  }
  .leftOurStory {
    margin: 0;
    max-width: 100%;
  }
  .leftStoryHeading {
    color: #3ddc97;
    font-family: Anton;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 0.369px;
    margin: 0px;
  }
  .leftStoryPara {
    color: #def0de;
    font-family: "Rethink Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.449px;
    margin: 10px 0px;
  }
  .rightOurStory {
    margin-top: 50px;
    width: 100%;
  }
  .storyBox {
    width: auto;
    padding: 16px;
    gap: 16px;
  }
  .timelineLine {
    left: 16px;
    top: 50px;
    height: 94%;
  }
  .dot {
    width: 34px;
    height: 34px;
    left: 0px;
  }
  .dot:nth-child(2) {
    top: 50px;
  }
  .dot:nth-child(3) {
    top: 222px;
  }
  .dot:nth-child(4) {
    top: 390px;
  }
  .dot:nth-child(5) {
    top: 565px;
  }
  .dot:nth-child(6) {
    top: 740px;
  }
  .rightOurStory {
    margin-left: 60px;
  }

  .firstRightHeading {
    color: var(--White, #fff);
    font-family: Anton;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
  }
  .highlightedHeading {
    font-family: Anton;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    background: var(
      --tele-grad-1,
      linear-gradient(114deg, #3ddc97 0%, #0099a8 50.94%, #0099a8 99.95%)
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .firstRightPara {
    color: var(--White, #fff);
    font-family: "Rethink Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400; 
    margin-bottom: 20px;
  }
  .strategicDiv {
    padding: 30px 20px;
  }
  .strategicHeaderHeading {
    color: #3ddc97;
    text-align: center;
    font-family: Anton;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; 
    letter-spacing: 0.369px;
    margin: 0px 0px;
  }
  .strategicHeaderPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400; 
    letter-spacing: -0.449px;
    margin: 10px 0px 30px 0px;
  }
  .strategicCards {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 10px 0;
  }
  .sCard {
    width: auto;
    padding: 25px 20px;
  }
  .sideCard {
    opacity: 1;
  }
 

  .sCardHeading {
    color: #0fa9a4;
    font-family: Anton;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; 
    letter-spacing: -0.449px;
  }
  .sCardPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; 
    letter-spacing: -0.312px;
    margin-bottom: 40px;
  }
  .tag {
    color: #3ddc97;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; 
  }

  .teamSection {
    padding: 30px 20px;
  }
  .teamSectionHeading {
    color: #3ddc97;
    font-family: Anton;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; 
    letter-spacing: 0.369px;
    margin: 0px 0px;
    text-align: left;
  }
  .teamSectionPara {
    color: #def0de;
    font-family: "Rethink Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin: 10px auto 30px;
    letter-spacing: -0.449px;
    text-align: left;
  }
  .teamScrollWrapper {
    padding: 0px;
  }
  .scrollTrack {
    width: auto;
  }

  .teamCards {
   
    display: block;
  }
  .teamCard {
    width: auto;
    margin-bottom: 16px;
  }
  .highlightedCard {
    width: auto;
  }
  .teamCardImg {
    max-width: 165px;
    height: 165px;
    margin-bottom: 7px;
  }
  .teamCardHeading {
    color: #0099a8;
    text-align: center;
    font-family: Anton;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; 
    letter-spacing: -0.449px;
    margin: 0px;
    text-decoration: none;
  }
  .teamCardPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.312px;
    margin: 0px;
    text-decoration: none;
  }
} */

@media (max-width: 600px) {
  .timelineLine {
    left: 16px;
    top: 50px;
    height: 94%;
  }
  .dot {
    width: 34px;
    height: 34px;
    left: 0px;
  }
  .dot:nth-child(2) {
    top: 50px;
  }
  .dot:nth-child(3) {
    top: 222px;
  }
  .dot:nth-child(4) {
    top: 390px;
  }
  .dot:nth-child(5) {
    top: 565px;
  }
  .dot:nth-child(6) {
    top: 740px;
  }
}

@media (max-width: 575px) {
  .firstRightPara {
    max-width: 350px;
  }
  .dot:nth-child(2) {
    top: 50px;
  }
  .dot:nth-child(3) {
    top: 225px;
  }
  .dot:nth-child(4) {
    top: 400px;
  }
  .dot:nth-child(5) {
    top: 570px;
  }
  .dot:nth-child(6) {
    top: 745px;
  }
  .rightOurStory {
    margin-left: 50px;
  }
}

@media (max-width: 452px) {
  .timelineLine {
    left: 16px;
    top: 50px;
    height: 95%;
  }
  .dot {
    width: 30px;
    height: 30px;
    left: 2px;
  }
  .dot:nth-child(2) {
    top: 40px;
  }
  .dot:nth-child(3) {
    top: 235px;
  }
  .dot:nth-child(4) {
    top: 415px;
  }
  .dot:nth-child(5) {
    top: 610px;
  }
  .dot:nth-child(6) {
    top: 785px;
  }
}

@media (max-width: 400px) {
  .timelineLine {
    left: 16px;
    top: 50px;
    height: 95%;
  }
  .dot {
    width: 30px;
    height: 30px;
    left: 2px;
  }
  .dot:nth-child(2) {
    top: 40px;
  }
  .dot:nth-child(3) {
    top: 242px;
  }
  .dot:nth-child(4) {
    top: 450px;
  }
  .dot:nth-child(5) {
    top: 655px;
  }
  .dot:nth-child(6) {
    top: 850px;
  }
}

@media (max-width: 375px) {
  .timelineLine {
    left: 16px;
    top: 50px;
    height: 95%;
  }
  .dot {
    width: 30px;
    height: 30px;
    left: 2px;
  }
  .dot:nth-child(2) {
    top: 40px;
  }
  .dot:nth-child(3) {
    top: 242px;
  }
  .dot:nth-child(4) {
    top: 450px;
  }
  .dot:nth-child(5) {
    top: 675px;
  }
  .dot:nth-child(6) {
    top: 870px;
  }
}

@media (max-width: 367px) {
  .companySection {
    padding: 30px 20px;
    flex-direction: column-reverse;
    gap: 25px;
    align-items: flex-start;
  }
  .companyImage {
    width: 100%;
    margin-bottom: 40px;
    /* max-width: 270px; */
  }
  .companyTitle {
    font-size: 30px;
    line-height: 34px;
    margin-bottom: 12px;
    text-align: left;
  }
  .companyDescription {
    font-size: 14px;
    margin-bottom: 10px;
    text-align: left;
  }
  .readBtn {
    width: 140px;
    font-size: 14px;
    padding: 2px 12px;
    margin-top: 20px;
  }

  .ourStory {
    /* display: none; */
    flex-direction: column;
    padding: 30px 20px;
  }
  .leftOurStory {
    margin: 0;
    max-width: 100%;
  }
  .leftStoryHeading {
    color: #3ddc97;
    font-family: Anton;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 166.667% */
    letter-spacing: 0.369px;
    margin: 0px;
  }
  .leftStoryPara {
    color: #def0de;
    font-family: "Rethink Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 100% */
    letter-spacing: -0.449px;
    margin: 10px 0px;
  }
  .storyBox {
    width: auto;
    padding: 16px;
    gap: 16px;
  }
  .timelineLine {
    left: 16px;
    top: 50px;
    height: 95%;
  }
  .dot {
    width: 30px;
    height: 30px;
    left: 2px;
  }
  .dot:nth-child(2) {
    top: 45px;
  }
  .dot:nth-child(3) {
    top: 222px;
  }
  .dot:nth-child(4) {
    top: 415px;
  }
  .dot:nth-child(5) {
    top: 610px;
  }
  .dot:nth-child(6) {
    top: 785px;
  }
  .rightOurStory {
    margin-left: 50px;
  }

  .firstRightHeading {
    color: var(--White, #fff);
    font-family: Anton;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 160% */
  }
  .highlightedHeading {
    font-family: Anton;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 90% */
    background: var(
      --tele-grad-1,
      linear-gradient(114deg, #3ddc97 0%, #0099a8 50.94%, #0099a8 99.95%)
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .firstRightPara {
    color: var(--White, #fff);
    font-family: "Rethink Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 100% */
    margin-bottom: 20px;
    max-width: 320px;
  }
  .strategicDiv {
    /* display: none; */
    padding: 10px 20px;
  }
  .strategicHeaderHeading {
    color: #3ddc97;
    text-align: center;
    font-family: Anton;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 166.667% */
    letter-spacing: 0.369px;
    margin: 10px 0px 0px 0px;
  }
  .strategicHeaderPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 100% */
    letter-spacing: -0.449px;
    margin: 10px 0px 30px 0px;
  }
  .strategicCards {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    padding: 10px 0;
  }
  .sCard {
    width: 100%;
    padding: 25px 20px;
  }
  .sideCard {
    opacity: 1;
  }
  /* .centerCard {
    width: auto;
    padding: 25px 20px;
  } */

  .sCardHeading {
    color: #0fa9a4;
    font-family: Anton;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 116.667% */
    letter-spacing: -0.449px;
  }
  .sCardPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 100% */
    letter-spacing: -0.312px;
    margin-bottom: 40px;
  }
  .tag {
    color: #3ddc97;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 80% */
  }

  .teamSection {
    padding: 30px 20px;
  }
  .teamSectionHeading {
    color: #3ddc97;
    font-family: Anton;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px; /* 166.667% */
    letter-spacing: 0.369px;
    text-align: left;
  }
  .teamSectionPara {
    color: #def0de;
    font-family: "Rethink Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin: 0 auto 30px;
    line-height: 14px; /* 100% */
    letter-spacing: -0.449px;
    text-align: left;
  }
  .teamScrollWrapper {
    padding: 0px;
  }
  .scrollTrack {
    width: auto;
  }

  .teamCards {
    /* gap: 16px;
    flex-direction: column;
    align-items: center; */
    display: block;
  }
  .teamCard {
    width: auto;
    margin-bottom: 16px;
  }
  .highlightedCard {
    width: auto;
  }
  .teamCardImg {
    max-width: 163px;
    height: 163px;
    margin-bottom: 7px;
  }
  .teamCardHeading {
    color: #0099a8;
    text-align: center;
    font-family: Anton;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 116.667% */
    letter-spacing: -0.449px;
    margin: 0px;
    text-decoration: none;
  }
  .teamCardPara {
    color: #def0de;
    text-align: center;
    font-family: "Rethink Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.312px;
    margin: 0px;
    text-decoration: none;
  }
}