/*------------------------------ Start : Fade In Animation ------------------------------*/
.fade-el {
    opacity: 0;
    transition: opacity .8s ease;
}

.fade-el.visible { 
    opacity: 1; 
}
/*------------------------------ End : Fade In Animation ------------------------------*/


/*------------------------------ Start : Slide In From Side Animation ------------------------------*/
.slide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 540px) { 
    .slide-grid { 
        grid-template-columns: 1fr; 
    } 
}

.slide-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity .65s ease, transform .65s ease;
}

.slide-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity .65s ease, transform .65s ease;
}

.slide-left.visible,
.slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}
/*------------------------------ End : Slide In From Side Animation ------------------------------*/


/*------------------------------ Start : Scale In Animation ------------------------------*/
.zoom-grid {
    display: grid;
    /* grid-template-columns: repeat(3, 1fr);
    gap: 1rem; */
}

@media (max-width: 540px) { 
    .zoom-grid { 
        grid-template-columns: 1fr; 
    } 
}

.zoom-el {
    opacity: 0;
    transform: scale(0.78);
    transition: opacity .5s ease, transform .5s ease;
    text-align: center;
}

.zoom-el.visible {
    opacity: 1;
    transform: scale(1);
}

.zoom-icon {
    width: 40px; 
    height: 40px; 
    border-radius: 10px;
    margin: 0 auto 12px;
    display: flex; 
    align-items: center; 
    justify-content: center;
}
/*------------------------------ End : Scale In Animation ------------------------------*/


/*------------------------------ Start : Showing one by one Animation ------------------------------*/
.stagger-list { 
    display: flex; 
}

.stagger-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease, transform .5s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stagger-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.stagger-num {
    width: 32px; 
    height: 32px; 
    border-radius: 50%;
    background: #e6f1fb; 
    color: #185fa5;
    font-size: .8rem; 
    font-weight: 500;
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex-shrink: 0;
}

.stagger-item h4 { 
    font-size: .9rem; 
    font-weight: 500; 
    margin-bottom: 2px;
}

.stagger-item p  { 
    font-size: .8rem; 
    color: #5f5e5a; 
}
/*------------------------------ End : Showing one by one Animation ------------------------------*/