.banner {
    background: url(../images/hero-about.jpg) no-repeat; background-size: cover;
    height: 80%; display: flex; align-items: center; justify-content: center;
    .title {
        h1 {
            font-size: 70px; font-family: SemiBold;
            color: #fff; line-height: 86px; text-align: center;
        }
    }
}

.accordion-section {
    background: #fff;
    border-radius: 58px;
    width: 100%;
    margin-top: -50px;
    text-align: center;
    padding-top: 100px;

    .heading {
        text-transform: uppercase;
        .icon {max-width: 106px; margin: 0 auto 20px; img {width: 100%;}}
        h3 {font-size: 32px; color: var(--themeGreen); font-family: SemiBold;}
        h5 {font-size: 22px; color: var(--themeGreen); font-family: Regular;}
    }
}

.our-mission {
    background: var(--lightGreenV2);
    padding: 150px 0px;
    border-radius: 58px 58px 0px 0px;
    margin-top: 140px;

    .our-mission-cont {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .col-left {
        display: flex; flex-direction: column; gap: 30px;
        .title-img {margin-top: 30px;}
    }
    .col-right {
        display: flex; flex-direction: column; gap: 30px;
        .title-img {margin-bottom: 30px;}
    }

    .header {
        display: flex; align-items: center; gap: 15px;
        h3 {color: var(--themeGreenV2); font-size: 30px; font-family: SemiBold; text-transform: uppercase;}
        img {width: 50px;}
    }
    p {font-size: 18px;}
    .title-img {width: 100%;}
}

.team-section {
    padding: 120px 0px;
    h2 {
        color: var(--themeGreenV2); font-size: 32px;
        text-transform: uppercase; text-align: center;
        font-family: SemiBold;
    }

    .team-list {
        margin-top: 80px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 34px;

        .member {
            margin-bottom: 20px;
            .img {margin-bottom: 12px; img{width: 100%;}}
            h4 {font-family: SemiBold; font-size: 18px; text-transform: uppercase;}
            h5 {color: var(--lightGreen); font-size: 16px; text-transform: uppercase;}
            .region {color: var(--textGrey); font-size: 14px; font-family: Regular;}
        }
    }
}

.our-story {
    background: var(--bgGrey);
    padding: 120px 0px;

    h2 {
        color: var(--themeGreenV2); font-size: 32px;
        text-transform: uppercase; text-align: center;
        font-family: SemiBold;
    }

    .story {
        margin-top: 80px;
        position: relative;
        background: #d3eacb94;
        color: var(--themeGreenV2);
        border-radius: 20px;
        float: right;
        max-width: 60%;
        font-size: 18px;
        font-family: Bold;
        padding: 20px 40px;
        z-index: 1;

        .quote {
            width: 100px;
            position: absolute;
            left: -70px;
            top: -30px;
        }
    }

    .story-full {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        width: 100%;
        position: relative;
        top: -65px;

        .img {border-radius: 50px; position: relative; overflow: hidden;}

        .msg {
            align-self: end;
        }
    }
}

.why-us {
    padding: 120px 0px; margin-bottom: 120px;
    h2 {
        color: var(--themeGreenV2); font-size: 32px;
        text-transform: uppercase; text-align: center;
        font-family: SemiBold;
    }
    .points {
        display: flex; gap: 80px;
        background: url(../images/path.png) no-repeat;
        background-size: contain;
    }
    .point {
        display: flex; flex-direction: column; gap: 12px; align-items: center;
        justify-content: flex-start; position: relative; max-width: 245px;
        .icon {
            max-width: 120px; background: #fff;
            border-radius: 100%; padding: 35px;
        }
        h3 {font-size: 16px;}
        p {font-size: 14px; text-align: center;}

        &.p-1 {top: 88px; left: 40px;}
        &.p-2 {top: 128px; left: 35px;}
        &.p-3 {top: 68px; left: 20px;}
        &.p-4 {top: -42px;}
    }
}

.partners {
    background: var(--themeGreenV2);
    color: #ffffff; padding: 90px 0px 110px;
    .heading-section {
        margin-bottom: 50px;
        h2 {
            font-size: 32px; color: #fff;
            text-transform: uppercase; text-align: center;
            font-family: SemiBold;
        }
    }

    .logos {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 60px 0px 110px;
        padding: 0px 40px;

        img {max-width: 100px; max-height: 50px;}
    }

    .become-investor {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 0.4fr;
        background: linear-gradient(180deg, #1D9190 0%, #02625E 100%);
        mix-blend-mode: normal; justify-content: center;
        padding: 0px 70px; border-radius: 20px;

        .content-box {
            border-radius: 20px; display: flex; flex-direction: column;
            max-width: 460px; justify-content: center;

            h2 {font-size: 32px; font-family: SemiBold; text-align: left; line-height: 42px;}
            p {font-size: 14px; padding: 20px 0px;}
            a {
                background: var(--lightGreen); border-radius: 60px;
                font-family: SemiBold; font-size: 16px;
                padding: 5px 25px; color: #fff; max-width: fit-content;
            }
        }
        .img-full {
            margin: -65px -110px -65px 0px;
        }
    }
}

@media screen and (max-width: 1440px) {
    html, body {zoom: 0.95;}
}

@media screen and (max-width: 1200px) {
    html, body {zoom: 0.88;}
}

@media (max-width: 960px) {
    .why-us {
        .points {
            display: grid;
            gap: 30px;
            grid-template-columns: 1fr 1fr;
            background: none;
        }

        .point {top: 0px !important; left: 0px !important; justify-self: center;}
    }

    .accordion-wrapper .accordion-item {
        flex-direction: column; gap: 10px;
        position: relative;
        .right {margin-left: 0;}
        .toggle {position: absolute; right: 0; width: 28px;}
    }
}

@media (max-width: 860px) {
    .footer {
        .upper {
            flex-direction: column;
            align-items: center;
            text-align: center;

            .foo-logo {margin: 0 auto 15px;}
        }

        .lower {
            justify-content: center;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
    }

    .team-section {
        .team-list {
            grid-template-columns: 1fr 1fr;
            margin-top: 50px;
        }
    }

    .our-story {
        h2 {line-height: 42px;}
    }

    .why-us {
        .point {
            h3 {
                font-size: 16px;
                text-align: center;
            }
        }
    }

    .our-mission {
        padding: 60px 0px;
        .our-mission-cont {
            grid-template-columns: 1fr;
            padding: 0px 30px;
            gap: 50px;
        }

        .col-right {
            .header {order: 1;}
            p {order: 2;}
            .title-img {order: 3;}
        }

        .col-left {
            .title-img {margin: 0;}
        }

        .title-img {
            max-width: 500px;
            margin: auto;
        }
    }

    .our-story {
        .story {
            max-width: 100%;
            .quote {left: 0px; top: -50px;}
        }
        .story-full {top: 30px; grid-template-columns: 1fr; gap: 30px;}
    }

    .partners {
        .become-investor {
            grid-template-columns: 1fr;
            padding-bottom: 80px;

            .content-box {
                order: 2; max-width: 100%; align-items: center;
                h2 {text-align: center; font-size: 24px; line-height: 32px;}
                p {text-align: center; font-size: 16px;}
                a {font-size: 18px; padding: 10px 28px;}
            }
            .img-full {order: 1; margin: 0;}
        }
    }
}

@media (max-width:660px) {
    .logo {width: 60px; img {width: 100%;}}
    .navigation {
        li {
            list-style-type: none;
            display: inline-block;
            font-size: 13px;
            padding: 0px 6px;
        }
    }

    .banner .title h1 {
        font-size: 40px;
        line-height: 48px;
    }
}