::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 2px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 5px;
}

@media (max-width: 576px) {
  h1 {
    font-size: 5vw;
  }
  h2 {
    font-size: 4vw;
  }
  .btn {
    font-size: 4vw;
  }
}
@media (max-width: 768px) {
  .col-lg-6 {
    padding: 20px 10px;
  }
}

*{
    margin: 0;
    padding: 0;
}
img{
    border-radius: 15px;
}
.card{
    padding: 10px;
}
.info{
    margin: 0 20px 0 20px ;
}

/* .section{
    margin-top: 5%; 
    margin-bottom:5% ;
    width: 100%;
    height: 100vh;
} */

  /* animations */
  @keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .fade-in-left {
    opacity: 0;
    transform: translateX(-20px);
    animation: fadeInLeft 2s ease forwards;
  }

  .fade-in {
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }
  @keyframes pulse {
  0%, 100% {
    transform: scale(1);
    color: white;
  }
  50% {
    transform: scale(1.05);
    color: rgba(255, 255, 255, 0.8);
  }
}

.h1, .h2 {
  animation: pulse 3s ease-in-out infinite;
}
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  
  .box.fade-in {
    opacity: 1;
  }