@import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import './skins/color-1.css';
@import './style.css';

section .container {
    padding-top: 60px; padding-bottom: 70px;
}

.section-title {
    flex: 0 0 100%; max-width: 100%; margin-bottom: 60px;
}

.section-title h2 {
    font-size: 40px; color: var(--text-black-900); font-weight: 700; position: relative;
}
.section-title h2::before {
    content: ''; height: 4px; width: 50px; background-color: var(--skin-color); position: absolute; top: 100%; left: 0;
}
.section-title h2::after {
    content: ''; height: 4px; width: 25px; background-color: var(--skin-color); position: absolute; top: 100%; left: 0; margin-top: 8px;
}

.about .about-content {
    flex: 0 0 100%; max-width: 100%;
}
.about .about-content .about-text {
    flex: 0 0 100%; max-width: 100%;
}
.about .about-content .about-text h3 {
    font-size: 24px; font-weight: 700; margin-bottom: 15px; color: var(--text-black-900);
}
.about .about-content .about-text h3 span {
    color: var(--skin-color);
}
.about .about-content .about-text p {
    font-size: 16px; line-height: 25px; color: var(--text-black-700);
}
.about .about-content .personal-info {
    flex: 0 0 50%; max-width: 50%; margin-top: 40px;
}
.about .about-content .personal-info .info-item {
    flex: 0 0 50%; max-width: 50%;
}
.about .about-content .personal-info .info-item p {
    font-weight: 600; padding: 10px 0; font-size: 16px; color: var(--text-black-900); border-bottom: 1px solid var(--bg-black-50);
}
.about .about-content .personal-info .info-item p span {
    font-weight: 400; margin-left: 4px; display: inline-block; color: var(--text-black-700);
}
.about .about-content .personal-info .button {
    margin-top: 40px;
}
.about .about-content .personal-info .button .btn {
    margin-top: 15px; margin-right: 10px;
}


.about .about-content .skills {
    float: 0 0 50%; max-width: 50%; margin-top: 40px;
}
.about .about-content .skills .skill-item {
    flex: 0 0 33.33%; max-width: 33.33%; margin-bottom: 15px;
}
.about .about-content .skills .skill-item h5 {
    font-weight: 600; font-size: 12px; line-height: 40px; color: var(--text-black-900); text-transform: capitalize;
}
.about .about-content .skills .skill-item .progress {
    background-color: var(--bg-black-50); height: 7px;
    border-radius: 4px; width: 100%; position: relative;
}
.about .about-content .skills .skill-item .progress .progress-in {
    position: absolute; left: 0; top: 0;
    height: 100%; border-radius: 4px; background-color: var(--skin-color);
}
.about .about-content .skills .skill-item .progress .skill-percent {
    position: absolute; right: 0; color: var(--text-black-900); top: -40px; font-weight: 400; line-height: 40px;    
}

.about .about-content .experience,
.about .about-content .education {
    flex: 0 0 50%; max-width: 50%; margin-top: 50px;
}

.about .about-content h3.title {
    font-size: 24px; font-weight: 700; margin-bottom: 30px; color: var(--text-black-900);
}
.about .about-content .timeline-box {
    flex: 0 0 100%; max-width: 100%; 
}
.about .about-content .timeline {
    background-color: var(--bg-black-100); padding: 30px 15px; border: 1px solid var(--bg-black-50);
    border-radius: 10px; width: 90%; position: relative; 
}
.about .about-content .timeline .timeline-item {
    position: relative; padding-left: 37px; padding-bottom: 20px;
}
.about .about-content .timeline .timeline-item:last-child{
    padding-bottom: 0;
}
.about .about-content .timeline .timeline-item::after {
    content: ''; position: absolute; width: 1px; height: 100%; left: 7px; top: 0; background-color: var(--skin-color);
}
.about .about-content .timeline .timeline-date {
    font-weight: 400; color: var(--text-black-700);
    font-size: 14px; margin-bottom: 12px;
}
.about .about-content .timeline .timeline-title {
    font-weight: 700; font-size: 18px; margin-bottom: 15px;
    text-transform: capitalize; color: var(--text-black-900);
}
.about .about-content .timeline .timeline-text {
    line-height: 25px; font-size: 16px; text-align: justify; color: var(--text-black-700);
}
.about .about-content .timeline .timeline-date .fa {
    margin-right: 5px;
}
.about .about-content .timeline .circle-dot {
    content: ''; position: absolute; left: 0; top: 0; height: 15px; width: 15px;
    border-radius: 50%; background-color: var(--skin-color);
}