/* *************************************** */
/* FONTS*/
/* *************************************** */

/* *************************************** */
/* VARIABLES */
/* *************************************** */

:root {
  --font-family-1: Arial, Helvetica, sans-serif;
  --color-white: #fff;

  --color-black: rgba(0, 0, 0);
  --color-black-2: #1e1e1e;

  --color-background: #eff2f3;

  --color-grey-1: #666;
  --color-grey-2: rgb(220, 220, 220);
  --color-grey-3: rgb(243, 243, 247);
  --color-grey-4: rgba(248, 248, 248);
}

/* *************************************** */
/* GLOBAL RESET */
/* *************************************** */

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

html {
  font-size: 62.5%;
  box-sizing: border-box;

  overflow-x: hidden;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.76rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-white);
  background-color: var(--color-black);

  overflow: hidden;
}

/* *************************************** */
/* GLOBAL CLASSES */
/* *************************************** */

.container {
  max-width: 131rem;
  margin: 0 auto;
  padding: 0 3.2rem;
}

.btn {
  border: none;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  border-radius: 300px;
  transition: all 0.2s;
}

.btn--header:hover,
.btn--header:active {
  background-color: #aaa;
}
.btn--submit:hover,
.btn--submit:active {
  background-color: #aaa;
}

.btn--header {
  font-size: 1.436rem;
  padding: 2.15rem 2.87rem;
  background-color: var(--color-grey-2);
}

.btn--submit {
  font-size: 1.6rem;
  padding: 2.4rem 3.2rem;
  background-color: var(--color-grey-2);
}

.btn--mobile {
  color: var(--color-white);
  font-size: 1.92rem;
  padding: 2.88rem 3.84rem;
  background-color: var(--color-black);

  margin-top: 4rem;
}

/* *************************************** */
/* ANIMATIONS */
/* *************************************** */

.mobile__nav-list {
  opacity: 0;
  transform: translateY(4rem);
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.mobile__btn-box .btn--mobile {
  opacity: 0;
  transform: translateY(6rem);
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.mobile__nav-list.nav-open {
  animation: moveInBottomNav 0.5s ease-out forwards;
}

.mobile__nav-list.nav-close {
  animation: moveOutTopNav 0.5s ease-out forwards;
}

.btn--mobile.nav-open {
  animation: moveInBottomBtn 0.5s ease-out 0.1s forwards;
}

.btn--mobile.nav-close {
  animation: moveOutTopBtn 0.5s ease-out forwards;
}

/* Animation for mobile nav list */
@keyframes moveInBottomNav {
  0% {
    opacity: 0;
    transform: translateY(4rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes moveOutTopNav {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(4rem);
  }
}

/* Animation for mobile button */
@keyframes moveInBottomBtn {
  0% {
    opacity: 0;
    transform: translateY(6rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes moveOutTopBtn {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(6rem);
  }
}

/* *************************************** */
/* HEADER */
/* *************************************** */
.header {
  background-color: var(--color-black);
  padding: 1.5rem 0 0.6rem;
}
.header__desktop-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.header__logo-box {
  margin-left: 10rem;
}

.header__logo {
  height: 13.8rem;
}
.header__nav-list {
  list-style: none;
}

.header__nav-link:link,
.header__nav-link:visited {
  text-decoration: none;
  display: inline-block;
  font-size: 1.75rem;
  color: var(--color-white);
  border-bottom: 0.3rem solid transparent;

  transition: all 0.1s;
}

.mobile__nav-link:link,
.mobile__nav-link:visited {
  text-decoration: none;
  display: inline-block;
  font-size: 2rem;
  color: var(--color-black);
  border-bottom: 0.3rem solid transparent;

  transition: all 0.1s;
}

.header__nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.mobile__nav .mobile__nav-link:link,
.mobile__nav-link:visited {
  font-size: 2.5rem;
}
.nav__checkbox {
  display: none;
}
.mobile__nav {
  background-color: rgba(255, 255, 255);
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 9;

  transition: all 0.3s ease-in;

  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.mobile__nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;

  animation: moveInBottomNav 0.5s ease-out 0.5s;
}

.mobile__nav-btn {
  display: none;
}

.nav-btn {
  display: none;
  cursor: pointer;
  background-color: #666;
  height: 3px;
  width: 3.5rem;

  position: relative;

  z-index: 10;
}
.nav-btn::before,
.nav-btn::after {
  content: "";
  display: inline-block;
  background-color: #666;
  height: 3px;
  width: 3.5rem;
  position: absolute;
  left: 0;
  transition: all 0.2s;
}
.nav-btn::before {
  top: -0.8rem;
}
.nav-btn::after {
  top: 0.9rem;
}

/* *************************************** */

.nav__checkbox:checked ~ .mobile__nav {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.nav__checkbox:checked + .mobile__nav-btn .nav-btn {
  background-color: transparent;
}

.nav__checkbox:checked + .mobile__nav-btn .nav-btn::before {
  top: 0;
  transform: rotate(135deg);
}

.nav__checkbox:checked + .mobile__nav-btn .nav-btn::after {
  top: 0;
  transform: rotate(-135deg);
}

/* *************************************** */
/* SECTION-HERO*/
/* *************************************** */

.section__hero {
  background-image: linear-gradient(
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.65) 100%
    ),
    url(../imgs/cuff.jpg);
  background-size: cover;
  background-position: center;

  position: relative;

  padding: 31rem 0 6rem;

  transition: background-size 0.3s ease;
  background-size: 135%;
}

.section__hero.zoom-in {
  background-size: 130%;
}

.section__hero.zoom-out {
  background-size: 90%;
}
.section__hero-text {
  font-size: 2.87rem;
  font-style: italic;
}

/* *************************************** */
/*SECTION CTA*/
/* *************************************** */
.section__cta {
  background-color: var(--color-black);
  padding: 8rem 0 7rem;
}

.cta__heading {
  font-size: 4.3rem;
  font-weight: 500;
  margin-bottom: 3.2rem;
}

.cta__text {
  font-size: 1.93rem;
  line-height: 3.47rem;

  max-width: 40.6rem;
  width: 100%;
}

.cta__form span {
  font-size: 1.43rem;
  font-weight: 500;
  color: #a0a0a0;
}

.cta__form .label-fname,
.cta__form .label-lname {
  font-size: 1.44rem;
}

.cta__form label {
  font-size: 1.76rem;
  display: block;
  margin-bottom: 1rem;
}

.cta__container {
  padding: 6rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  row-gap: 5rem;
}

.cta__text-box {
  color: var(--color-white);
}
.cta-email-box {
  margin-bottom: 2rem;
}

.form__name {
  grid-column: 1/3;
}

.input--field {
  width: 100%;
  font-family: inherit;
  color: var(--color-white);
  font-size: 1.76rem;
  font-weight: inherit;

  border: 1px solid var(--color-white);

  background-color: rgbavar var(--color-black);
  position: relative;
  z-index: 1;
}

.input--field:hover {
  background-color: rgba(28, 28, 28, 0.4);
}

.input--field:focus {
  outline: none;
  background-color: rgba(28, 28, 28, 0.4);
  box-shadow: 0 0 0 2px var(--color-black), 0 0 0 4px var(--color-white);
}

.cta__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
  row-gap: 2.2rem;
  margin-bottom: 1.5rem;
}

.cta__last-name,
.cta__first-name,
.cta__email {
  height: 4.975rem;
  padding: 0.8rem 1.5rem;
  border-radius: 10rem;
}
.email {
  grid-column: 1/3;
}
.cta__message {
  font-family: inherit;
  padding: 0.8rem 1.5rem;
  border-radius: 2.89rem;
}
.message {
  grid-column: 1/3;
}

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

.footer {
  background-color: var(--color-black);
  padding: 10rem 0 8rem;
}

.footer__container {
  display: flex;
  align-items: center;
  gap: 23rem;
}

.footer__text-heading {
  max-width: 66.6rem;
  width: 100%;
  font-size: 2.91rem;
  font-weight: 500;
  line-height: 3.95rem;
  margin-bottom: 4rem;
}

.footer__contact-heading {
  font-size: 1.93rem;
  font-weight: 500;
  margin-bottom: 3.2rem;
}

.footer__link {
  text-decoration: none;
  color: var(--color-white);
  border-bottom: 1px solid currentColor;
}

.footer__links p:not(:last-child) {
  margin-bottom: 1rem;
}

.about__content {
    padding-left: 100px;
    padding-right: 60px;
}

.about__content p {
    margin-bottom: 20px; 
}

.visually-hidden {
  font-size: 0;
  color: transparent;
  text-indent: -9999px;
  line-height: 0;
}