@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
/* *,
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    cursor:default;
} */
/* html {
    width: 100%;
    height: auto;
}
body {
    width: 100%;
    height: auto;
    font-size: 16px;
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
} */
/* .position-relative {
    position: relative;
    height: 100vh;
} */
: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;
}
/* #reviews {
    margin-bottom: 20vh;
} */
.img-content i {
    font-size: 6.5rem;
}
#testim-container {
        position: relative;
        /* top: 100vh; */
        /* width: 100vw; */
        /* height: 100%; */
        /* position: absolute; */
        /* background: green; */
        /* padding-top: 60px; */
        /* display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden; */
}
.testim {
        width: 100%;
        position: absolute;
        width: 100%;
        /* top: -30px;
        height: 80vh; */
}
.testim .wrap {
    position: relative;
    width: 100%;
    height: 100%;
    /* background: orange; */
    max-width: 1020px;
    padding: 40px 20px;
    margin: auto;
}
.testim .arrow {
    display: block;
    position: absolute;
    color: var(--main-color);
    cursor: pointer;
    font-size: 2em;
    top: 50%;
    transform: translateY(-50%);
    transition: all .3s ease-in-out;
    padding: 5px;
    /* z-index: 100; */
}
.testim .arrow::before {
    cursor: pointer;
}
.testim .arrow.left {
    left: 10px;
}
.testim .arrow.right {
    right: 10px;
}
.testim .arrow:hover {
    color: var(--main-color);
}
.testim .dots {
    text-align: center;
    position: absolute;
    width: 100%;
    /* bottom: 0px; */
    bottom: 0;
    left: 0;
    display: block;
    /* z-index: 33333; */
    height: 12px;
}
.testim .dots .dot {
    list-style-type: none;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--main-color);
    margin: 0 10px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    position: relative;
}
.testim .dots .dot.active-dot,
.testim .dots .dot:hover {
    background: var(--main-color);
    border-color: var(--main-color);
}
.testim .dots .dot.active-dot {
    animation: testim-scale .5s ease-in-out forwards;
}
.testim .cont {
    position: relative;
    overflow: hidden;
    /* edited code */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    /* margin-top: 50px; */
}
.testim .cont > div {
    /* doesn't verticle center div */
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    /* padding: 0 0 70px 0; */
    opacity: 0;
}
.testim .cont > div.inactive {
    opacity: 0;
}
.testim .cont > div.active-content {
    position: relative;
    opacity: 1;
    /* margin-top: 25%;
    transform: translateY(-25%); */
}
.testim .cont div .img-content img {
    display: block;
    height: 100px;
    width: 100px;
    margin: auto;
    border-radius: 50%;
}
.testim .cont div h2 {
    color: #000;
    font-size: var(--large-p-tag);
    margin: 15px 0;
}
.testim .cont div p {
    font-size: 2.15em;
    color: #000;
    width: 80%;
    margin: auto;
}
.testim .cont div.active-content .img-content img {
    animation: testim-show .5s ease-in-out forwards;
}
.testim .cont div.active-content h2 {
    animation: testim-content-in .4s ease-in-out forwards;
}
.testim .cont div.active-content p {
    animation: testim-content-in .5s ease-in-out forwards;
}
.testim .cont div.inactive .img-content img {
    animation: testim-hide .5s ease-in-out forwards;
}
.testim .cont div.inactive h2 {
    animation: testim-content-out .4s ease-in-out forwards;
}
.testim .cont div.inactive p {
    animation: testim-content-out .5s ease-in-out forwards;
}

@keyframes testim-scale {
    0% {
        box-shadow: 0px 0px 0px 0px #eee;
    }
    35% {
        box-shadow: 0px 0px 10px 5px #eee;
    }
    70% {
        box-shadow: 0px 0px 10px 5px var(--main-color);
    }
    100% {
        box-shadow: 0px 0px 0px 0px var(--main-color);
    }
}

@keyframes testim-content-in {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes testim-content-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}
@keyframes testim-show {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes testim-hide {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0);
    }
}

/*** MOBILE STYLES *******/

@media (max-width: 320px) {
    #reviews {
        margin-bottom: 0px;
    }
}