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


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

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

    .events-name{
      font-family: Tangerine;
      font-size: clamp(108px, 15vw, 280px);
      font-weight: 100;

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

      margin-right: 15%;
      margin-top: 5%;
      padding: 0;
    }
  }
}

@media screen and (max-width: 500px){
  .events-page{
    height: 800px;
  
    .text{
      height: 85%;
      align-items: center;
      justify-content: center;
      text-align: center;
  
      .events-name{
  
        margin-right: 0%;
        padding: 0;
      }
    }
  }
}

/*--------------------- linear gradient ------------------------*/
.linear-gradient{
  position: absolute;
  z-index: 1;
  height: 250px;
  width: 100%;
  background: rgb(31,20,16);
  background: linear-gradient( rgb(31, 20, 16) 0%, rgb(205, 146, 97) 100%);
}

/*--------------------- event cards ------------------------*/

.event-card1{
  background-color: var(--bg-1);
  height: 1000px;
  width: 100%;
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  .event-holder1{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .event-box1{
      height: 80%;
      width: 80%;
      background-color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: space-around;
      border-radius: 25px;
      z-index: 5;

      .event-img{
        height: 85%;
        width: 40%;

        img{
          height: 100%;
          width: 100%;
        };
      }

      .text{
        color: var(--white);
        font-family: Gowun Batang;
        width: 50%;
        height: 90%;
        display: flex;
        flex-direction: column;

        p{
          font-size: clamp(20px, 2vw, 35px);
          font-weight: 100;

        }

        .text-title{
          font-family: Tangerine;
          font-size: 180px;
          padding: 0;
          margin: 0;
          display: flex;
          text-align: right;
          right: 10%;
          width: 50%;
          text-wrap: wrap;
        }

        .button-div{
          width: 100%;
          margin-top: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
  
          .ab-button{
            background-color: var(--secondary);
            color: var(--white);
            font-size: 20px;
            padding: 10px 80px;
            border: none;
            border-radius: 80px;
            cursor: pointer;
            font-family: Gowun batang;
            transition: all 0.2s ease-in-out;
  
            &:hover{
              background-color: var(--fourth);
            }
          }
        }

      }

    }
  }

  .abs-leaf1{
    position: absolute;
    z-index: 6;
    transform: rotate(215deg) scale(0.9) scaleX(-1);
    right: -10px;
    bottom: -50px;
  }

  .abs-leaf2{
    position: absolute;
    z-index: 6;
    transform: rotate(45deg) scale(0.9) scaleX(-1);
    left: -10px;
    top: -70px;
  }
}

@media screen and (max-width: 1400px){
  .event-card1{
    height: 800px;
  
    .event-holder1{
      width: 100%;
  
      .event-box1{
        height: 80%;
  
        .event-img{
          height: 85%;
          width: 40%;
  
          img{
            height: 100%;
            width: 100%;
          };
        }
  
        .text{
          color: var(--white);
          font-family: Gowun Batang;
          width: 50%;
          height: 90%;
  
          p{
            font-size: clamp(20px, 2vw, 35px);
            font-weight: 100;
  
          }
  
          .text-title{
            font-family: Tangerine;
            font-size: 100px;
          }
  
        }
      }
    }
  
    .abs-leaf1{
      position: absolute;
      z-index: 6;
      transform: rotate(215deg) scale(0.7) scaleX(-1);
      right: -100px;
      bottom: -80px;
    }
  
    .abs-leaf2{
      position: absolute;
      z-index: 6;
      transform: rotate(45deg) scale(0.7) scaleX(-1);
      left: -100px;
      top: -100px;
    }
  }
}

@media screen and (max-width: 800px){
  .event-card1{
    height: 1000px;
  
    .event-holder1{
      width: 100%;
  
      .event-box1{
        height: 90%;
        width: 95%;
        background-color: var(--primary);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        border-radius: 25px;
        z-index: 5;
  
        .event-img{
          height: 45%;
          width: 90%;
  
          img{
            height: 100%;
            width: 100%;
          };
        }
  
        .text{
          color: var(--white);
          font-family: Gowun Batang;
          width: 90%;
          height: 45%;
  
          p{
            font-size: clamp(20px, 2vw, 35px);
            font-weight: 100;
  
          }
  
          .text-title{
            font-size: 80px;
            text-align: left;
            right: 0%;
            width: 100%;
            text-wrap: wrap;
          }

          
  
        }
      }
    }
  
    .abs-leaf1{

      display: none;
    }
  
    .abs-leaf2{

      display: none;
    }
  }
}


/*--------------------- event cards 2------------------------*/

.event-card2{
  height: 1050px;
  width: 100%;
  margin-top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: rgb(205,146,97);
  background: linear-gradient(180deg, rgba(205,146,97,1) 0%, rgba(250,241,229,1) 100%);

  .leaf{
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  
    .abs-leaf3{
      text-align: center;
    }
  }

  .event-holder1{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .event-box1{
      height: 80%;
      width: 80%;
      background-color: #c47a3ebd;;
      display: flex;
      align-items: center;
      justify-content: space-around;
      border-radius: 25px;
      z-index: 5;

      .event-img{
        height: 85%;
        width: 40%;

        img{
          height: 100%;
          width: 100%;
        };
      }

      .text{
        color: var(--white);
        font-family: Gowun Batang;
        width: 50%;
        height: 90%;

        p{
          font-size: 34px;
          font-weight: 100;

        }

        .text-title{
          font-family: Tangerine;
          font-size: 180px;
          padding: 0;
          margin: 0;
          display: flex;
          text-align: left;
          right: 10%;
          width: 100%;
          text-wrap: wrap;
        }

        .button-div{
          width: 100%;
          margin-top: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
  
          .ab-button{
            background-color: var(--secondary);
            color: var(--white);
            font-size: 20px;
            padding: 10px 80px;
            border: none;
            border-radius: 80px;
            cursor: pointer;
            font-family: Gowun batang;
            transition: all 0.2s ease-in-out;
  
            &:hover{
              background-color: var(--fourth);
            }
          }
        }

      }
    }
  }

  .abs-leaf1{
    position: absolute;
    z-index: 6;
    transform: rotate(-45deg) scale(0.9) scaleX(-1);
    left: -50px;
    bottom: -60px;
  }

  .abs-leaf2{
    position: absolute;
    z-index: 6;
    transform: rotate(125deg) scale(0.9) scaleX(-1);
    right: -20px;
    top: -20px;
  }
}

@media screen and (max-width: 1400px){
  .event-card2{
    height: 800px;

    .leaf{
      width: 40%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    
      .abs-leaf3{
        text-align: center;
        height: 100%;
        width: 100%;
      }
    }
  
    .event-holder1{
      width: 100%;
  
      .event-box1{
        height: 80%;
  
        .event-img{
          height: 85%;
          width: 40%;
  
          img{
            height: 100%;
            width: 100%;
          };
        }
  
        .text{
          color: var(--white);
          font-family: Gowun Batang;
          width: 50%;
          height: 90%;
  
          p{
            font-size: clamp(20px, 2vw, 35px);
            font-weight: 100;
  
          }
  
          .text-title{
            font-family: Tangerine;
            font-size: 100px;
          }
  
        }
      }
    }
  
    .abs-leaf1{
      position: absolute;
      z-index: 6;
      transform: rotate(-45deg) scale(0.7) scaleX(-1);
      left: -100px;
      bottom: -50px;
    }
  
    .abs-leaf2{
      position: absolute;
      z-index: 6;
      transform: rotate(105deg) scale(0.7) scaleX(-1);
      right: -100px;
      top: -50px;
    }
  }
}

@media screen and (max-width: 800px){
  .event-card2{
    height: 1200px;

    .leaf{
      width: 80%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    
      .abs-leaf3{
        text-align: center;
        height: 100%;
        width: 100%;
      }
    }
  
    .event-holder1{
      width: 100%;
  
      .event-box1{
        height: 90%;
        width: 95%;
        background-color: var(--primary);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        border-radius: 25px;
        z-index: 5;
  
        .event-img{
          height: 45%;
          width: 90%;
  
          img{
            height: 100%;
            width: 100%;
          };
        }
  
        .text{
          color: var(--white);
          font-family: Gowun Batang;
          width: 90%;
          height: 45%;
  
          p{
            font-size: clamp(20px, 2vw, 35px);
            font-weight: 100;
  
          }
  
          .text-title{
            font-size: 80px;
            text-align: left;
            right: 0%;
            width: 100%;
            text-wrap: wrap;
          }
  
        }
      }
    }
  
    .abs-leaf1{

      display: none;
    }
  
    .abs-leaf2{

      display: none;
    }
  }
}

/*--------------------- event cards 3------------------------*/

.event-card3{
  height: 1050px;
  width: 100%;
  margin-top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: rgba(250,241,229,1);


  .leaf{
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  
    .abs-leaf3{
      text-align: center;
    }
  }

  .event-holder1{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .event-box1{
      height: 80%;
      width: 80%;
      background-color: #586020a2;
      display: flex;
      align-items: center;
      justify-content: space-around;
      border-radius: 25px;
      z-index: 5;

      .event-img{
        height: 85%;
        width: 40%;

        img{
          height: 100%;
          width: 100%;
        };
      }

      .text{
        color: var(--white);
        font-family: Gowun Batang;
        width: 50%;
        height: 90%;

        p{
          font-size: 34px;
          font-weight: 100;

        }

        .text-title{
          font-family: Tangerine;
          font-size: 180px;
          padding: 0;
          margin: 0;
          display: flex;
          text-align: right;
          right: 10%;
          width: 100%;
          text-wrap: wrap;
        }

        .button-div{
          width: 100%;
          margin-top: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
  
          .ab-button{
            background-color: var(--secondary);
            color: var(--white);
            font-size: 20px;
            padding: 10px 80px;
            border: none;
            border-radius: 80px;
            cursor: pointer;
            font-family: Gowun batang;
            transition: all 0.2s ease-in-out;
  
            &:hover{
              background-color: var(--fourth);
            }
          }
        }

      }
    }
  }

  .abs-leaf1{
    position: absolute;
    z-index: 6;
    transform: rotate(215deg) scale(0.9) scaleX(-1);
    right: -10px;
    bottom: -50px;
  }

  .abs-leaf2{
    position: absolute;
    z-index: 6;
    transform: rotate(45deg) scale(0.9) scaleX(-1);
    left: -10px;
    top: -70px;
  }
}

@media screen and (max-width: 1400px){
  .event-card3{
    height: 800px;

    .leaf{
      width: 40%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    
      .abs-leaf3{
        text-align: center;
        height: 100%;
        width: 100%;
      }
    }
  
    .event-holder1{
      width: 100%;
  
      .event-box1{
        height: 80%;
  
        .event-img{
          height: 85%;
          width: 40%;
  
          img{
            height: 100%;
            width: 100%;
          };
        }
  
        .text{
          color: var(--white);
          font-family: Gowun Batang;
          width: 50%;
          height: 90%;
  
          p{
            font-size: clamp(20px, 2vw, 35px);
            font-weight: 100;
  
          }
  
          .text-title{
            font-family: Tangerine;
            font-size: 100px;
          }
  
        }
      }
    }
  
    .abs-leaf1{
      position: absolute;
      z-index: 6;
      transform: rotate(215deg) scale(0.7) scaleX(-1);
      right: -100px;
      bottom: -80px;
    }
  
    .abs-leaf2{
      position: absolute;
      z-index: 6;
      transform: rotate(45deg) scale(0.7) scaleX(-1);
      left: -100px;
      top: -100px;
    }
  }
}

@media screen and (max-width: 800px){
  .event-card3{
    height: 1100px;

    .leaf{
      width: 80%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    
      .abs-leaf3{
        text-align: center;
        height: 100%;
        width: 100%;
      }
    }
  
    .event-holder1{
      width: 100%;
  
      .event-box1{
        height: 90%;
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        border-radius: 25px;
        z-index: 5;
  
        .event-img{
          height: 35%;
          width: 90%;
  
          img{
            height: 100%;
            width: 100%;
          };
        }
  
        .text{
          color: var(--white);
          font-family: Gowun Batang;
          width: 90%;
          height: 55%;
  
          p{
            font-size: clamp(20px, 2vw, 35px);
            font-weight: 100;
  
          }
  
          .text-title{
            font-size: 80px;
            text-align: left;
            right: 0%;
            width: 100%;
            text-wrap: wrap;
          }
  
        }
      }
    }
  
    .abs-leaf1{

      display: none;
    }
  
    .abs-leaf2{

      display: none;
    }
  }
}

/*--------------------- event cards 4------------------------*/

.event-card4{
  height: 1050px;
  width: 100%;
  margin-top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: rgb(147,155,79);
  background: linear-gradient(0deg, rgba(147,155,79,1) 0%, rgba(250,241,229,1) 100%);
  padding-bottom: 100px;

  .leaf{
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  
    .abs-leaf3{
      text-align: center;
    }
  }

  .event-holder1{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .event-box1{
      height: 80%;
      width: 80%;
      background-color: #596020;
      display: flex;
      align-items: center;
      justify-content: space-around;
      border-radius: 25px;
      z-index: 5;

      .event-img{
        height: 85%;
        width: 40%;

        img{
          height: 100%;
          width: 100%;
        };
      }

      .text{
        color: var(--white);
        font-family: Gowun Batang;
        width: 50%;
        height: 90%;

        p{
          font-size: 34px;
          font-weight: 100;

        }

        .text-title{
          font-family: Tangerine;
          font-size: 180px;
          padding: 0;
          margin: 0;
          display: flex;
          text-align: left;
          right: 10%;
          width: 100%;
          text-wrap: wrap;
        }

        .button-div{
          width: 100%;
          margin-top: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
  
          .ab-button{
            background-color: var(--primary);
            color: var(--white);
            font-size: 20px;
            padding: 10px 80px;
            border: none;
            border-radius: 80px;
            cursor: pointer;
            font-family: Gowun batang;
            transition: all 0.2s ease-in-out;
  
            &:hover{
              background-color: var(--fourth);
            }
          }
        }

      }
    }
  }

  .abs-leaf1{
    position: absolute;
    z-index: 6;
    transform: rotate(-85deg) scale(0.75) scaleX(-1);
    left: -10px;
    bottom: 0px;
  }

  .abs-leaf2{
    position: absolute;
    z-index: 6;
    transform: rotate(85deg) scale(0.75) scaleX(-1);
    right: 0px;
    top: -20px;
  }
}

@media screen and (max-width: 1400px){
  .event-card4{
    height: 800px;

    .leaf{
      width: 40%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    
      .abs-leaf3{
        text-align: center;
        height: 100%;
        width: 100%;
      }
    }
  
    .event-holder1{
      width: 100%;
  
      .event-box1{
        height: 80%;
  
        .event-img{
          height: 85%;
          width: 40%;
  
          img{
            height: 100%;
            width: 100%;
          };
        }
  
        .text{
          color: var(--white);
          font-family: Gowun Batang;
          width: 50%;
          height: 90%;
  
          p{
            font-size: clamp(20px, 2vw, 35px);
            font-weight: 100;
  
          }
  
          .text-title{
            font-family: Tangerine;
            font-size: 100px;
          }
  
        }
      }
    }
  
    .abs-leaf1{
      position: absolute;
      z-index: 6;
      transform: rotate(-45deg) scale(0.7) scaleX(-1);
      left: -100px;
      bottom: -50px;
    }
  
    .abs-leaf2{
      position: absolute;
      z-index: 6;
      transform: rotate(105deg) scale(0.7) scaleX(-1);
      right: -100px;
      top: -50px;
    }
  }
}

@media screen and (max-width: 800px){
  .event-card4{
    height: 1200px;

    .leaf{
      width: 80%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    
      .abs-leaf3{
        text-align: center;
        height: 100%;
        width: 100%;
      }
    }
  
    .event-holder1{
      width: 100%;
  
      .event-box1{
        height: 90%;
        width: 95%;
        background-color: var(--secondary);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        border-radius: 25px;
        z-index: 5;
  
        .event-img{
          height: 35%;
          width: 90%;
  
          img{
            height: 100%;
            width: 100%;
          };
        }
  
        .text{
          color: var(--white);
          font-family: Gowun Batang;
          width: 90%;
          height: 45%;
  
          p{
            font-size: clamp(20px, 2vw, 35px);
            font-weight: 100;
  
          }
  
          .text-title{
            font-size: 80px;
            text-align: left;
            right: 0%;
            width: 100%;
            text-wrap: wrap;
          }
  
        }
      }
    }
  
    .abs-leaf1{

      display: none;
    }
  
    .abs-leaf2{

      display: none;
    }
  }
}

.popup{
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--white);
  border-radius: 26px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.1);
  opacity: 0;
  text-align: center;
  padding: 0 30px 30px;
  color: var(--black);
  z-index: 10000;
  font-family: gowun batang;
  font-weight: 100;
  visibility: hidden;
  transition: all 0.3s ease-in-out;

  button{
    width: 80%;
    font-family: gowun batang;
    font-size: 18px;
    background-color: none;
    border-radius: 6px;
    border: none;
    border: 1px solid var(--black);
    transition: all 0.2s ease-in-out;

    &:hover{
      background-color: var(--black);
      color: var(--white);
      cursor: pointer;
    }
  }
}

.open-popup{
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  top: 50%;
  opacity: 1;
}