/* Styling card content */
.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    height: 100%;
}


.swiper-pagnation {
    position: relative;
}


/* Control where the edge of the card lies*/
.swiper-phylo-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Position the arrows closer to the cards */
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    /*    Position the arrows center of the card */
    --swiper-navigation-top-offset: 40%;
}

/* Control the size of the cards */
#swiper-phylo-carousel {
    width: 500px; /* Take the width of the card */
    height: 600px;
}

/* Customize the navigation buttons */
.swiper-phylo-flex .swiper-button-prev,
.swiper-phylo-flex .swiper-button-next {
    /* Set the distance of the buttons from the card */
    margin: 0 -5rem;
    background-color: white;
    border-radius: 20px;
    border: var(--accent-teal) 3px solid;
    padding: 2rem;
}

    /* Style active button click */
    .swiper-phylo-flex .swiper-button-prev:active,
    .swiper-phylo-flex .swiper-button-next:active {
        background-color: var(--border-color);
        transform: scale(0.8);
        transition: transform 0.05s ease;
    }


    .swiper-phylo-flex .swiper-button-prev .fa-caret-left,
    .swiper-phylo-flex .swiper-button-next .fa-caret-right {
        color: var(--accent-dark-teal);
    }

/* Style active arrow click   */
.swiper-phylo-flex .fa-caret-left:active,
.swiper-phylo-flex .fa-caret-right:active {
    color: var(--accent-teal);
    
}