* {
  box-sizing: border-box;
}

.hero-img{
    width:178px;
    height:271px;
    border-radius:9999px;
    overflow:hidden;
}

.hero-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-img-1 {
    animation: animate 4s linear infinite;
}

.hero-img-2 {
    animation: animate 4s .5s linear infinite;
}

.hero-img-3 {
    animation: animate 4s 1s linear infinite;
}

.hero-img-4 {
    animation: animate 4s 1.5s linear infinite;
}

.three-line-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
            line-clamp: 3; 
    -webkit-box-orient: vertical;
}

.cards::-webkit-scrollbar {
    height: 12px;
}
  
.cards::-webkit-scrollbar-thumb,
.cards::-webkit-scrollbar-track {
    border-radius: 92px;
}

.cards::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.6)
}

.cards::-webkit-scrollbar-track {
    background: #E96F6E;
    outline: 2px solid rgba(255, 255, 255, 0.6);
}

@keyframes animate {
    0%,100%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(-10px );
    }
}

.angle-left-solid::after {
    content: url('/images/icons/angle-left-solid.svg');
    display: block;
    height: 1em;
    width: 1em;
}

.hero {
  background-image: url('/images/bg/bg1-mobile.webp');
}

.bg-bg2 {
  background-image: url('/images/bg/bg2.webp');
}

.bg-bg3 {
  background-image: url('/images/bg/bg3.webp');
}

.bg-bg4 {
  background-image: url('/images/bg/bg4.webp');
}

@media (min-width: 768px) {
  .hero {
    background-image: url('/images/bg/bg1.webp');
  }
}