.about{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 6rem;
    padding-top: 13rem;
    background: var(--second-bg-color);
    
}

.about-img{
    position: relative;
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.about-img img{
    width: 90%;
    border-radius: 50%;
    border: .2rem solid var(--main-color);
}
.about-img .circle-spin{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-top: .2rem solid transparent;
    border-bottom: .2rem solid transparent;
    border-left: .2rem solid var(--main-color);
    border-right: .2rem solid var(--main-color);
    animation: aboutSpinner 12s linear infinite;
}
@keyframes aboutSpinner {
    100%{
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.about-content{
    text-align: center;
}

.about-content h3{
    position: relative;
    display: inline-block;
    font-size: 2.6rem;
    line-height: 1.2;
}

.about-content p{
    position: relative;
    font-size:1.6rem;
    margin: 2rem 0 3rem;
}

.btn-box.btns{
    display: inline-block;
}

.btn-box.btns a::before{
    background: var(--second-bg-color);
}

.animate{
    background: var(--second-bg-color);
}
.heading .animate{
    top:-1rem;
    height: 126%;
}
.footer {
    background: var(--bg-color);
}

/* RESPONSIVE */
@media (max-width: 768px){
    .navbar .animate{
        display: none;
    }

    .header .animate{
        background: var(--bg-color);
    }
    .about-content{
        margin:2rem;
    }
}