﻿
.metricsWrapper {
    display: flex;
    padding: 0 0 80px 80px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.metrics{
    display:flex;
    flex-direction:column;
    width:850px;
}
.metricsLeft {
    z-index: 1;
}
.metricsRight {
    z-index: 0;
}
.metricsTitle {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 65px;
    font-family: MuseoSlab;
    font-weight: 700;
    color: #fff;
}
/*.metricsGif{
    padding-right:50px;
}*/
/*  .metrics h3 {
        color: #fff;
        font-family: MuseoSlab;
        font-weight:700;
        font-size:65px;
    }*/
.metricsNumber {
    display: flex;
    gap: 75px;
    margin-top: 50px;
    align-items: center;
}
    .metricsNumber p {
        font-family: MuseoSlab;
    }

    .metricsNumber div p:nth-child(2n) {
        color:#fff;
        font-size:25px;
        font-weight:300;

    }
.metricsWrapper video {
    width:950px;
}
.metricGif{
    display:none;
}

@media (max-width:1700px) {
    .metricsWrapper video {
        width: 820px;
    }
    .metrics {
        width: 724px;
    }
}
@media (max-width:1440px){
    .metricsWrapper video {
        width: 680px;
    }
    .metrics {
        width: 558px;
    }
    .gradientText{
        font-size:50px;
    }
    .metricsNumber div p:nth-child(2n) {
        font-size: 22px;
    }
}
@media (max-width:1200px){
    .metricsWrapper video {
        width: 620px;
    }
    .metrics {
        width: 458px;
    }
    .gradientText{
        font-size:42px;
    }
    .metricsNumber div p:nth-child(2n) {
        font-size: 18px;
    }
}
@media (max-width:992px){
    .metricsWrapper {
        padding: 50px 0 50px 20px
    }

    .metricsWrapper video {
        width: 575px;
    }
    .metrics {
        width: 344px;
    }
    .metricsTitle{
        font-size:28px;
    }
    .metricsNumber {
        gap: 40px;
        margin-top: 40px;
    }
    .gradientText{
        font-size:28px;
    }
    .metricsNumber div p:nth-child(2n) {
        font-size: 16px;
    }
}
@media (max-width:768px) {
    .metricsWrapper {
        padding: 50px 0 50px 20px;
    }

    .metricsRight {
        position: absolute;
        bottom: -36px;
        right: 0;
    }

    .metricsGif {
        padding-right: 0;
    }

    .metricsWrapper video {
        width: 480px;
    }

    .metrics {
        width: calc(100% - 20px);
    }

    .metricsNumber {
        flex-direction: column;
        align-items: unset;
        gap: 20px;
    }
}

@media (max-width:540px) {
    .metricsRight {
        right: -130px;
    }
}