@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700;900&display=swap');

/* font-family: 'Barlow', sans-serif; */
/* font-family: 'Fraunces', serif; */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Barlow', sans-serif
}

body::-webkit-scrollbar {
  display: none;
}

nav {
  position: absolute;
  padding: 0 1.5rem;
  height: 70px;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav ul {
  display: flex;
  ;
}

.hamburger {
  display: none;
  cursor: pointer;
}

.responsive_navbar.active {
  /* display: none; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 1;
  width: 88.8vw;
  height: 200px;
  /* padding: 100px 0; */
  background-color: hsl(0, 0%, 100%);
  position: absolute;
  /* transition: all 1s ease-in-out; */
}

.triangle-up {
  width: 0;
  height: 0;
  border-left: 36px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 35px solid hsl(0, 0%, 100%);
  position: absolute;
  top: -1.5rem;
  left: 17.7rem;
}

.responsive_navbar a {
  padding: .7rem;
  border-radius: 20px;
  color: hsl(232, 10%, 55%);
}

.responsive_navbar a:hover {
  background-color: hsl(51, 100%, 49%);
  font-family: 'Fraunces', serif;
  text-transform: uppercase;
  color: #1b1b1b;
}

/* .text {
  display: none;
} */

/* .text.active {
  display: flex;
} */

nav ul li {
  list-style: none;
  color: hsl(0, 0%, 100%);
  /* margin: 1.5rem; */
  padding: .7rem 1rem;
  border-radius: 20px;
  margin: 0 0 0 1.5rem;
}

a {
  text-decoration: none;
}

nav ul li:hover {
  background-color: hsl(0, 0%, 100%);
  color: #1b1b1b;
  font-family: 'Fraunces', serif;
  text-transform: uppercase;
  font-size: .8rem;
}

header {
  width: auto;
  height: 100vh;
  background-image: url("./public/static/images/desktop/image-header.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.article_header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.article_header h1 {
  font-family: 'Fraunces', serif;
  font-size: 4rem;
  color: hsl(0, 0%, 100%);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: -8rem;
  padding: 0 0 5rem 0;
}

/* .article_header img {
  margin-top: 15rem;
} */

.sec_one {
  width: 100vw;
  height: 80vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* background-color: pink; */
}


/* Section 1 */
.sec_one_article {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}

.sec_one_article h2 {
  font-family: 'Fraunces', serif;
  font-size: 3rem;
}

.sec_one_article p {
  color: hsl(210, 4%, 67%);
  font-size: 18px;
}

.sec_one_article a {
  font-family: 'Fraunces', serif;
  text-transform: uppercase;
  z-index: 1;
  color: #1b1b1b;
}


.sec_one_article_text {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  height: 300px;
  padding: 0 10rem;
  position: relative;
}

.figure_sec_one {
  background-image: url("./public/static/images/desktop/image-transform.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
}

.sec_one_article_text .line {
  width: 120px;
  height: .6rem;
  border-radius: 20px;
  background-color: hsl(51, 100%, 49%, .4);
  position: absolute;
  top: 18.3rem;
  left: 9.7rem;
  z-index: 0;
}

.sec_one_article_text .line:hover {
  z-index: 0;
  background-color: hsl(51, 100%, 49%);
}

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


/* Section 2 */

.sec_two {
  width: 100vw;
  height: 80vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* background-color: pink; */
}

.sec_two_article {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}

.sec_two_article h2 {
  font-family: 'Fraunces', serif;
  font-size: 3rem;
}

.sec_two_article p {
  color: hsl(210, 4%, 67%);
  font-size: 18px;
}

.sec_two_article a {
  font-family: 'Fraunces', serif;
  text-transform: uppercase;
  z-index: 1;
  color: #1b1b1b;
}

.sec_two_article_text {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  height: 300px;
  padding: 0 10rem;
  position: relative;
}

.figure_sec_two {
  background-image: url("./public/static/images/desktop/image-stand-out.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
}

.sec_two_article_text .line {
  width: 120px;
  height: .6rem;
  border-radius: 20px;
  background-color: hsl(7, 99%, 70%, .4);
  position: absolute;
  top: 18.3rem;
  left: 9.7rem;
  z-index: 0;
}

.sec_two_article_text .line:hover {
  z-index: 0;
  background-color: hsl(7, 99%, 70%);
}

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


/* Section 3 */

.sec_three {
  width: 100vw;
  height: 80vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: pink;
}

.figure_sec_three_left {
  background-image: url("./public/static/images/desktop/image-graphic-design.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
  text-align: center;
}

.figure_sec_three_left article {
  margin-top: 380px;
  margin-bottom: 5rem;
}

.figure_sec_three_left article h1 {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  margin: 0 0 2rem 0;
  color: hsl(167, 40%, 24%);
}

.figure_sec_three_left article p {
  padding: 0 12rem;
  color: hsl(168, 34%, 41%);
}

.figure_sec_three_right {
  background-image: url("./public/static/images/desktop/image-photography.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
  text-align: center;
}

.figure_sec_three_right article {
  margin-top: 380px;
}

.figure_sec_three_right article h1 {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  margin: 0 0 2rem 0;
  color: hsl(198, 62%, 26%);
}

.figure_sec_three_right article p {
  padding: 0 13rem;
  color: hsl(167, 40%, 24%);
}

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

/* Section 4 */
.sec_four {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 15rem;
  /* margin: 0 0 3rem 0; */
}

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

.sec_four h1 {
  text-transform: uppercase;
  font-family: 'Fraunces', serif;
  color: hsl(210, 4%, 67%);
  text-align: center;
  margin-bottom: 5rem;
}

.sec_four img {
  border-radius: 100%;
  width: 100px;
  height: 100px;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  /* margin: 1rem; */
  height: 300px;
}

.card p {
  color: hsl(213, 9%, 39%);
}

.card_name p {
  font-family: 'Fraunces', serif;
  color: #1b1b1b;
  font-weight: 900;
  padding-bottom: 1rem;
}

.card_name span {
  color: hsl(210, 4%, 67%);
}

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

/* Section 5 */
.sec_five {
  width: 100vw;
  height: 70vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.figure_sec_five_one {
  background-image: url("./public/static/images/desktop/image-gallery-milkbottles.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
}

.figure_sec_five_two {
  background-image: url("./public/static/images/desktop/image-gallery-orange.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
}

.figure_sec_five_three {
  background-image: url("./public/static/images/desktop/image-gallery-cone.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
}

.figure_sec_five_four {
  background-image: url("./public/static/images/desktop/image-gallery-sugarcubes.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: auto;
}


/* Footer */

footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 50vh;
  width: 100vw;
  background-color: #8fd0c2;
}

.logo {
  background-color: hsl(167, 40%, 24%);
  /* defines the background color of the image */
  mask: url(./public/static/images/logo.svg) no-repeat center / contain;
  -webkit-mask: url(./public/static/images/logo.svg) no-repeat center / contain;
}

.icon {
  margin-top: -6rem;
  width: 15rem;
  height: 15rem;
}

.footer_menu {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -5rem;
  position: relative;
  z-index: 1;
}

.footer_menu a {
  padding: 1rem;
  color: hsl(168, 34%, 41%);
}

.footer_menu a:hover {
  padding: 1rem;
  color: hsl(0, 0%, 100%);
}

.social_icon img {
  padding: 1rem;
  margin-top: 4rem;
  cursor: pointer;
}

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

@media only screen and (max-width: 1700px) {

  .responsive_navbar {
    display: none;
  }

  .responsive_navbar.active {
    display: none;
  }

  .figure_sec_three_left article {
    margin-top: 480px;
  }

  .figure_sec_three_right article {
    margin-top: 480px;
  }
}

@media only screen and (max-width: 900px) {
  nav ul {
    display: none;
  }

  .hamburger {
    display: block;
  }

  .responsive_navbar.active {
    display: flex;
  }

  .responsive_navbar.active {
    top: 7rem;
    left: 3rem;
  }

  .triangle-up {
    top: -1.5rem;
    left: 43.2rem;
  }

  header {
    width: 100vw;
    height: 90vh;
    background-image: url("./public/static/images/mobile/image-header.jpg");
  }

  .article_header h1 {
    margin-top: -2rem;
    padding: 0 0 10rem 0;
  }


  /* Section 1 */
  .sec_one {
    height: fit-content;
  }

  .sec_one {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: "article""figure";
  }


  .sec_one> :nth-child(1) {
    grid-area: figure;
  }

  .sec_one> :nth-child(2) {
    grid-area: article;
  }

  .sec_one_article_text {
    text-align: center;
    align-items: center;
    justify-content: space-between;
    height: 350px;
    padding: 1rem;
    margin: 5rem 0;
  }

  .figure_sec_one {
    background-image: url("./public/static/images/desktop/image-transform.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100vw;
    height: 40vh;
  }

  .sec_one_article_text .line {
    width: 120px;
    height: .6rem;
    border-radius: 20px;
    background-color: hsl(51, 100%, 49%, .4);
    position: absolute;
    top: 20.3rem;
    left: 21.6rem;
    z-index: 0;
  }

  /* Section 2 */
  .sec_two {
    height: fit-content;
  }

  .sec_two {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: "article""figure";
  }

  .sec_two> :nth-child(1) {
    grid-area: article;
  }

  .sec_two> :nth-child(2) {
    grid-area: figure;
  }

  .sec_two_article_text {
    text-align: center;
    align-items: center;
    justify-content: space-between;
    height: 350px;
    padding: 1rem;
    margin: 5rem 0;
  }

  .figure_sec_two {
    background-image: url("./public/static/images/desktop/image-stand-out.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100vw;
    height: 40vh;
  }

  .sec_two_article_text .line {
    width: 120px;
    height: .6rem;
    border-radius: 20px;
    background-color: hsl(7, 99%, 70%, .4);
    position: absolute;
    top: 20.3rem;
    left: 21.6rem;
    z-index: 0;
  }

  /* Section 3 */

  .sec_three {
    height: fit-content;
  }

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

  .figure_sec_three_left article {
    /* margin-top: 400px; */
    margin-bottom: 5rem;
  }

  .figure_sec_three_right article {
    /* margin-top: 400px; */
    margin-bottom: 5rem;
  }

  .figure_sec_three_right article p {
    padding: 0 14rem;
  }

  /* Section 4 */

  .sec_four {
    height: fit-content;
    padding: 0 2.5rem;
    margin: 0 0 3rem 0;
  }

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

  .sec_four h1 {
    margin-top: 5rem;
    font-size: 18px;
  }

  .card {
    margin-bottom: 3rem;
  }

  /* Section 5 */
  .sec_five {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 500px) {
  header {
    width: 100vw;
    height: 70vh;
    background-image: url("./public/static/images/mobile/image-header.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  .responsive_navbar.active {
    top: 7rem;
    left: 1.3rem;
  }

  .triangle-up {
    top: -1.5rem;
    left: 21.6rem;
  }

  .article_header h1 {
    font-size: 3rem;
    text-align: center;
    margin-top: -15rem;
    padding: 0 0 2rem 0;
  }

  /* Section 1 */
  .sec_one_article_text .line {
    width: 120px;
    height: .6rem;
    border-radius: 20px;
    background-color: hsl(51, 100%, 49%, .4);
    position: absolute;
    top: 20.3rem;
    left: 9.6rem;
    z-index: 0;
  }

  /* Section 2 */
  .sec_two_article_text .line {
    width: 120px;
    height: .6rem;
    border-radius: 20px;
    background-color: hsl(7, 99%, 70%, .4);
    position: absolute;
    top: 20.3rem;
    left: 9.6rem;
    z-index: 0;
  }

  /* Section 3 */
  .figure_sec_three_left {
    background-image: url("./public/static/images/mobile/image-graphic-design.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100vw;
    height: auto;
    text-align: center;
  }

  .figure_sec_three_left article {
    margin-top: 400px;
    margin-bottom: 5rem;
  }

  .figure_sec_three_left article p {
    padding: 0 1rem;
  }

  .figure_sec_three_right {
    background-image: url("./public/static/images/mobile/image-photography.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100vw;
    height: auto;
    text-align: center;
  }

  .figure_sec_three_right article {
    margin-top: 400px;
    margin-bottom: 5rem;
  }

  .figure_sec_three_right article p {
    padding: 0 1rem;
  }

  /* Section 4 */

}

@media only screen and (max-width: 400px) {
  .sec_one_article_text .line {
    width: 120px;
    height: .6rem;
    border-radius: 20px;
    background-color: hsl(51, 100%, 49%, .4);
    position: absolute;
    top: 20.3rem;
    left: 7.6rem;
    z-index: 0;
  }

  .sec_two_article_text .line {
    width: 120px;
    height: .6rem;
    border-radius: 20px;
    background-color: hsl(7, 99%, 70%, .4);
    position: absolute;
    top: 20.3rem;
    left: 7.6rem;
    z-index: 0;
  }

  .triangle-up {
    top: -1.5rem;
    left: 17.7rem;
  }

}