/* Main Font in (style.css) */
/* If required new font add here! */

/* All Custom Colors in (style.css) || [:root] || */
/* Add / Change if required! */

/* About Section Styles Start */

.about {
    width: 100%;
    padding: 7rem 2rem 4rem;
}

.about_heading {
    position: relative;
    font-size: 3rem;
    font-weight: 700;
    color: var(--darkgrey);
    text-align: center;
    letter-spacing: 1px;
}

.about .about-content {
    margin: 2rem auto;
    padding: 2rem 3rem;
}

.about .about-content .about-image {
    padding: 1rem 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about .about-content .about-image img {
    padding: 2rem;
    background: rgba(208, 213, 223, 0.3);
    box-shadow: 0 2px 6px rgba(155, 164, 180, 0.8);
    border-radius: 50rem;
}

.about .about-content .about-desc {
    padding: 1rem 3rem;
}

.about .about-content .about-desc h2.about-title {
    margin: 14px 0;
    font-size: 40px;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    color: var(--darkblue);
}

.about .about-content .about-desc h4.about-subtitle {
    margin: 10px 0;
    font-size: 26px;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    color: var(--lightblue);
}

.about .about-content .about-desc p {
    margin: 20px auto;
    font-size: 18px;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    color: var(--darkblack);
    text-align: justify;
}

@media (max-width: 1120px) {
    .about {
        padding: 2rem 0;
        padding-top: 7rem;
    }

    .about .about-content {
        padding: 2rem 1rem;
    }

    .about .about-content .about-image {
        padding: 1rem 2rem;
    }

    .about .about-content .about-image img {
        padding: 2rem;
    }
}

@media (max-width: 992px) {
    .about .about-content .about-image {
        padding: 1rem 1rem;
    }

    .about .about-content .about-image img {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .about {
        padding: 2rem 1rem;
        padding-top: 7rem;
    }

    .about .about-content .about-image {
        padding: 2rem 12rem;
    }

    .about .about-content .about-image img {
        padding: 2rem;
    }
}

@media (max-width: 620px) {
    .about .about-content .about-image {
        padding: 2rem 6rem;
    }

    .about .about-content .about-image img {
        padding: 1rem;
    }
}

@media (max-width: 450px) {
    .about .about-content .about-desc {
        padding: 1rem 1rem;
    }
}

@media (max-width: 380px) {
    .about .about-content .about-image {
        padding: 2rem 2rem;
    }
}