/home/moonrcjl/public_html/wp/wp-content/themes/arsha/assets/scss/layout/pages/_about.scss
@use "../../utils" as *;
/*----------------------------------------*/
/* 7.1 about css start
/*----------------------------------------*/
.mtabout {
&__area {
@media #{$md,$xs} {
padding-top: 80px;
}
}
&__section-border {
border-bottom: 1px solid var(--mt-border-1);
}
&__exper {
&-number {
font-size: 120px;
font-weight: 700;
color: var(--mt-common-black);
display: inline-block;
margin-bottom: 0;
}
&-title {
font-size: 18px;
font-weight: 700;
color: var(--mt-common-black);
display: inline-block;
top: -25px;
position: relative;
margin-left: 25px;
}
&-wrap {
& cite {
font-size: 17px;
font-weight: 400;
color: var(--mt-common-black);
display: inline-block;
position: absolute;
top: 10px;
}
}
}
&__thumb {
&-wrap {
& p {
@media #{$xs} {
margin-left: 0px;
margin-top: 10px;
}
}
}
&-play {
& a {
position: absolute;
top: 50%;
left: 50%;
height: 60px;
line-height: 60px;
width: 60px;
text-align: center;
background: #fff;
border-radius: 100%;
transform: translate(-50%, -50%);
z-index: 1;
color: #333;
font-size: 16px;
&::before {
position: absolute;
content: "";
left: 50%;
top: 50%;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.247);
animation: borderanimate2 2.7s linear infinite;
border-radius: 50%;
}
&::after {
position: absolute;
content: "";
left: 50%;
top: 50%;
width: 100%;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.205);
animation: borderanimate2 2.3s linear infinite;
border-radius: 50%;
}
}
}
}
&__btn {
&-wrap {
@media #{$md,$xs} {
text-align: center !important;
}
}
& a {
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
border: 1px solid var(--mt-border-1);
border-radius: 100%;
display: inline-block;
font-size: 16px;
font-family: var(--mt-ff-body);
font-weight: 700;
color: var(--mt-common-black);
@include transition(.3s);
& span {
display: block;
line-height: 2;
position: relative;
top: 45px;
@include transition(.3s);
}
&:hover {
background-color: var(--mt-theme-1);
color: var(--mt-common-black);
& span {
color: var(--mt-common-black);
}
}
}
}
&__progress {
// width: 78%;
@media #{$md} {
width: 85%;
}
@media #{$xs} {
width: 100%;
}
}
&__progress-item {
position: relative;
& h6 {
font-size: 16px;
@media #{$lg,$md,$xs} {
font-size: 15px;
}
}
& .progress-count {
position: absolute;
top: -2px;
right: 0;
font-size: 16px;
font-weight: 400;
}
& .progress {
height: 8px;
background-color: transparent;
border-radius: 50px;
overflow: visible;
position: relative;
&::after {
position: absolute;
content: "";
left: 0;
top: 1px;
height: 8px;
width: 100%;
background-color: #d1d1d1;
z-index: -1;
border-radius: 50px;
}
& .progress-bar {
background-color: var(--mt-common-black);
overflow: visible;
border-radius: 50px;
}
}
}
&__list {
& ul {
& li {
color: var(--mt-common-black-2);
font-size: 16px;
font-weight: 700;
font-family: var(--mt-ff-heading);
margin-bottom: 20px;
position: relative;
width: 46%;
float: left;
margin-left: 15px;
@media #{$xs} {
width: 100%;
float: inherit;
}
}
}
}
&__skill-info {
@media #{$xs} {
margin-left: 0px;
margin-right: 0px;
}
}
&__2 {
& .mt-section-content {
@media #{$xs} {
margin-left: 0px;
margin-right: 0px;
}
}
}
&__4 {
margin-bottom: -180px;
z-index: 1;
position: relative;
}
&__5 {
padding-top: 190px;
}
}