:root {
  --page-padding: clamp(25px, 3vw, 65px);
  --page-width: 1440px;
  --black: #121212;
  --white: #fafafa;
  --gray: #3a3a3a;
  --red-rgb: 117 24 24;
  --red: rgb(var(--red-rgb));
  --orange: #ffb989;
  --blue: #183c75;
  --size: clamp(10rem, 1rem + 40vmin, 30rem);
  --gap: calc(var(--size) / 14);
  --duration: 30s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));
  --review-width: calc((var(--page-width) - var(--gap) * 2.5) * 0.8 / 3);
  font-size: 62.5%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

::selection {
  background-color: rgb(var(--red-rgb) / 100%);
  color: var(--white);
}

body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  font-family: 'Montserrat', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

[theme="black"] {
  background: black;
  color: var(--white);
}

[theme="light"] {
  background: var(--white);
  color: var(--black);
}

[theme="dark"] {
  background: var(--black);
  color: var(--white);
}

a {
  color: inherit;
  cursor: pointer;
  text-decoration: inherit;
}

img,
video {
  display: flex;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

svg {
  width: 100%;
  height: 100%;
}

section {
  overflow: hidden;
}

ul {
  margin: 0 0 4rem;
  list-style-type: none;
}

ul li {
  margin-bottom: 1.6rem;
}

ul li p {
  display: flex;
  line-height: 1.4;
}

ul li p::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M23.4214 11.3988L20.0139 10.4251C18.4794 9.99244 17.0816 9.17327 15.9542 8.04593C14.8269 6.91858 14.0077 5.52079 13.5751 3.9863L12.6014 0.578803C12.5524 0.459586 12.4691 0.357618 12.362 0.285857C12.255 0.214096 12.129 0.175781 12.0001 0.175781C11.8712 0.175781 11.7452 0.214096 11.6382 0.285857C11.5311 0.357618 11.4478 0.459586 11.3989 0.578803L10.4251 3.9863C9.99249 5.52079 9.17332 6.91858 8.04598 8.04593C6.91863 9.17327 5.52084 9.99244 3.98636 10.4251L0.578856 11.3988C0.448019 11.4359 0.332867 11.5147 0.250871 11.6232C0.168875 11.7318 0.124512 11.864 0.124512 12.0001C0.124512 12.1361 0.168875 12.2684 0.250871 12.3769C0.332867 12.4854 0.448019 12.5642 0.578856 12.6013L3.98636 13.5751C5.52084 14.0077 6.91863 14.8268 8.04598 15.9542C9.17332 17.0815 9.99249 18.4793 10.4251 20.0138L11.3989 23.4213C11.436 23.5521 11.5148 23.6673 11.6233 23.7493C11.7318 23.8313 11.8641 23.8756 12.0001 23.8756C12.1361 23.8756 12.2684 23.8313 12.3769 23.7493C12.4854 23.6673 12.5642 23.5521 12.6014 23.4213L13.5751 20.0138C14.0077 18.4793 14.8269 17.0815 15.9542 15.9542C17.0816 14.8268 18.4794 14.0077 20.0139 13.5751L23.4214 12.6013C23.5522 12.5642 23.6673 12.4854 23.7493 12.3769C23.8313 12.2684 23.8757 12.1361 23.8757 12.0001C23.8757 11.864 23.8313 11.7318 23.7493 11.6232C23.6673 11.5147 23.5522 11.4359 23.4214 11.3988Z' fill='%23751818'/%3E%3C/svg%3E");
  transform: translateY(2.5px);
  margin-right: 10px;
}

iframe {
    display: flex;
    border: none;
    flex: 1;
    border-radius: 20px;
}

.page-width {
  margin: 0 auto;
  padding: 0 var(--page-padding);
  max-width: var(--page-width);
}

.container {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.container.load-in {
  opacity: 1;
}

.page-width--narrow {
  max-width: calc(var(--page-width) * 0.8);
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
  background: transparent;
  width: 0px;
}

[page="404"] {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

[page="404"] header,
[page="paid-ads"] header,
[page="website-development"] header {
  position: inherit;
}

[page="404"] main,
[page="paid-ads"] main,
[page="website-development"] main {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body:is([page="website-development"], [page="paid-ads"]) .schedule,
body:is([page="website-development"], [page="paid-ads"]) .schedule .page-width,
body:is([page="website-development"], [page="paid-ads"]) .container,
body:is([page="website-development"], [page="paid-ads"]) .calendly-inline-widget {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
  background: rgb(0 0 0 / calc(var(--header-scroll) / 200));
}

.header {
  padding-block: 15px;
}

.header-logo {
  display: block;
  width: fit-content;
}

header img {
  transform: translateY(calc(0.85px * (100 - var(--header-scroll))));
  min-width: 140px;
  max-width: calc(225px - (var(--header-scroll) * 1px));
  will-change: transform, width, max-width;
  -webkit-filter: drop-shadow(5px 3px 3.5px #00000091);
  filter: drop-shadow(5px 3px 3.5px #00000091);
}

h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4,
.h5 {
  margin: 3.6rem 0;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  line-height: calc(1 + 0.3/max(1, 1));
  word-break: keep-all;
}

.bigger-margin {
  margin: 5rem 0;
}

.no-top-margin {
  margin-top: 0;
}

.no-bottom-margin {
  margin-bottom: 0;
}

.no-margin {
  margin: 0;
}

h1,
.h1 {
  font-size: 2.4rem;
}

h2,
.h2 {
  font-size: 2.5rem;
}

h3,
.h3 {
  font-size: 2.4rem;
}

h4,
.h4 {
  font-size: 2rem;
}

h5,
.h5 {
  font-size: 1.6rem;
}

underline {
  position: relative;
  display: inline-block;
}

underline::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: -75%;
  left: 0;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='358' height='16' viewBox='0 0 358 16' fill='none'%3E%3Cpath d='M75.3783 15C75.2126 14.8691 80.4898 14.3527 83.0536 14.1319C88.0387 13.7024 93.0215 13.3856 98.0026 12.932C111.098 11.7403 124.422 11.1589 137.632 10.6232C171.541 9.24934 232.204 5.01538 265.345 10.9862C266.987 11.282 261.91 10.9353 260.193 10.9078C257.371 10.8631 254.551 10.7983 251.729 10.7464C242.524 10.5778 233.242 10.2779 224.036 10.325C194.37 10.476 164.598 9.75071 134.939 10.4003C126.014 10.5961 117.118 11.0025 108.19 11.1596C103.018 11.2505 103.25 11.3275 97.9045 11.2213C95.587 11.1752 89.1609 11.5832 90.9938 10.7518C94.222 9.28699 104.312 9.65337 108.214 9.35451C126.032 7.99147 143.805 6.2115 161.714 5.25521C207.633 2.80324 254.38 2.79747 300.404 3.82331C319.231 4.24294 338.253 2.61973 357 3.9312C311.512 0.49308 264.23 0.98123 218.493 1.08062C166.997 1.19257 115.559 1.20003 64.0622 1.83508C42.9208 2.09561 22.2058 4.45184 1 4.27985' stroke='%23751818' stroke-width='2' stroke-miterlimit='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

highlight {
  padding-inline: 5px;
  white-space: nowrap;
  background-color: var(--red);
}

separator {
  display: block;
  height: 1px;
  width: calc(100% - 2.5rem);
  margin: 18px auto;
  background: var(--gray);
  opacity: 0.5;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border: 1.5px solid black;
  border-radius: 40px;
  padding: 0 2rem;
  cursor: pointer;
  font-size: 2.1rem;
  text-decoration: none;
  background-color: var(--red);
  color: var(--white);
  transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
  min-height: clamp(49px, 4.5vw, 56px);
  max-width: 32.5rem;
  width: 100%;
}

.btn--centered {
  margin: 3rem auto 0 !important;
}

.btn--secondary {
  background-color: var(--white);
  color: var(--black);
}

.btn svg path {
  fill: var(--white);
}

.btn--secondary svg path {
  fill: var(--black);
}

.btn svg {
  transition: transform 0.3s ease-in-out;
  max-width: 35px;
}

.btn--small {
  font-size: 1.5rem;
  min-height: clamp(43px, 4.5vw, 50px);
  max-width: 25rem;
}

.btn--small svg {
  max-width: 25px;
}

.btn--left {
  margin-right: auto !important;
  margin-left: 0 !important;
}

.btn--right {
  margin-right: 0 !important;
  margin-left: auto !important;
}

.text-body {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
}

.text-body--medium {
  font-size: 1.5rem;
}

.text-body--large {
  font-size: 1.6rem;
}

.text-body--extra-large {
  font-size: 1.8rem;
}

.section-title {
  text-align: center;
  margin-top: 0;
  margin-bottom: 4rem;
}

.hero {
  padding-block: 140px 24px;
}

.why {
  padding-block: 56px 66px;
}

.code {
  padding-block: 36px;
}

.start {
  padding-block: 27px;
}

.reviews {
  padding-block: 44px 66px;
}

.testimonials {
  padding-block: 200px;
}

.simple-steps {
  padding-block: 42px 66px;
}

.faqs {
  padding-block: 100px;
}

.portfolio {
  padding-block: 180px;
}

.copyright {
  padding-block: 15px;
}

.hero__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6.3rem;
  align-items: center;
  justify-content: space-between;
}

.hero__item {
  position: relative;
  width: 100%;
}

.icon-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2.4rem;
  column-gap: 4.8rem;
}

.icon-grid__container {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background-color: var(--white);
  border: 1px solid black;
  border-radius: 40px;
  padding: 0.5rem 1rem;
  color: var(--black);
}

.icon-grid__icon {
  flex-shrink: 0;
  width: 3.6rem;
  height: 3.6rem;
}

.icon-grid__content {
  flex: 1;
}

.code-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 56px;
}

.services {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px 56px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 1.5rem;
  border: 1px solid black;
  background-color: var(--white);
  color: var(--black);
  text-align: center;
  max-width: 40rem;
  flex: 1;
}

.card__label {
  position: absolute;
  top: calc(-105px / 3);
  right: calc(-105px / 3);
  line-height: 1;
}

.card__label span {
  color: var(--white);
  position: absolute;
  font-size: 95%;
  top: 47.5%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card__label svg {
  max-width: 105px;
}

.card__image {
  padding-top: 2.5rem;
  margin-left: 2.5rem;
  margin-right: 2.5rem;
  border-radius: 1.5rem;
}

.card__image img {
  border-radius: 1rem;
}

.card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 3.5rem 1.3rem;
}

.card__content h3,
.window-inner h3,
.card__content h4 {
  margin: 0;
  line-height: 1;
}

.included {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 10px;
  font-size: 14px;
  justify-content: space-between;
  margin-bottom: 18px;
  text-align: left;
}

.included-grid__container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: 1rem;
  min-width: calc(50% - 0.5rem);
}

.included-grid__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
}

.included-grid__container span {
  flex: 1;
}

.card__content p,
.window-inner p,
.review__description p {
  font-weight: 300;
  letter-spacing: -0.1px;
  margin-bottom: 1.8rem;
  line-height: 1.6;
  color: var(--gray);
}

.slider {
  --slider-gap: 20px;
  --slide-show: 3;
  display: grid;
  gap: var(--slider-gap);
  grid-template-columns: repeat(calc(var(--slides) + 2), 1fr);
  overflow-x: scroll;
  overflow-y: hidden;
  will-change: transform;
  transition: 0.3s ease-in-out;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.slider::-webkit-scrollbar {
  display: none;
}

.slider::before,
.slider::after {
  content: '';
  width: var(--slider-spacing);
}

.slide__current {
  background: gray;
}

.slider.dragging {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.slider:not(.dragging) {
  scroll-behavior: smooth;
}

.slide {
  user-select: none;
  height: inherit;
  will-change: transform;
  transition: 0.3s ease-in-out;
}

.reviews-container:not(.slider) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.reviews-container.slider {
  margin-inline: calc(-1 * var(--page-padding));
  gap: var(--gap);
}

.reviews-container.slider .slide {
  width: var(--review-width);
}

.review {
  padding: 2rem;
  border-radius: 40px;
  border: 1px solid black;
  height: inherit;
  background-color: var(--white);
  color: var(--black);
  text-align: center;
}

.review__stars {
  white-space: nowrap;
}

.icon-star {
  display: inline-block;
  width: 24px;
  aspect-ratio: 1;
}

.review__description {
  margin-block: 1.6rem;
}

.review__author {
  font-weight: 600;
}

.review__author p {
  line-height: 1.4;
}

.review__picture {
  width: 55px;
  margin: auto;
}

.review__picture img {
  margin-top: 1rem;
  border-radius: 40px;
}

.reviews__link {
  margin-top: 7.3rem;
  text-align: center;
}

.link {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
}

.steps__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.steps__grid::before {
  content: "";
  display: block;
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: calc(100% / 3 * 2);
  background-color: var(--black);
}

.steps__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.steps__item-image {
  width: 56px;
  height: 66px;
  background-color: var(--white);
  overflow: hidden;
}

.steps__item-image img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin: auto;
  border: 2px solid var(--black);
}

.steps__item-content {
  flex: 1;
  line-height: 1.4;
}

.accordion {
  background-color: var(--white);
  color: var(--black);
  border-radius: 40px;
  border: 1px solid black;
  margin-bottom: 1.5rem;
}

.question {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  padding: 2rem 2.4rem;
}

.question span {
  flex: 1;
  font-weight: 700;
}

.question svg {
  width: auto;
  height: 1.1rem;
  transition: transform 0.3s ease-in-out;
}

.question.active svg {
  transform: rotate(180deg);
}

.answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.answer-inner {
  padding: 0 2.4rem 2rem;
}

.copyright-text {
  font-size: 1.2rem;
  text-align: center;
}

.marquee {
  display: flex;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  gap: var(--gap);
  -webkit-mask-image: linear-gradient(var(--mask-direction, to right), #00000000, #000000 20%, #000000 80%, #00000000);
  mask-image: linear-gradient(var(--mask-direction, to right), #00000000, #000000 20%, #000000 80%, #00000000);
}

.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  -webkit-animation: scroll-x var(--duration) linear infinite;
  animation: scroll-x var(--duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__group {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }
}

.marquee--vertical {
  --mask-direction: to bottom;
}

.marquee--vertical,
.marquee--vertical .marquee__group {
  flex-direction: column;
}

.marquee--vertical .marquee__group {
  -webkit-animation-name: scroll-y;
  animation-name: scroll-y;
}

.marquee--reverse .marquee__group {
  animation-direction: reverse;
  -webkit-animation-delay: -3s;
  animation-delay: -3s;
}

@-webkit-keyframes scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }

  to {
    transform: translateX(var(--scroll-end));
  }
}

@keyframes scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }

  to {
    transform: translateX(var(--scroll-end));
  }
}

@-webkit-keyframes scroll-y {
  from {
    transform: translateY(var(--scroll-start));
  }

  to {
    transform: translateY(var(--scroll-end));
  }
}

@keyframes scroll-y {
  from {
    transform: translateY(var(--scroll-start));
  }

  to {
    transform: translateY(var(--scroll-end));
  }
}

.marquee .marquee__group>img {
  display: grid;
  place-items: center;
  width: var(--size);
  aspect-ratio: 2.5;
  padding: calc(var(--size) / 10) calc(var(--size) / 7);
  border-radius: 0.5rem;
}

.marquee--vertical .marquee__group>img,
.hero__mobile-slider .marquee .marquee__group>img {
  aspect-ratio: 9/16;
  width: calc(var(--size) / 1.5);
  border-radius: 1.5rem;
  padding: 0;
  object-fit: cover;
}

.marquee__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: auto;
  max-width: 100vw;
}

.marquee__wrapper--vertical {
  flex-direction: row;
  height: 100vh;
}

.hero__mobile-slider {
  margin-inline: calc(-1 * var(--page-padding));
}

.hero__mobile-slider .marquee {
  -webkit-mask-image: none;
  mask-image: none;
}

.hero__desktop-sliders {
  margin-right: calc(-3.5 * var(--page-padding));
}

.hero__desktop-sliders img,
.hero__mobile-slider img {
  object-position: top;
  border: 2px solid black;
}

.window {
  --close: #ec6a5f;
  --minimize: #f4bf51;
  --maximize: #62c454;
  color: var(--white);
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.close {
  background-color: var(--close);
}

.minimize {
  background-color: var(--minimize);
}

.maximize {
  background-color: var(--maximize);
}

.window-top {
  display: flex;
  padding: 12px;
  background-color: #334155;
  border-bottom: 1px solid transparent;
}

.window-top div {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

.window-top div:not(:last-of-type) {
  margin-right: 6px;
}

.window-bottom {
  padding: 24px 16px;
  background-color: #1e293b;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.window.light {
  color: var(--black);
}

.window.light .window-top {
  background-color: #e2e2e2;
}

.window.light .window-bottom {
  background-color: #ececec;
}

.code-line {
  --code: 5px;
  position: relative;
}

.code-line:last-child::after {
  content: '';
  position: absolute;
  right: -2.5px;
  bottom: 0;
  background-color: white;
  display: block;
  width: 1.5px;
  height: 17px;
  animation: blinker 1s infinite;
}

.code-line[level="2"] {
  margin-left: calc(4 * var(--code));
}

.code-line[level="3"] {
  margin-left: calc(8 * var(--code));
}

code .keyword {
  color: #bc70fd;
}

code .def {
  color: #fdc502;
  background: rgba(253, 197, 2, 0.05);
  padding: 1px 2px;
  border-radius: 2px;
}

code .variable {
  color: #2795ee;
}

code .operator {
  color: #ff4f68;
}

code .atom {
  color: #7561ff;
}

code .string {
  color: #f5eea2;
}

code .comment {
  color: #4e6a87;
}

.coming-soon {
  display: flex;
  height: 100vh;
  text-align: center;
  font-size: clamp(20px, 2.5vw, 60px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.coming-soon img {
  width: clamp(225px, 50vw, 400px);
  height: auto;
  margin-bottom: 20px;
}

@keyframes blinker {

  0%,
  50% {
    background-color: white;
  }

  51%,
  100% {
    background-color: transparent;
  }
}

@media only screen and (hover: none) {
  .slider {
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  .slide {
    scroll-snap-align: center;
  }
}

@media only screen and (hover: hover) {
  .btn:hover {
    border-color: var(--red);
    transform: scale(1.025);
  }

  .btn:hover svg {
    transform: translateX(5px);
  }
}

@media only screen and (max-width: 768px) {
  .code-container {
    grid-template-areas: "code" "content";
  }

  .code-container .code-code {
    grid-area: code;
  }

  .code-container .code-content {
    grid-area: content;
  }

  .card__label {
    transform: scale(0.75);
  }

  .card__content {
    gap: 0.8rem;
    padding: 1.8rem 1rem 3.2rem;
  }

  .question {
    padding: 1.2rem 2.4rem;
  }

  .answer-inner {
    padding: 0 2.4rem 1.2rem;
  }

  .slider {
    --slide-show: 2;
  }
}

@media only screen and (min-width: 640px) {
  .services {
    flex-direction: row;
    align-items: stretch;
  }

  .reviews-container:not(.slider) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 769px) {

  h1,
  .h1 {
    font-size: 3.6rem;
  }

  h2,
  .h2 {
    font-size: 3.6rem;
  }

  h3,
  .h3 {
    font-size: 3.2rem;
  }

  h4,
  .h4 {
    font-size: 2.2rem;
  }

  h5,
  .h5 {
    font-size: 2rem;
  }

  .text-body {
    font-size: 1.4rem;
  }

  .text-body--medium {
    font-size: 1.6rem;
  }

  .text-body--large {
    font-size: 1.8rem;
  }

  .text-body--extra-large {
    font-size: 2.2rem;
  }

  .section-title {
    margin-bottom: 6rem;
  }

  .why {
    padding-block: 132px 140px;
  }

  .code {
    padding-block: 44px 62px;
  }

  .start {
    padding-block: 36px;
  }

  .reviews {
    padding-block: 100px;
  }

  .simple-steps {
    padding-block: 66px 80px;
  }

  .faqs {
    padding-block: 100px;
  }

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

  .icon-grid__container {
    padding: 1rem 1.9rem;
  }

  .icon-grid__icon {
    width: 5rem;
    height: 5rem;
  }

  .code-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 990px) {
  .header-logo {
    margin: 0 auto;
  }

  ul li p {
    display: block;
  }

  ul li p::before {
    width: 2.2rem;
    height: 2.2rem;
    transform: translateY(3.5px);
  }

  .hero__item {
    text-align: center;
  }

  .hero__desktop-sliders {
    display: none;
  }

  .btn {
    margin: 0 auto;
  }

  .steps__item-image {
    background-color: transparent;
  }
}

@media only screen and (min-width: 991px) {
  .hero {
    padding-block: 32px 40px;
  }

  .hero__grid {
    flex-wrap: nowrap;
    max-height: 72.2rem;
  }

  .hero__item:nth-child(1) {
    width: 55%;
  }

  .hero__item:nth-child(2) {
    width: 45%;
    min-height: 72.2rem;
  }

  .hero__mobile-slider {
    display: none;
  }

  .steps__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 90px;
  }

  .steps__grid::before {
    top: 35px;
    left: 50%;
    transform: translate(-50%);
    width: calc(100% / 3 * 2);
    height: 2px;
  }

  .steps__item {
    flex-direction: column;
  }

  .steps__item-image {
    width: 126px;
    height: 76px;
  }

  .steps__item-image img {
    width: 76px;
    height: 76px;
  }

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

  .window-bottom {
    padding: 40px 32px;
  }

  .reviews-container:not(.slider) {
    grid-template-columns: repeat(3, 1fr);
  }
}