@import url("../fonts/fonts.css");

:root {
  /* Colors */
  --color-primary-300: #2a5c8c;
  --color-primary-200: #388dc2;
  --color-primary-100: #40a0d6;
  --color-primary-50: #68c6eb;
  --color-primary-25: #b8e7f7;
  --color-primary-0: #e3f6fc;
  --color-aqua-300: #22323a;
  --color-aqua-200: #334751;
  --color-aqua-100: #4f6e7d;
  --color-aqua-50: #8ca4b1;
  --color-aqua-25: #cbd8df;
  --color-aqua-0: #f1f4f6;
  --color-red-300: #5b0013;
  --color-red-200: #89001c;
  --color-red-100: #ff0c3e;
  --color-red-50: #ff8787;
  --color-red-25: #fadbe1;
  --color-red-0: #fff0f3;
  --color-yellow-300: #e45510;
  --color-yellow-200: #ee6f12;
  --color-yellow-100: #ff9a18;
  --color-yellow-50: #ffcd84;
  --color-yellow-25: #ffe0b4;
  --color-yellow-0: #fff9f1;
  --color-green-300: #24490d;
  --color-green-200: #1c7315;
  --color-green-100: #4caf50;
  --color-green-50: #b4e199;
  --color-green-25: #dff2cd;
  --color-green-0: #f7fef0;
  --color-gray-900: #0d0d12;
  --color-gray-800: #1a1b25;
  --color-gray-700: #272835;
  --color-gray-600: #36394a;
  --color-gray-500: #666d80;
  --color-gray-400: #818898;
  --color-gray-300: #a4acb9;
  --color-gray-200: #c1c7d0;
  --color-gray-100: #dfe1e7;
  --color-gray-50: #eceff3;
  --color-gray-25: #f6f8fa;
  --color-gray-0: #f8fafb;
  --color-white: #ffffff;

  /* Font size */
  --fs-display-1: 68px;
  --fs-display-2: 52px;
  --fs-display-3: 48px;
  --fs-display-4: 40px;
  --fs-display-5: 32px;
  --fs-display-6: 24px;
  --fs-display-7: 20px;
  --fs-display-8: 18px;
  --fs-text: 16px;
  --fs-xs-text: 15px;
  --fs-small: 14px;
  --fs-xsmall: 12px;

  /* Font family */
  --font-primary: "source-sans-pro", sans-serif;
  --font-secondary: "gotham", sans-serif;
  --font-accent: "helvetica-now-display", sans-serif;

  --transition: all 0.3s ease-in-out;

  /* box shadows */
  --shadow-tight-edge: 0 0 5px rgba(0 0 0 / 20%);
  --shadow-section: 0 10px 10px rgba(0 0 0 / 10%);
  --shadow-top-section: 0 -5px 10px rgba(0 0 0 / 10%);
  --shadow-panel: 0 2px 8px -1px rgba(13 13 18 / 4%);
  --shadow-section: 0 4px 4px 0 rgba(0 0 0 / 25%),
    0 2px 8px -1px rgba(13 13 18 / 4%);
}

::selection {
  background-color: var(--color-primary-100);
  color: var(--color-white);
}

body {
  font-family: var(--font-secondary);
  font-size: var(--fs-text);
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-gray-500);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-gray-900);
  font-family: var(--font-primary);
  font-weight: 600;
}

h1 {
  font-size: var(--fs-display-1);
}
h2 {
  font-size: var(--fs-display-2);
}
h3 {
  font-size: var(--fs-display-3);
}
h4 {
  font-size: var(--fs-display-4);
}
h5 {
  font-size: var(--fs-display-5);
}
h6 {
  font-size: var(--fs-display-6);
}

a {
  color: var(--color-primary-100);
  transition: var(--transition);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-300);
}

img {
  max-width: 100%;
  height: auto;
}

/* Button */
.btn {
  --bs-btn-padding-x: 20px;
  --bs-btn-padding-y: 10px;
  --bs-btn-font-family: var(--font-secondary);
  --bs-btn-font-size: var(--fs-text);
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.5;
  --bs-btn-border-radius: 8px;
  --bs-btn-active-shadow: none;
  transition: var(--transition);
}
.btn-font-primary {
  --bs-btn-font-family: var(--font-primary);
}
.btn-sm {
  --bs-btn-padding-x: 16px;
  --bs-btn-padding-y: 9px;
}
.btn-lg {
  --bs-btn-padding-x: 16px;
  --bs-btn-padding-y: 14px;
}
.btn-icon {
  --icon-offset-x: 8px;
}
.btn-icon .icon {
  display: inline-block;
  margin-left: var(--icon-offset-x);
}

.btn-primary {
  --bs-btn-bg: var(--color-primary-100);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--color-primary-100);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-primary-300);
  --bs-btn-hover-border-color: var(--color-primary-300);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-primary-300);
  --bs-btn-active-border-color: var(--color-primary-300);
  --bs-btn-disabled-color: var(--color-gray-300);
  --bs-btn-disabled-bg: var(--color-primary-200);
  --bs-btn-disabled-border-color: var(--color-primary-200);
}

.btn-primary-300 {
  --bs-btn-bg: var(--color-primary-300);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--color-primary-300);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-primary-200);
  --bs-btn-hover-border-color: var(--color-primary-200);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-primary-200);
  --bs-btn-active-border-color: var(--color-primary-200);
}

.btn-outline {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--color-gray-900);
  --bs-btn-border-color: var(--color-gray-100);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-gray-900);
  --bs-btn-hover-border-color: var(--color-gray-900);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--color-gray-900);
  --bs-btn-active-bg: var(--color-primary-300);
  --bs-btn-active-border-color: var(--color-primary-300);
  --bs-btn-disabled-color: var(--color-gray-300);
  --bs-btn-disabled-bg: var(--color-primary-200);
  --bs-btn-disabled-border-color: var(--color-primary-200);
}

.btn-white {
  --bs-btn-bg: var(--color-white);
  --bs-btn-color: var(--color-primary-100);
  --bs-btn-border-color: var(--color-white);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-primary-100);
  --bs-btn-hover-border-color: var(--color-primary-100);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--color-primary-100);
  --bs-btn-active-border-color: var(--color-primary-100);
}

/* Color */
.text-primary-300 {
  color: var(--color-primary-300);
}
.text-primary-200 {
  color: var(--color-primary-200);
}
.text-primary-100 {
  color: var(--color-primary-100);
}
.text-primary-50 {
  color: var(--color-primary-50);
}
.text-primary-25 {
  color: var(--color-primary-25);
}
.text-primary-0 {
  color: var(--color-primary-0);
}
.text-aqua-300 {
  color: var(--color-aqua-300);
}
.text-aqua-200 {
  color: var(--color-aqua-200);
}
.text-aqua-100 {
  color: var(--color-aqua-100);
}
.text-aqua-50 {
  color: var(--color-aqua-50);
}
.text-aqua-25 {
  color: var(--color-aqua-25);
}
.text-aqua-0 {
  color: var(--color-aqua-0);
}
.text-red-300 {
  color: var(--color-red-300);
}
.text-red-200 {
  color: var(--color-red-200);
}
.text-red-100 {
  color: var(--color-red-100);
}
.text-red-50 {
  color: var(--color-red-50);
}
.text-red-25 {
  color: var(--color-red-25);
}
.text-red-0 {
  color: var(--color-red-0);
}
.text-yellow-300 {
  color: var(--color-yellow-300);
}
.text-yellow-200 {
  color: var(--color-yellow-200);
}
.text-yellow-100 {
  color: var(--color-yellow-100);
}
.text-yellow-50 {
  color: var(--color-yellow-50);
}
.text-yellow-25 {
  color: var(--color-yellow-25);
}
.text-yellow-0 {
  color: var(--color-yellow-0);
}
.text-green-300 {
  color: var(--color-green-300);
}
.text-green-200 {
  color: var(--color-green-200);
}
.text-green-100 {
  color: var(--color-green-100);
}
.text-green-50 {
  color: var(--color-green-50);
}
.text-green-25 {
  color: var(--color-green-25);
}
.text-green-0 {
  color: var(--color-green-0);
}
.text-gray-900 {
  color: var(--color-gray-900);
}
.text-gray-800 {
  color: var(--color-gray-800);
}
.text-gray-700 {
  color: var(--color-gray-700);
}
.text-gray-600 {
  color: var(--color-gray-600);
}
.text-gray-500 {
  color: var(--color-gray-500);
}
.text-gray-400 {
  color: var(--color-gray-400);
}
.text-gray-300 {
  color: var(--color-gray-300);
}
.text-gray-200 {
  color: var(--color-gray-200);
}
.text-gray-100 {
  color: var(--color-gray-100);
}
.text-gray-50 {
  color: var(--color-gray-50);
}
.text-gray-25 {
  color: var(--color-gray-25);
}
.text-gray-0 {
  color: var(--color-gray-0);
}
.text-white {
  color: var(--color-white);
}

.text-highlight {
  --text-color: var(--color-primary-100);
}
.text-highlight span {
  color: var(--text-color);
}

.bg-gray {
  background-color: var(--color-gray-0);
}

/* utilities typography */
.lead {
  font-size: var(--fs-display-8);
}
.fs-display-1 {
  font-size: var(--fs-display-1);
}
.fs-display-2 {
  font-size: var(--fs-display-2);
}
.fs-display-3 {
  font-size: var(--fs-display-3);
}
.fs-display-4 {
  font-size: var(--fs-display-4);
}
.fs-display-5 {
  font-size: var(--fs-display-5);
}
.fs-display-6 {
  font-size: var(--fs-display-6);
}
.fs-display-7 {
  font-size: var(--fs-display-7);
}
.fs-display-8 {
  font-size: var(--fs-display-8);
}
.fs-text {
  font-size: var(--fs-text);
}
.fs-xs-text {
  font-size: var(--fs-xs-text);
}
.fs-small {
  font-size: var(--fs-small);
}
.fs-xsmall {
  font-size: var(--fs-xsmall);
}

.font-primary {
  font-family: var(--font-primary);
}

/* spacing */
.block {
  padding: 88px 0;
}
.description :last-child {
  margin-bottom: 0;
}

/* image ratio */
.image-ratio img {
  aspect-ratio: var(--_img-ratio);
  inline-size: 100%;
  object-fit: cover;
}

/* card */
.card {
  background-color: transparent;
  border: none;
  border-radius: 0;
}
.card .card-img {
  overflow: hidden;
}
.card .card-img img {
  transition: var(--transition);
}

/* Header */
.site-header {
  padding: 20px 24px;
}
.site-header .button-group {
  display: flex;
  gap: 12px;
}
.site-header .nav-link {
  --bs-navbar-nav-link-padding-x: 10px;
  --bs-navbar-nav-link-padding-y: 4px;
  --bs-navbar-brand-font-size: var(--fs-text);
  --bs-navbar-brand-color: var(--color-gray-600);
  --bs-nav-link-font-weight: 600;
  --bs-navbar-active-color: var(--color-primary-100);
  --bs-nav-link-hover-color: var(--color-primary-100);
  font-family: var(--font-primary);
}
.site-header .navbar-nav {
  gap: 16px;
}
.site-header .offcanvas-body > * {
  margin-left: auto;
}

/* banner */
.banner {
  --fs-title: 58px;
  padding: 0 32px 56px;
}
.banner .banner-wrapper {
  padding: 54px 0 0;
  background-image: radial-gradient(
    ellipse at 30% -10%,
    var(--color-white) 55%,
    #13a3d6 70%,
    #00355a 100%
  );
  border-radius: 20px;
  overflow: hidden;
}
.banner h1 {
  font-size: var(--fs-title);
  max-width: 1019px;
  margin: 0 auto;
  margin-bottom: 14px;
}
.banner .description {
  max-width: 766px;
  margin: 0 auto;
  margin-bottom: 50px;
}
.banner .btn {
  --bs-btn-font-weight: 500;
  min-width: 338px;
}

.banner-images {
  margin-top: 36px;
}
.banner-images :not(.middle-col) img {
  width: 80%;
}
.banner-images .middle-col img {
  width: 100%;
}
.banner-images .middle-col {
  margin-bottom: -120px;
}
.banner-images .first-col {
  margin-top: -90px;
}
.banner-images .last-col {
  text-align: end;
  margin-top: -6%;
}
.banner-images .last-col figure:nth-child(2) {
  padding-left: 50px;
  margin-left: -5px;
  margin-top: 20px;
}

/* partners */
.partners h2 {
  font-family: var(--font-secondary);
}
/* steps section style */
.working-process {
  padding: 88px 0 88px;
  box-shadow: var(--shadow-top-section);
  background-image: linear-gradient(180deg, #f9fafc, #ffffff);
}

.process-card {
  --fs-display-6: 24px;
  padding: 18px;
  border-radius: 25px;
  border: 1px solid var(--color-gray-50);
  height: 100%;
  box-shadow: 0 2.16px 8.64px -1.08px rgba(13 13 18 / 4%);
}
.process-card .card-thumb {
  margin-bottom: 0;
}
.process-steps > :first-child .process-card .card-thumb {
  margin-bottom: -9.5%;
}
.process-steps .fs-display-6 {
  display: flex;
  gap: 5px;
}

/* benifit section style */

.benifits {
  padding: 255px 0 140px;
  background-image: linear-gradient(
    -170deg,
    #e4f1fa 0%,
    #419ed8 40%,
    #3f4a5e 80%
  );
  position: relative;
  box-shadow: var(--shadow-section);
}
.benifits::before {
  content: "";
  position: absolute;
  left: 0;
  width: 455px;
  height: 191px;
  background: url("./../img/benifit-decoration.svg") no-repeat center center;
  background-size: contain;
  top: 60px;
  z-index: 2;
  pointer-events: none;
}
.shape-divider-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.shape-divider-top .img-sm {
  margin-top: -1px;
}

.benifits .benifit-subtitle {
  margin-bottom: 66px;
}

.card-benifit {
  height: 100%;
}
.card-benifit .card-img {
  width: 186px;
  height: 150px;
  margin: 0 auto;
  border-radius: 20px;
  background-image: linear-gradient(180deg, #ffffff 80%, #eeeeee 100%);
  border: 5px solid var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -32px;
  box-shadow: var(--shadow-tight-edge);
}
.card-benifit .card-body {
  background-color: rgba(255 255 255 / 40%);
  border-radius: 16px;
  padding: 54px 24px 38px;
}
.card-benifit .card-title {
  font-weight: 700;
  font-size: 21px;
}

.security {
  padding: 182px 0 166px;
}
.security-description {
  margin-bottom: 92px;
}
.card-icon .card-img {
  width: unset;
  align-self: center;
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(13 13 18 / 18%);
}
.card-icon .description {
  color: var(--color-gray-500);
}

/* cta style */
.block-cta {
  padding: 32px;
}
.block-cta .cta-wrapper {
  background: var(--color-primary-300) url("./../img/cta-pattern.svg") no-repeat
    center center;
  background-size: cover;
  color: var(--color-white);
  padding: 65px 0;
  border-radius: 20px;
}
.block-cta h2 {
  line-height: 1.1;
  color: var(--color-white);
}
.block-cta .button-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}
.block-cta .btn {
  min-width: 322px;
}

/* footer */
.top-footer {
  padding: 92px 0 280px;
}
.footer-list a {
  color: var(--color-gray-900);
  font-weight: 600;
  line-height: 2.3;
  font-family: var(--font-primary);
}
.footer-list a:hover {
  color: var(--color-primary-100);
}
.middle-footer {
  padding-bottom: 50px;
}
.power-by span.title {
  display: block;
  color: #415a67;
  text-transform: uppercase;
}
.bottom-footer {
  padding: 28px 0 40px;
  background: linear-gradient(180deg, #fbfbfb, transparent);
}

.social-list {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}
.social-list a {
  display: inline-block;
}
.social-list a:hover {
  transform: scale(1.1);
}

/* about us */
.about-banner {
  padding: 26px 16px 50px;
}
.about-wrapper {
  padding: 32px 0 68px;
  border-radius: 32px;
  background-image: linear-gradient(180deg, #f0fdff00, #f6f8fa);
}
.about-banner .thumbnail img {
  border-radius: 4px;
}
.about-banner .thumbnail {
  --_img-ratio: 311 / 175;
}
.about-thumbnail {
  --_img-ratio: 490 / 827;
}
.about-thumbnail img,
.expertise-thumbnail img {
  border-radius: 16px;
}
.expertise-thumbnail {
  --_img-ratio: 700 / 731;
}
.team .description {
  margin-bottom: 72px;
}

.team-card {
  padding: 16px 16px 20px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-50);
  box-shadow: 0 2px 8px -1px rgba(13 13 18 / 4%);
  border-radius: 16px;
  height: 100%;
}
.team-card .card-img {
  --_img-ratio: 352 / 250;
  margin-bottom: 20px;
}
.team-card .card-img img {
  border-radius: 8px;
}
.team-card:hover .card-img img {
  transform: scale(1.2);
}

/* faq page */
.page-banner {
  padding: 0 32px 32px;
}
.page-banner .page-banner-wrapper {
  padding: 96px 0;
  border-radius: 20px;
  background-image: linear-gradient(180deg, #f0f0ff00, #f6f8fa);
}
.cta-wrapper.faq-cta-wrapper {
  background: var(--color-primary-300);
}

.faq {
  --bs-accordion-border-radius: 0;
  --bs-accordion-border-width: 0;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-body-padding-x: 24px;
  --bs-accordion-body-padding-y: 24px;
  --bs-accordion-btn-padding-y: 24px;
  --bs-accordion-btn-padding-x: 24px;
  --bs-accordion-active-color: var(--color-gray-900);
  --bs-accordion-btn-icon-width: 18px;
  display: flex;
  flex-flow: column;
  gap: 16px;
}
.faq .accordion-item {
  border-radius: 12px;
  border: 1px solid var(--color-gray-50);
  overflow: hidden;
  box-shadow: 0 2px 8px -1px rgba(13 13 18 / 4%);
}
.faq .accordion-body {
  padding-top: 0;
  color: var(--color-gray-500);
}
.faq .accordion-button {
  font-size: var(--fs-display-6);
}
.faq .accordion-button[aria-expanded="false"]::after {
  background-image: url("./../img/icon-plus.svg");
}
.faq .accordion-button::after {
  background-image: url("./../img/icon-minus.svg");
}
.faq .accordion-button:focus {
  box-shadow: none;
}

/* contact page */
.contact-banner .page-banner-wrapper {
  padding: 56px 0 48px;
}
.contact-form {
  padding: 32px 40px 40px;
  border-radius: 16px;
  border: 1px solid var(--color-gray-50);
  background-color: var(--color-white);
  box-shadow: var(--shadow-panel);
}

textarea.form-control {
  min-height: 130px;
  resize: none;
}
.form-control {
  padding: 11px 12px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(18 55 105 / 8%), 0 0 0 1px rgba(9 25 72 /13%);
}
.form-control:focus {
  box-shadow: 0 1px 4px rgba(18 55 105 / 12%), 0 0 0 2px rgba(9 25 72 /15%);
}
.form-control::placeholder {
  color: var(--color-gray-300);
}
.captcha-container {
  margin: 32px 0;
}
.contact-info {
  padding: 12px 0 90px;
}

.contact-card {
  border-radius: 30px;
  box-shadow: 0 2px 12px -1px rgba(13 13 18 / 11%);
  padding: 21px 0;
}

/* privacy policy */
.text-block {
  --item-spacing-y: 48px;
  --elements-spacing-y: 20px;
  font-size: var(--fs-display-8);
}
.text-block h2 {
  --fs-display-2: var(--fs-display-5);
}
.text-block h3 {
  --fs-display-3: var(--fs-display-6);
}
.text-block h4 {
  --fs-display-4: var(--fs-display-7);
}
.text-block h5 {
  --fs-display-5: var(--fs-display-8);
}
.text-block h6 {
  --fs-display-6: var(--fs-text);
}
.text-block-item li:not(:last-child) {
  margin-bottom: 10px;
}
.text-block-item + .text-block-item {
  margin-top: var(--item-spacing-y);
}
.text-block-item > *:not(:last-child) {
  margin-bottom: var(--elements-spacing-y);
}

/* bootstrap media queries for responsive design */
@media (max-width: 1399.98px) {
  .banner-images :not(.middle-col) img {
    width: 100%;
  }
  .benifits::before {
    width: 350px;
    top: 0;
  }
}

@media (max-width: 1199.98px) {
  .block {
    padding: 50px 0;
  }
  :root {
    /* Font size */
    --fs-display-1: 52px;
    --fs-display-2: 36px;
    --fs-display-3: 32px;
    --fs-display-4: 28px;
    --fs-display-5: 24px;
    --fs-display-6: 20px;
    --fs-display-7: 18px;
    --fs-display-8: 16px;
  }

  .site-header .navbar-nav {
    gap: 0;
    margin-bottom: 10px;
  }
  .site-header .button-group {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-branding img {
    max-width: 216px;
  }
  .site-header {
    padding: 20px;
  }

  .banner-images .first-col {
    margin-top: -30px;
  }
  .banner-images .last-col figure:nth-child(2) {
    margin-top: 0;
  }
  .banner-images .middle-col {
    margin-bottom: -50px;
  }
  .banner {
    --fs-title: 42px;
  }
  .banner .banner-wrapper {
    background-image: radial-gradient(
      circle at 30% -50%,
      var(--color-white) 55%,
      #13a3d6 80%,
      #00355a 100%
    );
  }
  .process-card {
    --fs-display-6: 20px;
  }
  .security {
    padding: 80px 0;
  }
  .security-description {
    margin-bottom: 60px;
  }
}

@media (max-width: 991.98px) {
  .working-process {
    padding: 60px 0 60px;
  }
  .security {
    padding: 80px 0;
  }
  .top-footer {
    padding: 80px 0 150px;
  }
  .about-thumbnail,
  .expertise-thumbnail {
    --_img-ratio: 327 / 234;
  }
  .team .description {
    margin-bottom: 40px;
  }
  .page-banner {
    padding: 0 16px 24px;
  }
  .faq {
    --bs-accordion-body-padding-x: 16px;
    --bs-accordion-body-padding-y: 16px;
    --bs-accordion-btn-padding-y: 16px;
    --bs-accordion-btn-padding-x: 16px;
  }
}

@media (max-width: 767.98px) {
  :root {
    /* Font size */
    --fs-display-1: 36px;
    --fs-display-2: 32px;
    --fs-display-3: 28px;
    --fs-display-4: 24px;
    --fs-display-5: 22px;
    --fs-display-6: 20px;
    --fs-display-7: 18px;
    --fs-display-8: 16px;
  }

  .block {
    padding: 48px 0;
  }

  .banner-images .middle-col {
    margin-bottom: -10px;
  }
  .banner {
    --fs-title: 30px;
    padding: 0 16px 24px;
  }
  .banner .description {
    margin-bottom: 16px;
  }
  .banner .banner-wrapper {
    padding: 24px 0 0;
  }
  .working-process {
    padding: 48px 0 178px;
  }
  .process-card {
    --fs-display-6: 24px;
  }

  .benifits::before {
    background-image: url("./../img/benifit-decoration-sm.svg");
    width: 200px;
    height: 182px;
    top: 10px;
  }
  .benifits {
    padding: 230px 0 75px;
    background-image: linear-gradient(
      210deg,
      #a7d2ed 5%,
      #419ed8 80%,
      #4079a2 100%
    );
  }
  .benifits .benifit-subtitle {
    margin-bottom: 100px;
  }
  .security {
    padding: 48px 0;
  }

  .security-description {
    margin-bottom: 32px;
  }
  .block-cta .cta-wrapper {
    background: var(--color-primary-100);
  }
  .top-footer {
    padding: 24px 0 100px;
  }
  .social-list {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .security-thumb {
    max-width: 120px;
    margin: 0 auto;
  }
  .cta-wrapper.faq-cta-wrapper {
    background: var(--color-primary-300);
  }
  .page-banner .page-banner-wrapper {
    padding: 32px 0;
  }
  .contact-form {
    padding: 20px 16px 16px;
  }
  .contact-card {
    padding: 40px 0;
  }
  .contact-info {
    padding: 12px 0 0;
  }
  .block-cta {
    padding: 24px;
  }

  .text-block {
    --item-spacing-y: 40px;
  }
}

@media (max-width: 575.98px) {
  .block-cta .button-group {
    flex-direction: column;
  }
  .block-cta .btn,
  .banner .btn {
    min-width: 1px;
    width: 100%;
  }
}
