/* Hero Section Start */
.hero__section{
    position: relative;
    height: 60vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--slate-900);
}

.hero__section-img img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6) contrast(1.1);
}

.hero__section-title {
    font-weight: 800;
    position: relative;
    width: 85%;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    top: 6rem;
    z-index: 0;
    font-size: var(--h5);
}

.hero__section-title span{
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    filter: blur(5px);
    animation: reveal 4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}


.hero__section-title span:nth-child(1){animation-delay: 0.1s;}
.hero__section-title span:nth-child(2){animation-delay: 0.2s;}
.hero__section-title span:nth-child(3){animation-delay: 0.3s;}
.hero__section-title span:nth-child(4){animation-delay: 0.4s;}
.hero__section-title span:nth-child(5){animation-delay: 0.5s;}

@keyframes reveal{
    to{
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
} 



/* Hero Section End */

/* xs */
/* @media (min-width:475px) {} */

/* sm */
@media (min-width:640px) {
    .hero__section{
        height: 60vh;
    }
.hero__section-title {
    font-size: var(--h4);
}
}

/* md */
/* @media (min-width:768px) {} */

/* lg */
@media (min-width:1024px) {
    .hero__section{
        height: 80vh;
    }
.hero__section-title {
    font-size: var(--h3);
}
}

/* xl */
@media (min-width:1280px) {
.hero__section-title {
    font-size: var(--h2);
}
}

/* 2xl */
@media (min-width:1536px) {
.hero__section-title {
    font-size: var(--h1);
}
}