:root {
  /* Fonts */
  --font-heading: "Futura", sans-serif;
  --font-body: "Manrope", sans-serif;

  /* Colours */
  --main-text-color: #222222;
  --sub-text-color: #9c9b9b;
  --line-color: #d9d9d9;

  /* Font sizes */
  --fs-heading-1: 5rem; /* 80px */
  --fs-case-title: 4.75rem; /* 76px */
  --fs-bottom-heading: 3.125rem; /* 50px */
  --fs-h2: 2.5rem; /* 40px */
  --fs-h3: 2rem; /* 32px */
  --fs-typography: 1.5rem; /* 24px */
  --fs-h4: 1.25rem; /* 20px */
  --fs-h5: 1.125rem; /* 18px */
  --fs-body: 1rem; /* 16px */
  --fs-sub: 0.875rem; /* 14px */
}

/* Futura */
@font-face {
  font-family: "Futura";
  src: url(./fonts/futura/Futura\ Book\ font.ttf);
}

@font-face {
  font-family: "Futura Bold";
  src: url(./fonts/futura/unicode.futurab.ttf);
}

/* Manrope */
@font-face {
  font-family: "Manrope";
  src: url(./fonts/Manrope/Manrope-Medium.ttf);
}

/* Myriad */
@font-face {
  font-family: "Myriad Pro Bold";
  src: url(./fonts/Myriad/MYRIADPRO-BOLD.OTF);
}
@font-face {
  font-family: "Myriad Pro Regular";
  src: url(./fonts/Myriad/MYRIADPRO-REGULAR.OTF);
}
@font-face {
  font-family: "Myriad Pro Light";
  src: url(./fonts/Myriad/MyriadPro-Light.otf);
}

/* Adobe Garamond */
@font-face {
  font-family: "Adobe Garamond Pro Bold";
  src: url(./fonts/AdobeGaramond/AGaramondPro-Bold.otf);
}
@font-face {
  font-family: "Adobe Garamond Pro Regular";
  src: url(./fonts/AdobeGaramond/AGaramondPro-Regular.otf);
}

/* Helvetica Neue */
@font-face {
  font-family: "Helvetica Neue Medium";
  src: url(./fonts/helvetica-neue/HelveticaNeueMedium\ 21.39.54.ttf);
}

@font-face {
  font-family: "Helvetica Neue Regular";
  src: url(./fonts/helvetica-neue/HelveticaNeue-Extended.otf);
}

@font-face {
  font-family: "Helvetica Neue Light";
  src: url(./fonts/helvetica-neue/HelveticaNeueLight.ttf);
}

/* Roboto */
@font-face {
  font-family: "Roboto";
  src: url(./fonts/RobotoCondensed_regular/RobotoCondensedRegular.ttf);
}

/* Inter */
@font-face {
  font-family: "Inter";
  src: url(./fonts/Inter/Inter-Regular.ttf);
}

/* Butterfinger */
@font-face {
  font-family: "Butterfinger";
  src: url(./fonts/Butterfinger/ButterFinger\ Serif\ Regular.ttf);
}


@keyframes bounce {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.95);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

[data-aos="fade-up"] {
  transform: translateY(30px); 
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

[data-aos="fade-up"].aos-animate {
  transform: translateY(0);
  opacity: 1;
}

[data-aos] {
  transition-timing-function: ease-out;
}


html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  height: 100vh;
  margin: 0;
  color: var(--main-text-color);
}

header {
  display: flex;
  flex-direction: column;
  width: 100%;
}

header > .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}

.logo {
  background-image: url(./media/logo.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 180px;
  height: 180px;
  cursor: pointer;
  margin-top: 10px;
  transition: transform 800ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.logo:hover {
  animation: bounce 800ms ease-in-out;
}

#menu > ul > li > a {
  text-decoration: none;
  color: inherit;
}

#menu ul {
  display: flex;
  list-style: none;
  gap: 5vh;
  font-family: var(--font-heading);
  font-size: 30px;
  margin-bottom: 10vh;
  margin-right: 5vw;
}

#menu ul li {
  cursor: pointer;
  position: relative;
}

#menu ul li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  border-radius: 5px;
  width: 0%;
  height: 2px;
  transition: width 0.3s ease;
  background-color: var(--main-text-color);
}

#menu ul li:hover::after {
  width: 100%;
}

/* SCROLL ARROW */
@keyframes moveArrow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.scroll_arrow {
  display: flex;
  position: absolute;
  cursor: pointer;
  left: 80%;
  animation: moveArrow 1s ease-in-out infinite;
}

.scroll_arrow > span {
  background-color: var(--main-text-color);
  width: 5px;
  height: 28px;
  border-radius: 5px;
  margin: 6px;
  display: block;
}

/* PIL UPP */
.scroll_arrow.up > span:nth-of-type(1) {
  transform: rotate(45deg);
}

.scroll_arrow.up > span:nth-of-type(2) {
  transform: rotate(-45deg);
}

.scroll_arrow.up {
  bottom: -370%;
}

ul {
  font-family: var(--font-body);
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
}

p,
h4,
h5 {
  font-family: var(--font-body);
}

h4 {
  font-size: var(--fs-h4);
}

h5 {
  font-size: var(--fs-h5);
  margin-bottom: 3vh;
}

.homepage {
  height: 90vh;
}

.footer {
  color: var(--sub-text-color);
  display: flex;
  justify-content: center;
  font-size: var(--fs-sub);
  margin-top: -8vh;
}

/* CASE STUDY */
.caseIntroduction {
  height: 50vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5vh 15vw;
  gap: 4vw;
}

.text_column > h1 {
  font-size: var(--fs-case-title);
  margin-bottom: 0;
}

.text_column > h3 {
  font-size: var(--fs-h3);
  font-family: var(--font-body);
  margin-top: 0;
}

.overview_box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
}

.overview_box > div {
  display: flex;
  align-items: center;
  gap: 3vh;
  width: 100%;
}

.overview_box > div > p {
  margin: 0;
}

.overview_box > div > .title {
  width: 6vw;
}

.overview_box > div > .line {
  width: 15vw;
  border-bottom: 1px solid var(--main-text-color);
}

/* CASE HEADER */
.Task_Problem {
  height: 60vh;
  padding: 25vh 30vw 0 20vw;
  margin-bottom: -10vh;
}

.Task_Problem > h2 {
  font-size: 40px;
}

#caseContainer {
  display: flex;
  flex-direction: column;
  gap: 10vh;
  position: relative;
  padding-left: 10vw;
  width: 80%;
}

/* ALL CHAPTERS */
.research_chapter,
.feedback_chapter,
.ideate_chapter,
.UI_chapter,
.validation_chapter,
.lessons_chapter,
.final_chapter {
  display: flex;
  gap: 2vw;
  position: relative;
}

.chapter_content {
  padding-left: 2vw;
}

h4 {
  margin-top: 0;
}

/* CHAPTER LINE */
.timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2vw;

  position: relative;
  z-index: 2;
}

.case_line {
  background-color: var(--line-color);
  flex-grow: 1;
  width: 2px;
  margin: 10px 0 -9vh 0;
}

.dot {
  width: 27px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--line-color);
  transition: background-color 0.3s ease;
}

.x_axis {
  position: absolute;
  bottom: -9vh;
  left: 1vw; 
  height: 2px;
  background-color: var(--line-color);
  width: calc(100% - 2vw); 
  z-index: 1;
}

/* Explore in Figma button */
.explore_Button {
  margin-top: 10vh;
}

.explore_Button button {
  display: flex;
  align-items: center;
  gap: 2rem;
  color: var(--main-text-color);
  padding: 20px 28px;
  border-radius: 15px;
  background-color: #ffffff;
  box-shadow: 5px 5px 50px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--line-color);
  cursor: pointer;
  width: 18vw;
  justify-content: center;
  font-size: var(--fs-h5);

  transition: transform 0.4s ease;
}

.explore_Button a {
  text-decoration: none;
}

.explore_Button button svg {
  width: 24px;
  height: 24px;
  stroke: var(--main-text-color);
}

.explore_Button button:hover {
  transform: scale(1.05); /* Gör knappen 5% större */
}

/* EXPLORE */
.Explore_section {
  display: flex;
  flex-direction: column;
  gap: 2vw;
  padding: 18vh 15vw 15vh 15vw;
}

#project_ex {
  display: flex;
  align-items: center;
  gap: 5vh;
  height: 220px;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: 5px 5px 50px 0px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.5s ease, transform 0.5s ease;
  width: 70%;
}

#project_ex:hover {
  transform: translateY(-5px);
  box-shadow: 5px 5px 40px 0px rgba(0, 0, 0, 0.3);
}

.project_container {
  gap: 8vh;
  display: flex;
  flex-direction: column;
}

.info_img_EX {
  width: 250px;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.info_text_EX {
  padding: 2rem;
}

.info_text_EX > span {
  font-family: "Futura";
  margin-bottom: -5vh;
}

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

.Explore_section h2 {
  font-size: var(--fs-bottom-heading);
  margin-bottom: 20px;
}

 .project_arrow {
  display: flex;
  align-items: flex-end;
} 

.project_arrow svg {
  width: 40px;
  height: 40px;
  stroke: var(--main-text-color);
  margin-top: 20vh;
  margin-left: -1vw;
}

.case_link {
  text-decoration: none;
  color: inherit;
}

#project_ex h3 {
  margin-top: 0;
}

.project_3_ex h3 {
  width: 18vw;
}

.final_chapter .timeline .case_line {
  height: 110vh;
}