body{
  background-color: var(--white);
}

.about-page{
  overflow: hidden;
  height: 910px;
  margin: 0;
  padding: 0;
  background-image: url(../pictures/bg-2.png);
  background-attachment: fixed;
  position: relative;
  overflow: hidden;

  .svg-animation{
    position: absolute;
    top: 0%;
    left: 35%;
    z-index: 2;
  }

  .text{
    margin: 0;
    padding: 0;
    height: 85%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    .about-name{
      font-family: Tangerine;
      font-size: 180px;
      font-weight: 100;
      text-align: center;

      color: var(--white);
      z-index: 1;

      margin: 0;
      padding: 0;
    }
  }
}

/* RESPONSIVE  */
@media screen and (max-width: 1500px){
  .about-page{
    height: 800px;
  
    .svg-animation{
      position: absolute;
      left: 15%;
      top: 0%;
      z-index: 2;
    }
  
    .text{
      .about-name{
        font-size: 125px;
        font-weight: 100;
  
        color: var(--white);
        z-index: 1;
      }
    }
  }
}

@media screen and (max-width: 1200px){
  .about-page{
    height: 700px;
  
    .svg-animation{
      top: -10%;
      left: -5%;
      z-index: 2;
    }
  
    .text{
      height: 95%;
      .about-name{
        font-size: 100px;
        font-weight: 100;
        margin: 0;
        padding: 0;
      }
    }
  }
}

@media screen and (max-width: 500px){
  .about-page{
    overflow: hidden;
    height: 800px;
  
    .svg-animation{
      display: none;
    }
    .text{
      margin: 0;
      padding: 0;
  
      .about-name{
        position: absolute;
        font-family: Tangerine;
        font-size: 60px;
        font-weight: 100;
  
      }
    }
  }
}

/*-------------------- OUR STORY --------------------------------*/

.our-story{
  background-color: var(--bg-1);
  height: 1000px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
  align-items: center;
  overflow: hidden;

  .story-container{
    height: 80%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5%;

    .our-story-text{
      width: 40%;
      height: 100%;
      background-color: var(--bg-2);

      display: flex;
      flex-direction: column;
      z-index: 1;
      border-radius: 35px;

      h1{
        text-align: center;
        font-family: Tangerine;
        font-size: 100px;
        margin: 0;
        padding: 0;
        padding: 5px;
        margin: 5px;
        margin-top: 30px;
        color: var(--black);
      }

      p{
        text-align: left;
        font-family: Gowun batang;
        font-size: clamp(20px, 3vw, 25px);
        margin: 0;
        padding: 0;
        padding: 25px;
        margin: 5px;
      }
    }

    .story-img{
      width: 40%;
      height: 100%;
      background-color: blue;
      z-index: 5;
      border-radius: 35px;

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

  .abs-leaf{
    position: absolute;
    top: -5%;
    left: 35%;
    z-index: -1;
    transform: scale(0.65) scaleX(-1) rotate(-15deg)
  }

  .abs-leaf2{
    position: absolute;
    top: 55%;
    left: -7%;
    z-index: 1;
    transform: scale(0.65) rotate(-8deg)
  }
}

@media screen and (max-width: 1500px){
  .our-story{
    background-color: var(--bg-1);
    .story-container{
      height: 80%;
  
      .our-story-text{
        width: 40%;
        h1{
          font-size: 100px;
        }
      }
      .story-img{
        width: 40%;
      }
    }
    .abs-leaf2{
      position: absolute;
      top: 55%;
      left: -15%;
      z-index: 1;
      transform: scale(0.65) rotate(-8deg)
    }
  }
}

@media screen and (max-width: 1200px){
  .our-story{
    background-color: var(--bg-1);
    .story-container{
      height: 80%;
  
      .our-story-text{
        width: 40%;
        h1{
          font-size: 80px;
        }
      }
      .story-img{
        width: 40%;
      }
    }
    .abs-leaf2{
      position: absolute;
      top: 55%;
      left: -27%;
      z-index: 1;
      transform: scale(0.65) rotate(-8deg)
    }
  }
}

@media screen and (max-width: 500px){
  .our-story{
    background-color: var(--bg-1);
    height: 900px;
  
    .story-container{
      height: 90%;
      width: 100%;
      display: flex;

      flex-direction: column;

      align-items: center;
      justify-content: center;
      gap: 5%;
  
      .our-story-text{
        width: 90%;
        height: 85%;
        z-index: 2;
  
        h1{
          text-align: center;
          font-family: Tangerine;
          font-size: 70px;
        }
  
        p{
          font-size: 18px;
        }
      }
  
      .story-img{
        display: none;
      }
    }
  
    .abs-leaf{
      position: absolute;
      top: -5%;
      left: 35%;
      z-index: 1;
      transform: scale(0.65) scaleX(-1) rotate(-15deg)
    }
  
    .abs-leaf2{
      position: absolute;
      top: 55%;
      left: -50%;
      z-index: 1;
      transform: scale(0.65) rotate(-8deg)
    }
  }
}


/*----------------------------- LINEAR GRADIENTS ------------------------------ */

.linear-gradient1{
  position: absolute;
  height: 200px;
  width: 100%;
  background: rgb(31,20,16);
  background: linear-gradient(360deg, rgb(250, 241, 229), rgb(205, 146, 97) 100%);
  z-index: -1;
}

/*-------------------------------- NICE WORDS -------------------------------- */

.nice-words{
  height: 500px;
  width: 100%;
  overflow: hidden;
  margin-top: 200px;
  z-index: 1;

  .word-container{
    height: 80%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    h1{
      font-size: 30px;
      text-align: center;
      font-family: gowun batang;
      color: var(--tertiary);
      font-weight: 100;
      width: 80%;
    }
  }

  .img-container{
    height: 20%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    img{
      width: 35%;

    }
  }
}

@media screen and (max-width: 1500px){
  .nice-words{
    height: 500px;
  
    .word-container{
      height: 80%;
  
      h1{
        font-size: 25px;
      }
    }
  
    .img-container{
      height: 20%;
  
      img{
        width: 45%;
  
      }
    }
  }
}

@media screen and (max-width: 1200px){
  .nice-words{
    height: 400px;
  
    .word-container{
      height: 80%;
  
      h1{
        font-size: 20px;
      }
    }
  
    .img-container{
      height: 20%;
  
      img{
        width: 55%;
  
      }
    }
  }
}

@media screen and (max-width: 500px){
  .nice-words{
    height: 750px;
  
    .word-container{
      height: 80%;
  
      h1{
        font-size: 18px;
      }
    }
  
    .img-container{
      height: 20%;
  
      img{
        width: 75%;
  
      }
    }
  }
}

/*----------------------------- LINKS ------------------------------ */

.links{
  height: 1500px;
  width: 100%;
  background-color: var(--bg-3);
  overflow: hidden ;


  .links-header{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30%;
    width: 100%;
    background: rgb(250,241,229);
    background: linear-gradient(180deg, rgba(250,241,229,1) 0%, rgba(147,155,79,1) 100%);
    position: relative;

    .text{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
      width: 100%;
      background-color: #cd9261c5;
      color: var(--white);

      h1{
        font-family: Tangerine;
        font-size: 150px;
        padding: 0;
        margin: 0;

      }
    }

    .abs-leaf3{
      position: absolute;
      transform: scale(0.8) rotate(140deg);
      left: -50px;
      top: 75px;
    }

    .abs-leaf4{
      position: absolute;
      transform: scale(0.8) rotate(-140deg) scaleX(-1);
      right: -50px;
      top: -125px;
    }
  }

  .links-holder{
    height: 70%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .box{
      height: 90%;
      width: 85%;
      background-color: rgba(255, 255, 255, 0.774);
      display: flex;
      flex-direction: column;
      gap: 10px;
      border-radius: 25px;

      p{
        padding: 0;
        margin: 0;
        color: var(--black);
        font-family: Gowun Batang;
        margin-left: 50px;
      }

      h1{
        margin: 0;
        padding: 0;
        font-family: Gowun batang;
        font-size: 30px;
        font-weight: 100;
        margin-top: 50px;
        margin-left: 50px;
      }

      a{
        margin: 0;
        padding: 0;
        color: var(--black);
        font-family: Gowun Batang;
        margin-left: 50px;

      }
    }

    .abs-leaf5{
      position: absolute;
      transform: scale(0.8) rotate(40deg) ;
      right: -80px;
      bottom: -80px;
    }

    .abs-leaf6{
      position: absolute;
      transform: scale(0.8) rotate(140deg);
      left: -50px;
      bottom: -80px;
    }
  }
}

@media screen and (max-width: 1500px){
  .links{
    height: 1500px;

    .links-header{
      height: 30%;
  
      .text{
        height: 200px;
  
        h1{
          font-size: 120px;
  
        }
      }
  
      .abs-leaf3{
        position: absolute;
        transform: scale(0.6) rotate(140deg);
        left: -150px;
        top: 75px;
      }
  
      .abs-leaf4{
        position: absolute;
        transform: scale(0.6) rotate(-140deg) scaleX(-1);
        right: -150px;
        top: -125px;
      }
    }
  
    .links-holder{
      height: 70%;
  
      .box{
        height: 90%;
      }
  
      .abs-leaf5{
        position: absolute;
        transform: scale(0.6) rotate(40deg) ;
        right: -150px;
        bottom: -80px;
      }
  
      .abs-leaf6{
        position: absolute;
        transform: scale(0.6) rotate(140deg);
        left: -120px;
        bottom: -80px;
      }
    }
  }
}

@media screen and (max-width: 500px){
  .links{
    height: 1300px;

    .links-header{
      height: 30%;
  
      .text{
        height: 150px;
  
        h1{
          font-size: 100px;
  
        }
      }
  
      .abs-leaf3{
        display: none;
      }
  
      .abs-leaf4{
        display: none;
      }
    }
  
    .links-holder{
      height: 70%;
  
      .box{
        height: 90%;
        width: 95%;
      }
  
      .abs-leaf5{
        display: none;
      }
  
      .abs-leaf6{
        display: none;
      }
    }
  }
}