.rs-skill-bar .skillbar {
background: #eeeeee;
display: inline-block;
height: 8px;
position: relative;
width: 100%;
}
.rs-skill-bar .skillbar .skillbar-bar {
background: var(--primaryColor);
height: 8px;
width: 0;
margin-bottom: 0;
margin-top: 3px;
}
.rs-skill-bar .skillbar .skillbar-title,
.rs-skill-bar .skillbar .skill-bar-percent {
position: absolute;
}
.rs-skill-bar .skillbar .skillbar-title {
color: var(--primaryColor);
font-size: 20px;
font-weight: 600;
}
.rs-skill-bar .skillbar .skill-bar-percent {
font-size: 15px;
font-weight: 700;
color: var(--primaryColor);
}
.rs-skill-bar.animation .skillbar .skillbar-bar, .rs-skill-bar.striped .skillbar .skillbar-bar {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
}
.rs-skill-bar.animation .skillbar .skillbar-bar {
animation: rs-progress-pie-stripes 1s linear infinite;
}
.rs-skill-bar.style1 .skillbar .skillbar-title {
top: -35px;
}
.rs-skill-bar.style1 .skillbar .skill-bar-percent {
right: 0;
top: -30px;
}
.rs-skill-bar.style2 .skillbar .skillbar-title {
left: 0;
padding: 2px 20px 0;
top: 0;
width: 160px;
background: #83b614;
}
.rs-skill-bar.style2 .skillbar .skill-bar-percent {
right: 10px;
top: 0;
}.rt-iconbox-area {
overflow: hidden;
}
.rt-iconbox-area .box-inner {
position: relative;
padding: 40px 25px 20px;
box-shadow: 0 0 38px 0 rgba(0, 0, 0, 0.12);
transition: 0.4s;
overflow: hidden;
}
.rt-iconbox-area .box-inner:hover {
box-shadow: 0 8px 38px 0 rgba(0, 0, 0, 0.2);
}
.rt-iconbox-area .box-inner .rs-badge {
position: absolute;
background: var(--primaryColor);
width: 60px;
height: 60px;
border-radius: 50%;
color: #ffffff;
left: -4%;
top: -10%;
z-index: 1;
transform: rotate(0deg);
padding-top: 18px;
padding-left: 10px;
font-size: 22px;
}
.rt-iconbox-area .box-inner .rs-badge small {
font-size: 12px;
color: #fff;
padding-left: 2px;
}
.rt-iconbox-area .box-inner .icon-area {
display: inline-block;
color: var(--primaryColor);
transition: all ease 0.3s;
}
.rt-iconbox-area .box-inner .icon-area i {
transition: all ease 0.3s;
font-size: 50px;
}
.rt-iconbox-area .box-inner .text-area {
padding: 10px 0 0;
position: relative;
}
.rt-iconbox-area .box-inner .text-area .iconbox-title {
position: relative;
}
.rt-iconbox-area .box-inner .text-area .iconbox-title .title {
font-size: 20px;
margin: 0;
color: #1C2539;
font-weight: 500;
line-height: 1.5;
}
.rt-iconbox-area .box-inner .text-area .iconbox-title .title a {
text-decoration: none !important;
color: #1C2539;
}
.rt-iconbox-area .box-inner .text-area .iconbox-title .title a:hover {
color: #ffecec;
}
.rt-iconbox-area .box-inner .text-area .iconbox-title .title:before {
content: "01.";
font-size: 50px;
font-weight: bold;
color: var(--primaryColor);
position: absolute;
transition: all 0.3s ease 0s;
top: 0;
left: 0;
z-index: 9;
}
.rt-iconbox-area .box-inner .text-area .services-txt {
font-size: 15px;
margin: 0;
}
.rt-iconbox-area .box-inner .services-btn-part {
margin: 15px 0 0;
}
.rt-iconbox-area .box-inner .services-btn-part .services-btn {
position: relative;
display: inline-block;
color: #040404;
transition: all ease 0.3s;
}
.rt-iconbox-area .box-inner .services-btn-part .services-btn i {
transition: all ease 0.3s;
}
.rt-iconbox-area .box-inner .services-btn-part .services-btn:hover {
color: var(--primaryColor);
}
.rt-iconbox-area .box-inner .services-btn-part .services-btn.icon-after span {
float: left;
}
.rt-iconbox-area .box-inner .services-btn-part .services-btn.icon-after i {
margin-left: 10px;
transition: 0.4s;
}
.rt-iconbox-area .box-inner .services-btn-part .services-btn.icon-before span {
float: right;
}
.rt-iconbox-area .box-inner .services-btn-part .services-btn.icon-before i {
margin-right: 10px;
}
.rt-iconbox-area.iconbox-after-arrow-image .box-inner {
box-shadow: none;
overflow: visible;
}
.rt-iconbox-area.iconbox-after-arrow-image .box-inner .icon-area {
position: relative;
}
.rt-iconbox-area.iconbox-after-arrow-image .box-inner .icon-area .after-arrow-image {
position: absolute;
width: 100px;
height: 21px;
right: -150px;
top: 68px;
z-index: 1;
}