.splide__slide{
    margin-right: 2em !important;
}

.splide__arrow{
  background: #ffffff26 !important; 
  opacity: 1 !important;
}

.splide__arrow:focus-visible{
    outline: none !important;
}

.splide.is-focus-in .splide__arrow:focus{
    outline: none !important;
}

@media (min-width: 1399px) and (max-width: 1535px){
    /* #splide01-list{
        width: 94%;
    } */
}

@media (min-width: 970px) and (max-width: 1000px){
    #splide01-list{
        width: 93%;
    }
    #splide01-track{
        width: 85%;
    }
}

.splide__pagination{
    display: none !important;
}

@media ( min-width: 320px ) and (max-width: 767px){
    .splide__arrow{
        display: none !important;
    }
    .normal_dots.is-active{
        background: #170050 !important;
        border: 1px solid #170050 !important;
    }
    .normal_dots{
        border: 1px solid #170050 !important;
    } 
    
    .splide__pagination{
        bottom: -2.5em !important;
    }

    .splide__pagination{
        display: flex !important;
    }

    .splide__track{
        display: flex;
        justify-content: center;
    }
}

@media (min-width: 900px) and (max-width: 1012px){
    .splide__slide .p-6{
        padding: 1rem;
    }
}

.section_active{
    color: #22A9E0;
    border-bottom: 2px solid #22A9E0;
}

html{
    scroll-behavior: smooth;
}
  
.progress-bar {	
    transition: 0.4s linear;  
    transition-property: width, background-color;    
}

.progress-striped .progress-bar { 	
    width: 100%; 
}

/* .progress:hover .progress-bar{
    animation: progressAnimationStrike 2s infinite;
} */

@keyframes progressAnimationStrike {
    from { width: 0 }
}

.animation.animate {
    opacity: 1;
}
.animate.fade-bottom {
    animation: fade-bottom 1s linear;
}
.animate.fade-left {
    animation: fade-left 1s linear;
}
.animate.fade-right {
    animation: fade-right 1s linear;
}
@keyframes fade-bottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-left {
    0% {
        transform: translateX(-100px);
        opacity: 0.5;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-right {
    0% {
        transform: translateX(100px);
        opacity: 0.5;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}