.main-content {
    font-size: 24rem;
}

.main-content-container {
    background-color: #fff;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: relative;
    z-index: 10;
    padding-top: 88rem;
    /* margin-bottom: 140rem; */
}

#about {
    display: block;
    content: "";
    visibility: hidden;
    position: relative;
    top: calc(-1 * (var(--header-height) + 2 * var(--side-gap) + 88rem));
}

#contact {
    display: block;
    content: "";
    visibility: hidden;
    position: relative;
    top: calc(-1 * (var(--header-height) + 2 * var(--side-gap)));
}

.about-section,
.why-section,
.gallery-section,
.companies-section {
    margin-bottom: 88rem;
}

.gallery-section {
    background-color: var(--color-primary);
    padding-top: 88rem;
    padding-bottom: 88rem;
}

.contact-section {
    background-color: var(--color-white);
    padding-top: 88rem;
    padding-bottom: 88rem;
}

.about-title,
.why-title,
.gallery-title,
.contact-title {
    grid-column: 1/7;
    grid-row: 1;
}

.beneficiaries {
    grid-column: 1/13;
    grid-row: 1;
}

.about-title,
.why-title,
.beneficiaries-title,
.contact-title {
    color: var(--color-primary);
}

.gallery-section {
    color: var(--color-secondary);
}

.about-content,
.why-content,
.contact-content {
    grid-column: 7/12;
    grid-row: 1;
}

.about-content ol {
    list-style-position: inside;
}

.about-content ol li::marker {
    color: var(--color-secondary);
    font-family: var(--font-semibold);
}

.why-images {
    grid-row: 2;
    grid-column: 1/13;
    display: flex;
    gap: 20rem;
    position: relative;
    margin-top: 45rem;
}

.why-images img {
    width: 100%;
    min-width: 0;
    border-radius: var(--radius-md);
}

.gallery-content {
    grid-row: 2;
    grid-column: 1/13;
}

.slide {
    border-radius: var(--radius-md);
}

.gallery-buttons {
    display: flex;
    gap: 10rem;
    margin: 20rem 0;
}

.gallery-button {
    background-color: var(--color-white);
    color: var(--color-primary);
    border-radius: var(--radius-xsm);
    height: 50rem;
    width: 50rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.gallery-button:hover {
    background-color: var(--color-secondary);
}

.left-arrow .arrow-hover {
    transform: translate(100%);
}

.right-arrow .arrow-hover {
    transform: translate(-100%);
}

.arrow-hover {
    opacity: 0;
    position: absolute;
    top: inherit;
    left: inherit;
}

.right-arrow:hover .arrow-hover,
.left-arrow:hover .arrow-hover {
    transform: translate(0);
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
    opacity: 1;
}

.left-arrow:hover i:first-child {
    transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transform: translate(-100%);
    opacity: 0;
}

.right-arrow:hover i:first-child {
    transition: all 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transform: translate(100%);
    opacity: 0;
}

.beneficiaries {
    display: flex;
    flex-direction: column;
}

.companies-text {
    grid-row: 2;
    grid-column: 1/13;
    margin-top: 45rem;
}

.beneficiaries-logos {
    margin-top: 88rem;
    height: 100%;
    flex-grow: 1;
    display: flex;
}

.beneficiaries-logo {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.beneficiaries-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.beneficiaries-logo-svg {
    width: 350rem;
    pointer-events: none;
}

.beneficiaries-subtext {
    max-width: 250rem;
    text-align: center;
    color: black;
    font-size: var(--fs-title-xxsm);
    line-height: var(--lh-title-xxsm);
}

.beneficiaries-img {
    width: 350rem;
}

.contact-content b {
    color: var(--color-primary);
}

@media (max-width: 834px) {
    .main-content {
        font-size: 20rem;
    }

    .about-title,
    .why-title,
    .gallery-title,
    .contact-title {
        grid-column: 1/13;
        grid-row: 1;
    }

    .about-content,
    .why-content,
    .contact-content {
        grid-column: 1/13;
        grid-row: 2;
        margin-top: 45rem;
    }

    .why-images,
    .companies-text {
        grid-row: 3;
    }

    .beneficiaries-logos {
        margin-right: 0;
        flex-direction: column;
        gap: 70rem;
    }
}

@media (max-width: 500px) {
    .why-images {
        flex-direction: column;
    }
}