/* -----------------------------------------  */
/* FONTS */
/* -----------------------------------------  */

@font-face {
  font-family: NittiTypewriterNormal;
  src: url("/assets/fonts/NittiTypewriterNormal.otf");
}

@font-face {
  font-family: NittiTypewriterCameo;
  src: url("/assets/fonts/NittiTypewriterCameo.otf");
}

/* -----------------------------------------  */
/* ROOT VARIABLES */
/* -----------------------------------------  */

:root {
  --breakpoint-sm-mobile: 576px; /* Small devices (phones, 576px and up) */
  --breakpoint-md-tablet: 768px; /* Medium devices (tablets, 768px and up) */
  --breakpoint-lg-desktop: 992px; /* Large devices (desktops, 992px and up) */
  --breakpoint-xl-desktop: 1200px; /* Extra large devices (large desktops, 1200px and up) */
  --breakpoint-xxl-desktop: 1400px; /* Extra extra large devices (larger desktops, 1400px and up) */

  --col-light-100: #f6eee3;
  --col-light-200: #ddcbb8;
  --col-light-400: #ad8b69;
  --col-brown: #845628;
  --col-brown-hover: #997558;
  --col-darkbrown: #845628;
  --col-darkbrown-hover: #562f15;

  --col-neutral-50: #fafafa;
  --col-neutral-400: #d4d4d4;
  --col-neutral-500: #737373;
  --col-neutral-600: #525252;
  --col-neutral-950: #050505;

  --font-title: "NittiTypewriterCameo", serif;
  --font-body: "NittiTypewriterNormal", sans-serif;
  --font-body-bold: "AveriaSerif-Bold", sans-serif;

  --fs-100: 1rem;
  --fs-200: 1.2rem;
  --fs-300: 1.5rem;
  --fs-400: 1.6rem;
  --fs-450: 1.8rem;
  --fs-500: 2.2rem;
  --fs-550: 2.4rem;
  --fs-600: 3.2rem;
  --fs-700: 4.8rem;
  --fs-800: 6.2rem;
  --fs-900: 7.2rem;

  --ls-sm: 0.25rem;
  --ls-md: 0.25rem;
  --ls-lg: 0.25rem;

  --lh-xs: 0.9;
  --lh-sm: 1;
  --lh-ms: 1.2;
  --lh-md: 1.4;
  --lh-lg: 1.6;

  --padding-0: 0rem;
  --padding-100: 1.2rem;
  --padding-200: 2rem;
  --padding-300: 3.2rem;
  --padding-400: 4.8rem;
  --padding-500: 6.4rem;
  --padding-600: 9.6rem;
  --padding-700: 12rem;
  --padding-800: 18rem;
}

/* -----------------------------------------  */
/* RESET */
/* -----------------------------------------  */

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

* {
  margin: 0;
  /* border: solid 0.01px red; */
}

html {
  font-size: 62.5%;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-body);
  font-weight: normal;
}

ol,
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

/* -----------------------------------------  */
/* GRID */
/* -----------------------------------------  */

.grid {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
}

.grid-col-2 {
  grid-column: span 2;
}
.grid-col-3 {
  grid-column: span 3;
}
.grid-col-4 {
  grid-column: span 4;
}
.grid-col-5 {
  grid-column: span 5;
}
.grid-col-6 {
  grid-column: span 6;
}

/* -----------------------------------------  */
/* FLEX */
/* -----------------------------------------  */

.flex {
  display: flex;
}

.flex-sm-col {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-1 {
  flex: 1;
}

@media screen and (max-width: 992px) {
  .flex-sm-col {
    flex-direction: column;
    align-items: center;
  }
}

/* -----------------------------------------  */
/* SIZES */
/* -----------------------------------------  */

.wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--padding-300);
  padding-block: 24rem;
}
.mw-reg {
  max-width: 68rem;
}

@media screen and (max-width: 992px) {
  .wrapper {
    padding-block: 12rem;
  }
}

/* -----------------------------------------  */
/* GENERAL STYLING */
/* -----------------------------------------  */

body {
  background-color: var(--col-neutral-950);
  color: var(--col-neutral-50);
  font-size: var(--fs-500);
  line-height: var(--lh-lg);
}

p,
li,
a {
  font-family: var(--font-body);
  font-size: var(--fs-500);
}

p,
li {
  text-transform: uppercase;
}

h1,
h2,
h3,
.span-title,
.nav-item {
  font-family: var(--font-title);
  text-transform: uppercase;
  text-align: center;
  font-style: normal;
  font-weight: normal;
}

h1 {
  font-size: var(--fs-600);
}

h2 {
  font-size: var(--fs-600);
}

h3 {
  font-size: var(--fs-500);
}

h2,
h3 {
  margin-bottom: 3.2rem;
}

p {
  max-width: 68rem;
  margin: 0 auto;
}

.span-title {
  display: inline-block;
  white-space: nowrap;
  font-size: var(--fs-550);
}

.cc {
  text-transform: none;
}

@media screen and (max-width: 768px) {
  h2 {
    font-size: var(--fs-550);
  }

  .span-title {
    font-size: var(--fs-500);
  }
}

header {
  position: fixed;
  padding: var(--padding-300);
  z-index: 99;
  width: 100%;
}

.nav-list {
  display: flex;
  justify-content: right;
}

.btn-animate-chars {
  color: var(--col-neutral-950);
  cursor: pointer;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  max-width: max-content;
  padding-inline: 0.5rem;
  font-size: var(--fs-500);
  display: flex;
  position: relative;
}

.btn-animate-chars__text {
  white-space: nowrap;
  line-height: 1.3;
}

/* Characters */
.btn-animate-chars [data-button-animate-chars] {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

.btn-animate-chars [data-button-animate-chars] span {
  display: inline-block;
  position: relative;
  text-shadow: 0px 1.3em currentColor;
  transform: translateY(0em) rotate(0.001deg);
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn-animate-chars:hover [data-button-animate-chars] span {
  transform: translateY(-1.3em) rotate(0.001deg);
}

/* Background */
.btn-animate-chars__bg {
  background-color: #efeeec;
  position: absolute;
  inset: 0;
  transition: inset 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn-animate-chars:hover .btn-animate-chars__bg {
  inset: 0.125em;
}

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

.section-hero {
  position: relative;
  align-items: center;
  justify-content: end;
  gap: var(--padding-200);
  padding: var(--padding-600);
  height: 100dvh;
}

.tagline {
  max-width: 38rem;
  text-align: center;
  text-transform: none;
}

.hero-logo {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24rem;
  height: 24rem;
  transition: 0.3s ease all;
}

.hero-logo-name {
  max-width: 38rem;
  height: 4.2rem;
  margin-bottom: 2rem;
  justify-content: center;
  gap: 1.8rem;
}

.hero-logo-container img {
  height: 100%;
}

.sticky-logo {
  position: fixed;
  width: 8rem;
  height: 8rem;
  right: 4.8rem;
  bottom: 4.8rem;
  z-index: 99;
}

.sticky-logo img {
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .section-hero {
    padding: var(--padding-400);
  }
}

/* -----------------------------------------  */
/* QUOTE SECTION */
/* -----------------------------------------  */

.section-quote {
  gap: var(--padding-400);
  height: 120vh;
}

.quote-goal {
  text-align: justify;
}

@media screen and (max-width: 768px) {
  .section-quote {
    height: 0vh;
    min-height: 70vh;
    padding: var(--padding-300);
  }
}

/* -----------------------------------------  */
/* JEANS FEATURES SECTION */
/* -----------------------------------------  */

.section-features {
  position: relative;
  align-items: center;
  padding: var(--padding-200);
  gap: 8rem;
  margin-bottom: 20rem;
}

.features-heading p {
  text-align: center;
}

.features-container {
  position: relative;
  grid-template-rows: repeat(24, 4.8rem);
  max-width: 1400px;
}

.features-jeans {
  grid-column: 4 / 13;
  z-index: -10;
  width: 100%;
}

.features-jeans img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top;
}

.jeans-feature-main {
  grid-area: 5 / 10 / 10 /15;
  z-index: 2;
}

.feature-other {
  font-size: var(--fs-450);
  line-height: var(--lh-ms);
  color: var(--col-neutral-400);
  z-index: 2;
}

.ta-r {
  text-align: right;
}

.feature-1 {
  grid-area: 2/3/3/5;
}
.feature-2 {
  grid-area: 4/2/6/5;
}
.feature-3 {
  grid-area: 8/2/9/4;
  transform: translateX(3.2rem);
}
.feature-4 {
  grid-area: 16/1/17/4;
}
.feature-5 {
  grid-area: 2/14/4/12;
  transform: translateX(-3.2rem);
}
.feature-6 {
  grid-area: 4/12/5/15;
}
.feature-7 {
  grid-area: 12/13/13/16;
}

@media screen and (max-width: 1200px) {
  .section-features {
    margin-bottom: 12rem;
  }

  .features-container {
    grid-template-rows: repeat(18, 4.8rem);
  }

  .feature-other {
    font-size: var(--fs-400);
  }

  .feature-1 {
    grid-area: 2/2/3/5;
  }

  .feature-2 {
    grid-area: 4/2/6/5;
    transform: translateX(-3.2rem);
  }

  .feature-3 {
    transform: translateX(0);
  }

  .feature-4 {
    grid-area: 11/1/17/4;
  }

  .feature-7 {
    grid-area: 12/14/14/16;
    transform: translateX(-3.2rem);
  }
}
@media screen and (max-width: 992px) {
  .section-features {
    padding: var(--padding-300);
  }

  .features-jeans {
    grid-column: 4 / 13;
  }

  .jeans-feature-main {
    grid-area: 5 / 10 / 9 / 15;
  }

  .jeans-feature-main p {
    font-size: var(--fs-450);
  }
}

@media screen and (max-width: 768px) {
  .features-container {
    display: flex;
    flex-direction: column;
  }

  .jeans-feature-main {
    position: absolute;
    left: 50%;
    top: 10%;
  }

  .feature-other {
    text-align: center;
    transform: translateY(0);
    margin-top: 2.4rem;
    max-width: 38rem;
    transition: 0.3s all ease;
  }
}

@media screen and (max-width: 576px) {
  .jeans-feature-main {
    left: 40%;
    top: 10%;
  }

  .jeans-feature-main p {
    font-size: var(--fs-400);
  }

  .feature-other {
    font-size: var(--fs-300);
  }
}

/* -----------------------------------------  */
/* EXTRA INFO */
/* -----------------------------------------  */

.extra-info {
  flex-direction: column;
  gap: 3.2rem;
  background-color: #faf9f9;
  color: var(--col-neutral-950);
  text-align: center;
  width: 100%;
  height: 80rem;
  padding: var(--padding-300);
}

.stitch {
  height: 4.8rem;
}

.extra-info .tagline {
  color: var(--col-neutral-500);
}

@media screen and (max-width: 768px) {
  .extra-info {
    height: 58rem;
  }
}

/* -----------------------------------------  */
/* KEY DETAILS  */
/* -----------------------------------------  */
.section-detail {
  justify-content: space-between;
  gap: 8rem;
}

.detail-img {
  max-width: 48rem;
}

.detail-information {
  justify-content: center;
}

.detail-information p {
  text-align: center;
  max-width: 38rem;
}

@media screen and (max-width: 992px) {
  .section-detail {
    gap: 3.2rem;
  }

  .detail-information h2 {
    margin-bottom: 1.2rem;
  }

  .detail-information p {
    max-width: 48rem;
  }

  .detail-img {
    max-width: 32rem;
  }
}

/* -----------------------------------------  */
/* FOUNDER INFO */
/* -----------------------------------------  */

.section-founder {
  justify-content: space-between;
  gap: 8rem;
  padding: var(--padding-300);
  margin-block: 10vh;
}

.contact,
.contact-showrooms {
  flex: 1;
}

.founder-information,
.founder-img {
  flex-direction: column;
  max-width: 68rem;
}

.founder-credentials {
  align-items: center;
  text-align: center;
  text-transform: uppercase;
}

.founder-credentials li {
  color: var(--col-neutral-50);
  transition: 0.5s all ease;
}

.founder-experience {
  padding-block: 4.8rem;
  border-bottom: solid 1px var(--col-neutral-600);
}

.experience-logo-wrapper {
  display: flex;
  justify-content: center;
  padding-block: 4.8rem;
}

.experience-logos {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 68rem;
}

.exp-logo {
  width: 8rem;
  opacity: 0.25;
}

.founder-inspiration {
  text-align: justify;
}

.founder-img {
  position: relative;
}

.founder-img {
  max-width: 48rem;
}

.founder-img img {
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 1200px) {
  .founder-information {
    flex: 2;
  }
}

@media screen and (max-width: 992px) {
  .section-founder {
    flex-direction: column-reverse;
  }

  .founder-information,
  .founder-img {
    margin: 0 auto;
  }

  .experience-logos {
    width: 100%;
  }
}

@media screen and (max-width: 576px) {
  .exp-logo {
    width: 6rem;
  }
}

/* NAME SECTION */
.section-name {
  position: relative;
  height: 125vh;
  padding: var(--padding-400);
  overflow-x: hidden;
}

.name-content p {
  text-align: justify;
}

.name-content p:nth-child(3) {
  margin-top: 3.2rem;
  text-align: center;
}

.name-img {
  position: absolute;
}

.name-img-bg {
  z-index: -1;
}

.name-img {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* -----------------------------------------  */
/* CONTACT */
/* -----------------------------------------  */

.section-contact {
  padding: var(--padding-600);
  margin-block: 6rem;
}

.contact {
  justify-items: flex-end;
  padding-right: var(--padding-600);
  border-right: solid 1px white;
}

.contact-logo {
  max-width: 40rem;
  margin-bottom: 3.2rem;
}

.contact-showrooms {
  padding-left: var(--padding-600);
  gap: 4.8rem;
}

.european-distribution h2,
.european-showroom h2 {
  text-align: left;
}

.showroom {
  margin-bottom: 3.2rem;
}

.showroom p {
  margin: 0;
}

@media screen and (max-width: 768px) {
  .section-contact {
    flex-direction: column;
  }

  .contact {
    justify-items: center;
    padding: 0;
    border: 0px;
    border-bottom: 1px solid white;
  }

  .contact-showrooms {
    padding: 0;
    align-items: center;
  }

  .european-distribution h2,
  .european-showroom h2,
  .showroom {
    text-align: center;
  }

  .european-showroom h2 {
    padding-top: 3.2rem;
  }

  .european-distribution h2 {
    margin-top: 3.2rem;
  }

  .contact-logo {
    width: 30rem;
  }
}

/* -----------------------------------------  */
/* FOOTER */
/* -----------------------------------------  */
footer {
  padding: var(--fs-300);
}
/* .social-container {
} */

.copyright {
  justify-items: center;
}

.copyright p,
.copyright a {
  font-size: var(--fs-300);
}

.hidden {
  opacity: 0;
  visibility: hidden;
}

.hidden-word {
  opacity: 0;
  display: inline-block;
}

.faded-word {
  display: inline-block;
  transition: opacity 0.3s ease;
}

@media screen and (max-width: 768px) {
  footer {
    padding-bottom: 3.2rem;
  }
}

/* RESPONSIVE FONTS */
@media screen and (max-width: 768px) {
  p,
  li,
  a {
    font-size: var(--fs-450);
  }
}