.relative { position: relative;}
.absolute { position: absolute;}

.flex { display: flex;}
.flex-row { flex-direction: row !important;}
.flex-col { flex-direction: column !important;}
.justify-center { justify-content: center;}
.justify-between { justify-content: space-between;}
.items-center { align-items: center;}
.items-end { align-items: flex-end;}
.items-stretch { align-items: stretch;}

.text-white { color: white;}
.text-green { color: #2FD06E;}
.text-gray { color: #B7B7B7;}

.border-gray { border: 1px solid #D9D0D2;}
.border-none { border: none;}

.cursor-pointer { cursor: pointer;}

.bg-black { background-color: #202020;}
.bg-white { background-color: white;}
.bg-green { background-color: #2FD06E;}
.bg-lightgray { background-color: #F6F6F6;}
.bg-gray { background-color: #E8E6E6;}
.bg-brown { background-color: #4D4D4D;}

.font-semibold { font-weight: 600;}
.font-bold { font-weight: 700;}

.gap-1 { gap: 4px;}
.gap-2 { gap: 8px;}
.gap-3 { gap: 12px;}
.gap-4 { gap: 16px;}
.gap-6 { gap: 24px;}
.gap-8 { gap: 32px;}
.gap-10 { gap: 40px;}

.leading-3 { line-height: 12px;}
.leading-4 { line-height: 16px;}
.leading-5 { line-height: 20px;}
.leading-6 { line-height: 24px;}
.leading-7 { line-height: 28px;}
.leading-8 { line-height: 32px;}

.w-full { width: 100%;}
.h-full { height: 100%;}
.w-max { width: max-content;}
.h-max { height: max-content;}
.h-inherit { height: inherit;}
.w-30 { width: 30%;}
.w-40 { width: 40%;}
.w-45 { width: 45%;}
.w-50 { width: 50%;}
.w-55 { width: 55%;}
.w-60 { width: 60%;}
.w-70 { width: 70%;}
.w-80 { width: 80%;}
.w-90 { width: 90%;}

.divider { width: 1px; height: 30px; background-color: white;}

.whitespace-nowrap { white-space: nowrap;}

.m-auto { margin: auto;}
.m-1 { margin: 4px;}
.mx-1 { margin-left: 4px; margin-right: 4px;}
.ml-1 { margin-left: 4px;}
.mr-1 { margin-right: 4px;}
.my-1 { margin-top: 4px; margin-bottom: 4px;}
.mt-1 { margin-top: 4px;}
.mb-1 { margin-bottom: 4px;}
.m-2 { margin: 8px;}
.mx-2 { margin-left: 8px; margin-right: 8px;}
.ml-2 { margin-left: 8px;}
.mr-2 { margin-right: 8px;}
.my-2 { margin-top: 8px; margin-bottom: 8px;}
.mt-2 { margin-top: 8px;}
.mb-2 { margin-bottom: 8px;}
.m-3 { margin: 12px;}
.mx-3 { margin-left: 12px; margin-right: 12px;}
.ml-3 { margin-left: 12px;}
.mr-3 { margin-right: 12px;}
.my-3 { margin-top: 12px; margin-bottom: 12px;}
.mt-3 { margin-top: 12px;}
.mb-3 { margin-bottom: 12px;}
.m-4 { margin: 16px;}
.mx-4 { margin-left: 16px; margin-right: 16px;}
.ml-4 { margin-left: 16px;}
.mr-4 { margin-right: 16px;}
.my-4 { margin-top: 16px; margin-bottom: 16px;}
.mt-4 { margin-top: 16px;}
.mb-4 { margin-bottom: 16px;}
.m-6 { margin: 24px;}
.mx-6 { margin-left: 24px; margin-right: 24px;}
.ml-6 { margin-left: 24px;}
.mr-6 { margin-right: 24px;}
.my-6 { margin-top: 24px; margin-bottom: 24px;}
.mt-6 { margin-top: 24px;}
.mb-6 { margin-bottom: 24px;}
.m-8 { margin: 32px;}
.mx-8 { margin-left: 32px; margin-right: 32px;}
.ml-8 { margin-left: 32px;}
.mr-8 { margin-right: 32px;}
.my-8 { margin-top: 32px; margin-bottom: 32px;}
.mt-8 { margin-top: 32px;}
.mb-8 { margin-bottom: 32px;}
.m-10 { margin: 40px;}
.mx-10 { margin-left: 40px; margin-right: 40px;}
.ml-10 { margin-left: 40px;}
.mr-10 { margin-right: 40px;}
.my-10 { margin-top: 40px; margin-bottom: 40px;}
.mt-10 { margin-top: 40px;}
.mb-10 { margin-bottom: 40px;}

.p-0 { padding: 0 !important;}
.px-0 { padding-left: 0 !important; padding-right: 0 !important;}
.pl-0 { padding-left: 0 !important;}
.pr-0 { padding-right: 0 !important;}
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important;}
.pt-0 { padding-top: 0 !important;}
.pb-0 { padding-bottom: 0 !important;}
.p-1 { padding: 4px !important;}
.px-1 { padding-left: 4px !important; padding-right: 4px !important;}
.pl-1 { padding-left: 4px !important;}
.pr-1 { padding-right: 4px !important;}
.py-1 { padding-top: 4px !important; padding-bottom: 4px !important;}
.pt-1 { padding-top: 4px !important;}
.pb-1 { padding-bottom: 4px !important;}
.p-2 { padding: 8px !important;}
.px-2 { padding-left: 8px !important; padding-right: 8px !important;}
.pl-2 { padding-left: 8px !important;}
.pr-2 { padding-right: 8px !important;}
.py-2 { padding-top: 8px !important; padding-bottom: 8px !important;}
.pt-2 { padding-top: 8px !important;}
.pb-2 { padding-bottom: 8px !important;}
.p-3 { padding: 12px !important;}
.px-3 { padding-left: 12px !important; padding-right: 12px !important;}
.pl-3 { padding-left: 12p !important;}
.pr-3 { padding-right: 12px !important;}
.py-3 { padding-top: 12px !important; padding-bottom: 12px !important;}
.pt-3 { padding-top: 12px !important;}
.pb-3 { padding-bottom: 12px !important;}
.p-4 { padding: 16px !important;}
.px-4 { padding-left: 16px !important; padding-right: 16px !important;}
.pl-4 { padding-left: 16p !important;}
.pr-4 { padding-right: 16px !important;}
.py-4 { padding-top: 16px !important; padding-bottom: 16px !important;}
.pt-4 { padding-top: 16px !important;}
.pb-4 { padding-bottom: 16px !important;}
.p-5 { padding: 20px !important;}
.px-5 { padding-left: 20px !important; padding-right: 20px !important;}
.pl-5 { padding-left: 20p !important;}
.pr-5 { padding-right: 20px !important;}
.py-5 { padding-top: 20px !important; padding-bottom: 20px !important;}
.pt-5 { padding-top: 20px !important;}
.pb-5 { padding-bottom: 20px !important;}
.p-6 { padding: 24px !important;}
.px-6 { padding-left: 24px !important; padding-right: 24px !important;}
.pl-6 { padding-left: 24p !important;}
.pr-6 { padding-right: 24px !important;}
.py-6 { padding-top: 24px !important; padding-bottom: 24px !important;}
.pt-6 { padding-top: 24px !important;}
.pb-6 { padding-bottom: 24px !important;}
.p-7 { padding: 28px !important;}
.px-7 { padding-left: 28px !important; padding-right: 28px !important;}
.pl-7 { padding-left: 28p !important;}
.pr-7 { padding-right: 28px !important;}
.py-7 { padding-top: 28px !important; padding-bottom: 28px !important;}
.pt-7 { padding-top: 28px !important;}
.pb-7 { padding-bottom: 28px !important;}
.p-8 { padding: 32px !important;}
.px-8 { padding-left: 32px !important; padding-right: 32px !important;}
.pl-8 { padding-left: 32p !important;}
.pr-8 { padding-right: 32px !important;}
.py-8 { padding-top: 32px !important; padding-bottom: 32px !important;}
.pt-8 { padding-top: 32px !important;}
.pb-8 { padding-bottom: 32px !important;}

.pt-16 { padding-top: 64px !important;}
.pr-16 { padding-right: 64px !important;}

.title {
  font-size: 36px;
  font-weight: 700;
}
.subtitle {
  font-size: 24px;
  font-weight: 700;
}

.text-xs { font-size: 12px;}
.text-sm { font-size: 14px;}
.text-base { font-size: 16px;}
.text-lg { font-size: 18px;}
.text-xl { font-size: 20px;}
.text-2xl { font-size: 24px;}
.text-3xl { font-size: 28px;}

.text-center { text-align: center;}

.rounded-1 { border-radius: 4px;}
.rounded-left-2 { border-bottom-left-radius: 8px; border-top-left-radius: 8px;}
.rounded-right-2 { border-top-right-radius: 8px; border-bottom-right-radius: 8px;}

body { margin: 0; width: 100%;}
.section {
  display: flex;
  flex-direction: column;
  padding: 56px 22.5%;
}

.intro .request {
  border: 2px solid gray;
  border-top: none;
  border-radius: 4px;
  padding: 11px 36px;
  z-index: 5;
  background: rgb(32,32,32);
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.intro img.absolute { width: 20px; height: 20px;}
.intro img.absolute:nth-child(3) { top: 0; left: 5%;}
.intro img.absolute:nth-child(4) { top: 12px; left: 29%;}
.intro img.absolute:nth-child(5) { top: -36px; left: 48%;}
.intro img.absolute:nth-child(6) { top: -16px; right: 25%;}
.intro img.absolute:nth-child(7) { bottom: 32px; left: 7%;}
.intro img.absolute:nth-child(8) { bottom: -24px; left: 25%;}
.intro img.absolute:nth-child(9) { bottom: -20px; left: 52%}
.intro img.absolute:nth-child(10) { bottom: 0px; right: 20%;}
.intro img.absolute:nth-child(11) { bottom: 80px; right: 3%;}
.intro .access { height: 50px; margin: 60px auto; }
.intro input { outline: none; border: none; padding: 0 12px;}
.intro .feature-item { padding: 0 3%;}

.bots-types .bot-item { padding: 4px 0 56px;}

.margin-left-10 {
  margin-left: 30px;
}

@media screen and (max-width: 576px) {
  .title { font-size: 28px;}
  .subtitle { font-size: 20px;}
  .text-lg { font-size: 16px;}
  .text-2xl { font-size: 20px;}

  .section { padding: 32px 20px;}
  .header, .footer { padding: 16px 20px !important;}

  .intro > div:nth-child(1),
  .intro > div:nth-child(3) {
    flex-direction: column !important;
  }
  .intro .w-45,
  .intro .w-55 {
    width: 100%;
    padding: 0 !important
  }
  .intro .w-45 > span:nth-child(2) { margin-bottom: 0;}
  .intro .w-45 > div { gap: 20px;}
  .intro .w-55 { margin-top: 20px;}
  .intro .w-55 img { display: none;}
  .intro .access { margin: 28px auto; width: 100%;}
  .intro .feature-section { gap: 12px;}
  .intro .feature-item { padding: 0; text-align: center;}
  .intro .feature-item img {
    max-width: 250px;
    margin: auto;
  }

  .bots-types { padding-bottom: 20px !important;}
  .bots-types > span { margin-bottom: 16px;}
  .bots-types > div > div { flex-direction: column !important; gap: 12px;}
  .bots-types .bot-item { text-align: center; padding-bottom: 12px;}
  .bots-types .bot-item img { max-width: 200px;}
  .bots-types .bot-item span:nth-child(2) { margin-top: 12px;}

  .compare span { width: 100%;}

  .how-work > span { text-align: center;}
  .how-work > div { flex-direction: column !important;}
  .how-work .w-60, .how-work .w-40 { width: 100%;}
  .how-work .w-60 div { margin-bottom: 12px;}
  .how-work img { width: 80%; margin: auto 10%;}

  .faq { gap: 16px;}
  .faq > div { gap: 12px;}
}