:root {
    --title-main-color: #faff00;
    --subtitle-main-color: #013499;

    --fonts-main-color: rgb(0, 0, 0);
    --fonts-second-color: rgba(255, 4, 4, 0.8);

    --first-main-color: #dadbdd;    
    --second-main-color: #5eff00;

    --bg-main: linear-gradient(
    #dadbdd,
    #a8a8aa,
    #818183,
    #818183,
    #a8a8aa,
    #dadbdd
    );
}
/* #team {background-image: var(--bg-main);}
#pricing{background-image: var(--bg-main);} */
#h1_header {color: var(--first-main-color);}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 45%;
  }

.bar-1{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    width:auto;
    height:55px;
    border:3px solid #1e0396;
    margin:2px auto;
    border-radius:50px;
    display:inline-flex;
    background:#fff;
    margin-bottom:15px!important;
    align-items: center;
    box-sizing: initial;
}
.bar-1 .ball-boxs{height:55px;text-align:center;width:300px}
.bar-1 .ball-boxs h1{padding-top:0;letter-spacing:10px;margin-top:0;font-size:55px;line-height:1.1}
.bar-1 img{margin:2px 5px;width:50px;height:50px;display: inline;}

.bar-2{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    width:auto;
    height:50px;
    border:3px solid var(--title-main-color);
    margin:2px auto;
    border-radius:50px;
    display:inline-flex;
    background:#fff;
    margin-bottom:15px!important;
    align-items: center;
    box-sizing: initial;
}
.bar-2 .ball-boxs{height:50px;text-align:center;width:275px}
.bar-2 .ball-boxs h1{padding-top:0;letter-spacing:10px;margin-top:0;font-size:50px;line-height:1.1}
.bar-2 img{margin:3px 5px;width:45px;height:45px;display: inline;}

.sp-box{
    width:auto;
    border:3px solid #000;
    border-radius: 50px;
    background-color:#fff;
    color: var(--fonts-main-color);
    padding-top: 10px;
    padding-bottom: 10px;
    letter-spacing: 5px; 
    font-size: 30px;
}
.spinner-loader{
    color: lawngreen;
}

.number{
	display: inline-block;
	overflow: hidden;
	height: 1em;
	line-height: 1em;
	font-weight: bold;
	
    padding-left: 10px;
    padding-right: 10px;

	border-radius: 10px;
	font-size: 28px;	
	}
.box{
	display: inline-block;
	overflow: hidden;
	height: 1em;
	line-height: 1em;
	font-weight: bold;
	
    padding-left: 10px;
    padding-right: 10px;
    color: var(--title-main-color);
	background: var(--subtitle-main-color);
	border-radius: 10px;
	font-size: 28px;
}
.box:after{
	position: relative;
	white-space: pre;
	animation: animate 1s steps(10) infinite;
}
.box.first-number:after{
	content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
}
.box.second-number:after{
	content: "9\A 8\A 7\A 6\A 5\A 4\A 3\A 2\A 1\A 0";
}
.box.third-number:after{
	content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0";
}
.box.fourth-number:after{
	content: "2\A 4\A 6\A 8\A 1\A 3\A 5\A 7\A 0\A 9";
}
.box.fifth-number:after{
	content: "6\A 4\A 2\A 0\A 3\A 1\A 5\A 9\A 7\A 8";
}
.box.sixth-number:after{
	content: "7\A 3\A 6\A 4\A 8\A 2\A 1\A 9\A 0\A 5";
}			 

@keyframes animate{
	0%{
		top: 0;
	}
	100%{
		top: -10em;
	}
}

/*------------------------------  */