:root {
  --background: rgb(248, 250, 252);
  --foreground: rgb(15, 23, 41);
  --card: rgb(255, 255, 255);
  --card-foreground: rgb(15, 23, 41);
  --popover: rgb(255, 255, 255);
  --popover-foreground: rgb(15, 23, 41);
  --primary: rgb(13, 162, 231);
  --primary-foreground: rgb(255, 255, 255);
  --secondary: rgb(241, 245, 249);
  --secondary-foreground: rgb(15, 23, 41);
  --accent: rgb(16, 183, 127);
  --accent-foreground: rgb(255, 255, 255);
  --muted: rgb(241, 245, 249);
  --muted-foreground: rgb(101, 117, 139);
  --destructive: rgb(239, 67, 67);
  --destructive-foreground: rgb(248, 250, 252);
  --border: rgb(225, 231, 239);
  --input: rgb(225, 231, 239);
  --ring: rgb(13, 162, 231);
  --radius: 0.75rem;
  --sidebar-background: rgb(250, 250, 250);
  --sidebar-foreground: rgb(63, 63, 70);
  --sidebar-primary: rgb(24, 24, 27);
  --sidebar-primary-foreground: rgb(250, 250, 250);
  --sidebar-accent: rgb(244, 244, 245);
  --sidebar-accent-foreground: rgb(24, 24, 27);
  --sidebar-border: rgb(229, 231, 235);
  --sidebar-ring: rgb(59, 130, 246);
}

*,
::before,
::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}

body {
      /* background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
    --tw-gradient-from: #f0f9ff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(240 249 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
    --tw-gradient-to: #fff var(--tw-gradient-to-position);
    color: hsl(var(--foreground));
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; */

      overflow-x: hidden;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: opacity .2s ease-in;
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  }

.main-content {
    padding: 64px 32px;
    box-sizing: inherit;
}

@media screen and (min-width: 768px) {
    .main-content .container {
        padding: 0 32px;
    }
}

/* HEADER section */

.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  background-color: #fff;
  -webkit-box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.25);

  --tw-backdrop-blur: blur(16px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  background-color: rgb(255 255 255 / 0.7);
  border-color: rgb(255 255 255 / 0.6);
  border-bottom-width: 1px;
  z-index: 50;

  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.header .container {
  padding: 0 32px;
}

.header-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.header__nav--list {
  display: none;
  list-style-type: none;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: center;
  -webkit-box-align: center;
  gap: 30px;
  margin: 0 !important;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.header__nav--list li {
  margin: 0 !important;
}

.header__nav--list li a {
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted-foreground);
  font-family: Inter;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.header__nav--list li a:hover,
.header__nav--list li a:focus {
  color: var(--foreground);
}

.header__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  font-family: Inter;
  text-transform: none;
  background-color: var(--accent);
  color: var(--accent-foreground);
  border-radius: var(--radius);
  cursor: pointer;

  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  --tw-shadow-color: rgba(16, 183, 127, 0.3);
  --tw-shadow: var(--tw-shadow-colored);
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000) 0 0 #0000,
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

  --tw-ring-offset-color: var(--background);
}

.header__btn-stopgap {
  display: block;
  width: 170px;
}

.header__btn:hover,
.header__btn:focus {
  background-color: var(--accent);
  scale: 1.03;
}

@media (min-width: 768px) {
  .header__nav--list {
    display: flex;
  }
}

/* HEADER end */

main {
  padding-top: 70px;
}

/* MAIN section start */

.main {
  padding: 64px 16px;
  width: 100%;
}

.main__wrap {
  width: 100%;
  margin: 0 auto;
  color: #2d3042;
  max-width: 620px;
}

.main__content--title {
  margin-bottom: 30px;
  font-size: 36px;
  font-weight: 800;
  text-align: center;
  color: var(--foreground);
  font-size: 36px;
  line-height: 1.35;
}

.main__content--title .first {
  display: block;
  background: linear-gradient(90deg, #1c698d, #0da2e7, #21d5ed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main__content--title .second {
  text-decoration-thickness: 4px;
  text-decoration-color: var(--primary);
  text-decoration-line: underline;
}

.main__content--desc {
  color: var(--muted-foreground);
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 48px;
}

.main__content--form {
  -webkit-box-shadow: -3px 10px 44px rgba(0, 0, 0, 0.25);
  box-shadow: -3px 10px 44px rgba(0, 0, 0, 0.25);
  background-color: #fff;

  border-radius: 16px;
  padding: 24px;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
    0 8px 10px -6px var(--tw-shadow-color);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(0 0 0 / 0.05);
  background-color: #ffffffbf;
  --tw-backdrop-blur: blur(24px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

  margin-bottom: 16px;
}

.main__content--form-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.main__content--form-amount span {
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 20px;
}

.main__content--form-amount .amount-cont {
  padding: 8px 16px;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.main__content--form-amount .amount-cont span {
  color: var(--muted-foreground);
  line-height: 28px;
}

.main__content--form-amount .amount-cont .number {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--foreground);
}

.main__content--form-flex {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.main__content--form-flex-input {
  margin-bottom: 8px;
  width: 100%;
}

.main__content--form-flex-input .input {
  -webkit-appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 6px;
  background: rgba(241, 245, 249, 0.6);
  outline: none;
  flex-grow: 1;
  cursor: pointer;
}

.main__content--form-flex-input .input::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: 10px;
  background: linear-gradient(to right,
      var(--primary) 0%,
      var(--primary) var(--value, 0%),
      #e9edf5 var(--value, 0%),
      #e9edf5 100%);
}

.main__content--form-flex-input .input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  background: #fff;
  border: 4px solid var(--primary);
  border-radius: 50%;
  cursor: pointer;
  margin-top: -9px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: box-shadow .2s, transform .2s;
  animation-duration: 0.2s;
  transition-duration: 0.2s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.main__content--form-flex-input .input:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 4px rgba(13, 162, 231, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}

/* Firefox */
.main__content--form-flex-input .input:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 4px rgba(13, 162, 231, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}

.main__content--form-flex-input .input::-moz-range-track {
  height: 12px;
  border-radius: 10px;
  background: #e9edf5;
}

.main__content--form-flex-input .input::-moz-range-progress {
  height: 12px;
  border-radius: 10px;
  background: var(--primary);
}

.main__content--form-flex-input .input::-moz-range-thumb {
  width: 32px;
  height: 32px;
  background: #fff;
  border: 4px solid var(--primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.main__content--form-flex_labels {
  width: 100%;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main__content--form-submit {
  padding: 20;
}

.main__content--form-title {
  color: var(--foreground);
  margin-bottom: 8px;
  font-family: Inter;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.3;
  text-align: center;
}

.main__content--form-title span {
  color: var(--primary);
}

.main__content--form-disc {
  margin: 0 auto 24px;
  max-width: 298px;

  text-align: center;
  font-family: Inter;
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted-foreground);
}

.main__content--form-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  margin-bottom: 24px;
}

@media screen and (min-width: 551px) {
  .main__content--title {
    line-height: 1.25;
  }
}

@media (min-width: 640px) {
  .main__content--title {
    font-size: 48px;
    line-height: 1.2;
  }

  .main__wrap {
    max-width: 630px;
  }

  .main__content--form .btn {
    padding: 32px;
  }

  .main__content--form-title {
    font-size: 36px;
    line-height: 40px;
  }

  .main__content--desc {
    font-size: 20px;
    line-height: 28px;
  }

  .main__content--form-amount span {
    font-size: 16px;
    line-height: 20px;
  }

  .main__content--form-amount .amount-cont .number {
    font-size: 24px;
    line-height: 32px;
  }
}

@media (min-width: 670px) {
  .main__wrap {
    max-width: 660px;
  }
}

@media (min-width: 768px) {
  .main__wrap {
    max-width: 736px;
  }
}

@media (min-width: 1024px) {
  .main__content--title {
    font-size: 60px;
  }
}

.main__content--form-flex_sum {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Inter;
  width: 100%;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
  color: var(--primary);
  padding: 0 8px;
}

.main__content--form-flex_label {
  font-family: Inter;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  color: var(--muted-foreground);
}

.main__content--form-flex_label img {
  margin-bottom: 8px;
}

.main__content--form .btn {
  display: block;
  font-family: Inter;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  color: var(--accent-foreground);
  width: 100%;
  padding: 16px;
  background-color: var(--accent);
  border-radius: 12px;
  cursor: pointer;

  --tw-ring-offset-color: var(--background);
  --tw-shadow-color: rgba(16, 183, 127, 0.3);
  --tw-shadow: var(--tw-shadow-colored);

  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;

  transition-duration: 0.3s;

  animation-duration: 0.3s;

  margin-bottom: 16px;
}

.main__content--form .btn:hover,
.main__content--form .btn:focus {
  background-color: rgba(16, 183, 127, 0.9);
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.main__content--history {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  margin-top: 16px;
  /* margin-bottom: 24px; */
  font-family: Inter;
}

.main__content--list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.main__content--list li {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(226 232 240 / var(--tw-ring-opacity, 1));

  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  text-align: center;
  padding: 12px 8px;
  border-radius: 12px;
}

.main__content--list li svg {
  color: var(--primary);
  width: 20px;
  height: 20px;
  margin-bottom: 4px;
}

.main__content--list li p {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.25;
}

.main__content--list li .bold {
  font-weight: bold;
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.3;
}

.main__content--list li .primary {
  color: var(--primary);
}

.main__content--secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.3;
}

@media screen and (min-width: 640px) {
  .main__content--list li .bold {
    font-size: 16px;
    line-height: 24px;
  }
}

/* MAIN SECTION END */

/* PARTNERS SECTION */

.partners {
  padding: 64px 32px;
  background-color: rgba(241, 245, 249, 0.3);
}

.partners__title {
    margin-bottom: 16px;
    font-family: Inter;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.1;
    text-align: center;
    color: var(--foreground);
}

.partners__desc {
  color: var(--muted-foreground);
  font-size: 18px;
  font-family: Inter;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 64px;
}

.partners__list {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.partners__list li {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
  padding: 24px;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partners__list li img {
  max-height: 48px;
  width: auto;
  min-width: 100px;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

@media (min-width: 640px) {
  .partners__title {
    font-size: 36px;
  }
}

@media (min-width: 768px) {
  .partners__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .partners__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* PARNERS SECTION END */

/* SERVICES SECTION */

.services {
  padding: 64px 32px;
  background-color: rgba(240, 249, 255, 0.3);
}

.services__title {
  margin-bottom: 16px;
  font-family: Inter;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
  text-align: center;
  color: var(--foreground);
}

.services__title span {
  background: linear-gradient(90deg, #1c698d, #0da2e7, #21d5ed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.services__desc {
  color: var(--muted-foreground);
  font-family: Inter;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  max-width: 672px;
  margin: 0 auto 48px;
}

.services__list {
  gap: 24px;
  display: grid;
}

.services__item {
  background-color: #ffffffbf;
  --tw-backdrop-blur: blur(24px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

  --tw-ring-color: rgb(0 0 0 / 0.05);

  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);

  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
    0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

  padding: 24px;
  border-radius: 24px;
}

.services__item--image {
  background-color: rgba(13, 162, 231, 0.1);
  border-radius: 12px;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.services__item--image svg {
  width: 24px;
  height: 24px;
  color: var(--primary);
}

.services__item--title {
  color: var(--foreground);
  font-family: Inter;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.3;
}

.services__item p {
  color: var(--muted-foreground);
  font-family: Inter;
  font-size: 14px;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .services__title {
    font-size: 36px;
    line-height: 40px;
  }

  .services__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .services__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* SERVICES SECTION END*/

/* Cómo funciona section */

.how {
  padding: 64px 20px;
  background-color: var(--background);
}

.how__list {
  list-style: none;
  display: grid;
  flex-direction: column;

  gap: 32px;
  max-width: 1024px;
  margin: 0 auto;
}

.hidden-line {
  display: none;
}

.how__list li {
  list-style: none;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;

  position: relative;
}

.how__list-imgs-cont {
  display: flex;
  align-items: flex-start;

  margin-bottom: 24px;
}

.how__list-item-img {
  background-color: rgba(13, 162, 231, 0.1);
  border-radius: 12px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.how__list-item-img svg {
  color: var(--primary);
}

.how__list-item-title {
  color: var(--foreground);
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 1.3;
  width: 100%;
}

.how__list-item-desc {
  color: var(--muted-foreground);
  font-size: 16px;
  text-align: center;
  font-weight: normal;
}

.how__list-item-number {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  width: 64px;
  height: 64px;

  --tw-shadow-color: rgba(13, 162, 231, 0.3);
  --tw-shadow: var(--tw-shadow-colored);

  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));

  --tw-gradient-to: var(--secondary) var(--tw-gradient-to-position);

  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  border-radius: 16px;

  --tw-gradient-from: var(--primary) var(--tw-gradient-from-position);
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

@media (min-width: 768px) {
  .how__list {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
  }

  .hidden-line {
    height: 2px;
    width: 60%;
    display: block;
    position: absolute;
    top: 30px;
    left: 74%;
    opacity: 0.3;

    --tw-gradient-to: var(--secondary) var(--tw-gradient-to-position);
    --tw-gradient-from: var(--primary) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(13, 162, 231, 0.1) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
}

/* Cómo funciona section END */

/* REVIEWS section */

.reviews {
  padding: 80px 32px;
}

.reviews__list {
  display: grid;
  gap: 24px;
}

.reviews__item {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: #ffffffbf;
}

.reviews__item-title-cont {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.reviews__item-title-cont span {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  background-color: var(--primary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.reviews__item-title-cont h4 {
  color: var(--foreground);
  font-weight: 600;
  font-size: 16px;
}

.reviews__item-title-cont p {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 20px;
}

.reviews__item-starts-cont {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.reviews__item-starts-cont svg {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
  fill: #facc15;
  width: 16px;
  height: 16px;
}

.reviews__item-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .reviews__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .reviews__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* REVIEWS section END */

/* PROMO section */

.promo {
  padding: 80px 32px;
  background-color: var(--primary);
  opacity: 0.9;
}

.promo .container {
  max-width: 896px;
  margin: 0 auto;
}

.promo__title {
  color: var(--primary-foreground);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  text-align: center;
  margin-bottom: 24px;
}

.promo_desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
  line-height: 24px;
  max-width: 672px;
  margin: 0 auto 40px;
  text-align: center;
}

.promo__btns-cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}

.promo__btn {
  height: 56px;
  padding: 0 40px;
  background-color: var(--accent);
  border-radius: 12px;

  cursor: pointer;

  font-size: 16px;
  line-height: 24px;
  text-align: center;
  font-weight: 600;
  color: var(--accent-foreground);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  --tw-ring-offset-color: var(--background);
  --tw-shadow-color: rgba(16, 183, 127, 0.3);
  --tw-shadow: var(--tw-shadow-colored);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.promo__btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.promo__btn:hover,
.promo__btn :focus {
  background-color: rgba(16, 183, 127, 0.9);
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.promo__btn-white {
  height: 56px;
  padding: 0 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;

  cursor: pointer;

  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--primary-foreground);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --tw-ring-offset-color: var(--background);
}

.promo__btn-white:hover,
.promo__btn-white :focus {
  background-color: rgba(255, 255, 255, 0.2);
}

.promo__ad-list {
  display: flex;
  gap: 32px;
  color: rgba(255, 255, 255, 0.9);
  flex-wrap: wrap;
  justify-content: center;
}

.promo__ad-list p {
  text-align: center;
  font-size: 14px;
  line-height: 20px;
}

.promo__ad-list span {
  display: block;
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
}

@media (min-width: 640px) {
  .promo__btns-cont {
    flex-direction: row;
  }

  .promo__title {
    font-size: 36px;
  }
}

@media (min-width: 768px) {
  .promo__title {
    font-size: 60px;
    line-height: 1;
  }

  .promo_desc {
    font-size: 24px;
    line-height: 36px;
  }
}

/* PROMO section END */

/* INFO section */

.info {
  padding: 48px 32px;
  background-color: rgba(15, 23, 41, 0.05);
}

.info__title {
  color: var(--foreground);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 16px;
}

.info-item {
  max-width: 896px;
  margin: 0 auto 12px;
  padding: 16px 16px 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: #ffffffbf;
  --tw-backdrop-blur: blur(24px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.info-item button {
  display: flex;
  color: var(--foreground);
  font-weight: 500;
  font-size: 16px;
  justify-content: space-between;
  align-items: center;
  flex: 1 1 0%;
  cursor: pointer;
  padding-bottom: 16px;
  width: 100%;
  border: none;
  background: transparent;
}

.info-item button svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;

  transition-duration: 0.2s;
  animation-duration: 0.2s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.info-item .text {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted-foreground);
}

.info-item .text span {
  font-weight: 900;
  font-size: 20px;
}

.info-item div p {
  margin-bottom: 8px;
}

.top-border-border {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.text-primary {
  color: var(--primary) !important;
  font-weight: 600;
}

.info-item .content {
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease;
}

.info-item svg.rotated {
  transform: rotate(180deg);
}

/* INFO section end */

/* FOOTER section start */

.footer {
  background-color: rgba(15, 23, 41, 0.05);
  padding: 48px 0;
  border-top: 1px solid var(--border);
}

.footer .container {
  padding: 0 32px;
  margin: 0 auto;
  max-width: 1230px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__site-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 32px;
  width: 100%;
}

.footer__firm-info {
  padding-top: 32px;
  border-top: 1px solid var(--border);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__nav {
  list-style-type: none;
}

.footer__firm-info h4,
.footer__nav h4 {
  font-weight: 600;
  font-size: 16px;
  color: var(--foreground);
  margin-bottom: 16px;
}

.footer__nav li {
  font-size: 14px;
  height: 20px;
  line-height: 1;
  margin-bottom: 8px;
}

.footer__firm-info li a,
.footer__nav li a {
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.footer__firm-info li a:hover,
.footer__firm-info li a:focus,
.footer__nav li a:hover,
.footer__nav li a:focus {
  color: var(--primary);
}

.footer__firm-info ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.footer__firm-info p {
  color: var(--muted-foreground);
  text-align: center;
  font-size: 14px;
  height: 20px;
}

@media (min-width: 768px) {
  .footer__site-info {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* FOOTER END */


/* WAITING PAGE */

.wait {
  padding: 48px 16px;
  background-color: var(--background);
}

.wait-cont {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  padding: 24px;
  background-color: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  margin: 0 auto;
}

.search-svg-cont {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.pulse-ring {
  position: absolute;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background-color: rgba(16, 183, 127, 0.25);
  animation: pulse-ring 1s ease-out infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.search-svg-cont .img {
  padding: 32px;
  height: 128px;
  width: 128px;
  background-color: rgba(16, 183, 127, 0.1);
  border: none;
  border-radius: 50%;
}

.search-svg-cont .img svg {
  width: 64px;
  height: 64px;
  color: var(--accent);

  animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes pulse {
  0% {
    color: var(--accent);
  }

  50% {
    color: color-mix(in srgb, var(--accent) 70%, black);
  }

  100% {
    color: var(--accent);
  }
}

.wait h1 {
  color: var(--foreground);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 12px;
}

.wait .text {
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  margin-bottom: 32px;
}

.wait__progress-bar-cont {
  width: 100%;
  max-width: 448px;
  margin: 0 auto 32px;
}

.wait__progress-track {
  width: 100%;
  height: 12px;
  background-color: var(--secondary);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

/* час береться з html сторінки (привʼязка до constants.php змінної) */
.wait__progress-bar {
  width: 0%;
  height: 12px;
  background-color: var(--primary);
  border-radius: 6px;
  animation: progress-fill var(--progress-duration) linear forwards;
}

@keyframes progress-fill {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

.wait__progress-text-cont {
  display: flex;
  justify-content: space-between;
}

.wait__progress-text-cont p {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1;
}

.wait__advantages-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  align-items: center;
  gap: 24px;
  list-style: none;
  max-width: 216px;
  margin: 0 auto;
}

.wait__advantages-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: center;
  gap: 8px;
  text-align: center;

}

.wait__advantages-list div {
  background-color: rgba(16, 183, 127, 0.1);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.wait__advantages-list svg {
  color: var(--accent);
  width: 24px;
  height: 24px;
}

.wait__advantages-list p {
  font-size: 12px;
  line-height: 1;
  color: var(--muted-foreground)
}

@media (min-width: 768px) {

  .wait {
    padding: 80px 16px;
  }

  .wait-cont {
    max-width: 500px;
    padding: 40px;

  }
}

/* WAITING PAGE END */

/* HELPERS */

.duration-300 {
  animation-duration: 300ms;
  transition-duration: 300ms;
}

.card {
  animation-duration: 0.3s;
  transition-duration: 0.3s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover,
.card:focus {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.pointer-events-none {
  pointer-events: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -10;
}

.top-bg-circle {
  position: absolute;
  top: -6rem;
  opacity: 0.3;
  --tw-bg-opacity: 1;
  background-color: rgb(186 230 253 / var(--tw-bg-opacity, 1));
  border-radius: 9999px;
  height: 20rem;
  width: 20rem;
  left: -6rem;
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.bottom-bg-circle {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  --tw-bg-opacity: 1;
  background-color: rgb(165 243 252 / var(--tw-bg-opacity, 1));
  border-radius: 9999px;
  height: 24rem;
  right: -6rem;
  bottom: -6rem;
  width: 24rem;
  opacity: 0.3;
  position: absolute;
}

.privacy-policy__text h2 {
  font-family: Inter;
    font-size: 24px;
    line-height: 1.5;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 700;
}

.privacy-policy__text h3 {
  font-family: Inter;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 700;
    margin-top: 10px;
}

.privacy-policy__text li {
  font-family: Inter;
  font-size: 16px;
  margin-bottom: 5px;
}

.privacy-policy__text {
    color: var(--foreground);
}

.privacy-policy__text p {
  font-family: Inter;
    font-size: 18px;
    line-height: 1.2;
    padding-bottom: 6px;
}

.header__nav--list li a, .link {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.link {
    font-weight: 600;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
}


.contacts-title {
    font-size: 36px;
    line-height: 42px;
    margin-top: 10px;
    margin-bottom: 15px
}

.contacts-form input,.contacts-form textarea {
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 100%;
    height: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 20px 22px
}

.contacts-form textarea {
    height: 150px;
    resize: none
}

.contacts-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--accent-foreground);
    border-radius: 12px;
    background-color: var(--accent);
    width: 100%;
    height: 47px;
    cursor: pointer;
    margin-bottom: 50px;
    --tw-ring-offset-color: var(--background);
    --tw-shadow: var(--tw-shadow-colored);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4,0,0.2,1)
}

.contacts-text p {
    line-height: 1.5;
    margin-bottom: 10px
}