:root {
  --light-text: #e4d8cc;
  --dark-text: #101010;
  --dark-bg: #101010;
  --button: #7837f3;
  --first-expect: #b99fea;
  --mission-title: #e7dfd8;
  --reviews-line: rgba(228, 216, 204, 0.1);
  --additional-text: #c3bab1;
  --third-expect: #96dbc6;
  --header-btn: rgba(228, 216, 204, 0.5);
  --footer-line: rgba(228, 216, 204, 0.16);
  --second-expect: #eba789;
  --additional: #ffffff;
}

*::selection {
  background-color: var(--light-text);
  color: var(--dark-text);
}

*:focus {
  outline: none;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter;
  font-weight: 400;
}

.container {
  max-width: 1280px;
  width: 100%;
  padding: 0 64px;
  margin: 0 auto;
  /* outline: red dashed; */
}

/* banner */

.banner {
  background-image: url(../img/hero/hero-bg.webp);
  background-size: cover;
}

/* header */

.header {
  padding: 23px 0;
}

.header-container {
  display: flex;
  gap: 253px;
  padding: 0 22px 0 134px;
}

.header-nav-list {
  display: flex;
  gap: 32px;
}

.header-nav-link {
  color: var(--light-text);
  font-size: 11px;
  line-height: 2.18;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: inherit;
  transition: color 1s;
}

.header-nav-link:hover {
  color: var(--first-expect);
}

.header-nav-link:focus {
  color: var(--first-expect);
}

.header-contacts-list {
  display: flex;
  gap: 38px;
}

.header-contacts-link {
  color: var(--light-text);
  font-size: 11px;
  line-height: 2.18;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: inherit;
  transition: color 1s;
}

.header-contacts-link:hover {
  color: var(--first-expect);
}

.header-contacts-link:focus {
  color: var(--first-expect);
}

/* hero */

.hero {
  padding-top: 342px;
  padding-bottom: 116px;
}

.hero-title {
  color: var(--light-text);
  font-size: 57px;
  line-height: 1.06;
  max-width: 838px;
  font-weight: inherit;
  margin-bottom: 14px;
}

.hero-text {
  color: var(--additional-text);
  font-size: 18px;
  line-height: 1.55;
  font-weight: inherit;
  margin-bottom: 42px;
}

.header-btn-container {
  display: flex;
  gap: 16px;
}

.hero-offer-link {
  color: var(--additional);
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--button);
  padding: 14px 34px;
  border-radius: 100px;
  font-weight: inherit;
  transition: background-color 1s;
}

.hero-offer-link:hover {
  background-color: #432184;
}

.hero-offer-link:focus {
  background-color: #432184;
}

.hero-works-link {
  color: var(--additional);
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  padding: 14px 34px;
  border-radius: 100px;
  background: var(--header-btn);
  font-weight: inherit;
  transition: background-color 1s;
}

.hero-works-link:hover {
  background-color: rgba(185, 159, 234, 0.5);
}

.hero-works-link:focus {
  background-color: rgba(185, 159, 234, 0.5);
}

/* Money */

.money {
  background: var(--mission-title);
  padding: 76px 0 75px;
}

.money-container {
  display: flex;
  gap: 106px;
}

.money-title {
  color: var(--dark-text);
  font-size: 54px;
  font-weight: inherit;
  line-height: 1.07;
  margin-bottom: 15px;
  max-width: 507px;
}

.money-text {
  color: var(--dark-text);
  font-size: 16px;
  font-weight: inherit;
  line-height: 1.37;
  max-width: 452px;
}

.money-img-container {
  padding-top: 17px;
}

/* expexts */

.expexts {
  background-color: var(--mission-title);
}

.expexts-item {
  padding: 124px 0 81px;
  display: flex;
  gap: 116px;
}

.expexts-img {
  border-radius: 12px;
}

.expexts-number-container {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.expexts-number {
  color: var(--dark-text);
  text-align: center;
  font-size: 38px;
  font-weight: inherit;
  line-height: 0.63;
  border-radius: 100px;
}

.expexts-item:first-child .expexts-number {
  background-color: var(--first-expect);
  padding: 25px 28px;
}

.expexts-item:nth-child(2) .expexts-number {
  background-color: var(--second-expect);
  padding: 25px;
}

.expexts-item:last-child .expexts-number {
  background-color: var(--third-expect);
  padding: 25px;
}

.expexts-number-text {
  color: var(--dark-text);
  font-size: 19px;
  font-weight: inherit;
  line-height: 1.89;
}

.expexts-subtitle {
  color: var(--dark-text);
  font-size: 35px;
  font-weight: inherit;
  line-height: 1.3;
  letter-spacing: 1px;
  margin-bottom: 11px;
  max-width: 495px;
}

.expexts-link {
  color: var(--dark-text);
  font-size: 12px;
  font-weight: inherit;
  line-height: 2.5;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--dark-text);
  max-width: 94px;
  transition: color 1s, border 1s;
}

.expexts-item:first-child .expexts-link:hover {
  color: var(--first-expect);
  border-bottom: 2px solid var(--first-expect);
}

.expexts-item:nth-child(2) .expexts-link:hover {
  color: var(--second-expect);
  border-bottom: 2px solid var(--second-expect);
}

.expexts-item:last-child .expexts-link:hover {
  color: var(--third-expect);
  border-bottom: 2px solid var(--third-expect);
}

.expexts-item:first-child .expexts-link:focus {
  color: var(--first-expect);
  border-bottom: 2px solid var(--first-expect);
}

.expexts-item:nth-child(2) .expexts-link:focus {
  color: var(--second-expect);
  border-bottom: 2px solid var(--second-expect);
}

.expexts-item:last-child .expexts-link:focus {
  color: var(--third-expect);
  border-bottom: 2px solid var(--third-expect);
}

.expexts-icon {
  fill: var(--dark-text);
  transition: fill 1s;
}

.expexts-item:first-child .expexts-icon:hover {
  fill: var(--first-expect);
}

.expexts-item:first-child .expexts-link:hover .expexts-icon {
  fill: var(--first-expect);
}

.expexts-item:nth-child(2) .expexts-icon:hover {
  fill: var(--second-expect);
}

.expexts-item:nth-child(2) .expexts-link:hover .expexts-icon {
  fill: var(--second-expect);
}

.expexts-item:last-child .expexts-icon:hover {
  fill: var(--third-expect);
}

.expexts-item:last-child .expexts-link:hover .expexts-icon {
  fill: var(--third-expect);
}

.expexts-item:first-child .expexts-icon:focus {
  fill: var(--first-expect);
}

.expexts-item:first-child .expexts-link:focus .expexts-icon {
  fill: var(--first-expect);
}

.expexts-item:nth-child(2) .expexts-icon:focus {
  fill: var(--second-expect);
}

.expexts-item:nth-child(2) .expexts-link:focus .expexts-icon {
  fill: var(--second-expect);
}

.expexts-item:last-child .expexts-icon:focus {
  fill: var(--third-expect);
}

.expexts-item:last-child .expexts-link:focus .expexts-icon {
  fill: var(--third-expect);
}

.expexts-text {
  color: var(--dark-text);
  font-size: 14px;
  font-weight: inherit;
  line-height: 1.57;
  margin-top: 48px;
  max-width: 495px;
}

/* reviews */

.reviews {
  background: var(--additional);
  padding: 116px 0 112px;
}

.reviews-centering-container {
  display: flex;
  justify-content: center;
}

.reviews-container {
  display: flex;
}

.reviews-item-container:first-child {
  padding-right: 43px;
  border-right: 2px solid var(--reviews-line);
}

.reviews-item-container:last-child {
  padding-left: 83px;
}

.reviews-icon {
  margin: 0 auto;
  display: block;
}

.reviews-item-container:first-child .reviews-icon {
  fill: var(--second-expect);
}

.reviews-item-container:last-child .reviews-icon {
  fill: var(--third-expect);
}

.reviews-text1 {
  margin-bottom: 19px;
  color: var(--light-text);
  text-align: center;
  font-size: 24px;
  font-weight: inherit;
  line-height: 1.33;
  margin-top: 48px;
}

.reviews-text2 {
  color: var(--light-text);
  text-align: center;
  font-size: 24px;
  font-weight: inherit;
  line-height: 1.33;
}

.reviews-avatar-container {
  display: flex;
  align-items: center;
  gap: 29px;
  padding-left: 82px;
  margin-top: 62px;
}

.reviews-avatar-link1 {
  color: var(--light-text);
  font-size: 14px;
  font-weight: inherit;
  line-height: 1.71;
  transition: color 1s;
  display: block;
}

.reviews-link-container:hover .reviews-avatar-link1 {
  color: var(--first-expect);
}

.reviews-link-container:focus .reviews-avatar-link1 {
  color: var(--first-expect);
}

.reviews-avatar-link2 {
  color: var(--light-text);
  font-size: 14px;
  font-weight: inherit;
  line-height: 1.71;
  transition: color 1s;
  display: block;
}

.reviews-link-container:hover .reviews-avatar-link2 {
  color: var(--first-expect);
}

.reviews-link-container:focus .reviews-avatar-link2 {
  color: var(--first-expect);
}

.reviews-logo {
  fill: var(--mission-title);
  margin: 0 auto;
  display: block;
  margin-top: 69px;
  transition: fill 1s;
}

.reviews-logo:hover {
  fill: var(--first-expect);
}

.reviews-logo:focus {
  fill: var(--first-expect);
}

/* questions */
.questions {
  padding: 100px 0 71px;
  background-color: var(--dark-bg);
}

.questions-container {
  display: flex;
  gap: 120px;
}

.questions-text-container {
  padding-top: 18px;
}

.questions-title {
  color: var(--light-text);
  font-size: 36px;
  font-weight: inherit;
  line-height: 1.26;
  letter-spacing: 1px;
  margin-bottom: 45px;
}

.questions-link {
  color: var(--first-expect);
  font-size: 20px;
  font-weight: inherit;
  line-height: 1.4;
  margin-bottom: 52px;
  display: block;
}

.questions-link:hover {
  text-decoration: underline var(--first-expect);
}

.questions-link:focus {
  text-decoration: underline var(--first-expect);
}

.questions-item:last-child .questions-text {
  margin-bottom: 0;
}

.questions-icon {
  fill: #d8ccbf;
}

/* mission */

.mission {
  padding: 140px 0 96px;
  background-image: url(../img/mission/mission-bg.webp);
  background-size: cover;
}

.mission-title {
  color: var(--additional-text);
  font-size: 15px;
  font-weight: inherit;
  line-height: 1.06;
  margin-bottom: 19px;
}

.mission-text {
  color: var(--mission-title);
  font-size: 48px;
  font-weight: inherit;
  line-height: 1.12;
  max-width: 676px;
  margin-bottom: 24px;
}

.mission-link {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--light-text);
  font-size: 12px;
  font-weight: inherit;
  line-height: 1.66;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--light-text);
  max-width: 271px;
  transition: color 1s, border 1s;
}

.mission-link:hover {
  color: var(--first-expect);
  border-bottom: 1px solid var(--first-expect);
}

.mission-link:hover .mission-icon {
  fill: var(--first-expect);
}

.mission-icon:hover {
  fill: var(--first-expect);
}

.expexts-item:first-child .expexts-link:hover .expexts-icon {
  fill: var(--first-expect);
}

.mission-link:focus {
  color: var(--first-expect);
  border-bottom: 1px solid var(--first-expect);
}

.mission-link:focus .mission-icon {
  fill: var(--first-expect);
}

.mission-icon:focus {
  fill: var(--first-expect);
}

.expexts-item:first-child .expexts-link:focus .expexts-icon {
  fill: var(--first-expect);
}

.mission-icon {
  fill: var(--light-text);
  transition: fill 1s;
}

/* footer */

.footer {
  padding: 79px 0 27px;
  background-color: var(--dark-bg);
}

.footer-container {
  display: flex;
  gap: 317px;
  padding-bottom: 121px;
  border-bottom: 1px solid var(--footer-line);
}

.footer-contacts-container {
  margin-bottom: 86px;
}

.footer-contacts-list {
  display: flex;
  gap: 42px;
}

.footer-contacts-title {
  color: var(--light-text);
  font-size: 23px;
  font-weight: inherit;
  line-height: 1.04;
  padding-bottom: 19px;
}

.footer-contact-btn {
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: inherit;
  line-height: 1.5;
  border-radius: 100px;
  border: 1px solid var(--button);
  background-color: var(--button);
  padding: 9px 33px;
  transition: background-color 1s, border 1s;
}

.footer-contact-btn:hover {
  background-color: #35176c;
  border: 1px solid #35176c;
}

.footer-contact-btn:focus {
  background-color: #35176c;
  border: 1px solid #35176c;
}

.footer-contact-link {
  color: var(--light-text);
  text-align: center;
  font-size: 15px;
  font-weight: inherit;
  line-height: 1.6;
  border-radius: 100px;
  border: 1px solid var(--light-text);
  padding: 9px 25px;
  display: block;
  transition: color 1s, border 1s;
}

.footer-contact-link:hover {
  color: var(--first-expect);
  border: 1px solid var(--first-expect);
}

.footer-contact-link:focus {
  color: var(--first-expect);
  border: 1px solid var(--first-expect);
}

.footer-moving-list {
  display: flex;
  gap: 75px;
}

.footer-moving-title {
  color: var(--light-text);
  font-size: 20px;
  font-weight: inherit;
  line-height: 0.8;
  margin-bottom: 48px;
}

.footer-direction-link {
  color: var(--light-text);
  font-size: 16px;
  font-weight: inherit;
  line-height: 0.01;
  margin-bottom: 47px;
  display: block;
  transition: color 1s;
}

.footer-direction-link:hover {
  color: var(--first-expect);
}

.footer-direction-link:focus {
  color: var(--first-expect);
}

.footer-direction-item:last-child .footer-direction-link {
  margin-bottom: 0;
  display: block;
}

.footer-wit-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.footer-wit-text {
  color: var(--light-text);
  text-align: right;
  font-size: 14px;
  font-weight: inherit;
  line-height: 2;
  margin-top: 46px;
}

.footer-social-container {
  padding-left: 7px;
  display: flex;
  padding-top: 28px;
  justify-content: space-between;
}

.footer-social-list {
  display: flex;
  gap: 298px;
  align-items: center;
}

.footer-social-item {
  display: flex;
  align-items: center;
}

.footer-social-icon {
  fill: var(--mission-title);
  transition: fill 1s;
}

.footer-social-icon:hover {
  fill: var(--first-expect);
}

.footer-social-icon:focus {
  fill: var(--first-expect);
}

.footer-social-link {
  color: var(--light-text);
  text-align: right;
  font-size: 11px;
  font-weight: inherit;
  line-height: 1;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  transition: color 1s;
}

.footer-social-link:hover {
  color: var(--first-expect);
}

.footer-social-link:focus {
  color: var(--first-expect);
}