body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
  scroll-padding-top: 100px; /* adjust based on your header height */
}
@font-face {
  font-family: Gilgan-Font;
  src: url("../images/fonts/gilgan/Gilgan.otf");
}
@font-face {
  font-family: Gilgan;
  src: url("../images/fonts/gilgan/Gilgan-Regular.otf");
}
@font-face {
  font-family: Nunito-Font;
  src: url("../images/fonts/mixed-fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC\,opsz\,wdth\,wght.ttf");
}
@font-face {
  font-family: Nunito Sans;
  src: url("../images/fonts/mixed-fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC\,opsz\,wdth\,wght.ttf");
}
.text-warning-loader {
  color: #f3802c;
}
.text-success-loader {
  color: #672fc7;
}
.text-danger-loader {
  color: #c12cf3;
}

/* svg animation */
#card-flip {
  transform-origin: center;
  animation: infiniteFlip 5s infinite ease-in-out;
}

@keyframes infiniteFlip {
  0% {
    transform: rotateY(0deg) rotate(5.43178deg);
  }
  45% {
    transform: rotateY(180deg) rotate(5.43178deg);
    opacity: 0;
  }
  90% {
    transform: rotateY(360deg) rotate(5.43178deg);
  }
  100% {
    transform: rotateY(360deg) rotate(5.43178deg);
  }
}

@keyframes drawPath {
  0% {
    stroke-dashoffset: 1000;
  }
  30% {
    stroke-dashoffset: 500;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

#curved-aero {
  transform-origin: 247px 37px; /* starting point of the path (inner left) */
  animation: rotateAero 3s infinite ease-in-out;
}

@keyframes rotateAero {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg); /* rotate outward to the right */
  }
  100% {
    transform: rotate(0deg); /* return back to original */
  }
}

#glimmer-wrapper {
  position: relative;
}

#loop-border {
  animation: glimmer-loop 2s linear infinite;
  filter: drop-shadow(0 0 1px #6d36cc);
}

@keyframes glimmer-loop {
  0% {
    transform: translate(432px, 375.043px);
  } /* Top-left */
  25% {
    transform: translate(498px, 375.043px);
  } /* Top-right */
  50% {
    transform: translate(498px, 393.043px);
  } /* Bottom-right */
  75% {
    transform: translate(432px, 393.043px);
  } /* Bottom-left */
  100% {
    transform: translate(432px, 375.043px);
  } /* Back to top-left */
}
/* svg animation */

/* dropdown style */
.navbar-expand-lg .navbar-nav {
  .dropdown-menu {
    position: absolute;
    margin-left: -14.5rem;
    width: 920px;
    font-size: 16px;
    font-family: "Nunito Sans";
    height: auto;
    margin-top: 1rem;
    border: 0 !important;
    background-color: #fff;
    border-radius: 8px;
    padding: 30px 12px;
    box-shadow: 0px 4px 22px 0px #0000000d;


    li{
      padding: 0px;
      overflow: hidden;
    }

    li.col-md-4 > div{
      padding: 10px;
    }

    li div:hover{
      background: #E8EFF6;
    }
    li:hover{
      border-radius: 8px;
      background: #E8EFF6;
    }
    .dropdown-item {
      span {
        font-family: Urbanist;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #524f5f;
      }
      p {
        font-family: DM sans;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
        color: #3a3842;
        margin-top: 0.5rem;
      }
      &:hover {
        background-color: #fff;
      }
    }
    .info-tab {
      height: 44px;
      gap: 10px;
      border-radius: 12px;
      padding-top: 10px;
      padding-right: 80px;
      padding-bottom: 10px;
      padding-left: 80px;
      max-width: 840px;
      margin: 1.5rem auto 0 auto;
      background: var(--Active, #f3f5fb);
      margin-top: 1.5remrem;
      span {
        font-family: DM sans;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0%;
        color: #3a3842;
      }
      a {
        font-family: Urbanist;
        font-weight: 600;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
        text-decoration: underline;
        text-decoration-style: solid;
        text-decoration-offset: 0%;
        text-decoration-thickness: 1px;
        text-decoration-skip-ink: auto;
        color: #131E29;
        margin-left: 0.5rem;
      }
    }
  }
  .dropdown-menu.show {
    display: flex;
  }
}
/*dropdown style end  */

.dropdown-toggle::after {
  background-image: url("../images/chevron-down.svg");
  position: absolute;
  top: 14px;
  width: 10px;
  height: 14px;
  z-index: 99;
  background-repeat: no-repeat;
  border: 0;
}
.hero-sub-title {
  font-family: Urbanist;
  font-weight: 700;
  font-size: 18px;
  line-height: 125%;
  letter-spacing: -2%;
  text-transform: uppercase;
  color: #526575;
  margin-bottom: 0;
  text-align: center;
}
.screen-sec {
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
  position: relative;
  /* overflow: hidden; */
  z-index: auto !important;
}
.screen-sec::before {
  content: "";
  background: url("../images/Frame 1618874307.png") no-repeat center right;
  background-size: 70vw;
  opacity: 0.2; /* adjust opacity as needed */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
}

.sticky-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999 !important;
  background-color: white !important; /* or your header bg */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: auto;
  padding: 1rem 5rem;
  margin-top: 0 !important;
  /* transition: all 0.3s ease-in-out;*/

}
/* Preserve space so page doesn't jump */
/* .placeholder-header {
  height: 90px; 
} */

header {
  .top-header {
    .div {
      background: linear-gradient(
        92.54deg,
        #e5d7fa 4.74%,
        #f0ddfd 51.3%,
        #e7f2f7 97.87%
      );
      padding: 12px 16px;
      border-radius: 12px;
      p {
        font-family: Gilgan-Font;
        font-weight: 400;
        font-size: 16px;
        line-height: 125%;
        letter-spacing: 0%;
        color: #000;
        span {
          opacity: 0.6;
        }
        a {
          font-family: Gilgan-Font;
          font-weight: 400;
          font-size: 16px;
          line-height: 125%;
          color: #000;
        }
      }
    }
  }
  .main-header {
    .navbar-nav {
      .nav-link {
        font-family: Urbanist;
        font-weight: 600;
        font-size: 16px;
        line-height: normal;
        letter-spacing: 0%;
        color: #131e29;
      }
    }
  }
}

.main-header .navbar-nav .nav-link.active {
  color: #672FC7 !important;
}

.btn-normal {
  min-width: 115px;
  height: 44px;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 62px;
  border-width: 1px;
  color: #524f5f;
  border: 1px solid #131E29;
  font-family: Urbanist;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
}
.btn-play {
  min-width: auto;
  height: 44px;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 118px;
  border-width: 2px;
  font-family: Urbanist;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  font-size: 16px;
  /* color: #672FC7; */
  color: white;
  border: 2px solid transparent;
  /* background: linear-gradient(white, white) padding-box, linear-gradient(92.54deg, #6E36BE 4.74%, #CB91F2 51.3%, #4CC3F9 97.87%) border-box; */
  background: #131e29;
}

.btn-play:hover {
  color: black;
  background-color: white;
  border: 1px solid black;
}
.btn-normal:hover {
  color: white;
  background-color: #131E29;
  /* border: 1px solid black; */
}
.btn-normal:hover img{
  filter: brightness(0) invert(1);
  /* background-color: black; */
  /* border: 1px solid black; */
}


.btn-play:hover .play-button {
  content: url("../images/solid-play-btn.svg");
  width: 20px;
  height: 20px;
}

.hero-section {
  padding-bottom: 70px;
  .hero-title {
    font-family: Urbanist;
    font-weight: 700;
    font-size: 64px;
    line-height: 120%;
    letter-spacing: -0.72px;
    color: #131E29;
    /* text-transform: capitalize; */
    font-style: normal;
    font-feature-settings: 'liga' off, 'clig' off;
    text-align: center;

    span {
      color: #672fc7;
    }
  }
  .hero-content {
    font-family: "DM sans";
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0%;
    color: #3a3842;
    text-align: center;
  }
  .list-group-item{
    display: flex;
    align-items: start;
    gap: 8px;
  }
}
.integration-sec {
  padding: 4rem 0;
  background-color: #ffffff;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
  margin-bottom: -50px;
  position: relative;
  /* z-index: 9; */
  p {
    font-family: Urbanist;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: center;
    color: #524f5f;
  }
  h2 {
    font-family: Urbanist;
    font-weight: 600;
    font-size: 36px;
    line-height: 125%;
    letter-spacing: -0.72px;
    color: #27252c;
    margin-bottom: 0;
  }
  img {
    /* filter: grayscale(100%); */
    transition: 0.7s all;
  }
  img:hover {
    filter: grayscale(0%);
  }
}

.key-feature-sec {
  padding: 5rem 0;
  /* background: linear-gradient(180deg, #E9EDF5 0%, #FBFCFF 100%); */
  background: linear-gradient(
    0deg,
    #ffe09a -208.44%,
    #fff4dd -24.54%,
    #fff 105.18%
  );
  /* border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px; */
  margin-bottom: 1rem;

  p {
    font-family: Urbanist;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: left;
    color: #524f5f;
  }
  h2 {
    font-family: Urbanist;
    font-weight: 600;
    font-size: 36px;
    line-height: 125%;
    letter-spacing: -1px;
    color: #27252c;
  }
  .swiper-sec {
    h6 {
      font-family: Urbanist;
      font-weight: 600;
      font-size: 24px;
      line-height: 125%;
      letter-spacing: 0;
      color: #524f5f;
      margin-bottom: 20px;
    }
    p {
      font-family: "DM sans";
      font-weight: 400;
      font-size: 16px;
      line-height: 25px;
      letter-spacing: 0;
      color: #3a3842;
    }

    .swiper-slide {
      width: 80%;
      border-radius: 16px;
      /* border: 1px solid #D9D8DF; */
      background: #fff;
      padding: 20px;
      .list-content {
        li {
          font-size: 16px;
          font-family: DM sans;
          margin-bottom: 14px;
        }
      }
      .slide-item {
        .col:last-child {
          text-align: end;
        }
      }
    }
  }
  .swiper-buttons {
    z-index: 1 !important;
    top: 59px;
    right: 50px;
    display: flex;
    flex-direction: row;
    gap: 1rem;

    .swiper-button-prev,
    .swiper-button-next {
      width: 40px;
      height: 40px;
      border-width: 1px;
      border-radius: 40px;
      padding: 8px;
      border: 1px solid #524f5f;
    }
    .swiper-button-prev:after,
    .swiper-button-next:after {
      font-size: 16px;
      color: #524f5f;
    }
  }
}

.key-feature-sec .swiper-slide:nth-child(odd) {
  border: 2px solid #E1E3FE; /* Purple */
}

.key-feature-sec .swiper-slide:nth-child(even) {
  border: 2px solid #D6EFFF; /* Red */
}
.synopsis-sec {
  /* background-color: #FFFFFF; */
  padding: 5rem 0;
  margin-bottom: 3rem;
  p.title-syn {
    font-family: Urbanist;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    text-align: start;
    color: #524f5f;
  }
  h2.heading-syn {
    font-family: Urbanist;
    font-weight: 600;
    font-size: 36px;
    line-height: 125%;
    letter-spacing: -0.72px;
    color: #27252c;
  }
  p.para-syn {
    font-family: DM sans;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0;
    color: #3a3842;
  }
  .card {
    /* background: linear-gradient(180deg, #e9edf5 0%, #fbfcff 100%); */
    background-color: #FAFAFA;
    border-radius: 20px;
    padding: 24px;
    border: 0.944px solid rgba(224, 224, 224, 0.50);
    height: 532px;

    .img-area {
      background-color: #FFFFFF;
      text-align: center;
      min-height: 148px;
      gap: 10px;
      padding: 14px 0;
      border-radius: 12px;
      /* height: 299px; */
    }
    .content-area {
      margin-top: 24px;
      img{
        height: 24px;
      }
      h6 {
        font-family: Gilgan-Font;
        font-weight: 400;
        font-size: 18px;
        line-height: 25px;
        letter-spacing: 0px;
        color: #524f5f;
      }
      p {
        font-family: DM sans;
        font-weight: 400;
        font-size: 18px;
        line-height: 25px;
        letter-spacing: 0;
        color: #524f5f;
        margin-top: 16px;
        b {
          font-family: Urbanist;
          font-weight: 600;
          color: #1f1e1e;
        }
      }
      a {
        font-family: Gilgan-Font;
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0;
        color: #524f5f;
      }
    }
  }
}

.use-case-sec {
  padding-bottom: 5rem;
  background: linear-gradient(
    1deg,
    #75c0f5 -314.13%,
    #fbfdff 68.35%,
    #fff 107.14%
  );
  .use-case-text-area {
    max-width: 820px;
    margin: auto;

    p.title {
      font-family: Urbanist;
      font-weight: 500;
      font-size: 16px;
      line-height: 100%;
      letter-spacing: 0px;
      text-align: center;
      color: #524f5f;
    }
    h2.heading {
      font-family: Urbanist;
      font-weight: 600;
      font-size: 36px;
      line-height: 125%;
      letter-spacing: -0.72px;
      color: #27252c;
    }
    p.para {
      font-family: DM sans;
      font-weight: 400;
      font-size: 18px;
      line-height: 25px;
      letter-spacing: 0;
      color: #3a3842;
      margin-top: 2rem;
      padding: 0 3rem;
    }
  }

  .tabs-sec {
    margin-top: 4rem;
    .nav-tabs {
      max-width: 650px;
      margin: auto;
      border-bottom: 2px solid transparent; /* Ensures the border is visible */
      border-bottom-width: 2px; /* Explicitly setting bottom border */
      background: transparent padding-box,
        linear-gradient(9.54deg, #d7c3f3 0.74%, #cb91f2 51.3%, #e0c8f0 9.87%)
          border-box;
      border-image: linear-gradient(
        9.54deg,
        #d7c3f3 0.74%,
        #cb91f2 51.3%,
        #e0c8f0 9.87%
      );
      border-image-slice: 1;
      color: #000; /* Adjust text color as needed */
      cursor: pointer;
      background-clip: padding-box, border-box;

      .nav-link {
        margin-bottom: -2px;
        font-family: Gilgan;
        font-weight: 300;
        font-size: 16px;
        line-height: 25px;
        letter-spacing: 0;
        color: #918fa1;
        border: 2px solid transparent;
      }
      .nav-link.active {
        min-width: 88px;
        min-height: 36px;
        gap: 8px;
        padding-top: 7px;
        padding-right: 16px;
        padding-bottom: 8px;
        padding-left: 16px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-top-width: 2px;
        border-right-width: 2px;
        border-left-width: 2px;
        border: 2px solid transparent;
        /* border-bottom: 0; */
        background: linear-gradient(white, white) padding-box,
          linear-gradient(
              92.54deg,
              #6e36be 4.74%,
              #cb91f2 51.3%,
              #4cc3f9 97.87%
            )
            border-box;
        color: #0e2945;
        font-size: 16px;
        line-height: 25px;
        margin-top: 1px;
      }
      .nav-link:hover {
        min-width: 88px;
        min-height: 36px;
        gap: 8px;
        padding-top: 7px;
        padding-right: 16px;
        padding-bottom: 8px;
        padding-left: 16px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-top-width: 2px;
        border-right-width: 2px;
        border-left-width: 2px;
        border: 2px solid transparent;
        background: linear-gradient(white, white) padding-box,
          linear-gradient(
              92.54deg,
              #6e36be 4.74%,
              #cb91f2 51.3%,
              #4cc3f9 97.87%
            )
            border-box;
        color: #0e2945;
        font-size: 16px;
        line-height: 25px;
        margin-top: 1px;
      }
    }

    .tabs-content-area {
      display: flex;
      flex-direction: column;
      position: relative;
      padding-left: 1.5rem;
      h6 {
        font-family: Urbanist;
        font-weight: 600;
        font-size: 16px;
        line-height: 25px;
        letter-spacing: 0;
        color: #27252c;
      }
      p {
        font-family: DM sans;
        font-weight: 400;
        font-size: 18px;
        line-height: 25px;
        letter-spacing: 0px;
        color: #3a3842;
      }
      .active-area {
        background-color: #f6f6fc00;
        border-radius: 12px;
        padding: 12px;
        cursor: pointer;
        .btn-show {
          display: none !important;
        }
      }
      .active-area.active {
        background: linear-gradient(231deg, #e6f1fa 9.61%, #fff 172.04%);
        border-radius: 12px;
        padding: 12px;
        .btn-show {
          display: block !important;
        }
      }
    }

    .tabs-content-area {
      .active-area.active {
        position: relative;
      }
      .active-area.active::before {
        border-radius: 50px;
        top: 0;
        height: 100%;
        z-index: 1;
        content: "";
        position: absolute;
        left: -1.5rem;
        border: 2px solid transparent;
        border-image: linear-gradient(to bottom, #fafdff, #86ccff);

        border-image-slice: 1;
        color: #000;
        cursor: pointer;
        background-clip: padding-box, border-box;
      }
    }

    .tabs-content-area::after {
      content: "";
      position: absolute;
      left: 0;
      border: 2px solid transparent;

      border-radius: 20px;
      top: 0%;
      left: 1px;
      height: 85%;
      border-width: 1px;
      border-image: linear-gradient(180deg, #bedfff);
      border-image-slice: 1;
      background-clip: padding-box, border-box;
    }
  }

  .contact-sec {
    gap: 24px;
    border-radius: 20px;
    padding: 24px;
    /* background-color: #FFFFFF; */
    background: linear-gradient(
      7deg,
      #d5c6ef -15.37%,
      #f8f8ff 35.53%,
      #fff 98.66%
    );
    max-width: 1180px;
    margin: auto;
    margin-top: 4rem;
    h2 {
      font-family: Urbanist;
      font-weight: 600;
      font-size: 28px;
      line-height: 35px;
      letter-spacing: -0.72px;
      text-align: center;
    }
    label {
      font-family: DM sans;
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0%;
      color: #524f5f;
    }
    input,
    select {
      height: 44px;
      gap: 10px;
      border-width: 1px;
      border-radius: 8px;
      padding: 12px;
      border: 1px solid #D9D8DF;
      min-width: 250px;
    }

    input::placeholder {
      font-family: DM sans;
      font-weight: 400;
      font-size: 14px;
      line-height: 100;
      letter-spacing: 0;
      color: #b8b6c3;
    }
  }
}

textarea::placeholder {
  font-family: Nunito-Font;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  color: #b8b6c3 !important;
}
.use-case-sec.development-sec {
  /* background: linear-gradient(180deg, #E9EDF5 0%, #FBFCFF 100%); */
  background: linear-gradient(
    1deg,
    #75c0f5 -314.13%,
    #fbfdff 53.83%,
    #fff 91.14%
  );
  padding: 5rem 0;

  .dev-card {
    /* background-color: #ffffff; */
    /* min-height: 239px; */
    background: linear-gradient(1deg, #75C0F5 -314.13%, #FBFDFF 68.35%, #FFF 107.14%);
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 10px;
    border-radius: 16px;
    padding: 20px 30px;
    height: 100%;
    .dev-content {
      margin-top: 42px;
      p {
        font-family: DM sans;
        font-weight: 400;
        font-size: 18px;
        margin-bottom: 0;
        color: #3a3842;
        font-style: normal;
        line-height: normal;
      }
    }
  }
}
.footer-sec {
  padding-top: 64px;
  padding-right: 80px;
  padding-bottom: 32px;
  padding-left: 80px;
  background-color: #131E29;
  color: #ffffff;
  img {
    filter: grayscale(100%);
    transition: 0.7s all;
  }
  img:hover {
    filter: grayscale(0%);
  }
  p {
    font-family: Urbanist;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
    max-width: 240px;
    margin: 1rem 0;
    /* color: #B8B6C3; */
  }
  h6 {
    color: #fff;
    font-family: Urbanist;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  ul {
    li {
      padding-bottom: 0;
      a {
        color: #fff;
        font-family: Urbanist;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
      }
    }
  }
  .copyright p {
    max-width: 100%;
    /* color: #B8B6C3; */
    margin-top: 2rem;
  }
}

/* products page */

.integration-sec.overview-workflow {
  .integration-contents {
    p {
      font-family: DM Sans;
      line-height: 22px;
      margin-bottom: 0rem;
    }
  }
}
.synopsis-sec.how-our-workflow {
  .content-area {
    p {
      margin-bottom: 0;
    }
  }
}

.key-feature-sec.why-choose-workflow {
  .swiper-sec {
    .swiper-slide {
      width: 369px;
      /* min-height: 321px; */
      padding: 30px;
      gap: 10px;
      border-radius: 16px;
      .workflow-slide-item {
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-between; */
        gap: 52px;
        align-content: space-between;
        flex-direction: column;
        min-height: 240px;

        .num-div {
          width: 60px;
          height: 60px;
          padding: 10px;
          gap: 10px;
          border-radius: 50px;
          border-width: 1px;
          border: 1px solid #f2f1ff;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: Gilgan;
          font-weight: 400;
          font-size: 20px;
          line-height: 100%;
          letter-spacing: 0%;
          text-align: center;
          color: #524f5f;
        }
        h6 {
          font-family: Urbanist;
          font-weight: 600;
          font-size: 24px;
          line-height: 28px;
          letter-spacing: 0%;
          color: #131e29;
          margin-bottom: 16px;
        }
        p {
          font-family: DM sans;
          font-weight: 400;
          font-size: 16px;
          line-height: 25px;
          letter-spacing: 0%;
          color: #3a3842;
          margin-bottom: 0;
        }
      }
    }
  }
}

.accordion-button.collapsed::after {
  background-image: url("../images/products/add-circle.svg");
  background-repeat: no-repeat;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("../images/products/minus-cirlce.svg");
}

.accordion-button:not(.collapsed) {
  background-color: #f3f5fb;
  font-family: Urbanist;
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0;
  color: #524f5f;
  box-shadow: unset;
}
.accordion-button.collapsed {
  font-family: Urbanist;
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0;
  color: #524f5f;
  border-top: 1px solid #f3f5fb;
  border-radius: 12px !important;
}
.accordion-item {
  border-radius: 12px !important;
  border: 1px solid #f3f5fb;
  overflow: hidden;
}
.accordion-item .accordion-button:not(.collapsed) {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.accordion-collapse {
  background-color: #f3f5fb;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  p {
    font-family: "Gilgan";
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #525252;
  }
}

.faq-header {
  p {
    font-family: Urbanist;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    color: #524f5f;
  }
  .faq-para {
    margin-top: 1.5rem;
    p {
      font-family: DM sans;
      font-weight: 400;
      font-size: 18px;
      line-height: 24px;
      letter-spacing: 0%;

      span {
        font-family: DM sans;
        font-weight: 500;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 0%;
      }
      span.challange {
        color: #ea4d4d;
      }
      span.solution {
        color: #13AA52;
      }
    }
  }
  h2 {
    color: #131e29;
    font-family: Urbanist;
    font-size: var(--Reg-Font-2, 36px);
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 45px */
    letter-spacing: -0.72px;
  }
}
.integration-sec.overview-workflow.overwiew-form-builder,
.integration-sec.overview-workflow.batch-processing {
  margin-bottom: 0;
}
.solution-content.plateform-overview-content {
  h6 {
    font-family: Urbanist;
    font-weight: 600;
    font-size: 24px;
    line-height: 125%;
    letter-spacing: 0%;
    color: #524f5f;
  }
  ul li {
    color: #3a3842;
    font-family: Urbanist;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0%;
    margin-top: 0.3rem;

    b{
      font-weight: 600;
    }
  }
}

.solution-content {
  h6 {
    font-family: Urbanist;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    color: #3a3842;
  }
  h2 {
    font-family: Urbanist;
    font-weight: 600;
    font-size: 36;
    line-height: 46px;
    letter-spacing: -0.72px;
    text-transform: capitalize;
  }
  p {
    font-family: DM sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.5px;
    color: #524f5f;
    margin: 1.5rem 0;
  }
  ul {
    li {
      font-family: DM sans;
      margin-top: 1rem;
      font-weight: 400;
      font-size: 18px;
      line-height: 30px;
      letter-spacing: 0px;
      color: #524F5F;
      b {
        font-family: Urbanist;
        font-weight: 600 !important;
        color: #524F5F;
      }
    }
  }
}
.solution-sec-color {
  background: linear-gradient(
    1deg,
    #75c0f5 -314.13%,
    #fbfdff 68.35%,
    #fff 107.14%
  );
  padding: 5rem 0;
}
.solution-sec-color.build-amazing-app {
  background: linear-gradient(
    1deg,
    #75c0f5 -314.13%,
    #fbfdff 68.35%,
    #fff 107.14%
  );
}
.platform-overview {
  .swiper-slide {
    border: 1px solid #d9d8df;
  }
}
.bg-soft-grey {
  background-color: #fbfcff !important;
}

/* loader */
#loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.load-item {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-icon {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 0.5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* loaders end */

.best-in-market {
  border-radius: 16px;
  border: 1px solid #f3f5fb;
  padding: 2.5rem;
  /* background-image: url("../images/Frame\ 1618874307.png"); */
  background-size: cover;
  width: 100%;
  margin-bottom: 5rem;
  .best-in-market-contents {
    max-width: 57%;
    h2 {
      color: #131e29;
      font-family: Urbanist;
      font-size: var(--Overall-10, 40px);
      font-style: normal;
      font-weight: 600;
      line-height: 46px; /* 115% */
      letter-spacing: -0.8px;
      /* text-transform: capitalize; */
    }
    p {
      color: #131e29;
      font-family: Urbanist;
      font-size: var(--Overall-5, 20px);
      font-style: normal;
      font-weight: 500;
      line-height: 28px; /* 140% */
      letter-spacing: -0.4px;
      text-transform: capitalize;
    }
  }
}

.swiper.myGridSwiper {
  height: 608px;
}
.faq-section {
  padding-top: 96px !important;
  /* padding-bottom: 96px !important; */
}

.faq-section.plateform-faq {
  background: linear-gradient(
    0deg,
    #ffe09a -208.44%,
    #fff4dd -41.01%,
    #fff 77.1%
  );
  .accordion-item:has(.accordion-button:not(.collapsed)) {
    border: 1px solid #131E29;
  }
  .accordion-button:not(.collapsed)::after {
    background-image: url("../images/product-overview/faq-minus-black.svg");
    width: 41.5px;
    height: 41.5px;
    background-size: cover;
  }
  .accordion-button.collapsed::after {
    background-image: url("../images/product-overview/faq-plus.svg");
    background-repeat: no-repeat;
    width: 41.5px;
    height: 41.5px;
    background-size: cover;
  }
  .accordion-button:not(.collapsed) {
    background-color: #fff;
  }
  .accordion-collapse {
    background-color: #fff;
  }
  .accodrion-button {
    color: #3a3842;
  }
  .accordion-body {
    p {
      color: #6f6c90;
      font-family: DM Sans;
    }
  }
}
.blog-section {
  margin: 5rem 0;
  .title-text {
    p {
      font-family: Gilgan-Font;
      font-weight: 400;
      font-size: 16px;
      line-height: 25px;
      letter-spacing: 0px;
      text-align: center;
      color: #524f5f;
    }
    h2 {
      font-family: Gilgan;
      font-weight: 400;
      font-size: 36px;
      line-height: 42px;
      letter-spacing: 0%;
      text-align: center;
      color: #0e2945;
    }
  }

  .blog-card {
    background: linear-gradient(180deg, #e9edf5 0%, #fbfcff 100%);
    border-radius: 20px;
    padding: 24px;

    img {
      border-radius: 12px;
    }
    .date-text {
      font-family: Gilgan-Font;
      font-weight: 400;
      font-size: 14px;
      line-height: 100%;
      letter-spacing: 0%;
      color: #524f5f;
      margin-top: 1.5rem;
    }
    h6 {
      font-family: Gilgan-Font;
      font-weight: 400;
      font-size: 18px;
      line-height: 26px;
      letter-spacing: 0%;
      color: #524f5f;
      margin-top: 1rem;
    }
    p {
      font-family: Nunito Sans;
      font-weight: 400;
      font-size: 16px;
      line-height: 100%;
      letter-spacing: 0%;
      color: #3a3842;
      margin-top: 0.6rem;
    }
    .btn-play {
      margin-top: 0.2rem;
      border-width: 1px;
      min-width: fit-content;
      font-size: 16px;
    }
  }
}
/* integration page */
.hero-resp.integration-page {
  .hero-title {
    color: #27252c;
    font-size: 64px;
    width: 75%;
    margin: auto;
  }
}
.integration-page-filter {
  margin: 4rem 0;
  margin-bottom: 5rem;
  .filter-area {
    .list-group{
      flex-wrap: wrap;
    }
    .list-group-item {
      height: 30px;
      border-radius: 8px;
      border-width: 1px;
      padding-top: 8px;
      padding-right: 12px;
      padding-bottom: 8px;
      padding-left: 12px;
      border: 1px solid #d9d8df;
      font-family: Urbanist;
      font-weight: 400;
      font-size: 14px;
      line-height: 12px;
      letter-spacing: 0%;
      /* color: #5E5B6E; */
      color: #5e5b6e;
      cursor: pointer;
    }
    .list-group-item.active {
      z-index: 2;
      color: #fff !important;
      background-color: #000;
      border-color: #0b0b0c !important;
    }
  }
  .search-area {
    input {
      min-width: 273px;
      height: 36px;
      border-radius: 8px;
      border-width: 1px;
      padding-top: 8px;
      padding-right: 12px;
      padding-bottom: 8px;
      padding-left: 12px;
      border: 1px solid #d9d8df;
      font-family: Nunito-Font;
      font-weight: 400;
      font-size: 14px;
      line-height: 100%;
      letter-spacing: 0%;
      padding-left: 2.5rem;
    }
    span {
      margin-left: 0.7rem;
    }
  }
  .integration-grid-sec {
    margin: 3rem 0;
    .card-title {
      font-family: Urbanist;
      font-weight: 600;
      font-size: 24px;
      line-height: 125%;
      letter-spacing: 0%;
      color: #27252c;
      margin-bottom: 1.5rem;
    }
    .card-title-para {
      font-family: DM sans;
      font-weight: 400;
      font-size: 16px;
      letter-spacing: 0%;
      color: #3a3842;
    }
    .integration-card {
      background: linear-gradient(
        0deg,
        #ffe09a -208.44%,
        #fff4dd -41.01%,
        #fff 77.1%
      );
      border-radius: 16px;
      padding: 24px;

      .brand-name {
        font-family: Urbanist;
        font-weight: 600;
        font-size: 18px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #524f5f;
        margin-top: 1.5rem;
      }
      .brand-desc {
        font-family: DM sans;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0px;
        color: #3a3842;
        margin-top: 0.7rem;
      }
      a {
        font-family: Gilgan-Font;
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0%;
        text-decoration: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: auto;
        color: #524f5f;
      }
    }
  }
}

/* integration page end */

/* request demo */
.use-case-sec.request-demo {
  /* margin-top: -4rem; */
}

/* contact us */
.hero-section.contact-us-sec {
  .hero-title {
    font-size: 48px;
    color: #27252c;
  }
  p.hero-content {
    font-family: DM sans;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0%;
    color: #3a3842;
    margin: auto;
  }
}
.contact-sec {
  p.reach-text {
    font-family: Nunito-Font;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0%;
    color: #5e5b6e;
  }
  .address-sec {
    ul {
      list-style: none;
      padding: 0;
      li {
        padding-top: 0.9rem;
        .address-title {
          font-family: Urbanist;
          font-weight: 600;
          font-size: 16px;
          line-height: 26px;
          letter-spacing: 0px;
          color: #27252c;
        }
        .address-desc {
          font-family: DM sans;
          font-weight: 400;
          font-size: 16px;
          line-height: 100%;
          letter-spacing: 0px;
          color: #5e5b6e;
          margin-bottom: 0;
        }
      }
    }
  }
}

/* about-us */
.years-of-experience {
  border: 1px solid #d9d8df;
  max-width: 246px;
  height: 260px;
  border-radius: 20px;
  padding: 20px;
  border-width: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;

  h1,
  p {
    background: linear-gradient(180deg, #d5c8ec 0%, #672fc7 83.05%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  h1 {
    font-family: Gilgan-Font;
    font-weight: 700;
    font-size: 80px;
    line-height: 144px;
    letter-spacing: -1.2px;
    text-align: center;
    vertical-align: middle;
  }
  p {
    font-family: Gilgan-Font;
    font-weight: 700;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 0%;
    vertical-align: middle;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0;
  }
}
.about-us-sec {
  padding-bottom: 6.5rem;
}
.about-banner {
  margin-top: -6.5rem;
  img {
    border-radius: 30px;
  }
}
.our-mission-sec {
  padding: 80px;
  background: linear-gradient(
    0deg,
    #ffe09a -208.44%,
    #fff4dd -41.01%,
    #fff 77.1%
  );
  margin: 5rem 0;

  p.title {
    font-family: Gilgan-Font;
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: left;
    color: #524f5f;
  }
  h2.heading {
    font-family: Gilgan;
    font-weight: 400;
    font-size: 44px;
    line-height: 125%;
    letter-spacing: 0%;
    color: #27252c;
    text-align: left;
  }
  p.para {
    font-family: Nunito-Font;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0%;
    color: #5e5b6e;
    text-align: left;
  }
}
.mission-counter-sec {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
  ul {
    li {
      border: 0px;
      background-color: transparent;
      .count-num {
        font-family: Gilgan;
        font-weight: 400;
        font-size: 32px;
        line-height: 125%;
        letter-spacing: 0%;
      }
      .count-text {
        font-family: Gilgan-Font;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #524f5f;
        margin-bottom: 0;
      }
    }
    li::after {
      content: "";
      position: absolute;
      left: 0;
      border: 2px solid transparent;
      border-image: linear-gradient(180deg, #d5c8ec 0%, #672fc7 83.05%);
      border-image-slice: 1;
      color: #000;
      cursor: pointer;
      background-clip: padding-box, border-box;
      height: 100%;
      top: 0;
    }
  }
}
.our-team-sec {
  .title {
    font-family: Gilgan-Font;
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #524f5f;
  }
  .heading {
    font-family: Gilgan-Font;
    font-weight: 400;
    font-size: 36px;
    line-height: 125%;
    letter-spacing: -2%;
    text-align: center;
    color: #27252c;
  }
  .our-team-card {
    border-radius: 20px;
    padding: 24px;
    background: linear-gradient(180deg, #e9edf5 0%, #fbfcff 100%);
    .team-card-header {
      min-height: 118px;
      border-radius: 12px;
      background-color: #fff;
      .experience-card {
        max-width: 90px;
        min-height: 69px;
        border-radius: 10px;
        padding: 12px;
        background: linear-gradient(180deg, #ffffff 0%, #e9edf5 100%);
        .exp-num {
          font-family: Gilgan;
          font-weight: 400;
          font-size: 20px;
          line-height: 36px;
          letter-spacing: 0%;
          text-align: center;
          color: #524f5f;
        }
        .exp-title {
          font-family: Gilgan;
          font-weight: 400;
          font-size: 12px;
          line-height: 100%;
          letter-spacing: 0%;
          text-align: center;
          color: #524f5f;
          margin-bottom: 2px;
        }
      }
    }
    .team-card-bottom {
      margin-top: -2rem;
      padding: 0 1.5rem;
      .expert-name {
        font-family: Gilgan;
        font-weight: 400;
        font-size: 24px;
        line-height: 36px;
        letter-spacing: 0%;
      }
      .expert-title {
        font-family: Nunito-Font;
        font-weight: 400;
        font-size: 18px;
        line-height: 100%;
        letter-spacing: 0%;
        margin-bottom: 0;
      }
    }
  }
}
.use-case-sec.about-us {
  margin-top: 5.5rem;
}

/* privacy */
.policy-tab-btn {
  display: flex;
  padding: 10px;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  border-radius: 12px;
  border: 1px solid  #131E29;
  background: white;
  color: #5e5b6e;
  font-family: Urbanist;
  font-size:  20px;
  font-style: normal;
  font-weight:  600;
  line-height: 46px;
  letter-spacing: -0.48px;
  text-transform: capitalize;
  transition: all 0.3s ease;
}
.policy-tab-btn.active {
  background: var(--Active, #131E29);
  color: #FFF;
}

.mainheading {
  color:  #27252c;
  font-family: Urbanist;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 46px; /* 191.667% */
  letter-spacing: -0.48px;
  text-transform: capitalize;
  align-self: stretch;
}

.subheading {
  color:  #524f5f;
  font-family: DM sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.48px;
  flex: 1 0 0;
  align-self: stretch;
}
.supersubheading {
  color:  #27252c;
  font-family: Urbanist;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.4px;
  text-transform: capitalize;
}

/* new style (gajendra) */
.new-hero-banner {
  display: flex;
  justify-content: end;
  /* align-items: center; */
}

.dev-card span {
  color: #131e29;
  font-family: Urbanist;
  font-size: 38px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.synopsis-bg {
  background: linear-gradient(
    355deg,
    #d5c6ef -30.19%,
    #f8f8ff 28.95%,
    #fff 102.29%
  );
}
.hover-play-button {
  display: none;
}
.hero-outer {
  background: linear-gradient(
    8deg,
    #fff -18.35%,
    #f8f8ff 42.15%,
    #d5c6ef 90.93%
  );
  /* height: 602px; */
}

.contact-btn {
  width: 148px;
}
.confirmation-text{
  display: flex;
  align-items: start;
}
.confirmation-text p {
  color: var(--Secondary-Main, #27252c);
  font-feature-settings: "liga" off, "clig" off;
  font-family: Urbanist;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%; /* 25px */
  letter-spacing: -0.4px;
}
.product-fecture-sec {
  background: linear-gradient(
    1deg,
    #75c0f5 -314.13%,
    #fbfdff 68.35%,
    #fff 107.14%
  );
}

/* product tab swith */
.product-tabs-content-area {
    display: flex;
    flex-direction: column;
    /* gap: 50px; */
  position: relative;
  padding-left: 1.5rem;
  h6 {
    font-family: Urbanist;
    font-weight: 700;
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 0;
    color: #27252c;
  }
  p {
    font-family: DM sans;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0px;
    color: #3a3842;
  }
  .active-area {
    background-color: #f6f6fc00;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    margin-bottom: 0; 

    .para-show {
      display: none !important;
    }

    &.active {
      margin-bottom: 24px !important;
    }
  }
  .active-area.active {
    border-radius: 4px;
    background: linear-gradient(247deg, #FFF9EA -8.07%, #EDD59B 287.93%);
    padding: 12px;
    .para-show {
      display: block !important;
    }
  }
  .active-area.active + .active-area {
    margin-top: 0 !important;
  }
}

.product-tabs-content-area {
    /* .active-area{
        margin-bottom: 50px;
    } */
  .active-area.active {
    width: 338px;
    position: relative;
    margin-bottom: 24px;
  }
  .active-area.active::before {
    border-radius: 50px;
    top: 0;
    height: 100%;
    z-index: 1;
    content: "";
    position: absolute;
    left: -1.5rem;
    border: 2px solid transparent;
    border-image: linear-gradient(to bottom, #FAFDFF, #EDD59B);

    border-image-slice: 1;
    color: #000;
    cursor: pointer;
    background-clip: padding-box, border-box;
  }
}

.product-tabs-content-area::after {
  content: "";
  position: absolute;
  left: 0;
  border: 2px solid transparent;

  border-radius: 20px;
  top: 0%;
  left: 1px;
  height: 93%;
  border-width: 1px;
  border-image: linear-gradient(180deg, #DADADA);
  border-image-slice: 1;
  background-clip: padding-box, border-box;
}

.product-why-bg{
  background: linear-gradient(0deg, #FFE09A -208.44%, #FFF4DD -41.01%, #FFF 77.1%);
}

.Schedule-confirm-text{
  
  display: none;
  align-items: center;
  gap: 12px;
  
  span{
    color: var(--Secondary-Main, #27252C);
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Urbanist;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; /* 25px */
    letter-spacing: -0.4px;
  }
}


input[type="number"].no-arrows::-webkit-inner-spin-button,
input[type="number"].no-arrows::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hero-text-area{
  justify-content: center;
}

.hero-resp{
  margin: auto;
  justify-content: center;
}

.brand-image-sec{
  margin-top: 16px;
}

.dev-content-2{
  margin-top: 86px;
}


.product-img{
  width: 100%;
  max-width: 789px;
}