:root {
    --bg-color: #fff;
    --second-bg-color: #fff;
    --text-color: #000;
    --white-text: #fff;
    /* --main-color: #e02b20; */
    --main-color: #944324;
    --small-p-tag: 2rem;
    --large-p-tag: 2.6rem;
    /* --x-large-p-font: 4.25rem;
    --medium-h2-font: 3.6rem;
    --large-h2-font:5.6rem;
    --x-large-h2-font: 8.6rem;
    --large-screen-text: 4.6rem; */
}

.slider-container {
    display: flex;
    background-color: green;
    /* margin-top: 100vh; */
    margin-top: 5vh;
    /* remove side-scroll
    width: 100vw;  */
    /* position: relative; */
    justify-content: center;
    align-items: center;
    /* min-height: 100vh; */
    min-height: 90vh;
    /* background: #000; */
    transform-style: preserve-3d;
    overflow: hidden;
}
.rotate-img-heading {
    position: absolute;
    top: -80px;
}
.rotate-img-heading {
    font-size: 4.6rem;
}
.box {
    position: relative;
    width: 200px;
    height: 200px;
    margin-top: -80px;
    transform-style: preserve-3d;
    transition: 1.5s;
    transform: perspective(1000px) rotateY(0deg);
}
.box span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(300px);
    -webkit-box-reflect: below 0px linear-gradient(transparent, #0004);
}
.box span img {
    position: absolute;
    top: 0;
    /* left: -22px; */
    /* left: 0; */
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* width: 100%;
    height: 100%; */
    object-fit: cover;
    user-select: none;
}
.slider-btns-container {
    position: absolute;
    bottom: 100px;
    display: flex;
    gap: 30px;
    bottom: 40px;
}
.slider-btns-container .slider-btns {
    position: relative;
    width: 60px;
    height: 60px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.slider-btns-container .slider-btns:active {
    background: #fff;
}
.slider-btns-container .slider-btns::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg) translate(-2.5px,2.5px);
}
.slider-btns-container .slider-btn-prev::before {
    transform: rotate(225deg) translate(-2.5px,2.5px);
}
.slider-btns-container .slider-btns:active::before {
    border-top: 3px solid #000;
    border-right: 3px solid #000;
}

/* MOBILE STYLES */

/* @media (max-width: 650px) {
    .slider-container {
        margin-top: 90vh;
    }
}  */

@media (max-width: 425px) {
    .slider-container {
        height: 85vh;
        margin-top: 85vh;
    }
    .box, .box span img {
        width: 135px;
        height: 135px;
    }
    .rotate-img-heading {
        top: -40px;
    }
    .slider-btns-container .slider-btns {
        position: relative;
        width: 30px;
        height: 30px;
    }
    .slider-btns-container .slider-btns::before {
        width: 10px;
        height: 10px;
    }
    .slider-btns-container {
        margin-left: 30px;
    }
}