.counter {
    color: #fff;
    background: #fff;
    text-align: center;
    width: 190px;
    padding: 25px 30px 10px;
    margin: 0 auto;
    border-radius: 30px 0;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.05);
    position: relative;
    z-index: 1;
}

    .counter:before {
        content: "";
        background: #51d658;
        border-radius: 15px 0 30px 0;
        box-shadow: inset 0 4px 8px rgba(0,0,0,0.15);
        position: absolute;
        top: 12px;
        left: 12px;
        right: 12px;
        bottom: 27px;
        z-index: -1;
    }

    .counter .counter-icon {
        font-size: 35px;
        margin: 0 0 10px;
        transform: rotateX(0deg);
        transition: all 0.3s ease 0s;
    }

    .counter:hover .counter-icon {
        transform: rotateX(360deg);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }

    .counter h3 {
        font-size: 17px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 0 20px;
    }

    .counter .counter-value {
        color: #666;
        background: #fff;
        font-size: 33px;
        font-weight: 600;
        text-align: right;
        line-height: 60px;
        width: 90%;
        height: 50px;
        padding: 0 15px;
        margin: 0 0 0 -20px;
        display: block;
    }

    .counter.primary:before {
        background-color: #0d6efd;
    }

    .counter.secondary:before {
        background-color: #6c757d;
    }

    .counter.success:before {
        background-color: #198754;
    }

    .counter.danger:before {
        background-color: #dc3545;
    }

    .counter.warning:before {
        background-color: #ffc107;
    }

    .counter.info:before {
        background-color: #0dcaf0;
    }

    .counter.light:before {
        background-color: #f8f9fa;
    }

    .counter.dark:before {
        background-color: #212529;
    }

    .counter.white:before {
        background-color: #fff;
    }


@media screen and (max-width:990px) {
    .counter {
        margin-bottom: 40px;
    }
}

.counterx {
    color: #f27f21;
    text-align: center;
    height: 190px;
    width: 190px;
    padding: 30px 25px 25px;
    margin: 0 auto;
    border: 3px solid #f27f21;
    border-radius: 20px 20px;
    position: relative;
    z-index: 1;
}

    .counterx:before,
    .counterx:after {
        content: "";
        background: #f3f3f3;
        border-radius: 20px;
        box-shadow: 4px 4px 2px rgba(0,0,0,0.2);
        position: absolute;
        left: 15px;
        top: 15px;
        bottom: 15px;
        right: 15px;
        z-index: -1;
    }

    .counterx:after {
        background: transparent;
        width: 100px;
        height: 100px;
        border: 15px solid #f27f21;
        border-top: none;
        border-right: none;
        border-radius: 0 0 0 20px;
        box-shadow: none;
        top: auto;
        left: -10px;
        bottom: -10px;
        right: auto;
    }

    .counterx .counter-icon {
        font-size: 35px;
        line-height: 35px;
        margin: 0 0 15px;
        transition: all 0.3s ease 0s;
    }

    .counterx:hover .counter-icon {
        transform: rotateY(360deg);
    }

    .counterx .counter-value {
        color: #555;
        font-size: 30px;
        font-weight: 600;
        line-height: 20px;
        margin: 0 0 20px;
        display: block;
        transition: all 0.3s ease 0s;
    }

    .counterx:hover .counter-value {
        text-shadow: 2px 2px 0 #d1d8e0;
    }

    .counterx h3 {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 15px;
    }

    .counterx.info {
        color: #0dcaf0;
        border-color: #0dcaf0;
    }

        .counterx.info:after {
            border-bottom-color: #0dcaf0;
            border-left-color: #0dcaf0;
        }

    .counterx.primary {
        color: #0d6efd;
        border-color: #0d6efd;
    }

        .counterx.primary:after {
            border-bottom-color: #0d6efd;
            border-left-color: #0d6efd;
        }

    .counterx.secondary {
        color: #6c757d;
        border-color: #6c757d;
    }

        .counterx.secondary:after {
            border-bottom-color: #6c757d;
            border-left-color: #6c757d;
        }

    .counterx.success {
        color: #198754;
        border-color: #198754;
    }

        .counterx.success:after {
            border-bottom-color: #198754;
            border-left-color: #198754;
        }

    .counterx.danger {
        color: #dc3545;
        border-color: #dc3545;
    }

        .counterx.danger:after {
            border-bottom-color: #dc3545;
            border-left-color: #dc3545;
        }

    .counterx.warning {
        color: #ffc107;
        border-color: #ffc107;
    }

        .counterx.warning:after {
            border-bottom-color: #ffc107;
            border-left-color: #ffc107;
        }

    .counterx.light {
        color: #f8f9fa;
        border-color: #f8f9fa;
    }

        .counterx.light:after {
            border-bottom-color: #f8f9fa;
            border-left-color: #f8f9fa;
        }

    .counterx.dark {
        color: #212529;
        border-color: #212529;
    }

        .counterx.dark:after {
            border-bottom-color: #212529;
            border-left-color: #212529;
        }

    .counterx.white {
        color: #ffffff;
        border-color: #ffffff;
    }

        .counterx.white:after {
            border-bottom-color: #ffffff;
            border-left-color: #ffffff;
        }

@media screen and (max-width:990px) {
    .counterx {
        margin-bottom: 40px;
    }
}


.countery {
    color: #eb3b5a;
    width: 200px;
    height: 200px;
    text-align: center;
    border-radius: 100%;
    padding: 77px 32px 40px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

    .countery:before,
    .countery:after {
        content: "";
        background: #fff;
        width: 80%;
        height: 80%;
        border-radius: 100%;
        box-shadow: -5px 5px 5px rgba(0,0,0,0.3);
        transform: translateX(-50%)translateY(-50%);
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: -1;
    }

    .countery:after {
        background: linear-gradient(45deg,#B81242 49%, #D74A75 50%);
        width: 100%;
        height: 100%;
        box-shadow: none;
        transform: translate(0);
        top: 0;
        left: 0;
        z-index: -2;
        clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 50%);
    }

    .countery .counter-icon {
        color: #fff;
        background: linear-gradient(45deg,#B81242 49%, #D74A75 50%);
        font-size: 33px;
        line-height: 70px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        transition: all 0.3s;
    }

        .countery .counter-icon i.fa {
            transform: rotateX(0deg);
            transition: all 0.3s ease 0s;
        }

    .countery:hover .counter-icon i.fa {
        transform: rotateX(360deg);
    }

    .countery h3 {
        font-size: 17px;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 3px;
    }

    .countery .counter-value {
        font-size: 30px;
        font-weight: 700;
    }

    .countery.warning {
        color: #ffc107;
    }

        .countery.warning:after,
        .countery.warning .counter-icon {
            background: linear-gradient(45deg,#ffc107 49%,#9c7606 50%);
        }

    .countery.success {
        color: #198754;
    }

        .countery.success:after,
        .countery.success .counter-icon {
            background: linear-gradient(45deg,#198754 49%,#086b3d 50%);
        }

    .countery.info {
        color: #0dcaf0;
    }

        .countery.info:after,
        .countery.info .counter-icon {
            background: linear-gradient(45deg,#0dcaf0 49%,#098da8 50%);
        }




    .countery.primary {
        color: #0d6efd;
    }

        .countery.primary:after,
        .countery.primary .counter-icon {
            background: linear-gradient(45deg,#0d6efd 49%,#093e8c 50%);
        }

    .countery.secondary {
        color: #6c757d;
    }

        .countery.secondary:after,
        .countery.secondary .counter-icon {
            background: linear-gradient(45deg,#6c757d 49%,#525558 50%);
        }


    .countery.danger {
        color: #dc3545;
    }

        .countery.danger:after,
        .countery.danger .counter-icon {
            background: linear-gradient(45deg,#dc3545 49%,#760611 50%);
        }

    .countery.dark {
        color: #212529;
    }

        .countery.dark:after,
        .countery.dark .counter-icon {
            background: linear-gradient(45deg,#212529 49%,#000000 50%);
        }





@media screen and (max-width:990px) {
    .countery {
        margin-bottom: 40px;
    }
}