/* || Root Styling */

:root {
  --Gray-50: hsl(0, 0%, 98%);
  --Gray-500: hsl(0, 0%, 56%);
  --Gray-950: hsl(0, 0%, 8%);
  --Overlay: hsla(0, 0%, 22%, 0.7);
  --White: hsl(0, 0%, 100%);
  --Black: hsl(0, 0%, 0%);
}

/* || Global Styling */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 18px;
  font-family: "Epiglogue", sans-serif, serif;
}

/* || Main Styling */

/* Header Section */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  position: relative;
  width: 100%;
}

.menu-btn {
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
}

.menu-btn:hover {
  opacity: 1;
}

.desktop-view-nav {
  display: none;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.desktop-nav-item {
  margin-right: 3rem;
  transition: color 0.2s ease-in-out;
  cursor: pointer;
}

.desktop-nav-item:hover {
  color: var(--Black);
}

.click:active {
  opacity: 0.7;
}

.desktop-features,
.desktop-company {
  display: flex;
  align-items: center;
}

.icon-arrow-up-desktop {
  width: 1rem;
  height: auto;
  cursor: pointer;
  transform: rotate(180deg);
}

/* Hidden Nav */

.hidden-nav {
  background-color: var(--White);
  height: 100vh;
  position: absolute;
  opacity: 0;
  right: 0;
  transition: all 0.1s ease;
  width: 16rem;
  z-index: -1;
}

.unhide-nav {
  background-color: var(--White);
  height: 100vh;
  position: absolute;
  opacity: 1;
  transform: translateX(0);
  right: 0;
  width: 16rem;
  z-index: 2;
}

.overlay {
  background-color: var(--Overlay);
  height: 100vh;
  opacity: 0;
  position: absolute;
  transition: all 0.2s ease;
  width: 100%;
  z-index: -1;
}

.show-overlay {
  display: block;
  background-color: var(--Overlay);
  height: 100vh;
  opacity: 1;
  position: absolute;
  width: 100%;
  z-index: 1;
}

/* Hidden Nav Content */

.hidden-nav-header {
  display: flex;
  justify-content: end;
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.close-menu-btn {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
}

.close-menu-btn:hover {
  opacity: 1;
}

.hidden-nav-features {
  padding: 0 2em 2em 2rem;
  transition: padding 0.2s ease;
}

.collapse-features {
  padding-bottom: 0;
}

.collapse-header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  width: 100%;
}

h2 {
  color: var(--Gray-500);
  font-size: 1.1rem;
  margin-right: 1rem;
}

.icon-arrow-up {
  width: 1rem;
  height: auto;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.arrow-rotate {
  transform: rotate(180deg);
}

/** Features **/

.features-list-container {
  padding: 0 1.4rem;
  width: 100%;
  opacity: 1;
  transition: all 0.2s ease;
}

.feature-collapse {
  opacity: 0;
  height: 0;
  display: none;
}

.menu-link {
  color: var(--Gray-500);
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.menu-link:hover {
  color: var(--Black);
}

.menu-link:active {
  opacity: 0.7;
}

ul {
  list-style: none;
}

li {
  display: flex;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

li:last-of-type {
  margin-bottom: 0;
}

.features-icon {
  margin-right: 1rem;
  width: 1.1rem;
  height: auto;
}

/**...**/

/** Company **/

.hidden-nav-company {
  padding: 0 2em 2em 2rem;
}

.collapse-company {
  padding-bottom: 0;
}

.company-list-container {
  padding: 0 1.4rem;
  width: 100%;
  opacity: 1;
  transition: all 0.2s ease;
}

.company-collapse {
  opacity: 0;
  height: 0;
  display: none;
}

/**...**/

/** Other **/

.hidden-nav-other-link {
  display: flex;
  flex-direction: column;
  padding: 0 2em 0 2rem;
}

.other {
  color: var(--Gray-500);
  font-weight: bold;
  margin-bottom: 1.5rem;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.other:hover {
  color: var(--Black);
}

.other:active {
  opacity: 0.7;
}
/** Buttons **/

.hidden-nav-buttons {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.login-btn {
  background-color: transparent;
  color: var(--Gray-500);
  width: 80%;
  border-radius: 1.2rem;
  cursor: pointer;
  padding: 1rem 2rem;
  transition: color 0.2s ease-in-out;
  border: none;
  font-weight: bold;
}

.login-btn:hover {
  color: var(--Black);
}

.login-btn:active {
  opacity: 0.7;
}

.register-btn {
  background-color: var(--White);
  border: 0.12rem solid var(--Gray-500);
  color: var(--Gray-500);
  width: 80%;
  border-radius: 1.2rem;
  cursor: pointer;
  font-weight: bold;
  padding: 1rem 2rem;
  transition: all 0.2s ease-in-out;
}

.register-btn:hover {
  background-color: var(--Black);
  color: var(--White);
}

.register-btn:active {
  opacity: 0.7;
}

/**...**/

/* Desktop Features Drop Down */

.features-nav-container {
  display: none;
  position: absolute;
  background-color: var(--White);
  top: 5em;
  left: 6.5em;
  width: 12rem;
  padding: 1.2em;
  border-radius: 0.5em;
  box-shadow: 0 0.5em 2em var(--Gray-500);
}

.features-nav-container-unhide {
  display: block;
}

.company-nav-container {
  display: none;
  position: absolute;
  background-color: var(--White);
  top: 5em;
  left: 20em;
  width: 12rem;
  padding: 1.2em;
  border-radius: 0.5em;
  box-shadow: 0 0.5em 2em var(--Gray-500);
}

.company-nav-container-unhide {
  display: block;
}

.nav-list-item {
  color: var(--Gray-500);
  font-weight: bold;
  transition: color 0.2s ease-in-out;
  cursor: pointer;
}

.nav-list-item:hover {
  color: var(--Black);
}

.nav-list-item:active {
  opacity: 0.7;
}

/* Hero Section */

.hero-section {
  margin-bottom: 3em;
}

.hero-img {
  width: 100%;
  height: auto;
}

.hero-img-desktop {
  display: none;
}

/* Text Section */

.text-section {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;

  text-align: center;
}

h1 {
  font-size: clamp(2.4rem, 2.2vw, 6rem);
  margin-bottom: 1rem;
}

p {
  color: var(--Gray-500);
  font-size: clamp(1.4rem, 2.2vw, 1.1rem);
  line-height: 150%;
  margin-bottom: 1.5rem;
  width: 85%;
}

.features-header,
.company-header {
  transition: color 0.2s ease-in-out;
}

.features-header:hover,
.company-header:hover {
  color: black;
}

.features-header:active,
.company-header:active {
  opacity: 0.7;
}

.learn-button {
  background-color: var(--Gray-950);
  border: none;
  border-radius: 1.2rem;
  color: var(--Gray-50);
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 3em;
  padding: 1rem 2rem;
  transition: all 0.2s ease-in-out;
}

.learn-button:hover {
  background-color: var(--White);
  color: var(--Black);
  outline: 0.15rem solid var(--Black);
}

.learn-button:active {
  opacity: 0.7;
}

/* Brand Section */

.brand-section {
  align-items: center;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

/* || Media Query */

@media screen and (min-width: 90em) {
  main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    padding: 0 5em;
    align-items: center;
    justify-items: center;
  }

  header {
    padding: 1.5rem 3rem;
  }

  .menu-btn {
    display: none;
  }

  .desktop-view-nav {
    display: block;
    display: flex;
    justify-content: space-between;
    width: 90%;
  }

  .desktop-nav-buttons {
    display: flex;
  }

  .hero-img {
    display: none;
  }

  .hero-img-desktop {
    display: block;
    height: 40rem;
    width: auto;
  }

  .hero-section {
    grid-column: 2;
  }

  .text-section {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
  }

  h1 {
    line-height: 100%;
    width: 100%;
    text-align: left;
    margin-bottom: 2rem;
  }

  p {
    width: 80%;
    text-align: left;
    margin-bottom: 5rem;
  }

  .brand-section {
    grid-column: 1;
    width: 100%;
    display: flex;
    justify-content: start;
  }

  .brand-section img {
    margin-right: 5rem;
  }
}