@import 'animate.css';

 @font-face {
	font-family: 'Bai Jamjuree';
	src: url('../fonts/Bai_Jamjuree/BaiJamjuree-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
    display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
    display: swap;
}
 
 body,
 html {
    background: url("../img/Patron1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Bai Jamjuree';
     margin: 0;
     padding: 0;
     height: 100%;
 }

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

 .half {
    margin: 0.5rem;
     width: 40%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: right;
 }

 .content {
    display: flex;
    flex-direction: column;
    text-align: center;
 }

 .slider {
    width: 50%;
    margin: auto 5rem;
    display: flex;
    flex-direction: column;
    text-align: justify;
  }

  .text{
    text-indent: 5px;
    display: none;
    visibility: hidden;
    opacity: 0;
  }

  .animatedText {
    display: block;
    margin: auto;
    width: 75%;
    font-size: 28px;
    font-weight: 500;
    font-family: 'Bai Jamjuree';
    color: white;
    /* position: relative;
    top: 8.6vmin; */
    animation: fadeInUp 3s ease-in-out, pauseAnimation 5s linear 3s, fadeOutUp 3s ease-in-out 8s;
  }

  @-webkit-keyframes fadeInUp {
    from {
      opacity: 0;
      visibility: hidden;
      -webkit-transform: translate3d(0, 50%, 0);
      transform: translate3d(0, 50%, 0);
      /* -webkit-transform: translate3d(0, 40px, 0);
      transform: translate3d(0, 40px, 0); */
    }
  
    to {
      opacity: 1;
      visibility: visible;
      -webkit-transform: none;
      transform: none;
    }
  }

   @keyframes disapear {
    from {
        opacity: 0 !important;
        visibility: hidden !important;
      }
    
      to {
        visibility: visible;
        opacity: 1;
      }
   }
  
  @keyframes fadeInUp {
    from {
      opacity: 0 !important;
      visibility: hidden !important;
      -webkit-transform: translate3d(0, 50%, 0);
      transform: translate3d(0, 50%, 0);
      /* -webkit-transform: translate3d(0, 40px, 0);
      transform: translate3d(0, 40px, 0); */
    }
  
    to {
      visibility: visible;
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  @-webkit-keyframes fadeOutUp {
    from {
      opacity: 1;
      visibility: visible;
    }
  
    to {
      opacity: 0 !important;
      visibility: hidden;
      -webkit-transform: translate3d(0, -50%, 0);
      transform: translate3d(0, -50%, 0);
    }
  }
  
  @keyframes fadeOutUp {
    from {
        opacity: 1;
        visibility: visible;
    }
  
    to {
      opacity: 0 !important;
      visibility: hidden;
      -webkit-transform: translate3d(0, -50%, 0);
      transform: translate3d(0, -50%, 0);
    }
  }

  @-webkit-keyframes pauseAnimation {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes pauseAnimation {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

 .logo {
     width: 30vw;
     margin-bottom: 20px;
 }

 a.button {
    font-weight: 500;
     background-color: #2e295a;
     align-self: center;
     color: white;
     width: 150px;
     padding: 10px 20px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin-top: 20px;
     border: 1px solid #2e295a;
     border-radius: 5px;
     cursor: pointer;
     transition:
        background-color 1s,
        color 1s;
 }

 a.button:hover {
    background-color: white;
    border: 1px solid #2e295a;
    color: #2e295a;
}

@media (max-width: 1200px){
    .slider p{
        font-size: 20px;
    }
}

@media only screen and (max-width: 1024px) {
    .slider{
        max-height: 50vh;
        width: 100%;
    }

    a.button{
        width: 120px;
    }

    .slider p, .slider li{
        font-size: 18px;
    }

    .content {
        margin-bottom: 3rem;
        align-items: center;
    }

    .logo {
        width: 60vw;
    }

    .half{
        justify-content: center;
        align-items: end;
        max-height: 75vw;
        width: 100vw;
    }

    .container {
        flex-direction: column;
        background: linear-gradient(to left,#b5a6d6,#816cae ,#2e295a);
    }
}