/****************************************/
/* MAIN NAV */
/****************************************/

.nav-header {
  padding: 6.4rem 12.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  gap: 12.8rem;
}

.nav-bar {
  font-size: 2rem;
  color: hsl(0, 100%, 100%);
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.main-nav {
  display: flex;
}

.nav-links--lists {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 6.4rem;
}

.nav-links--list,
.nav-links--list:link,
.nav-links--list:visited {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.nav-links--list span {
  margin-right: 1.2rem;
}

.nav-links--list:hover span {
  border-bottom: 2px solid hsl(0, 100%, 100%);
}

.nav-link-connect,
.nav-link-company,
.nav-link-product {
  position: relative;
  cursor: pointer;
}

.modal-nav {
  background-color: hsl(0, 100%, 100%);
  padding: 3.2rem 2.4rem;
  box-shadow: 0 12px 24px 6px hsla(206, 13%, 34%, 0.3);
  border-radius: 0.6rem;
  position: absolute;
  z-index: 1;
}

.modal-product {
  width: 20rem;
  top: 150%;
  right: 0%;
}

.modal-company {
  width: 20rem;
  top: 150%;
  right: -30%;
}

.modal-connect {
  width: 20rem;
  top: 150%;
  right: -80%;
}

.modal-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.modal-nav-link:link,
.modal-nav-link:visited {
  color: hsl(240, 10%, 16%);
  text-decoration: none;
}

.modal-nav-link:hover,
.modal-nav-link:active {
  color: hsl(207, 13%, 34%);
}

.menu {
  display: none;
}

.close-icon {
  display: none;
}

/****************************************/
/* HERO SECTION */
/****************************************/
.section-hero {
  color: hsl(0, 100%, 100%);
  width: 100%;
  background: url(../images/bg-pattern-intro-desktop.svg),
    linear-gradient(to right, hsl(13, 100%, 72%), hsl(353, 100%, 62%));
  background-position: 20% 50%;
  border-radius: 0 0 0 12.8rem;
}

.hero {
  height: 60rem;
  text-align: center;
  padding: 24rem 0 20rem 0;
}

.hero-description {
  font-size: 2rem;
  color: hsla(0, 0%, 100%, 0.75);
  margin-bottom: 6.4rem;

  transform: translateY(-20%);
  opacity: 0;
  transition: transform 1s, opacity 1s;
}

.hero-description.anim {
  transform: translateY(0);
  opacity: 1;
}

/****************************************/
/* DESIGN SECTION */
/****************************************/

.section-design {
  padding: 12.8rem 0;
}

.design-description {
  font-size: 1.8rem;
  line-height: 1.8;
  color: hsl(207, 13%, 34%);
}

.design-img-box {
  display: block;
  position: relative;
}

.editor-img {
  top: 50%;
  right: 0;
  transform: translate(40%, -50%);
}

.laptop-img {
  left: 0;
  top: 50%;
  transform: translate(-37%, -50%);
}

/****************************************/
/* STATE SECTION */
/****************************************/

.section-state {
  margin: 12.8rem 0;
  padding: 9.6rem;
  width: 100%;
  background: url(../images/bg-pattern-circles.svg),
    linear-gradient(to right, hsl(237, 17%, 21%), hsl(237, 23%, 31%));
  background-position: -50% 80%;
  background-repeat: no-repeat;
  border-radius: 0 9.6rem 0 9.6rem;
}

.state {
  font-family: var(--font-headers);
  display: grid;
  grid-template-columns: 45fr 55fr;
  column-gap: 3.2rem;
}

.state-header {
  color: hsl(0, 100%, 100%);
  margin-bottom: 2.4rem;
}

.state-description {
  font-size: 1.8rem;
  color: hsla(0, 0%, 100%, 0.75);
  line-height: 2;
}

.state-img-box {
  position: relative;
}

.state-img {
  position: absolute;
  max-width: 100%;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}

/****************************************/
/* FOOTER */
/****************************************/

.footer {
  background-color: hsl(240, 10%, 16%);
  padding: 6.4rem 0;
  margin-top: 22.4rem;
  border-radius: 0 12.8rem 0 0;
}

.footer-container {
  color: hsl(0, 100%, 100%);
  font-size: 1.6rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.footer-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 1.2rem 0 3.2rem;
}

.footer-nav-links {
  color: hsla(0, 0%, 100%, 0.75);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.footer-nav-link:link,
.footer-nav-link:visited {
  color: inherit;
  text-decoration: none;
}

.footer-nav-link:hover,
.footer-nav-link:active {
  color: hsla(0, 0%, 100%, 0.5);
}