@font-face {
  font-family: Platypi;
  src: url(../fonts/Platypi/static/Platypi-Regular.ttf);
}

@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins/Poppins-ExtraLight.ttf);
  font-weight: 200; /* more light weight */
}

@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins/Poppins-Light.ttf);
  font-weight: 300; /* light weight */
}

/* Regular */
@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins/Poppins-Regular.ttf);
  font-weight: 400; /* Regular weight */
}

/* Medium */
@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins/Poppins-Medium.ttf);
  font-weight: 500; /* Medium weight */
}

/* Semi-Bold */
@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins/Poppins-SemiBold.ttf);
  font-weight: 600; /* Semi-Bold weight */
}

/* Bold */
@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins/Poppins-Bold.ttf);
  font-weight: 700; /* Bold weight */
}

/* Extra-Bold */
@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins/Poppins-ExtraBold.ttf);
  font-weight: 800; /* Extra-Bold weight */
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins";
  scroll-behavior: smooth;
  /* outline: 1px solid red; */
}

/* * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
} */

body {
  background-color: #f5f7f7;
  /*    background-image: url(../images/lineBackground.png);*/
  overflow-x: hidden;
  cursor: none;
}

.homePageBody {
  background-image: url(../images/lineBackground.png);
}

.cursor-dot,
.cursor-dot-outline {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  z-index: 9999999;
}

.cursor-dot {
  --size-cursor-dot: 8px;
  width: var(--size-cursor-dot);
  height: var(--size-cursor-dot);
  background-color: #0032a0;
  /*    background-color: #f58220;*/
}

.cursor-dot-outline {
  --size-cursor-dot-outline: 40px;
  width: var(--size-cursor-dot-outline);
  height: var(--size-cursor-dot-outline);
  background-color: rgba(174, 191, 255, 0.5);
  /*    background-color: #f5822050;*/
}

/*********************** common classes ***********************/
.container {
  /* padding: 0 80px; */
  padding: 0 70px;
}

.remove-underline {
  text-decoration: none;
}
.m-auto {
  margin: auto;
}
.text-uppercase {
  text-transform: uppercase;
}

/* .customBtn {
  background-color: #7d8cff;
  min-width: 166px;
  border-radius: 29px;
  height: 56px;
  border: none;
  color: white;
  font-weight: 500;
  font-size: 18px;
  cursor: pointer;
}

.customBtn a {
  text-decoration: none;
  color: white;
} */

/*********************** Sidebar ***********************/

#sidebar {
  width: 300px;
  height: 100vh;
  position: fixed;
  left: calc(100vw);
  background: url(../images/lineBg.png), url(../images/sidebarBg.png);
  background-size: cover;
  background-position: center bottom;
  z-index: 545454;
  padding: 20px;
  display: flex;
}

#sidebar > div {
  /* border: 1px solid; */
  width: 100%;
}

#sidebar > div > section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

#sidebar > div > section img:nth-child(2) {
  cursor: pointer;
}

#sidebar .sideLink a {
  display: block;
  color: white;
  text-decoration: none;
  margin: 12px 7px;
  text-transform: capitalize;
}

#sidebar .sideLink-lg a {
  font-size: 16px;
}

#sidebar .sideLink-sm a {
  font-size: 11px;
}

/*********************** Hero Section ***********************/

.mainHero {
  height: fit-content;
  width: 100%;
  /* background-image: url(../images/background.png); */
  /* background-image: url(../images/background2.png); */
  background-image: url(../images/Group\ 1000002141.png);
  background-size: 736px;
  background-position: bottom right;
  background-repeat: no-repeat;
  position: relative;
  padding-bottom: 80px;
}

#gradient-canvas {
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 70%);
  position: absolute;
  /* --gradient-color-1: #aab4ff;
  --gradient-color-2: #d0d6ff;
  --gradient-color-3: #b6c0f8;
  --gradient-color-4: #8f9bf0; */

  /* --gradient-color-1: #99a7ff;
  --gradient-color-2: #cbd4ff;
  --gradient-color-3: #dee3ff;
  --gradient-color-4: #a3afff; */

  --gradient-color-1: #a9baff;
  --gradient-color-2: #d8e0ff;
  --gradient-color-3: #eef1ff;
  --gradient-color-4: #b3c5ff;
}

.mainOverlappedContainer {
  width: 100%;
  height: fit-content;
  position: relative;
}

.mainOverlappedContainer nav {
  padding: 10px 70px 0 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.logoSidebar img {
  cursor: pointer;
  margin-left: 180px;
}

.logoSidebar a {
  text-decoration: none;
  color: black;
  font-size: 0.83rem;
}

.mainHerContent > div {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.mainHerContent > section {
  width: 65%;
  padding: 0 80px;
}

.swiper {
  min-height: 350px;
  width: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
}

.swiper-wrapper {
  display: flex;
  position: absolute;
}

.swiper-slide {
  width: 100vw;
  padding: 10px;
  position: relative;
  overflow: hidden;
}

/* slider-arrows */
.arrow {
  width: 40px;
  height: 40px;
}

#previous-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 50%;
  left: 0;
  cursor: pointer;
}

#next-arrow {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 50%;
  right: 0;
}

.mainHerContent h1 {
  font-size: 4.0625rem;
  font-family: Poppins;
  line-height: 80px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Home Slider  */
.swiper-slide > section {
  padding: 50px;
  /* width: 70%; */
  width: 73%;
}

.swiper-slide > section P {
  font-size: 0.9rem;
}

.swiper-prev,
.swiper-next {
  cursor: pointer;
}

.mainHerContent > section p {
  color: #282e67;
}

/*********************** Capabilities  ***********************/

.Capabilities {
  /* background: linear-gradient(-80deg, #7d8cff 60%, #5867bc 40%); */
  /* background: repeating-linear-gradient(-80deg, #7d8cff 60%, #5867bc 40%); */
  background: url(../images/CapabilitiesBg.png);
  background-size: cover;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* margin-top: 80px; */
}

.Capabilities div {
  flex: 1 1 300px;
  padding: 60px 0;
}

.Capabilities h1,
.Capabilities p {
  color: white;
}

.Capabilities h1 {
  font-size: 2.625rem;
  font-weight: 500;
}

.Capabilities p {
  font-size: 16px;
  /*        line-height: 27.6px;*/
}

/********************** Client Carousel Container ***********************/

.mainContainerWithBg {
  background-image: url(../images/lineBackground.png);
  background-size: contain;
  background-repeat: repeat;
}

.clientContainer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.clientContainer > div {
  flex: 1 1 500px;
  padding: 60px 0;
}

.clientContainer h2 {
  font-size: 2.625rem;
  color: #2a3069;
  font-weight: 500;
}

.clientCarouselContainer {
  /* mask-image: linear-gradient(90deg, #0000 5%, #000 30% 70%, #0000 95%); */
  mask-image: linear-gradient(90deg, #0000 5%, #000 15% 85%, #0000 100%);
  overflow: hidden;
}

.clientCarouselContainerBtn button {
  margin: auto;
}

.clientCarouselContainer :last-child {
  text-align: center;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  margin-bottom: 80px;
  margin-top: 50px;
  /* background: white; */
  white-space: nowrap;
  position: relative;
}

.logos:before,
.logos:after {
  content: "";
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

/* .logos:hover .logos-slide {
  animation-play-state: paused;
} */

.logos-slide {
  display: inline-block;
  animation: 35s slide infinite linear;
}

.logos-slide img {
  width: 120px;
  height: auto;
  margin: 0 40px;
  aspect-ratio: 3/1;
  object-fit: contain;
}

.logos2 {
  overflow: hidden;
  margin-bottom: 100px;
  /* margin-top: 50px; */
  /* background: white; */
  white-space: nowrap;
  position: relative;
}

.logos2:before,
.logos2:after {
  content: "";
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  z-index: 2;
}

.logos2:before {
  left: 0;
  /* background: linear-gradient(to left, rgba(255, 255, 255, 0), white); */
}

.logos2:after {
  right: 0;
  /* background: linear-gradient(to right, rgba(255, 255, 255, 0), white); */
}

.logos2-slide img {
  /* height: 50px; */
  width: 120px;
  height: auto;
  margin: 0 40px;
  aspect-ratio: 3 / 1;
  object-fit: contain;
}

.logos2-slide {
  display: inline-block;
  animation: 40s slide2 infinite linear !important;
}

@keyframes slide2 {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

/*********************** Accelerating ***********************/

.AcceleratingHeadingBox {
  margin: 80px 0;
  display: flex;
  flex-wrap: wrap;
}

.AcceleratingHeadingBox > div {
  flex: 1 1 500px;
}

.AcceleratingHeadingBox h2 {
  font-size: 2.625rem;
  color: #112257;
  font-weight: 500;
}

.AcceleratingContentBox {
  display: flex;
  flex-wrap: wrap;
  gap: 150px;
  overflow: hidden;
}

.AcceleratingContentBox > section {
  flex: 1 1 400px;
}

.AcceleratingContentCard {
  display: flex;
  align-items: end;
  justify-content: space-between;
  border-bottom: 0.82px solid #000000;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.AcceleratingContentBox > section p {
  font-size: 14.8px;
  color: #112257;
  padding-bottom: 20px;
}

.AcceleratingContentBox > section h3 {
  font-size: 4.375rem;
  color: #112257;
  letter-spacing: 2.8px;
  font-family: Platypi;
  font-weight: normal;
  white-space: nowrap;
}

/*********************** Our Expertise ***********************/

.ourExpertise {
  margin-top: 80px;
  overflow: hidden;
}

.ourExpertise h2 {
  font-size: 2.06875rem;
  color: #2a316a;
  font-weight: 600;
  text-align: center;
}

.ourExpertise .borderGroup {
  display: flex;
  justify-content: center;
}

.ourExpertise .borderGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  /* border: 1px solid; */
}

.ourExpertise .borderGrid > div {
  flex: 1 1 200px;
  border: 1px solid;
  padding: 20px;
  border-radius: 33.07px;
}

.ourExpertise .borderGrid h5 {
  color: #2a316a;
  font-size: 15.43px;
  font-weight: 500;
  margin-bottom: 20px;
}

.ourExpertise .borderGrid p {
  font-size: 11px;
}

.borderGroupImg {
  width: 82%;
  height: auto;
}

.borderGrid div:nth-child(1) {
  transform: translateY(-45px);
}

.borderGrid div:nth-child(3) {
  transform: translateY(-45px);
}

.borderGrid div:nth-child(5) {
  transform: translateY(-45px);
}

.securityCompliance {
  overflow: hidden;
}

.securityCompliance > section {
  padding: 80px 0;
}

.securityCompliance h2 {
  font-size: 2.625rem;
  color: #112257;
  font-weight: 500;
  text-align: center;
}

.securityCompliance > section > div {
  width: 50%;
  margin: auto;
}

.securityCompliance .subtext {
  font-size: 16px;
  text-align: center;
}

.securityComplianceContent {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

.securityComplianceContentCard {
  flex: 1 1 308px;
  /* border: 1px solid; */
  padding: 20px;
}

.securityComplianceContentCard h5 {
  font-size: 20px;
  font-weight: 500;
}

.securityComplianceContentCard p {
  font-weight: 300 !important;
}

.securityComplianceContentCard > div {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.supportContainer {
  /* background-image: url(../images/lineBackground.png); */
  background-size: contain;
  background-repeat: repeat;
  background-position: center center;
  /* height: 500px; */
  padding: 0 50px;
}

.supportContainer > section {
  background-image: url("../images/leftCircle.png"),
    url("../images/rightCircle.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: 300px, 300px;
  /* height: 500px; */
  text-align: center;
  padding: 50px 0;
}

.supportContainer h2 {
  font-size: 2.625rem;
  font-weight: 500;
}

.supportContainer p {
  margin: 30px 0;
}
.supportContainer button {
  margin: auto;
}

/*********************** footer ***********************/
/* .footerContainer {
  background-image: url(../images/newFooterBg.png);
  background-size: cover;
  background-color: linear-gradient(
    to right,
    #282e67 50%,
    #424985 75%,
    #373d76 100%
  );
} */
#footerAnimation {
  width: 100%;
  height: auto;
}

#footerAnimationBox {
  display: flex;
  align-items: end;
}

.footerContainer {
  background-image: url(../images/newFooter.png);
  background-size: cover;
}

.footerContainer > section {
  /* padding: 50px 0 0px 0; */
  padding: 20px 0 0px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footerContainer > section div {
  flex: 0 1 auto;
  padding: 20px 0;
  /* border: 1px solid; */
}

.footerContainer > section h2 {
  color: #7d8cff;
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.footerContainer > section p {
  color: #ffffff;
  font-size: 0.9rem;
  letter-spacing: 1px;
  font-weight: 200 !important;
}

.footerContainer .emailLinkBox {
  padding-top: 20px;
}

.footerContainer .emailLink {
  color: #ffb000;
  font-weight: lighter !important;
  text-decoration: none;
}

.footerContainer section p {
  /* margin-bottom: 10px; */
  /* margin-bottom: 6px; */
  margin-bottom: 0px !important;
}

.footerContainer section p a {
  color: #ffffff;
  font-size: 0.9rem;
  /* letter-spacing: 2px; */
  letter-spacing: 1.5px;
  font-weight: 200 !important;
  text-decoration: none;
}

.footerCopyright {
  padding: 30px 0 30px 0;
}

.footerCopyright {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footerCopyright > div {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footerCopyrightBox a {
  /* padding: 0 20px; */
  /* padding-right: 20px; */
  color: white !important;
  font-size: 13px;
  font-weight: 200 !important;
  text-decoration: none !important;
}

.footerCopyrightBox {
  /* padding: 0 20px; */
  /* padding-right: 20px; */
  color: white !important;
  font-size: 13px;
  font-weight: 200 !important;
  text-decoration: none !important;
}

.footerCopyrightBoxBorder {
  width: 1px;
  margin: 0 10px;
  background-color: white;
}

/* .footerCopyrightBoxExtra {
  border-left: 1px solid white;
} */

/*********************** About Page  ***********************/

.missionVisionBox {
  margin-top: 50px;
}

.missionVisionBox h2 {
  font-size: 3.5rem;
  font-weight: 500;
  color: #1d1f1e;
}

.missionVisionBox span {
  color: #7d8cff;
}

.missionVisionBox .textBox {
  width: 80%;
  margin: auto;
  text-align: center;
  margin-bottom: 30px;
}

.expandingCards .cards {
  --cards-text-color: white;
  --cards-closed-size: 5rem;
  --animation-speed-normal: 0.5s;
  --animation-speed-fast: 0.25s;
  display: flex;
  flex-direction: column;
  /* gap: 1rem; */
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
}

.expandingCards .card {
  width: 100%;
  height: var(--cards-closed-size);
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: all var(--animation-speed-normal) ease-in-out;
  cursor: pointer;
  background-color: #333a74;
  display: flex;
}

.expandingCards .card:nth-child(1) {
  background-color: #282e67;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-position-y: 96%;
  background-position-x: 94%;
}

.expandingCards .card:nth-child(2) {
  background-repeat: no-repeat;
  background-position: right bottom;
  background-position-y: 96%;
  background-position-x: 94%;
}

.expandingCards .card:nth-child(3) {
  background-color: #282e67;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-position-y: 96%;
  background-position-x: 94%;
}

.expandingCards .card:nth-child(1)[active] {
  background-image: url(../images/Vision.png);
  background-position-y: 90%;
}

.expandingCards .card:nth-child(2)[active] {
  background-image: url(../images/Mission.png);
  background-position-y: 90%;
}

.expandingCards .card:nth-child(3)[active] {
  background-image: url(../images/Values.png);
  background-position-y: 90%;
}

.expandingCards .card[active] {
  height: fit-content;
  background-color: #cbd1ff;
}

.expandingCards .card__infos {
  align-self: flex-end;
}

.expandingCards .card_desc {
  display: none;
  padding: 30px;
  transition: all 0.5s ease;
}

.expandingCards .card_desc h4 {
  /* font-size: 24px; */
  font-size: 18px;
  font-weight: 400;
}

.expandingCards .card[active] .card_desc {
  font-size: 1.5rem;
  display: block;
  transition: all 0.5s ease;
}

.expandingCards .card__name {
  margin: 0;
  color: var(--cards-text-color);
  /* transform: translateY(0.65rem); */
  transition: all var(--animation-speed-normal) ease-in-out;
  font-size: 1.5rem;
  white-space: nowrap;
}

.expandingCards .card[active] .card__name {
  /* transform: translateY(0); */
  color: black;
}

.aboutPageBody {
  background: none;
}

.scrollAnimation {
  background: url(../images/lineBg.png);
  overflow: hidden;
}

.svg-wrapper {
  display: flex;
  justify-content: center; /* horizontally center */
  align-items: center; /* optional: vertically center */
  width: 100%;
  position: relative;
  /* border: 1px solid; */
  /* mask-image: linear-gradient(0deg, #0000 1%, #000 30% 70%, #0000 95%); */
  mask-image: linear-gradient(
    0deg,
    transparent 0%,
    rgba(0, 0, 0, 1) 4%,
    rgba(0, 0, 0, 1) 96%,
    transparent 100%
  );
}

.scrollAnimation {
  position: relative;
  /* border: 1px solid; */
}

/* #tractor {
  z-index: 12121;
} */

#linesvg {
  display: block;
  margin: 0 auto;
}

#scrollContentBox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 80px;
}

#scrollContentBox > section {
  /* width: 45%; */
  padding: 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 40px;
}

#scrollContentBox > section > div {
  width: 45%;
}

#scrollContentBox h2 {
  font-size: 3rem;
  font-weight: 500;
}

#scrollContentBox span {
  color: #333a74;
}

#scrollContentBox h4 {
  font-size: 2rem;
  font-weight: 500;
  color: #333a74;
}

#scrollContentBox p {
  font-size: 1.125rem;
  font-weight: 400;
  color: #161717;
  line-height: 37.6px;
  margin-top: 50px;
}

#scrollContentBox > div {
  width: 45%;
}

#scrollContentBox .rightDiv {
  margin-left: auto;
}

#scrollContentBox .scrollCard {
  border-radius: 6px;
  overflow: hidden;
  background-color: #d1d5f5;
  margin-bottom: 10px;
  min-height: 200px;
}

#scrollContentBox .scrollCard h6 {
  background-color: #333a74;
  padding: 10px;
  color: white;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

#scrollContentBox .scrollCard p {
  background-color: #d1d5f5;
  margin: 0;
  padding: 20px;
}

/*********************** client search bar ***********************/

.searchBarContainer {
  margin-top: 50px;
}

.searchBarContainer h2 {
  font-size: 3.5rem;
  font-weight: 500;
  color: #1d1f1e;
}

.searchBarContainer span {
  color: #7d8cff;
}

.searchBarContainer .textBox {
  text-align: center;
  margin-bottom: 30px;
}

.searchBarContainer .textBox p {
  margin-top: 5px;
}

.searchBarContainer .searchBarBox {
  display: flex;
  /* width: 80%; */
  margin: auto;
  gap: 10px;
  /* align-items: center; */
  margin-bottom: 80px;
  justify-content: center;
}

.searchBarContainer .searchBarBox section {
  background-color: #d9ddfd;
  padding: 10px;
  /* flex: 1 0 500px; */
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  /* gap: 20px; */
  gap: 15px;
}

.searchBarContainer .searchBarBox section > div {
  /* background-color: white; */
  padding: 7px 15px;
  min-width: 80px;
  text-align: center;
  border-radius: 12px;
  cursor: pointer;
}

.searchBarContainer .searchBarBox section > .activeSearch {
  background: linear-gradient(180deg, #282e67 0%, #7d8cff 100%);
  color: white;
}

.searchBarContainer .searchBarBox > div {
  flex: 0 0 60px;
  background: linear-gradient(180deg, #282e67 0%, #7d8cff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  position: relative;
}

.searchBarContainer .searchBarBox > div img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.clientCardsContainer section {
  /* border: 1px solid; */
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  /* max-width: calc(174px * 6 - 50px); */
  max-width: calc(211px * 6 - 50px);
  /* justify-content: center; */
  margin: auto;
  margin-bottom: 50px;
}

.clientCardsContainer section > div {
  /* border: 1px dotted; */
  flex: 0 1 174px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 174px;
  border-radius: 24px;
  background: #d9ddfd;
  /* cursor: pointer; */
}

.clientCardsContainer section img {
  /* filter: grayscale(100%); */
  transition: all 0.7s ease;
  /* max-width: 120px; */
  max-width: 145px;
  height: auto;
  object-fit: contain;
}

.searchList {
  position: absolute;
  /* left: 0; */
  top: 0;
  right: 65px;
  z-index: 125;
  box-shadow: -12px 0px 23px 0px #00000040;
  overflow: hidden;
  /* border-radius: 12px 12px 0 0; */
  border-radius: 12px;
  transform: scale(0);
  transition: all 0.3s ease-in-out;
}

.searchList.visible {
  transform: scale(1);
}

.searchList .searchListInp {
  background: linear-gradient(180deg, #282e67 0%, #7d8cff 100%);
  width: 100%;
  padding: 13px 15px;
  display: flex;
  gap: 10px;
}

.searchList .searchListInp img {
  width: 20px;
  height: 20px;
}

.searchList .searchListInp input {
  width: 100%;
  background: none;
  border: none;
  color: white;
}

.searchList .searchListInp input::placeholder {
  color: white;
}

.searchList .searchListInp input:focus {
  border: none !important;
  outline: none !important;
}

.searchList .searchListInp input:focus-visible {
  border: none !important;
  outline: none !important;
}

.searchList .list {
  /* max-height: 200px; */
  max-height: 300px;
  min-height: 80px;
  width: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: wrap;
  background-color: white;
}

.searchList li {
  font-size: 12px;
  /* white-space: nowrap; */
  white-space: wrap;
  margin: 10px;
  cursor: pointer;
  list-style: none;
}

.clientImg {
  position: relative;
  overflow: hidden;
}

.clientImg .innerTxt {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  background: linear-gradient(180deg, #282e67 0%, #7d8cff 100%);
  font-size: 10.5px;
  padding: 0 5px;
}

/********************* We Offer Page  ********************/

.weOfferPageBody {
  background: url(../images/twoWhiteBg.png);
  background-position-y: 00px;
  padding: 0 45px 0 70px;
}

.weOfferHead {
  margin-top: 70px;
}

.weOfferHead .weOfferHeadContent h3 {
  font-size: 2.875rem;
  color: #11173b;
  font-weight: 300;
}

.weOfferHead .weOfferHeadContent h2 {
  font-size: 3rem;
  color: #11173b;
  font-weight: 500;
}

.weOfferCards {
  display: flex;
  flex-wrap: wrap;
  /* gap: 20px; */
  gap: 15px;
  margin-top: 70px;
}

.weOfferCards > section {
  /* flex: 0 0 407px; */
  flex: 0 0 402px;
  height: 516px;
  padding: 25px 21px 25px 25px;
  /* padding: 25px 15px 25px 15px; */
  margin-bottom: 30px;
  box-shadow: 0px 4px 4px 0px #00000040;
  position: relative;
  border-radius: 18px;
  background: white;
  transition: all 0.8s ease-in !important;
}

.weOfferCards > section h2 {
  /* font-size: 1.3rem; */
  /* font-size: 24px; */
  font-size: 23px;
  font-weight: 500;
  margin-top: 20px;
  color: #1e1c3f;
  letter-spacing: 0;
}

.weOfferCards > section p {
  font-size: 0.75rem;
  font-weight: 400;
  padding-top: 30px;
  padding-bottom: 60px;
}

.weOfferCards > section div:last-child {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  cursor: pointer;
  position: absolute;
  bottom: 25px;
}

.weOfferCards > section a {
  text-decoration: none;
  color: black;
}

.weOfferCards > section div img:last-child {
  width: 13px;
}

.weOfferCards > section:hover {
  background: linear-gradient(180deg, #7d8cff 0%, #d9ddfd 100%);
}

.weOfferCards > section:hover .glowBox {
  background: transparent !important;
}

.glowBox {
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(closest-side, #d5d9fd, #ffffff);
  /* border: 1px solid; */
}

.glowBox img {
  width: 80% !important;
  /* border: 1px solid; */
}

/* .weOfferCards > section:first-child .glowBox {
  border: 1px solid red;
}
.weOfferCards > section:first-child h2 {
  border: 1px solid red;
}
.weOfferCards > section:first-child p {
  border: 1px solid red;
}
.weOfferCards > section:first-child a {
  border: 1px solid red;
} */

/***************************** login Page *****************************/

.loginPage {
  background: none;
  background-color: #f5f7f7;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

#loginPageWrapper {
  display: flex;
  flex-direction: column;
  /* flex: 1 1 100vh; */
  height: 100vh;
}

.loginMainContainer {
  width: 100%;
  flex: 1 1 100vh;
  /* height: 100vh; */
  display: flex;
  flex-direction: column;
}

.loginMainContainer > div:first-child {
  /* flex: 1 1 100vh; */
  display: flex;
  align-items: center;
}

#loginFooter {
  background: #282e67;
}

#loginFooter > section {
  width: 85%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: white;
  padding: 8px 0;
  text-align: center;
}

#loginFooter > section a {
  color: white;
  font-size: 12px;
  text-decoration: none;
  margin-right: 10px;
}

#loginFooter > section span {
  font-size: 12px;
  margin: auto;
}

#loginMainBox {
  flex: 1;
  /* border: 1px solid; */
  display: flex;
  align-items: center;
  justify-content: center;
}
#loginMainBox > section {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 0 80px 0 80px;
  /* padding: 10px 60px 0 60px; */
  position: relative;
  top: -25px;
}

.rotate-infinite {
  animation: spin 6s linear infinite;
  width: 300px;
}

/* Define the keyframes for rotation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#loginMainBox > section > div {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  /* border: 1px solid; */
}

#loginMainBox > section > div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
}
#loginMainBox > section > div:nth-child(2) img {
  /* width: 60%; */
  /* width: 80%;
  height: auto; */
  margin: auto;
}

#loginForm {
  width: 60%;
  /* position: relative; */
  /* border: 1px solid; */
}

#loginForm h2 {
  font-size: 1.625rem;
  font-weight: 500;
  margin-bottom: 40px;
  /* margin-top: 20px; */
  color: #161717;
}

#loginForm label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #161717;
}

#loginForm input {
  margin-bottom: 30px;
  background-color: #f0f0f0;
  border: none;
  padding: 10px;
  width: 100%;
  border-bottom: 1px solid #787878;
}

#loginForm input:last-child {
  margin-bottom: 10px !important;
}

#loginForm input:focus {
  border: none;
  outline: none;
  border-bottom: 1px solid #787878;
}

/* #loginForm button {
  width: 100%;
  background: linear-gradient(56.68deg, #7d8cff -18.79%, #282e67 83.75%);
  border: none;
  height: 44px;
  border-radius: 16px;
  color: white;
} */

#loginForm button {
  font-size: 12px;
  background: transparent;
  position: relative;
  width: 100%;
  border-radius: 16px;
  height: 44px;
  text-decoration: none;
  cursor: pointer;
  /* border: 1px solid #282e67;  */
  border: 1px solid transparent;
  outline: none;
  overflow: hidden;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: color 0.3s 0.1s ease-out;
  margin: auto;
  margin-top: 20px !important;
}
#loginForm div:last-child {
  margin-top: 8px;
}

#loginForm a {
  text-decoration: none;
  font-size: 13px;
  text-align: center;
}

#loginForm button::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: "";
  border-radius: 50%;
  display: block;
  width: 50em;
  height: 50em;
  left: -8em;
  text-align: center;
  transition: box-shadow 0.5s ease-out;
  z-index: -1;
  background: linear-gradient(56.68deg, #7d8cff -18.79%, #282e67 83.75%);
}

#loginForm button:hover {
  color: #282e67;
  border: 1px solid #282e67;
}
#loginForm button:hover a {
  color: #282e67;
}

#loginForm button:hover::before {
  box-shadow: inset 0 0 0 25em white;
}

/***************************** Investor Relations Page *****************************/

.investorRelationsPage {
  background: none;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

#investorRelationsPageMainContent {
  flex: 1;
  /* border: 1px solid; */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#investorRelationsPageMainContent img {
  width: 100%;
  height: auto;
}

#investorRelationsPageMainContent h2 {
  font-size: 1.5rem;
  font-weight: 500;
  margin-top: 40px;
}

#investorRelationsPageMainContent h6 {
  font-size: 18px;
  font-weight: 400;
  color: #6b6b6b;
}

.investorFooter {
  display: flex;
  /* border: 1px solid; */
  padding: 0 80px;
}

.investorFooter section span {
  margin: 0 !important;
}
.investorFooter section:last-child span {
  margin-left: auto !important;
}

/***************************** Contact Page *****************************/

.contactPage {
  background: none;
}

.contactPage .mainOverlappedContainer {
  background: url(../images/contactSvg.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.contactPage .mainOverlappedContainer .logoSidebar a {
  color: white;
}

.contactPage .mainOverlappedContainer section {
  height: 55vh;
  display: flex;
  justify-content: center;
}

.contactPage .mainOverlappedContainer section h2 {
  font-size: 3.75rem;
  font-weight: 700;
  color: white;
  margin-top: 80px;
}

#contactForm {
  width: 50%;
  margin: auto;
  /* margin-bottom: 150px; */
  margin-bottom: 50px;
}

#contactForm h3 {
  font-size: 3.5rem;
  font-weight: 500;
  color: #1d1f1e;
  text-align: center;
}

#contactForm h3 span {
  color: #7d8cff;
}

#contactForm p {
  color: #161717;
  font-size: 16px;
  text-align: center;
  /* padding: 25px; */
  padding: 18px;
  line-height: 30px;
}

#contactFormInp {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

#contactFormInp div {
  width: 100%;
  /* border: 1px solid; */
}

#contactFormInp div:first-child {
  flex: 1;
  /* border: 1px solid; */
}

#contactFormInp div:nth-child(2) {
  flex: 1;
}
#contactFormInp div:nth-child(3) {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

#contactFormInp input {
  width: 100%;
  border: none;
  background: #f0f0f0;
  padding: 15px;
  border-bottom: 1px solid #787878;
}
#contactFormInp input::placeholder {
  font-style: italic;
}
#contactFormInp textarea::placeholder {
  font-style: italic;
}

#contactFormInp input:focus {
  border: none;
  outline: none;
  border-bottom: 1px solid #787878;
}

#contactFormInp textarea {
  border: none;
  padding: 15px;
  width: 100%;
  outline: none;
  background: #f0f0f0;
  border-bottom: 1px solid #787878;
}

/* #contactFormInp button {
  width: 60%;
  background: linear-gradient(56.68deg, #7d8cff -18.79%, #282e67 83.75%);
  border: none;
  height: 44px;
  border-radius: 16px;
  color: white;
} */

#contactFormInp .formbtn {
  /* border: 1px solid; */
  text-align: center;
}

/***************************** Privacy Policy *****************************/

.privacyPolicyPages {
  overflow-x: hidden;
}
.privacyPolicyPages .mainOverlappedContainer img {
  width: 100px;
  margin-bottom: 20px;
}
.privacyPolicyPages .mainOverlappedContainer .zipnatch {
  width: 120px;
  margin: 10px 0 !important;
}

.PrivacyPolicyBody {
  background-image: url(../images/lineBackground.png);
  padding: 30px 0;
}

.PrivacyPolicyHeading h1 {
  font-size: 2.75rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 30px;
}

.PrivacyPolicyContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 50px;
}

.PrivacyPolicyLeft {
  flex: 1 1 25%;
  background-color: white;
  padding: 20px;
  border: 0.95px solid #939393;
  border-radius: 3.79px;
  position: sticky;
  top: 10px;
}
.PrivacyPolicyLeft a {
  font-size: 15px;
  line-height: 30.33px;
  cursor: pointer;
  text-decoration: none;
  display: block;
  color: black !important;
  text-transform: uppercase;
}

.PrivacyPolicyLeft a::before {
  content: "";
}

.PrivacyPolicyRight {
  flex: 1 1 calc(75% - 50px);
}

.PrivacyPolicyRight > div {
  margin-bottom: 30px;
  overflow: hidden;
}

.PrivacyPolicyRight p {
  color: #363636;
  font-size: 15px;
  text-align: justify;
}
.PrivacyPolicyRight h5 {
  color: #000000;
  font-size: 1.375rem;
  font-weight: 600;
  /* margin: 20px !important; */
}
.PrivacyPolicyRight h4 {
  color: #000000;
  font-size: 1.375rem;
  font-weight: 600;
  /* margin: 20px !important; */
}

.PrivacyPolicyBody ol {
  margin: 20px 0;
}

.PrivacyPolicyBody ol li {
  color: #363636;
  font-size: 15px;
  text-align: justify;
  margin: 10px 20px;
}
.PrivacyPolicyBody ul {
  /* margin: 20px 0; */
  margin: 5px 0 20px 0;
}

.PrivacyPolicyBody ul li {
  color: #363636;
  font-size: 15px;
  text-align: justify;
  margin: 10px 20px;
}

.LegalAdviceBody p {
  margin-bottom: 10px;
}
.LegalAdviceBody .bold {
  font-weight: bold;
  color: black;
}

/* .LegalAdviceBody > .PrivacyPolicyRight div {
  margin-bottom: 100px !important;
} */

.LegalAdviceBody .table-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
}
.LegalAdviceBody table {
  width: 100%;
  border-collapse: collapse;
  position: relative;
}
.LegalAdviceBody .table-sm {
  width: fit-content !important;
  border-collapse: collapse;
}
.LegalAdviceBody table th {
  padding: 15px;
  border: 1px solid lightgray;
  text-align: left !important;
}
.LegalAdviceBody table td {
  padding: 15px;
  border: 1px solid lightgray;
}

/***************************** thankyou-Modal *****************************/

/* Backdrop styling */
#modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 999;
}

/* Modal styling */
#thankyou-Modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 53%;
  height: 58vh;
  transform: translate(-50%, -50%) scale(0);
  background: white;
  padding: 20px;
  border-radius: 16px;
  transition: transform 0.3s ease;
  z-index: 1000;
}

#thankyou-Modal > section {
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid; */
  height: 100%;
}
#thankyou-Modal h5 {
  font-size: 25px;
  font-weight: 500;
}
#thankyou-Modal p {
  font-size: 16px;
}

#thankyou-Modal > section div img {
  /* width: 100%; */
  height: auto;
  position: relative;
  margin-bottom: 30px;
}

#closeModal {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

/* Styles for large tablets/smaller desktops */

@media (max-width: 1348px) {
  #linesvg {
    height: 3000px;
  }
}

@media (max-width: 1280px) {
  .borderGroupImg {
    display: none;
  }

  .ourExpertise .borderGrid {
    justify-content: center;
  }

  .ourExpertise .borderGrid > div {
    flex: 0 0 200px !important;
  }

  .borderGrid div:nth-child(1) {
    transform: none;
  }

  .borderGrid div:nth-child(3) {
    transform: none;
  }

  .borderGrid div:nth-child(5) {
    transform: none;
  }

  .contactPage .mainOverlappedContainer section {
    height: 42vh;
  }
}

@media (max-width: 1229px) {
  .swiper {
    height: 450px;
  }

  .swiper-slide > section {
    width: 80%;
  }

  .mainHerContent > section {
    width: 75%;
  }
}

@media (max-width: 1321px) {
  .searchBarContainer .searchBarBox section {
    flex-wrap: nowrap;
    overflow: auto;
    white-space: nowrap;
    }
    
    .searchBarContainer .searchBarBox section > div {
      min-width: auto !important;
      }
      
      .searchList {
        left: auto;
        width: fit-content;
        }
}

@media (max-width: 1200px) {
  .container {
    padding: 0 20px;
  }

  .contactPage .mainOverlappedContainer section {
    height: 42vh;
  }

  #contactForm {
    width: 65%;
  }

  #loginForm {
    width: 80%;
  }
}

@media (max-width: 1106px) {
  .searchBarContainer .searchBarBox {
    align-items: start;
  }

  .searchBarContainer .searchBarBox > div {
    padding: 15px;
  }

  /* .clientCardsContainer section {
    justify-content: center;
  } */
}

/* Styles for tablets */
@media (max-width: 992px) {
  .container {
    padding: 0 20px;
  }

  .weOfferPageBody {
    background-size: contain;
    background-position: right top;
  }

  .weOfferCards {
    justify-content: center;
  }

  .weOfferCards > section {
    flex: 0 1 350px;
  }

  .searchList {
    right: -50px;
    top: 20px;
  }
}

@media (max-width: 932px) {
  .expandingCards .card[active] .card__infos {
    align-self: flex-end !important;
  }

  .expandingCards .card__infos {
    /* align-self: flex-end; */
    align-self: center;
    padding-left: 20px;
  }
}

@media (max-width: 900px) {
  .swiper-slide > section {
    width: 95%;
  }

  .mainHerContent > section {
    width: 85%;
  }

  .navLink {
    display: none;
  }

  .contactPage .mainOverlappedContainer section {
    height: 40vh;
  }

  #contactForm {
    width: 70%;
  }

  #thankyou-Modal {
    width: 95%;
    height: 40vh;
  }

  #thankyou-Modal section div {
    width: 85%;
    margin: auto;
  }

  #thankyou-Modal h5 {
    font-size: 1.5rem;
    font-weight: 500;
  }
  #thankyou-Modal p {
    font-size: 0.75rem;
  }
}

@media (max-width: 840px) {
  #linesvg {
    height: 3100px;
  }
}

@media (max-width: 820px) {
  #linesvg {
    height: 3200px;
  }
}
/* Styles for mobile landscape */
@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }

  .navLink {
    display: none;
  }

  .mainOverlappedContainer nav {
    padding: 0 10px;
  }

  .mainHero {
    padding-bottom: 20px;
  }

  .mainHerContent > div {
    padding: 0;
  }

  #gradient-canvas {
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 62%);
  }

  .swiper-slide > section {
    width: 100%;
    padding: 30px;
  }

  .mainHerContent h1 {
    font-size: 2.5rem;
    line-height: 60px;
    margin-bottom: 20px;
    /* text-align: center; */
  }

  .Capabilities h1 {
    font-size: 2rem;
  }

  .mainHerContent > section {
    width: 100%;
    padding: 20px;
    text-align: justify;
  }

  /* .clientCarouselContainer {
    mask-image: none;
  } */

  .logos {
    margin-bottom: 30px;
  }

  .logos2 {
    margin-bottom: 30px;
  }

  .logos:before {
    left: 0;
    background: none;
  }

  .logos:after {
    right: 0;
    background: none;
  }

  .logos2:before {
    left: 0;
    background: none;
  }

  .logos2:after {
    right: 0;
    background: none;
  }

  .AcceleratingContentBox {
    gap: 0px;
  }

  .AcceleratingContentBox > section h3 {
    font-size: 2rem;
  }

  .ourExpertise h2 {
    font-size: 2rem;
    margin-bottom: 20px;
  }

  .borderGroupImg {
    display: none;
  }

  .ourExpertise .borderGrid {
    justify-content: center;
  }

  .ourExpertise .borderGrid > div {
    /* flex: 0 0 200px !important; */
    flex: 1 1 200px !important;
  }

  .borderGrid div:nth-child(1) {
    transform: none;
  }

  .borderGrid div:nth-child(3) {
    transform: none;
  }

  .borderGrid div:nth-child(5) {
    transform: none;
  }

  .securityCompliance h2 {
    font-size: 2rem;
  }

  .securityCompliance section > div {
    width: 90%;
    margin: auto;
  }

  .supportContainer br {
    display: none;
  }

  .supportContainer h2 {
    font-size: 2rem;
  }

  .Capabilities {
    padding-bottom: 7px;
    margin: 20px 0;
  }

  .Capabilities div {
    padding: 20px 0;
  }

  .clientContainer > div {
    padding: 20px 0;
  }

  .clientContainer h2 {
    font-size: 2rem;
  }

  .AcceleratingHeadingBox h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 30px;
  }

  .AcceleratingContentCard {
    gap: 10px;
  }

  #contactForm {
    width: 90%;
  }

  .contactPage .mainOverlappedContainer section {
    height: 35vh;
  }

  .contactPage .mainOverlappedContainer section h2 {
    font-size: 2.5rem;
  }

  .weOfferHead .weOfferHeadContent h3 {
    font-size: 2.3rem;
  }

  .weOfferHead .weOfferHeadContent h2 {
    font-size: 2.5rem;
  }

  #contactForm h3 {
    font-size: 2rem;
  }

  #loginForm {
    width: 100%;
  }

  #loginMainBox > section > div:nth-child(2) {
    display: none;
  }

  .searchBarContainer h2 {
    font-size: 2.5rem;
  }

  .contactPage .mainOverlappedContainer section h2 {
    margin-top: 60px;
  }

  .searchList {
    right: 0px;
    top: 20px;
  }

  #linesvg {
    height: 3300px;
  }

  .supportContainer > section {
    background-size: 70px, 70px;
  }

  .securityCompliance > section {
    padding: 80px 0 0 0;
  }

  .footerContainer > section div:first-child {
    width: 75%;
  }

  .footerCopyright > div {
    gap: 0;
  }

  .footerCopyrightBox {
    padding: 5px;
  }

  .missionVisionBox h2 {
    font-size: 2.5rem;
  }

  .missionVisionBox h2 br {
    display: none;
  }

  /* svg */
  #linesvg {
    display: none;
  }

  #scrollContentBox {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 80px;
    padding-bottom: 80px;
  }

  #scrollContentBox > section {
    display: block;
    margin: 0;
    padding: 0;
  }

  #scrollContentBox > section > div:first-child {
    width: 100%;
    margin-bottom: 20px;
  }

  #scrollContentBox h2 {
    font-size: 2.5rem;
  }

  #scrollContentBox h4 {
    font-size: 2rem;
  }

  #scrollContentBox .rightDiv {
    margin: 0;
  }

  #scrollContentBox .scrollCard {
    margin: 0;
    width: 100%;
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 932px) {
  .expandingCards .cards {
    max-width: 95%;
    margin: 0 auto;
    flex-direction: row;
  }

  .expandingCards .card {
    width: var(--cards-closed-size);
    /* height: 75vh; */
    height: 73vh;
    flex: 0 0 var(--cards-closed-size);
  }

  .expandingCards .card[active] {
    width: 100%;
    /* height: 75vh; */
    height: 73vh;
    flex: 1 0 calc(100% - 20rem);
  }

  /* .expandingCards .card__infos {
    transform: rotate(-90deg) translate(5rem, -1.6rem);
  } */
  .expandingCards .card__infos1 {
    /* transform: rotate(-90deg) translate(5rem, -1.6rem); */
    transform: rotate(-90deg) translate(4.2rem, -0.8rem);
  }
  .expandingCards .card__infos2 {
    transform: rotate(-90deg) translate(5rem, -1.6rem);
  }
  .expandingCards .card__infos3 {
    transform: rotate(-90deg) translate(5rem, -1.3rem);
  }

  /* .expandingCards .card[active] .card__infos {
    transform: rotate(-90deg) translate(5rem, 0);
  } */
  .expandingCards .card[active] .card__infos1 {
    transform: rotate(-90deg) translate(4.2rem, -0.8rem);
  }
  .expandingCards .card[active] .card__infos2 {
    transform: rotate(-90deg) translate(4.8rem, -0.8rem);
  }
  .expandingCards .card[active] .card__infos3 {
    transform: rotate(-90deg) translate(4.8rem, -0.8rem);
  }
}

@media screen and (max-width: 900px) {
  .PrivacyPolicyContainer {
    display: block;
  }
  .PrivacyPolicyLeft {
    position: relative;
    flex: 1 !important;
    width: 100%;
    margin-bottom: 30px;
  }
  .PrivacyPolicyRight {
    position: relative;
    flex: 1 !important;
    width: 100%;
  }
}

@media (max-width: 932px) {
  .expandingCards .card[active] {
    display: block;
  }

  .expandingCards .card[active] .card__infos {
    /* transform: rotate(-90deg) translate(2rem, 0); */
    width: fit-content;
    padding: 22px;
  }

  .expandingCards .card_desc h4 {
    font-size: 1rem;
  }

  .expandingCards .card:nth-child(1) {
    background-position: right top;
    background-size: 50%;
    background-position-y: 20px;
    background-position-x: 94%;
  }
  .expandingCards .card:nth-child(2) {
    background-position: right top;
    background-size: 50%;
    background-position-y: 20px;
    background-position-x: 94%;
  }
  .expandingCards .card:nth-child(3) {
    background-position: right top;
    background-size: 50%;
    background-position-y: 20px;
    background-position-x: 94%;
  }
}

@media (max-width: 707px) {
  /* #linesvg {
    display: none;
  }
  #scrollContentBox {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 80px;
  } */
}

/* Styles for small mobile phones */
@media (max-width: 576px) {
  /* .contactPage .mainOverlappedContainer section {
    height: 30vh;
  } */

  .LegalAdviceBody .table-wrapper {
    overflow: hidden;
    width: 100%;
  }
  .LegalAdviceBody .table-wrapper table thead {
    display: none;
  }
  .LegalAdviceBody .table-wrapper tr {
    margin-bottom: 20px;
    display: block;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ccc;
  }
  .LegalAdviceBody .table-wrapper td {
    border: 1px solid #ccc;
    display: block;
  }
  .LegalAdviceBody .table-wrapper td:first-child::before {
    content: "Role : ";
    font-weight: bold;
  }
  .LegalAdviceBody .table-wrapper td:nth-child(2)::before {
    content: "Responsibilities : ";
    font-weight: bold;
  }
  .LegalAdviceBody .table-wrapper td:last-child::before {
    content: "Position/Individual : ";
    font-weight: bold;
  }
}

@media (max-width: 418px) {
  .clientCardsContainer section {
    gap: 15px !important;
  }
}
@media (max-width: 403px) {
  .clientCardsContainer section > div {
    /* gap: 15px !important; */
    flex: 0 1 150px;
    height: 150px;
  }
}

#openSearchBar {
  /* display: none; */
}

.error-message {
  font-size: 13px;
  color: red;
}
.formbtn button {
  cursor: pointer;
}

#errorMessage {
  display: none;
  font-size: 13px;
  color: red;
}

.customBtn {
  font-weight: 500;
  font-size: 18px;
  background: transparent;
  position: relative;
  min-width: 166px;
  border-radius: 29px;
  height: 56px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #7d8cff;
  outline: none;
  overflow: hidden;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: color 0.3s 0.1s ease-out;
}

.customBtn a {
  text-decoration: none;
  color: white;
}

.customBtn::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: "";
  border-radius: 50%;
  display: block;
  width: 20em;
  height: 20em;
  left: -5em;
  text-align: center;
  transition: box-shadow 0.5s ease-out;
  z-index: -1;
  background-color: #7d8cff;
}

.customBtn:hover {
  color: #7d8cff;
  border: 1px solid #7d8cff;
}
.customBtn:hover a {
  color: #7d8cff;
}

.customBtn:hover::before {
  /* box-shadow: inset 0 0 0 10em rgba(88, 101, 242, 1); */
  box-shadow: inset 0 0 0 10em white;
}

/* 
.ml2 .word {
  display: inline-block;
  line-height: 1em;
} */

.ml2 .word {
  display: inline-block;
  white-space: nowrap; /* Keep letters in a word together horizontally */
}

.ml2 .letter {
  display: inline-block;
  line-height: 1em;
}

#contactFormInp button {
  font-size: 12px;
  background: transparent;
  position: relative;
  width: 60%;
  border-radius: 16px;
  height: 44px;
  text-decoration: none;
  cursor: pointer;
  /* border: 1px solid #282e67; */
  border: 1px solid transparent;
  outline: none;
  overflow: hidden;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: color 0.3s 0.1s ease-out;
  margin: auto;
}

#contactFormInp button a {
  text-decoration: none;
  color: white;
}

#contactFormInp button::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: "";
  border-radius: 50%;
  display: block;
  width: 50em;
  height: 50em;
  left: -8em;
  text-align: center;
  transition: box-shadow 0.5s ease-out;
  z-index: -1;
  background: linear-gradient(56.68deg, #7d8cff -18.79%, #282e67 83.75%);
}

#contactFormInp button:hover {
  color: #282e67;
  border: 1px solid #282e67;
}
#contactFormInp button:hover a {
  color: #282e67;
}

#contactFormInp button:hover::before {
  box-shadow: inset 0 0 0 25em white;
}

/* .otherPolicy {
  background-image: url(../images/lineBackground.png);
  background-size: cover;
  background-repeat: repeat-y;
  padding: 0 30px;
}

.otherPolicy .mainOverlappedContainer {
  margin-bottom: 20px;
}

.otherPolicy h4 {
  color: #000000;
  font-size: 1.375rem;
  font-weight: 600;
}
.otherPolicy strong {
  font-weight: 600;
}

.otherPolicy p {
  color: #363636;
  font-size: 15px;
  text-align: justify;
}
.otherPolicy li {
  color: #363636;
  font-size: 15px;
  text-align: justify;
}

.otherPolicy .container section {
  margin-bottom: 30px;
}
.otherPolicy .container div {
  margin-bottom: 15px;
}

.otherPolicy .mainOverlappedContainer img {
  width: 120px;
  margin-bottom: 20px;
} */

.highlightClientLogo {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  transition: outline 0.3s ease;
  animation: beat 1s infinite alternate;
}

@keyframes beat {
  to {
    transform: scale(1.05);
  }
}