

.counter-wrap{
    &.style1{
        display: grid;
        grid-template-columns: repeat(4,1fr); 
        margin: 0 auto;

        .counter-box{
            padding: 130px 46px;        
            border: 1px solid $border-color;
            text-align: center;
            margin-right: -25px;
            margin-left: -25px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            .dollar{
                color: $title-color;
                text-align: center; 
                font-family: $heading-font;
                font-size: 64px;
                font-style: normal;
                font-weight: 700;
                line-height: 120%;  
            }
           .counter-number{
                color: $title-color;
                text-align: center; 
                font-family: $heading-font;
                font-size: 64px;
                font-style: normal;
                font-weight: 700;
                line-height: 120%;  
           }
           .plus{
                color: $title-color;
                text-align: center; 
                font-family: $heading-font;
                font-size: 64px;
                font-style: normal;
                font-weight: 700;
                line-height: 120%;  
           }
           span{
            color: $text-color;
            text-align: center; 
            font-family: $body-font;
            font-size: 20px;
            font-style: normal;
            font-weight: 300;
            line-height: 150%;  
           }
        }
        
        @include breakpoint (max-lg ){ 
         grid-template-columns: repeat(2,1fr);
         gap: 30px;

         .counter-box{
            margin-right: 0;
            margin-left: 0;
            padding: 80px 30px;
         }
        }
        @include breakpoint (max-md ){ 
            grid-template-columns: repeat(1,1fr); 
           }
    }
}

 

.counter-wrap{
    &.style2{
        display: grid;
        grid-template-columns: repeat(4,1fr); 
        margin: 30px auto;

        .counter-box{
            padding: 66px 17px 66px;   
            border: 1px solid $border-color;
            text-align: center;
            margin-right: -15px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%; 
           .counter-number{
                color: $title-color;
                text-align: center; 
                font-family: $heading-font; 
                font-size: 32px;
                font-style: normal;
                font-weight: 700;
                line-height: 120%;  
           }
           .percentage{
            color: $title-color;
            text-align: center; 
            font-family: $heading-font; 
            font-size: 32px;
            font-style: normal;
            font-weight: 700;
            line-height: 120%;  
           }
           span{
            color: $text-color;
            text-align: center; 
            font-family: $body-font; 
            font-size: 16px;
            font-style: normal;
            font-weight: 300;
            line-height: 150%;  
           }
        }
        
        @include breakpoint (max-lg ){ 
         grid-template-columns: repeat(2,1fr);
         gap: 30px;

         .counter-box{
            margin-right: 0;
            padding: 80px 10px;
         }
        }
        @include breakpoint (max-md ){ 
            grid-template-columns: repeat(1,1fr);   
            margin: 30px auto 0;
           }
    }
}

 