/* ==================================================================================================================================== */
/* ======================================================== Testimonial Slider ======================================================== */
/* ==================================================================================================================================== */

.testim {width: 100%;display: flex;align-items: center;justify-content: center;}
.testim .wrap {position: relative;max-width: 1020px;padding: 40px 20px;margin: auto;}
.testim .arrow {display: block;position: absolute;color: #eee;cursor: pointer;font-size: 2em;top: 50%;transform: translateY(-50%);transition: all 0.3s ease-in-out;padding: 5px;z-index: 22222222;}
.testim .arrow:hover {color: #FFC800;}
.testim .arrow.left {left: 10px;}
.testim .arrow.right {right: 10px;}
.testim .dots {text-align: center;position: absolute;width: 100%;bottom: 0;left: 0;display: flex;align-items: center;justify-content: center;z-index: 3333;height: 12px;}
.testim .dots .dot {list-style-type: none;display: inline-block;width: 12px;height: 12px;border-radius: 50%;border: 1px solid #eee;margin: 0 10px;cursor: pointer;transition: all 0.5s ease-in-out;position: relative;}
.testim .dots .dot.active,
.testim .dots .dot:hover {background: #FFC800;border-color: #FFC800;}
.testim .dots .dot.active {animation: testim-scale 0.5s ease-in-out forwards;}
.testim .cont {position: relative;overflow: hidden;}
.testim .cont > div {text-align: center;position: absolute;top: 0;left: 0;padding: 0 0 70px 0;opacity: 0;}
.testim .cont > div.inactive {opacity: 1;}
.testim .cont > div.active {position: relative;opacity: 1;}
.testim .cont div .img img {display: block;width: 100px;height: 100px;margin: auto;border-radius: 50%;}
.testim .cont div h2 {color: #FFC800;font-size: 1em;margin: 15px 0;}
.testim .cont div p {font-size: 1.15em;color: #eee;width: 80%;margin: auto;}
.testim .cont div.active .img img {animation: testim-show 0.5s ease-in-out forwards;}
.testim .cont div.active h2 {animation: testim-content-in 0.4s ease-in-out forwards;}
.testim .cont div.active p {animation: testim-content-in 0.5s ease-in-out forwards;}
.testim .cont div.inactive .img img {animation: testim-hide 0.5s ease-in-out forwards;}
.testim .cont div.inactive h2 {animation: testim-content-out 0.4s ease-in-out forwards;}
.testim .cont div.inactive p {animation: testim-content-out 0.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 #FFC800;}
    100% {box-shadow: 0px 0px 0px 0px #FFC800;}
}
@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);}
}
@media all and (max-width: 300px) {
    body {font-size: 14px;}
}
@media all and (max-width: 500px) {
    .testim .arrow {font-size: 1.5em;}
    .testim .cont div p {line-height: 25px;}
}

/* Expertise */
.expertise-container h3{font-size: 1.95vw;font-weight: 500;color: #61CE70;margin: 1.8vw 0;text-align: center;}
.expertise-slider::before {content: '';position: absolute;top: 0;bottom: 0;width: 20%;background: linear-gradient(to right,rgba(19, 0, 61, 1), rgba(19, 0, 61, 0));z-index: 5;left: 0;}
.expertise-slider::after {content: '';position: absolute;top: 0;bottom: 0;width: 20%;background: linear-gradient(to right, rgba(19, 0, 61, 0), rgba(19, 0, 61, 1));z-index: 5;right: 0;}
.expertise-slide{width: 12vw;margin: 0 0.6vw;border-radius: 15px;text-align: center;}
.expertise-slide img{width: 12vw;margin-bottom: 1vw;}