@import url('./fonts.css');

* {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}

*::selection {
  background-color: #cb4154;
  color: #ffffff;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Karla', sans-serif;
}

img {
  display: block;
  max-width: 100%;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font: inherit;
  margin-block: 0;
}

p {
  margin-block: 0;
}

ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 20px;
}

.toptitle {
  font-family: 'Rubik', sans-serif;
  font-weight: 700;

  color: #cb4154;
}

.header {
  position: absolute;
  z-index: 1337;
  width: 100%;

  top: 0;
  right: 50%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-block: 15px;
  translate: 50% 0;
}

.header-navigation {
  display: flex;
  column-gap: 30px;
}

.header-navigation__item {
  color: #fff;

  opacity: 0.75;
  transition: opacity 200ms linear;
}

.header-navigation__item:hover,
.header-navigation__item:focus-visible {
  opacity: 1;
}

.header__button {
  line-height: 45px;
  padding-inline: 30px;

  color: #fff;
  background-color: #cb4154;

  border-radius: 5px;
  transition: background-color 200ms linear;
}

.header__button:hover,
.header__button:focus-visible {
  background-color: #b43041;
}

.hero {
  height: 640px;
  background-size: cover;
  background-position: center;
}

.hero > .container {
  height: 100%;
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__title {
  font-family: 'Rubik', sans-serif;
  font-size: 38px;
  font-weight: 700;

  color: #fff;
}

.hero__description {
  margin-top: 10px;

  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  line-height: 1.5;

  color: #fff;
}

.hero-feedback {
  position: absolute;
  padding: 50px;

  bottom: 0;
  right: 0;

  width: 100%;
  translate: 0 50%;

  display: flex;
  justify-content: space-between;

  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0px 40px 45px -7px #f3f3f3;
}

.hero-feedback-body__title {
  margin-top: 5px;

  font-family: 'Rubik', sans-serif;
  font-size: 30px;
  font-weight: 700;

  color: #131d3b;
}

.about-us {
  position: relative;

  display: grid;
  grid-template-columns: repeat(2, 1fr);

  column-gap: 70px;
  padding-block: 200px 350px;
}

.about-us-gallery {
  position: relative;
}

.about-us-gallery__image:nth-child(1) {
  width: 100%;
  height: auto;
}

.about-us-gallery__image:nth-child(2) {
  position: absolute;
  translate: 0 50%;

  bottom: 0;
  right: 0;

  width: 50%;
  height: auto;
}

.about-us-body__title {
  margin-top: 10px;

  font-family: 'Rubik', sans-serif;
  font-size: 38px;
  font-weight: 700;

  color: #131d3b;
}

.about-us-body__description {
  margin-top: 10px;
  line-height: 1.5;
  color: #171717;
}

.about-us-cards {
  position: absolute;
  translate: 0 50%;

  right: 0;
  bottom: 0;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
}

.about-us-cards-item {
  padding: 50px;
  text-align: center;
}

.about-us-cards-item:nth-child(1) {
  color: #fff;
  background-color: #cb4154;
}

.about-us-cards-item:nth-child(2) {
  color: #131d3b;
  background-color: #fafafa;
}

.about-us-cards-item:nth-child(3) {
  color: #fff;
  background-color: #131d3b;
}

.about-us-cards-item:nth-child(4) {
  color: #fff;
  background-color: #b43041;
}

.about-us-cards-item__title {
  font-family: 'Rubik', sans-serif;
  font-size: 30px;
  font-weight: 700;
}

.about-us-cards-item__description {
  margin-top: 5px;
}

.services {
  padding-block: 150px 100px;

  color: #fff;
  background-color: #171717;
}

.services__toptitle {
  text-align: center;
}

.services__title {
  margin-top: 15px;

  font-family: 'Rubik', sans-serif;
  font-size: 38px;
  font-weight: 700;
  text-align: center;
}

.services-cards {
  margin-top: 60px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
}

.services-cards-item__image {
  width: 100%;
  height: auto;
}

.services-cards-item__title {
  padding-inline: 30px;
  margin-top: 20px;

  font-family: 'Rubik', sans-serif;
  font-weight: 700;
}

.services-cards-item__description {
  padding-inline: 30px;
  margin-top: 10px;
  line-height: 1.5;
}

.services-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;

  column-gap: 30px;
  margin-top: 100px;
}

.services-body__title {
  margin-top: 15px;

  font-family: 'Rubik', sans-serif;
  font-size: 38px;
  font-weight: 700;
}

.services-body__description {
  margin-top: 15px;
  line-height: 1.5;
}

.services-body__list {
  display: flex;
  flex-direction: column;

  row-gap: 15px;
  margin-top: 25px;
}

.services-body__list > li {
  display: flex;
  align-items: center;
  column-gap: 1ch;
}

.services-body__list > li::before {
  flex-shrink: 0;

  display: block;
  content: '';

  width: 1em;
  height: 1em;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10s10-4.48 10-10m-10 1H8v-2h4V8l4 4l-4 4z'/%3E%3C/svg%3E");
}

.countries {
  padding-block: 100px;
  background-size: cover;
  background-position: top center;
}

.countries__title {
  margin-top: 5px;

  font-family: 'Rubik', sans-serif;
  font-size: 38px;
  font-weight: 700;

  color: #131d3b;
}

.countries__description {
  margin-top: 25px;
  line-height: 1.5;

  color: #131d3b;
}

.countries-cards {
  display: flex;
  flex-direction: column;

  row-gap: 20px;
  margin-top: 15px;
}

.countries-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 10px;
}

.countries-cards-row:nth-child(2n) {
  grid-template-columns: repeat(3, 1fr);
}

.countries-cards-item {
  padding: 30px;

  display: flex;
  align-items: center;
  column-gap: 15px;

  background-color: #fff;
}

.countries-cards-item__image {
  width: 50px;
  height: auto;
}

.countries-cards-item__title {
  font-family: 'Rubik', sans-serif;
  font-size: 24px;
  font-weight: 700;

  color: #131d3b;
}

.out-clients {
  display: flex;
  flex-direction: column;

  row-gap: 100px;
  padding-block: 50px;
}

.out-clients-item {
  display: flex;
  column-gap: 25px;
}

.out-clients-item__title {
  width: 200px;
  flex-shrink: 0;

  font-family: 'Rubik', sans-serif;
  font-size: 21px;
  font-weight: 700;

  color: #cb4154;
}

.out-clients-item-clients {
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  width: 100%;
  row-gap: 50px;
}

.out-clients-item-clients__item {
  width: 100%;
  padding-inline: 25px;

  aspect-ratio: 1;
  object-fit: scale-down;

  border-right: 1px solid #ddd0d0;
}

.out-clients-item-clients__item:first-child,
.out-clients-item-clients__item:nth-child(6n) {
  border-left: 1px solid #ddd0d0;
}

.reviews {
  padding-block: 50px 100px;

  color: #131d3b;
  background-color: #fafafa;
}

.reviews__title {
  font-family: 'Rubik', sans-serif;
  font-size: 38px;
  font-weight: 700;
  text-align: center;
}

.reviews-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  column-gap: 20px;
  margin-top: 100px;
}

.reviews-item {
  padding: 30px;
  text-align: center;
  background-color: #fff;
}

.reviews-item-stars {
  display: flex;
  column-gap: 5px;
  width: fit-content;
  margin-inline: auto;
}

.reviews-item-stars__item {
  width: 14px;
  height: 14px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cb4154' d='m5.825 21l1.625-7.025L2 9.25l7.2-.625L12 2l2.8 6.625l7.2.625l-5.45 4.725L18.175 21L12 17.275z'/%3E%3C/svg%3E");
}

.reviews-item-stars__item:last-child {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cb4154' d='m15.15 16.85l-.825-3.6l2.775-2.4l-3.65-.325l-1.45-3.4v7.8zM5.825 21l1.625-7.025L2 9.25l7.2-.625L12 2l2.8 6.625l7.2.625l-5.45 4.725L18.175 21L12 17.275z'/%3E%3C/svg%3E");
}

.reviews-item__title {
  margin-top: 10px;

  font-family: 'Rubik', sans-serif;
  font-weight: 700;
}

.reviews-item__subtitle {
  margin-top: 10px;
}

.reviews-item__description {
  margin-top: 10px;
  line-height: 1.5;
}

.contact-us-hero {
  padding-block: 100px 150px;
  background-size: cover;
  background-attachment: fixed;
}

.contact-us-hero__toptitle {
  text-align: center;
}

.contact-us-hero__title {
  margin-top: 10px;

  font-family: 'Rubik', sans-serif;
  font-size: 38px;
  font-weight: 700;
  text-align: center;

  color: #fff;
}

.contact-us-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  column-gap: 150px;
  padding-block: 50px;
}

.contact-us__title {
  font-family: 'Rubik', sans-serif;
  font-size: 30px;
  font-weight: 700;

  color: #131d3b;
}

.contact-us__description {
  margin-top: 10px;

  line-height: 1.5;

  color: #131d3b;
}

.contact-us-body__divider {
  margin-block: 30px;

  width: 30%;
  height: 1px;

  background-color: #e1dcdc;
}

.contact-us__footer {
  color: #131d3b;
}

.contact-us-feedback {
  padding: 50px;
  background-color: #fff;
  translate: 0 calc(-35% - 50px);
}

.contact-us-feedback__title {
  margin-top: 10px;

  font-family: 'Rubik', sans-serif;
  font-size: 30px;
  font-weight: 700;

  color: #131d3b;
}

.footer {
  padding-block: 50px;

  color: #fff;
  background-color: #131d3b;
}

.footer > .container {
  display: flex;
  justify-content: space-between;
}

.footer-left {
  display: flex;
  flex-direction: column;

  row-gap: 25px;
  width: fit-content;
}

.footer-left__text {
  line-height: 1.5;
}

.footer-right {
  display: flex;
  flex-direction: column;
  row-gap: 50px;
}

.footer-column__title {
  margin-bottom: 25px;

  font-family: 'Rubik', sans-serif;
  font-size: 24px;

  color: #cb4154;
}

.footer-column__item {
  display: block;
  transition: color 200ms linear;
}

.footer-column__item + .footer-column__item {
  margin-top: 12.5px;
}

a.footer-column__item:hover,
a.footer-column__item:focus-visible {
  color: #cb4154;
}

@media (max-width: 1239px) {
  .header {
    column-gap: 25px;
  }

  .header-navigation {
    display: none;
  }

  .header__button {
    padding-inline: 10px;
    line-height: 35px;
  }

  .hero__title {
    font-size: 18px;
  }

  .hero__description {
    font-size: 14px;
  }

  .hero-feedback {
    padding: 35px;
  }

  .hero-feedback-body__title {
    font-size: 18px;
  }

  .about-us {
    row-gap: 130px;
    grid-template-columns: 1fr;
    padding-block: 125px 50px;
  }

  .about-us-cards {
    position: static;
    display: flex;
    flex-direction: column;
    translate: none;
  }

  .services {
    padding-block: 100px;
  }

  .services-cards {
    display: flex;
    flex-direction: column;
    row-gap: 50px;
  }

  .services-body {
    display: flex;
    flex-direction: column-reverse;
    row-gap: 25px;
  }

  .countries-cards-row {
    display: flex;
    row-gap: 10px;
    flex-wrap: wrap;
  }

  .countries-cards-item {
    flex-grow: 1;
  }

  .out-clients-item {
    flex-direction: column;
    row-gap: 25px;
  }

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

  .reviews-items {
    display: flex;
    flex-direction: column;
    row-gap: 25px;
  }

  .contact-us-hero {
    padding-block: 100px;
  }

  .contact-us-body {
    display: flex;
    flex-direction: column;
    row-gap: 50px;
  }

  .contact-us-feedback {
    padding: 0;
    translate: none;
  }

  .footer > .container {
    flex-direction: column-reverse;
    row-gap: 50px;
  }
}