.page-block {
    background: var(--bg);
} 

#about .modal-body,
#contact .modal-body {
    
    padding: 2rem;
    flex-wrap: wrap;

}

#about .img-wrapper {
    flex: 1;
    text-align: center;
    max-width: initial;
    margin-right: 0;
}



#about .img-wrapper img {
    max-width: 200px;
    border-radius: 50%;
}

.about-text {
    flex: 1;
    
}

.about-text p,
.about-text .contact-me-block {
    font-size: 1.2rem;
}


#contact .modal-body {
    display: block;
}

.contact-text {
    padding-bottom: 3.5rem;
}



.folio-form .form-control {
    display: block;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    max-width: 500px;
    width: 100%;
    color: var(--color-text);
    padding: 0 0 5px 0;
    line-height: 26px;
    margin-bottom: 40px;
    border-bottom: 2px solid var(--border);
    outline: none;
    background: transparent;
    font-family: "Inter", sans-serif;
}


.marquee {
    width: var(--marquee-width);
    height: var(--marquee-height);
    overflow: hidden;
    margin: 2rem auto;
    position: relative;
}

.marquee-content {
    list-style: none;
    display: flex;
    height: 100%;
    animation: scrolling var(--marquee-duration-animation) linear infinite;

}

.marquee-content li {
    width: var(--marquee-elm-width);
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 100%;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: calc(var(--marquee-height) * 3 / 4);

}

.marquee:before, 
.marquee:after {
    position: absolute;
    height: 100%;
    top: 0;
    content: "";
    z-index: 1;
    width: 10rem;
}

.marquee:before {
    left: 0;
    background: linear-gradient(to right, var(--bg) 0%, transparent 100%);

}

.marquee:after {
    right: 0;
    background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
    
}

@keyframes scrolling {
    0% { transform: translateX(0);}
    100% { transform: translateX(calc(-1 * var(--marquee-elm-width) * var(--marquee-elms)));}
}

@media (max-width: 991px) {
    #about .img-wrapper,
    #about .about-text
    
    {
        flex: initial;
        margin: 0 auto;
    }

    .page-block {
        text-align: center;
    }


    }

    @media (max-width: 768px) {
        :root {
            --marquee-width: 100%;
            --marquee-elms-displayed: 3;
        }

        .marquee:before,
        .marquee:after {
            width: 5rem;
        }
    
        }

        
    @media (max-width: 458px) {
        :root {
        
            --marquee-elms-displayed: 2;
        }

        }