/* @group Stay Connected
------------------------------------ */

.stay-connected__container {
    background-image: url('../../imgs/layout/connected/background.png');
    background-repeat: no-repeat;
    background-position: center;
}

.stay-connected__box {
    overflow: hidden;
}

.stay-connected__box h3 {
    color: var(--main-white);
}

.stay-connected-splide .splide__track {
    overflow: visible;
}

.stay-connected-splide .splide__slide {
    position: relative;
    background-color: var(--main-white);
    text-align: center;
    padding-bottom: 10rem;
}

.stay-connected-splide .splide__slide figure {
    background-color: var(--main-white);
    border: .5rem solid #6abfff;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.stay-connected-splide .splide__slide figure img {
    height: 5.8rem;
    width: 100%;
}

.stay-connected-splide .splide__slide p {
    color: var(--main-black);
    margin-bottom: 3rem;
    line-height: normal;
}

.stay-connected-splide .splide__slide .bttn {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

@media only screen
and (min-width : 961px) {
    .stay-connected__container {
        background-size: 100% auto;
        padding-top: 5.5rem;
        padding-bottom: 6rem;
    }
    .stay-connected-splide {
        padding-top: 9rem;
    }
    .stay-connected-splide .splide__list {
        display: flex!important;
        column-gap: 2.6rem;
        justify-content: center;
        align-items: stretch;
    }
    .stay-connected-splide .splide__slide {
        border-radius: 1rem;
        min-height: 26rem;
        flex: 0 1 calc(25% - 2rem);
        max-width: calc(25% - 2rem);
    }
    .stay-connected-splide .splide__slide figure {
        top: -5.3rem;
        width: 10.7rem;
        height: 10.7rem;
    }
    .stay-connected-splide .splide__slide p {
        margin-top: 7.5rem;
        padding: 0 2.7rem;
    }
    .stay-connected-splide .splide__slide .bttn {
        white-space: nowrap;
        bottom: 4rem;
    }
    .stay-connected-splide .splide__arrows {
        display: none;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1422px) {
    .stay-connected__container {
        background-size: cover;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1360px) {
    .stay-connected-splide .splide__slide {
        padding: 0 1.7rem;
        padding-bottom: 11rem;
    }
    .stay-connected-splide .splide__slide p {
        padding: 0 1rem;
    }
    .stay-connected-splide .splide__slide .bttn {
        white-space: unset;
    }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .stay-connected__container {
        background-size: cover;
        padding-top: 2.9rem;
        padding-bottom: 4.8rem;
    }
    .stay-connected-splide {
        overflow: hidden;
        padding: 8.4rem 5rem 0 5rem;
    }
    .stay-connected-splide .splide__slide {
        border-radius: .5rem;
        min-height: 25.2rem;
        padding: 0 2rem 2rem;
    }
    .stay-connected-splide .splide__slide figure {
        top: -4.9rem;
        width: 9.8rem;
        height: 9.8rem;
    }
    .stay-connected-splide .splide__slide p {
        margin-top: 7.5rem;
        margin-bottom: 3rem;
    }
    .stay-connected-splide .splide__slide .bttn {
       bottom: 2.5rem;
       width: max-content;
    }
}

/* @end */


/* Animations */

.stay-connected__container h3,
.stay-connected__container article {opacity: 0;}

.stay-connected__container.animateActive h3,
.stay-connected__container.animateActive article {animation: fade 1.4s forwards;}
 
.stay-connected__container.animateActive h3 {animation-delay:.3s;}     
.stay-connected__container.animateActive article:nth-child(1) {animation-delay:.6s;}     
.stay-connected__container.animateActive article:nth-child(2) {animation-delay:.8s;}     
.stay-connected__container.animateActive article:nth-child(3) {animation-delay:1s;}     
.stay-connected__container.animateActive article:nth-child(4) {animation-delay:1.2s;}     
.stay-connected__container.animateActive article:nth-child(5) {animation-delay:1.4s;}