:root {
  /* Colors */
  --primary-pink: hsl(322, 100%, 66%);
  --primary-light-pink: hsl(321, 100%, 78%);
  --primary-light-red: hsl(0, 100%, 63%);
  --neutral-very-dark-cyan: hsl(192, 100%, 9%);
  --neutral-very-pale-blue: hsl(210, 100%, 98%);
  --neutral-gray: hsl(220, 2%, 73%);
  /* Typography */
  --primary-font-family: "Open Sans", sans-serif;
  --secondary-font-family: "Poppins", sans-serif;
  --normal-weight: 400;
  --bold-weight: 600;
  --bolder-weight: 700;
}

/* --- RESET --- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  vertical-align: baseline;
}

*::before,
*::after {
  display: block;
}

img,
picture,
video,
iframe,
figure {
  max-width: 100%;
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

a {
  display: block;
  text-decoration: none;
  color: inherit;
  font-size: inherit;
}

p {
  line-height: 1.5;
}

p a {
  display: inline;
}

li {
  list-style-type: none;
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
strong,
blockquote,
i,
b,
u,
em {
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  text-decoration: none;
  color: inherit;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

form,
input,
textarea,
select,
button,
label {
  font-family: inherit;
  font-size: inherit;
  hyphens: auto;
  background-color: transparent;
  color: inherit;
  display: block;
  appearance: none;
}

table,
tr,
td {
  border-collapse: collapse;
  border-spacing: 0;
}

svg {
  width: 100%;
  display: block;
  fill: currentColor;
}

body {
  min-height: 100vh;
  font-size: 100%;
  font-family: var(--primary-font-family);
  color: var(--neutral-very-dark-cyan);
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- HEADER --- */
.header {
  width: 100%;
  padding: 2.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 768px) {
  .header {
    padding: 3.75rem/16pxrem;
  }
}

.home {
  width: min(9.375rem, 40%);
}
.home__img {
  width: 100%;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav__button {
  padding: 0.25rem 0.625rem;
  border-radius: 50px;
  border: 1px solid var(--primary-light-pink);
  color: var(--primary-light-pink);
  box-shadow: 0 0 0.1rem var(--primary-light-pink);
  transition: 0.4s;
  text-transform: capitalize;
  cursor: pointer;
  font-family: var(--primary-font-family);
  font-weight: var(--normal-weight);
  font-size: 0.875rem;
}
.nav__button:is(:hover, :active) {
  box-shadow: 0 0 0.3rem;
}

/* --- MAIN --- */
.main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: initial;
  gap: 5rem;
}

.section {
  position: relative;
  width: 100%;
  min-height: 90vh;
  padding: 4rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5.3125rem;
  text-align: center;
}
.section:is(.section-2, .section-4) {
  background-color: var(--neutral-very-pale-blue);
}
.section-2::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: -7.0625rem;
  width: 100%;
  height: 7.125rem;
  background-image: url(../images/bg-section-top-mobile-1.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.section-2::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: -6.375rem;
  width: 100%;
  height: 6.4375rem;
  background-image: url(../images/bg-section-bottom-mobile-1.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.section-4::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: -6.375rem;
  width: 100%;
  height: 6.4375rem;
  background-image: url(../images/bg-section-top-mobile-2.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.section-4::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: -6.25rem;
  width: 100%;
  height: 6.3125rem;
  background-image: url(../images/bg-section-bottom-mobile-2.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.section-5 {
  padding-top: 0;
}
@media screen and (min-width: 768px) {
  .section {
    padding: 7.5rem 5rem;
  }
  .section__img--main {
    width: 70%;
  }
  .section:is(.section-2, .section-4) {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
  }
  .section:is(.section-2, .section-3, .section-4) .section__img {
    width: 50%;
  }
  .section:is(.section-2, .section-3, .section-4) :is(.subsection__title, .subsection__paragraph) {
    text-align: start;
  }
  .section-3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .section-2::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: -10.25rem;
    width: 100%;
    height: 10.3125rem;
    background-image: url(../images/bg-section-top-desktop-1.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  .section-2::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: -8.625rem;
    width: 100%;
    height: 8.6875rem;
    background-image: url(../images/bg-section-bottom-desktop-1.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  .section-4::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: -9.6875rem;
    width: 100%;
    height: 9.75rem;
    background-image: url(../images/bg-section-top-desktop-2.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  .section-4::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: -8.625rem;
    width: 100%;
    height: 8.6875rem;
    background-image: url(../images/bg-section-bottom-desktop-2.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  .section-5 {
    padding-top: 0;
    padding-bottom: 9.8rem;
  }
}

.subsection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}
.subsection__title {
  width: 100%;
  font-family: var(--secondary-font-family);
  font-weight: var(--bolder-weight);
  font-size: 1.4375rem;
  text-transform: capitalize;
  text-align: center;
}
.subsection__title--main {
  font-family: var(--secondary-font-family);
  font-weight: var(--bolder-weight);
  font-size: 1.625rem;
}
.subsection__paragraph {
  width: 100%;
  max-width: 465px;
  color: var(--neutral-very-dark-cyan);
  font-family: var(--primary-font-family);
  font-weight: var(--normal-weight);
  font-size: 0.903125rem;
}
.subsection__paragraph--main {
  max-width: 425px;
}
.subsection__button {
  padding: 0.8125rem 2.5625rem;
  border-radius: 50px;
  border: none;
  margin: 25px 0;
  box-shadow: 0 0.2rem 0.5rem var(--neutral-gray);
  background-color: var(--primary-pink);
  color: var(--neutral-very-pale-blue);
  transition: 0.4s;
  text-transform: capitalize;
  cursor: pointer;
  font-family: var(--primary-font-family);
  font-weight: var(--bold-weight);
  font-size: 0.903125rem;
}
.subsection__button:is(:hover, :active) {
  background-color: var(--primary-light-pink);
}

.list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  justify-items: center;
  gap: 4rem;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 0.5rem;
}
.item__icon {
  width: 2.1875rem;
  height: 2.1875rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  align-self: flex-start;
}
.item__title {
  font-family: var(--primary-font-family);
  font-weight: var(--bolder-weight);
  font-size: 4rem;
}
.item__paragraph {
  font-family: var(--primary-font-family);
  font-weight: var(--normal-weight);
  font-size: 0.903125rem;
  text-transform: capitalize;
  opacity: 0.65;
}

.communities {
  background-image: url(../images/icon-communities.svg);
}

.messages {
  background-image: url(../images/icon-messages.svg);
}

/* --- FOOTER --- */
.footer {
  position: relative;
  color: var(--neutral-very-pale-blue);
  background-color: var(--neutral-very-dark-cyan);
}
.footer::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: -3.25rem;
  width: 100%;
  height: 3.3125rem;
  background-image: url(../images/bg-footer-top-mobile.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
@media screen and (min-width: 768px) {
  .footer {
    display: flex;
    flex-direction: row-reverse;
    align-items: start;
    justify-content: space-between;
  }
  .footer::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: -9.8125rem;
    width: 100%;
    height: 9.875rem;
    background-image: url(../images/bg-footer-top-desktop.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  .footer .contain {
    padding: 7.5rem 5rem;
  }
  .footer .subcontain__paragraph {
    max-width: 21.5625rem;
  }
  .footer .form {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
  }
}

.contain {
  width: 100%;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 2.25rem;
}

.subcontain {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: initial;
  justify-content: center;
  gap: 1rem;
}
.subcontain__title {
  text-transform: uppercase;
  font-family: var(--primary-font-family);
  font-weight: var(--bold-weight);
  font-size: 1rem;
}
.subcontain__paragraph {
  width: 100%;
  padding-right: 0.25rem;
  font-family: var(--primary-font-family);
  font-weight: var(--normal-weight);
  font-size: 0.903125rem;
}
.subcontain__paragraph--size {
  font-family: var(--primary-font-family);
  font-weight: var(--normal-weight);
  font-size: 0.75rem;
}
.subcontain__logo {
  width: min(50%, 10.21875rem);
}
.subcontain__link {
  color: var(--primary-pink);
  font-style: italic;
}
.subcontain__link:hover,
.subcontain__link :active {
  text-decoration: 1px underline var(--primary-pink);
}

.form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
  gap: 1rem;
}
.form__label {
  width: 100%;
  color: var(--primary-light-red);
  font-family: var(--primary-font-family);
  font-weight: var(--normal-weight);
  font-size: 0.840625rem;
}
.form__input {
  width: 100%;
  border-radius: 5px;
  padding: 1rem;
  background-color: var(--neutral-very-pale-blue);
  color: var(--neutral-very-dark-cyan);
  font-family: var(--primary-font-family);
  font-weight: var(--normal-weight);
  font-size: 0.903125rem;
  caret-color: black;
  outline: none;
}
.form__input::placeholder {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit/16pxrem;
}
.form__input--error {
  border: 1px solid var(--primary-light-red);
}
.form__button {
  width: 50%;
  padding: 0.9375rem;
  border-radius: 5px;
  border: none;
  background-color: var(--primary-pink);
  color: var(--neutral-very-pale-blue);
  transition: 0.4s;
  text-transform: capitalize;
  cursor: pointer;
  font-family: var(--primary-font-family);
  font-weight: var(--bolder-weight);
  font-size: 0.903125rem;
}
.form__button:is(:hover, :active) {
  background-color: var(--primary-light-pink);
}

.address {
  display: flex;
  flex-direction: column;
  align-items: initial;
  justify-content: center;
  gap: 1rem;
  font-style: normal;
}

.contact {
  display: flex;
  align-items: center;
  justify-content: initial;
  gap: 1rem;
}
.contact__icon {
  width: 1.25rem;
}
.contact__span {
  font-family: var(--primary-font-family);
  font-weight: var(--normal-weight);
  font-size: 0.903125rem;
}

.icons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.icons__icon {
  cursor: pointer;
}
.icons__icon:hover .svg-inline--fa > path, .icons__icon:active .svg-inline--fa > path {
  transition: 0.4s;
  fill: hsl(203, 89%, 53%);
}

/*# sourceMappingURL=style.css.map */