/*   
Theme Name: PathSoft
Theme URI: https://www.templatemonster.com/wordpress-themes/pathsoft-it-solutions-for-your-business-services-wordpress-theme-99496.html
Author: Koval Web
Author URI: https://www.templatemonster.com/vendors/kovalweb
Description: The Template is created for web template
Tags: html5, css3, sass, gulp, bootstrap grid
Version: 2.5.0
*/
.about-imgs {
    position: relative;
}

.about-imgs.about-imgs-reverse .about-media-item {
    margin-left: auto;
}

.about-imgs-2,
.about-imgs-3 {
    padding-bottom: 30%;
}

.about-imgs-2 .about-media-item,
.about-imgs-3 .about-media-item {
    width: 65%;
}

.about-imgs-2.about-imgs-reverse .about-media-item:nth-child(2),
.about-imgs-3.about-imgs-reverse .about-media-item:nth-child(2) {
    right: inherit;
    left: 0;
}

.about-imgs-2 .about-media-item:nth-child(2) {
    position: absolute;
    right: 0;
    bottom: 0;
}

.about-imgs-3 {
    padding-top: 30%;
}

.about-imgs-3 .about-media-item:nth-child(2) {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
}

.about-imgs-3 .about-media-item:nth-child(3) {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60%;
}

.about-media-item {
    position: relative;
    cursor: pointer;
}

.aii-item {
    display: flex;
    margin-bottom: 1.25rem;
}

.aii-item:last-child {
    margin-bottom: 0;
}

.aii-item .material-icons {
    color: var(--accent-color);
}

.aii-item-details {
    padding-left: 1.5rem;
}

.aii-item-details .item-heading {
    margin-bottom: 0.25rem;
}

.aii-item-details p {
    color: var(--text-secondary);
    margin: 0;
}

.about-content {
    max-width: 32.5rem;
    font-size: var(--font-size);
}

.about-content h1, .about-content h2 {
    font-size: var(--heading-font-size);
}

.about-item {
    margin-bottom: 2.25rem;
}

.about-item:last-child {
    margin-bottom: 0;
}

.about-footer-btns {
    margin-top: 2.25rem;
}

.about-footer-btns.afbmtl {
    margin-top: 3.5rem;
}

.about-container .article {
    text-align: center;
}

.about-container .article ul li, .about-container .article ol li {
    justify-content: center;
}

.acpb {
    padding-bottom: 4.5rem;
}

.acpb:last-child {
    padding-bottom: 0;
}

.about-process-item {
    position: relative;
    display: flex;
}

.about-process-item::after {
    content: "";
    position: absolute;
    left: 1.75rem;
    top: 0;
    width: 1px;
    height: calc(100% + var(--bs-gutter-x));
    background-color: var(--border-color);
}

.about-process-item:last-child::after {
    content: none;
}

.about-process-item-counter {
    position: relative;
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    width: 3.5rem;
    height: 3.5rem;
    min-width: 3.5rem;
    margin-right: 1.25rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--accent-color);
    background: linear-gradient(to right, var(--el-gradient-start) 0%, var(--el-gradient-end) 100%);
    color: var(--background-color);
    z-index: 1;
}

.about-process-item-heading {
    margin-bottom: 0;
}

.about-process-item-desc {
    margin: 0.375rem 0 0 0;
    color: var(--text-secondary);
}

@media (min-width: 768px) {
    .about-container {
        max-width: 34rem;
        margin: 0 auto;
    }
}

@media (min-width: 992px) {
    .about-container {
        max-width: 100%;
        margin: 0;
    }

    .about-container .article {
        text-align: left;
    }

    .about-container .article ul li, .about-container .article ol li {
        justify-content: flex-start;
    }
}

@media (min-width: 1200px) {
    .about-imgs {
        padding-right: 1.25rem;
    }

    .about-imgs.about-imgs-reverse {
        padding-left: 1.25rem;
        padding-right: 0;
    }

    .content-col-reverse > * {
        padding-left: 1.25rem;
    }
}

@media (min-width: 1400px) {
    .about-imgs {
        padding-right: 0;
    }

    .about-imgs.about-imgs-reverse {
        padding-left: 0;
    }

    .content-col-reverse > * {
        padding-left: 0;
    }
}

@media only screen and (max-width: 767.98px), only screen and (min-width: 567px) and (max-width: 900px) and (orientation: landscape) {
    .about-content {
        --font-size: 1rem!important;
    }

    .about-content h1, .about-content h2 {
        --heading-font-size: 2.25rem!important;
    }
}