*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

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

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

button {
  display: block;
  font: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
}

:root {
  --white-clr: hsl(0, 0%, 100%);
  --black-clr: hsl(0, 0%, 0%);
  --dark-gray: hsl(0, 0%, 63%);
  --very-dark-gray: hsl(0, 0%, 27%);

  /* Padding */
  --header-padding: 1.5rem 1.5rem;

  /* Gap */
  --header-container-gap: 5rem;
  --links-gap: 2rem;
}

body {
  font-family: "League+Spartan", sans-serif;
  min-height: 100vh;
  isolation: isolate;
  position: relative;
}

/* Utilities */
.flex {
  display: flex;
  gap: 1rem;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.mg-bottom-small {
  margin-bottom: 1rem;
}

.mg-bottom-medium {
  margin-bottom: 1.5rem;
}

.mg-bottom-large {
  margin-bottom: 2rem;
}
/* ------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background-color: transparent;
  padding: var(--header-padding);
  transition: transform 0.3s;
}

.header__container {
  gap: var(--header-container-gap);
  align-items: center;
}

.links {
  gap: var(--links-gap);
}

.link {
  color: var(--black-clr);
  font-size: 1.25rem;
  position: relative;
  transition: opacity 0.3s;
}

.link:not(.link--mdf)::after {
  content: "";
  height: 3px;
  width: 0%;
  position: absolute;
  bottom: -4px;
  left: 0;
  background-color: var(--black-clr);

  transition: width 0.4s;
}

.link--mdf {
  font-size: 1.5rem;
  font-weight: 700;
}

.header__menu {
  display: none;
  position: fixed;
  inset: 2rem 2.5rem auto auto;
  z-index: 50;
}

.menu {
  height: 3px;
  width: 1.75rem;
  background-color: var(--menu-clr);
  display: block;

  position: relative;
  cursor: pointer;

  --menu-clr: #000;
  --rotate-aft: 0;
  --rotate-bef: 0;
  --top-aft: 8px;
  --top-bef: -8px;
}

.menu::after,
.menu::before {
  position: absolute;
  content: "";
  background: black;
  height: inherit;
  width: inherit;
  left: 0;
  transition: transform 0.3s;
}

.menu::after {
  top: var(--top-aft);
  transform: rotate(var(--rotate-aft));
}

.menu::before {
  top: var(--top-bef);
  transform: rotate(var(--rotate-bef));
}

/* SECTION INTRO */
.section__intro {
  /* Padding */
  --slider-btn-padding: 1rem 1.5rem;
  --text-padding: 0 3.5rem;

  /* Gap */
  --text-gap: 1.5rem;
}

.section__intro-container {
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
}

.show__imgs {
  height: 32rem;
  overflow: hidden;
  position: relative;
}

.slider {
  position: relative;
}

.slider__img {
  position: absolute;
  inset: 0;
}

.slider__img > img {
  height: 32rem;
  width: 100%;
  transition: transform 0.3s;
}

.slider__btn_box {
  background-color: var(--black-clr);
  gap: 0;

  position: absolute;
  bottom: 0;
  right: 0%;
  transform: translate(0, 0);
}

.slider-btn {
  background-color: var(--black-clr);
  padding: var(--slider-btn-padding);
  transition: background 0.4s;
}

.slider-btn:hover {
  background-color: var(--dark-gray);
}

.slider-btn > img {
  width: 1rem;
  height: 1.5rem;
}

/* Text */
.text {
  gap: var(--text-gap);
  align-self: center;
  padding: var(--text-padding);
  position: relative;
}

.primary-heading {
  color: var(--black-clr);
  font-size: 2rem;
  font-weight: 700;
  text-wrap: balance;
}

.para {
  color: var(--dark-gray);
  font-size: 1.05rem;
  line-height: 1.5;
}

.btn {
  align-items: center;
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  transition: color 0.3s;
}

.btn:hover {
  color: var(--dark-gray);
}

.btn > img {
  width: 3rem;
}

/* ------------------- */

/* SECTION ABOUT */
.section__about-container {
  display: flex;
  justify-content: center;

  /* Padding */
  --about-text-padding: 1.5rem 2.5rem;
}

.secondary-heading {
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 3px;
}

.about__text {
  flex: 1 1 45ch;
  padding: var(--about-text-padding);
}

.about__img > img {
  width: 100%;
  height: 18rem;
}
/* ------------------- */

@media only screen and (hover: hover) {
  .link:hover::after {
    width: 100%;
  }
}

@media only screen and (max-width: 68.75rem) {
  .section__intro-container {
    grid-template-columns: 1fr;
  }

  .section__about-container {
    flex-direction: column;
  }

  .text,
  .about__text {
    max-width: 75ch;
    margin: 0 auto;
    padding: 3rem 3.5rem;
  }

  .about__text {
    flex: auto;
  }

  .about__img > img {
    height: 40%;
  }
}

@media only screen and (max-width: 43.75rem) {
  :root {
    --links-gap: 2.75rem;
  }

  .text,
  .about__text {
    padding: 3rem 2rem;
  }

  .header {
    background-color: var(--white-clr);
    transform: translateX(100%);
  }

  .header__container {
    height: 100vh;
    flex-direction: column;
  }

  .links {
    flex-direction: column;
    align-items: center;
  }

  .link {
    font-size: 2rem;
  }

  .link--mdf {
    font-size: 2rem;
  }

  .header__menu {
    display: block;
  }

  .show__imgs,
  .slider__img > img {
    height: 25rem;
  }
}

@media only screen and (max-width: 31.25rem) {
  :root {
    --links-gap: 2.5rem;
  }

  .link,
  .link--mdf {
    font-size: 1.75rem;
  }
}

.slider--active {
  transform: translateX(0%);
}

.menu--active {
  --menu-clr: transparent;
  --rotate-aft: 45deg;
  --rotate-bef: -45deg;
  --top-aft: 0px;
  --top-bef: 0px;
}