#banner {
  padding-bottom: 2px;
  margin-top: 2rem;
    
    .col-7 h1, h2, p {
      margin-top: 2rem;
      margin-left: 4rem;
    }
  }

/* Hello Animation */
@keyframes changeHello {
  0% { content: "Hello "; }
  14% { content: "Hola "; }
  28% { content: "Bonjour "; }
  42% { content: "Hallo "; }
  56% { content: "Ciao "; }
  70% { content: "Olá "; }
  84% { content: "こんにちは "; } 
  100% { content: "안녕하세요 "; } 
}

.hello::before{
    content: "Hello";
    display: inline-block;
    animation: changeHello 5s linear infinite;    
};


/* scroll down button */
#scroll.container {
  margin: 4rem 4rem;
}

button.mouse {
    margin-top: 4rem;
    position: relative;
    left: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 80px;
    border: 2px solid var(--white);
    border-radius: 25px;
    opacity: 0.75;

      .arrow {
        transform: rotate(45deg);
        border-right: 3px solid white;
        border-bottom: 3px solid white;
        background: var(--transparent);
        width: 10px;
        height: 10px;
        animation: mouse-scroll 1s infinite;
      }
}

@keyframes mouse-scroll {
  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}

/* Testimonial */
#testimonial{
  color: var(--white);
  position: relative;
  z-index: 1;  
  margin-top: 4rem;
}

.testimonial {
  margin-top: 4.5rem;
  margin-bottom: 10rem;
  position: relative;
  z-index: 1;
}

.testimonial:before{
  content: "";
  position: relative;
  top: 0;
  max-width: var(--site-width);
  height: 100%;
  z-index: 1;
} 

.testimonial:after{
  content: "";
  position: absolute;
  top: 0;
  left: 4.5rem;
  width: 87%;
  height: 100%;
  border-radius:30px;
  transform:rotate(-7deg);
  z-index: -1;
  border-radius: 50px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(24px) brightness(100%);
  -webkit-backdrop-filter: blur(24px) brightness(100%);
  border: 1px solid rgba(246, 183, 183, 0.5);
  background: radial-gradient(90% 90% at 0% 50%, rgba(246, 183, 183, 0.15) 40%, rgba(246, 183, 183, 0.05) 100%); 
}

.testimonial .testimonial-content {
  width: 100%;
}

.testimonial .testimonial-content h6{
  margin-top: 7rem;
  font-weight: 300;
  text-align: left;
  max-width: 80%;
  margin-left: 10rem;
  line-height: 1.8rem;
  font-size: 1.3rem;
  font-family: 'Arvo', serif;
  background-color: var(--transparent);
} 

.testimonial-title {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--transparent);
  max-width: 80%;
  padding: 0;
  margin: 0; 
  padding-left: 15rem;
  padding-bottom: 5rem;
}

.testimonial .testimonial-title h5 {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  color: var(--yellow);
  background-color: var(--transparent);
  padding: 0;
  margin: 0; 
  font-weight: 500;
  font-family: 'Arvo', serif;
}

.testimonial .testimonial-title p {
  color: var(--white);
  font-weight: 100;
  background-color: var(--transparent);
  padding-left: 0.5rem;
  margin: 0;
}

.owl-theme .owl-controls{
  margin-left: 10px;
}

.owl-theme .owl-controls .owl-buttons div{
  display: inline-block;
  opacity: 1;
  border: 2px solid var(--white);
  background-color: var(--transparent);
  color: var(--white);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 0 2rem;
  cursor: pointer;
}

.owl-prev:before,
.owl-next:before{
  content: "\f104";
  font-family: 'FontAwesome';
  font-size: 20px;
}

.owl-next:before{
  content: "\f105";
}

@media only screen and (max-width: 600px) {
  #banner,
  #testimonial {
    padding-bottom: 2px;
    margin-top: 2rem;
      
    .col-7 h1, h2, p {
      margin: 15px 0;
      padding-left: 30px;
      margin-right: 20px;
    }

    h1 {
      font-size: 1.6rem;
      padding-top: 10px;
    }

    h2 {
      font-size: 1.3rem;
    }
  }

  #scroll.container {
    padding-right: 2rem;
  }

  button.mouse {
    margin-top: 0rem;
    position: relative;
    left: 47.5%;
  }

  .col-12 h1 {
    margin: 0;
    margin-top: 0rem;
  }
 
  .testimonial .testimonial-content h6{
    font-size: 1.1rem;
  }

  .testimonial .testimonial-content h6{
    margin: 2rem 3rem;
    margin-bottom: 0rem;
    font-size: 1.2rem;
    margin-right: 0;
  } 

  .testimonial .testimonial-title h5 {
   font-size: 1.2rem;
   margin-left: 0rem;

  }

  .testimonial .testimonial-title p{
    padding-left: 0rem;
    font-size: 0.9rem;
  }

  .testimonial-title {
    padding-left: 3rem;
    padding-bottom: 1rem; 
  }
}