.cara{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}
.left{
    height: 64px;
    width: 64px;
    background-color: #fff;
    mask-image: url(../BrandGraphics/chevronLeft.svg);
    mask-size: cover;
    mask-position: center;
    mask-repeat: no-repeat;
    transition: all ease 0.3s;
}
.left:hover{
    cursor: pointer;
    transform: scale(1.2);
    
}
.right{
    height: 64px;
    width: 64px;
    background-color: #fff;
    mask-image: url(../BrandGraphics/chevronRight.svg);
    mask-size: cover;
    mask-position: center;
    mask-repeat: no-repeat;
    transition: all 0.3s ease;
    box-shadow: 2px 4px 0px 0px #999;
}
.right:hover{
    cursor: pointer;
    transform: scale(1.2);
    
}
.caraOutside{
    width: 70vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: 80vh;
    gap: 20px;
    position: relative;
}
.caraItem{
    display: block;
    position: absolute;
    background: none;
    transition: all ease 0.3s;
    overflow-x: visible;
    overflow-y: visible;

}
.caraImgHolder{
    display: flex;
    width: 65vw;
    height: fit-content;
    overflow-x: hidden;
    overflow-y: hidden;
    justify-content: center;
    align-items: center;
    background-color: #00000000;
    transition: all ease 0.3s;
    border-radius: 20px;
}
.caraimageDisplay{
    width: 100%;
    border-radius: 20px;
}
.caraImgHolder:hover{
    box-shadow: 0px 0px 0px 6px #FF4E5D,
    0px 0px 0px 12px #62FF51,
    0px 0px 0px 18px #9785FB,
    0px 4px 4px 18px #00000084;
    transform: translateY(-40px);
}
.hideSlide{
    pointer-events: none;
    animation: flipOut 0.5s ease forwards;
    z-index: 20;
}
.centerSlide{
    pointer-events: all;
    z-index: 1;
    opacity: 0;
    animation: flipIn 0.5s linear(0, 0.402 7.4%, 0.711 15.3%, 0.929 23.7%, 1.008 28.2%, 1.067 33%, 1.099 36.9%, 1.12 41%, 1.13 45.4%, 1.13 50.1%, 1.111 58.5%, 1.019 83.2%, 1.004 91.3%, 1) 0.5s forwards;
}
.centerText{
    top: -2.5rem;
    left: 0;
    height: fit-content;
    position: absolute;
    width: 100%;
    text-align: center;
    color: #fff;
}
.slideHeader{
    margin: 0;
    padding: 0;
}
@keyframes flipOut {
    0%{
        opacity: 1;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        transform: scale(0.5);
    }
}
@keyframes flipIn {
    0%{
        opacity: 0;
        transform: scale(0.5) 
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}