@import url("breadcrumbs.css");

.circles {
  left: 0;
  margin: 0 auto;
  max-width: 1920px;
  right: 0;
  width: 100%;
}
.circles,
.circles > .circle {
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
.circles > .circle {
  background: radial-gradient(50% 50% at 50% 50%, #fcc51b40 0, #fcc51b00);
  border-radius: 50%;
  height: 543px;
  width: 543px;
}
.circles > .circle:first-of-type {
  left: -20px;
  top: -443px;
}
@media (max-width: 999px) {
  .circles > .circle:first-of-type {
    height: 289px;
    left: -159px;
    top: -125.6px;
    width: 289px;
  }
}
.circles > .circle:nth-child(2) {
  height: 945px;
  right: -306px;
  top: -276px;
  width: 945px;
}
@media (max-width: 999px) {
  .circles > .circle:nth-child(2) {
    height: 543px;
    right: -335px;
    top: 593.4px;
    width: 543px;
  }
}
.circles > .circle:nth-child(3) {
  height: 1247px;
  left: 772px;
  top: 717px;
  width: 1247px;
}
@media (max-width: 999px) {
  .circles > .circle:nth-child(3) {
    height: 289px;
    left: unset;
    right: -124px;
    top: 1829.4px;
    width: 289px;
  }
}
.circles > .circle:nth-child(4) {
  height: 1247px;
  left: 100px;
  top: 1395px;
  width: 1247px;
}
@media (max-width: 999px) {
  .circles > .circle:nth-child(4) {
    height: 945px;
    left: -173px;
    right: unset;
    top: 3735.4px;
    width: 945px;
  }
}
.circles.__footer {
  top: 0;
}
.circles.__footer > .circle:first-child {
  height: 945px;
  left: -300px;
  top: -903px;
  width: 945px;
}
@media (max-width: 999px) {
  .circles.__footer > .circle:first-child {
    height: 420px;
    left: -173px;
    top: -774px;
    width: 420px;
  }
}
.circles.__footer > .circle:nth-child(2) {
  height: 945px;
  right: -90px;
  top: -368px;
  width: 945px;
}
@media (max-width: 999px) {
  .circles.__footer > .circle:nth-child(2) {
    height: 422px;
    left: -191px;
    right: unset;
    top: -210px;
    width: 422px;
  }
}
.services {
  position: relative;
  width: 100%;
}
.services > .page-title {
  margin-bottom: 50px !important;
}
@media (max-width: 999px) {
  .services > .page-title {
    margin-bottom: 25px !important;
  }
}
.services > .breadcrumbs {
  animation: fadeUp 1s forwards;
  animation-delay: 0.3s;
  opacity: 0;
  padding: 0 40px 20px;
}
@media (max-width: 999px) {
  .services > .breadcrumbs {
    margin-bottom: 15px;
    padding: 0;
  }
}
.services > .feedback-main {
  opacity: 0;
}
.services > .main-wrapper {
  display: flex;
  gap: 50px;
  position: relative;
}
.services > .main-wrapper > .services-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 919px;
  position: relative;
  width: 100%;
}
@media screen and (max-width: 1000px) {
  .services > .main-wrapper > .services-wrapper {
    gap: 20px;
  }
}
.services > .main-wrapper > .services-wrapper > .chips {
  margin-right: -20px;
  opacity: 0;
}
.services > .main-wrapper > .services-wrapper > .chips > button:hover {
  border-radius: 20px;
}
.services > .main-wrapper > .services-wrapper > .chips.animate {
  animation: fadeUp 1s forwards;
}
.services > .main-wrapper > .services-wrapper > .card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.services-ai {
  height: -moz-fit-content;
  height: fit-content;
  margin-top: 180px;
  opacity: 0;
  position: sticky;
  top: 200px;
}
@media screen and (max-width: 999px) {
  .services-ai {
    bottom: 70px;
    margin-top: 0;
    position: absolute;
    right: 143px;
    top: unset;
    width: 100%;
  }
}
.services-ai.animate {
  animation: fadeUp 1s forwards;
}
.services-ai > .ai {
  left: 25px;
  position: absolute;
  top: -70px;
}
@media screen and (max-width: 999px) {
  .services-ai > .ai {
    left: unset;
    right: -14px;
  }
}
.services-ai > .ai > .elipse {
  background-color: #eee;
  border-radius: 50px;
  height: 100px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100px;
  z-index: 1;
}
.services-ai > .ai > .number {
  align-items: center;
  background-color: #fcc51b;
  border-radius: 50%;
  display: flex;
  height: 30px;
  justify-content: center;
  left: 85px;
  position: absolute;
  top: 0;
  width: 30px;
  z-index: 20;
}
.services-ai > .ai > .number > span {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.services-ai > .ai > img {
  left: -28px;
  position: absolute;
  top: -27px;
  width: 157px;
  z-index: 3;
}
.services-ai > .content {
  background: #fcc51b;
  max-width: 422px;
  padding: 50px 30px;
  position: relative;
  transition: width 0.3s ease, opacity 0.3s ease;
  width: 100%;
}
@media screen and (max-width: 999px) {
  .services-ai > .content {
    bottom: 70px;
    max-width: 216px;
    padding: 20px;
    position: absolute;
    right: -20px;
  }
}
.services-ai > .content:before {
  border-right: 27px solid transparent;
  border-top: 27px solid #fcc51b;
  content: "";
  height: 0;
  left: 135px;
  position: absolute;
  top: -25px;
  transform: rotateX(180deg);
  width: 0;
}
@media screen and (max-width: 999px) {
  .services-ai > .content:before {
    border-right: 20px solid transparent;
    border-top: 20px solid #fcc51b;
    bottom: -20px;
    left: 160px;
    top: unset;
    transform: rotateX(0);
    transform: rotateY(180deg);
  }
}
.services-ai > .content > .close {
  background-color: #252525;
  height: 12px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 12px;
}
.services-ai > .content > .top > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.services-ai > .content > .top > div > h2 {
  font-family: Manrope;
  font-size: 36px;
  font-weight: 700;
  line-height: 46px;
  white-space: pre;
}
@media screen and (max-width: 999px) {
  .services-ai > .content > .top > div > h2 {
    font-size: 16px;
    line-height: 20px;
  }
}
.services-ai > .content > .top > div > p {
  font-family: Manrope;
  font-size: 18px;
  font-weight: 500;
}
@media screen and (max-width: 999px) {
  .services-ai > .content > .top > div > p {
    font-size: 14px;
  }
}
.services-ai > .content > .project-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media screen and (max-width: 1000px) {
  .services-ai > .content > .project-list {
    gap: 10px;
  }
}
.services-ai > .content > .project-list > .project-list__wrapper {
  position: relative;
}
.services-ai > .content > .project-list > .project-list__wrapper:before {
  background: linear-gradient(0deg, #fcc51b00 -31.82%, #fcc51b 50.91%);
  content: "";
  height: 20px;
  left: 0;
  margin-right: 10px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 10px;
  top: 10px;
  transition: opacity 0.3s;
  z-index: 1;
}
.services-ai > .content > .project-list > .project-list__wrapper:after {
  background: linear-gradient(180deg, #fcc51b00 -31.82%, #fcc51b 50.91%);
  bottom: -10px;
  content: "";
  height: 24px;
  left: 0;
  margin-right: 10px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  transition: opacity 0.3s;
}
.services-ai
  > .content
  > .project-list
  > .project-list__wrapper.has-bottom-shadow:after,
.services-ai
  > .content
  > .project-list
  > .project-list__wrapper.has-top-shadow:before {
  opacity: 1;
}
.services-ai
  > .content
  > .project-list
  > .project-list__wrapper
  > .project-list__top {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
  max-height: 150px;
  min-height: 0;
  overflow-y: auto;
  position: relative;
}
@media screen and (max-width: 1000px) {
  .services-ai
    > .content
    > .project-list
    > .project-list__wrapper
    > .project-list__top {
    gap: 5px;
    margin-top: 10px;
    max-height: 145px;
  }
}
.services-ai
  > .content
  > .project-list
  > .project-list__wrapper
  > .project-list__top::-webkit-scrollbar {
  height: auto;
  width: 10px;
}
@media screen and (max-width: 1000px) {
  .services-ai
    > .content
    > .project-list
    > .project-list__wrapper
    > .project-list__top::-webkit-scrollbar {
    height: auto;
    width: 5px;
  }
}
.services-ai
  > .content
  > .project-list
  > .project-list__wrapper
  > .project-list__top::-webkit-scrollbar-track {
  background: #f3e8c8;
}
.services-ai
  > .content
  > .project-list
  > .project-list__wrapper
  > .project-list__top::-webkit-scrollbar-thumb {
  background-color: #252525;
}
.services-ai > .content > .project-list > .project-list__bottom > h2 {
  font-family: Manrope;
  font-size: 32px;
  font-weight: 700;
  line-height: 42px;
}
@media screen and (max-width: 1000px) {
  .services-ai > .content > .project-list > .project-list__bottom > h2 {
    font-size: 16px;
    line-height: 20px;
  }
}
.services-ai > .content > .project-list > .project-list__bottom > p {
  font-family: Manrope;
  font-size: 18px;
  font-weight: 500;
}
@media screen and (max-width: 1000px) {
  .services-ai > .content > .project-list > .project-list__bottom > p {
    font-size: 14px;
  }
}
@media screen and (max-width: 999px) {
  .services-ai
    > .content
    > .project-list
    > .project-list__bottom
    > .btn-atropos
    > .atropos-scale {
    perspective: none;
    width: 100%;
  }
}
.services-ai
  > .content
  > .project-list
  > .project-list__bottom
  > .btn-atropos
  > .atropos-scale:hover
  button {
  border-radius: 50px;
}
.services-ai
  > .content
  > .project-list
  > .project-list__bottom
  > .btn-atropos
  .atropos-shadow {
  background: transparent;
}
.services-ai
  > .content
  > .project-list
  > .project-list__bottom
  > .btn-atropos
  button {
  pointer-events: auto;
  transform-style: preserve-3d;
}
.services-ai
  > .content
  > .project-list
  > .project-list__bottom
  > .btn-atropos
  .atropos-rotate,
.services-ai
  > .content
  > .project-list
  > .project-list__bottom
  > .btn-atropos
  .atropos-scale {
  pointer-events: none;
}
@supports (-moz-appearance: none) {
  .services-ai
    > .content
    > .project-list
    > .project-list__bottom
    > .btn-atropos
    .atropos-rotate {
    transform: none !important;
  }
}
.services-ai > .content > .project-list > .project-list__bottom button {
  background: #fff;
  border: none;
  color: #262626;
  cursor: pointer;
  font-family: Manrope;
  font-size: 18px;
  font-weight: 500;
  margin-top: 20px;
  padding: 15px 155px;
  transition: border-radius 0.3s ease;
  width: 100%;
}
.services-ai > .content > .project-list > .project-list__bottom button:hover {
  border-radius: 50px;
  transition: border-radius 0.3s ease;
}
@media screen and (max-width: 1000px) {
  .services-ai > .content > .project-list > .project-list__bottom button {
    font-size: 14px;
    margin-top: 10px;
    padding: 10px 67px;
  }
}
.services-ai > .content > .project-list > .project-list__bottom button > p {
  margin: 0;
  transform-style: preserve-3d;
}
.services-ai > .content > form {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.services-ai > .content > form > span {
  color: #262626;
  font-family: Manrope;
  font-size: 14px;
  font-weight: 500;
  margin-top: 15px;
  text-align: center;
}
@media screen and (max-width: 1000px) {
  .services-ai > .content > form > span {
    font-size: 12px;
  }
}
.services-ai > .content > form > span > a {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-offset: 16%;
  text-decoration-thickness: 5%;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  transition: opacity 0.3s ease-in-out;
}
.services-ai > .content > form > span > a:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease-in-out;
}
.services-ai > .content > form > .cheack-box__wrappper {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}
@media (max-width: 999px) {
  .services-ai > .content > form > .cheack-box__wrappper {
    padding: 0;
  }
}
.services-ai > .content > form > .cheack-box__wrappper > .checkbox-box {
  align-self: center;
  display: inline-block;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
}
.services-ai > .content > form > .cheack-box__wrappper > .checkbox-box > input {
  display: none;
}
.services-ai
  > .content
  > form
  > .cheack-box__wrappper
  > .checkbox-box
  > .checkmark {
  border: 1.5px solid #262626;
  border-radius: 8px;
  cursor: pointer;
  display: inline-block;
  height: 22px;
  position: relative;
  width: 22px;
}
.services-ai
  > .content
  > form
  > .cheack-box__wrappper
  > .checkbox-box
  > .checkmark:after {
  border: solid #262626;
  border-width: 0 2px 2px 0;
  content: "";
  height: 15px;
  left: 5.5px;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: rotate(45deg);
  transition: opacity 0.3s ease-in-out;
  width: 8px;
}
.services-ai
  > .content
  > form
  > .cheack-box__wrappper
  > .checkbox-box
  > .checkmark.checkmark-error {
  border: 1.5px solid rgba(255, 21, 83, 0.5);
}
.services-ai
  > .content
  > form
  > .cheack-box__wrappper
  > .checkbox-box
  input:checked
  + .checkmark:after {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
.services-ai > .content > form > .cheack-box__wrappper > span {
  font-size: 14px;
  font-weight: 500;
}
@media screen and (max-width: 1000px) {
  .services-ai > .content > form > .cheack-box__wrappper > span {
    font-size: 12px;
  }
}
.services-ai > .content > form > .cheack-box__wrappper > span > a {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-offset: 16%;
  text-decoration-thickness: 5%;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}
.services-ai > .content > form > .btn-atropos.disabled {
  pointer-events: none;
}
@media screen and (max-width: 999px) {
  .services-ai > .content > form > .btn-atropos > .atropos-scale {
    perspective: none;
    width: 100%;
  }
}
.services-ai > .content > form > .btn-atropos > .atropos-scale:hover .send {
  border-radius: 50px;
}
.services-ai > .content > form > .btn-atropos .atropos-shadow {
  background: transparent;
}
.services-ai > .content > form > .btn-atropos .atropos-rotate,
.services-ai > .content > form > .btn-atropos .atropos-scale {
  pointer-events: none;
}
@supports (-moz-appearance: none) {
  .services-ai > .content > form > .btn-atropos .atropos-rotate {
    transform: none !important;
  }
}
.services-ai > .content > form .send {
  background: #fff;
  border: none;
  color: #262626;
  cursor: pointer;
  font-family: Manrope;
  font-size: 18px;
  font-weight: 500;
  margin-top: 30px;
  padding: 15px 136px;
  pointer-events: auto;
  transform-style: preserve-3d;
  transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out,
    color 0.3s ease-in-out, border-radius 0.3s ease-in-out;
  width: 100%;
}
.services-ai > .content > form .send:hover {
  border-radius: 50px;
  transition: border-radius 0.3s ease;
}
.services-ai > .content > form .send:disabled {
  background-color: #e5e5e5 !important;
  border: none !important;
  color: #262626;
  pointer-events: none;
  transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out,
    color 0.3s ease-in-out, border-radius 0.3s ease-in-out;
}
@media screen and (max-width: 1000px) {
  .services-ai > .content > form .send {
    font-size: 14px;
    padding: 10px 53px;
  }
}
.services-ai > .content > form > .back {
  font-family: Manrope;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-offset: 0;
  text-decoration-thickness: 0;
  -webkit-text-decoration-skip: ink;
  align-self: center;
  background: transparent;
  border: none;
  color: #262626;
  cursor: pointer;
  margin-top: 20px;
  text-decoration-skip-ink: auto;
  transition: opacity 0.3s ease;
  width: -moz-fit-content;
  width: fit-content;
}
.services-ai > .content > form > .back:hover {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transition: opacity 1s ease;
}