:root {
    --dark-green: #3d4918;
    --mid-green: #91ab52;
    --light-green: #ebffae;

    --dark-brown: #543819;
    --mid-brown: #ffedd7;
    --light-brown: #fffbf7;

    --dark-purple: #8f3cd6;
    --mid-purple: #cabbff;
    --light-purple: #ded7ff;

    --dark-red: #f4400f;
    --mid-red: #f26533;
    --light-red: #ffa488;
}

#about {
    padding: 220px 0 320px;
}

.ul-text {
    position: relative;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.ul-text::after {
    content: "";
    position: absolute;
    width: 300px;
    max-width: 100%;
    height: 2px;
    background-color: var(--dark-brown);
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.8;
}

#about a {
    color: var(--dark-brown);
    opacity: 0.8;
}

#about a:hover {
    color: var(--dark-brown);
    opacity: 0.6;
}

#about .bi {
    font-size: 24px;
}

#about .bi::before,
[class*=" bi-"]::before,
#about [class^="bi-"]::before {
    vertical-align: -0.28em;
}

#about .about-l {
    top: 18%;
    bottom: unset;
    left: 1%;
    width: 200px;
}

#about .about-l2 {
    /* transform: none !important; */
    bottom: 30%;
    top: unset;
    left: 7%;
    width: 150px;
}

#about .about-r {
    bottom: unset;
    top: 15%;
    width: 150px;
}

#about .about-r2 {
    bottom: 45%;
    top: unset;
    right: 1%;
    width: 150px;
}

.accrodion-title p {
    margin-top: -15px;
}

.accrodion-title p::after {
    content: "";
    background-image: url(../img/dropdown-darker.svg);
    width: 50px;
    height: 50px;
    background-position: center;
    background-size: contain;
    font-family: sans-serif !important;
    color: transparent !important;
    display: inline-block;
    transform: translateY(35%);
    margin-left: 15px;
}

@media (max-width: 992px) {
    #about .about-l {
        top: 5%;
        width: 180px;
    }

    #about .about-l2 {
        bottom: 30%;
        top: unset;
        left: 1%;
        width: 150px;
    }

    #about .about-r2 {
        bottom: 35%;
        right: -2%;
        width: 150px;
    }
}

@media (max-width: 768px) {
    #about .floating-img {
        display: none;
    }

    #about {
        padding: 150px 0 80px;
    }

    h3 {
        margin-bottom: 10px;
    }

    .contact-mobile {
        width: 100%;
        margin-bottom: 15px;
    }

    footer {
        background-color: var(--light-brown);
    }

    .green-bg-c {
        background-image: url("../img/contact-green-bg.svg");
        padding: 30px 15px;
        background-size: cover;
        background-repeat: no-repeat;
        margin-bottom: 30px;
    }

    .purple-bg {
        background-image: url("../img/contact-purple-bg.svg");
        padding: 30px 15px 15px;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .purple-bg .faq-one__accordions .accrodion .accrodion-title {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0;
        padding-bottom: 10px;
        background: #ded7ff;
    }

    .purple-bg .faq-one__accordions .accrodion .accrodion-content,
    .purple-bg .faq-one__accordions .accrodion,
    .purple-bg .faq-one__accordions .accrodion.active .accrodion-title,
    .purple-bg .accrodion-title {
        background: #ded7ff;
    }

    .green-bg-c .faq-one__accordions .accrodion .accrodion-title {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0;
        padding-bottom: 10px;
        background: #ebffae;
    }

    .green-bg-c .faq-one__accordions .accrodion .accrodion-content,
    .green-bg-c .faq-one__accordions .accrodion,
    .green-bg-c .faq-one__accordions .accrodion.active .accrodion-title,
    .green-bg-c .accrodion-title {
        background: #ebffae;
    }
}