@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

.container-counter {
    margin: 0 20px;
}

@media (max-width: 1200px) {
    .counters {
        flex-wrap: wrap;
    }

    .counter-box {
        flex: 33.33%;
        padding: 10px 0px;
    }
}

.logo {
height: 70px;
}

.counters {
    color: #666666;
    padding: 0px 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.counters i {
    color: lightskyblue;
    margin-bottom: 5px;
}

.counters .counter {
    font-size: 38px;
    margin: 10px 0;
}

@media (max-width:767px) {
    .counters .counter {
        font-size: 26px;
    }
    .logo {
        height: 60px;
    }

}

@media (max-width: 770px) {

    .counters .counter>div:nth-of-type(1),
    .counters .counter>div:nth-of-type(2) {
        border-bottom: 1px lightskyblue solid;
        padding-bottom: 20px;
    }
}

.demo {
    background: darkblue;
    width: 150px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo {
    /* background: darkblue; */
    height: 75px;
    width: 250px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    cursor: pointer;
    background-image: linear-gradient(to right, #0652DD, #12CBC4);
    transition: 0.6s;
    border: none;
    background-size: 200%;

}

.request {
    justify-content: space-around;
    color: cornsilk;
}

.demo:hover {
    background-position: bottom;
}