@import url("../base/base.css");
@import url("../base/text-content.css");
@import url("../base/utilities.css");
@import url("../layout/header.css");
@import url("../layout/hero.css");
@import url("../layout/grid.css");
@import url("../components/card.css");
@import url("../components/dropdown.css");
@import url("../layout/programme.css");
@import url("../components/sidebar.css");
@import url("../components/popup.css");
@import url("../components/popup-chall.css");
@import url("../components/popup-theme.css");
@import url("../components/slider.css");
@import url("../components/signupform.css");
@import url("../media/mediaAbout.css");


.hero-about-section {
    padding-bottom: 6rem;
}

.mission {
    position: relative;
    margin-top: 8rem;
    filter: drop-shadow(0px 24.7px 65.46px #47ace6);
}

.mission-statement {
    font-size: 4.5rem;
    font-family: 'Merriweather', serif;
    color: #fff;
    /* text-transform: capitalize; */
    font-weight: 700;
    line-height: 8.2rem;
}

.missionsvg-up {
    width: 3rem;
    position: absolute;
    top: 0;
    left: -1rem;
}

.missionsvg-down {
    width: 3rem;
    position: absolute;
    bottom: 0;
    right: 0rem;
}


/*benefits*/

.benefits {
    margin-bottom: 20rem;
}

.benefit-icon {
    /* width: 7.4rem; */
    width: 8.2rem;
    margin-bottom: 1.5rem;
}

.benefit-title {
    font-size: 1.8rem;
    font-family: 'Merriweather', serif;
    color: #fff;
    font-weight: 700;
}

.benefit-details {
    font-size: 1.6rem;
    color: #fff;
    line-height: 2.5rem;
    margin-top: 1.5rem;
}

.colF1ben {
    flex: 0 0 20%;
    max-width: 20%;
}

.colF2ben {
    flex: 0 0 80%;
    max-width: 80%;
}

.benefit {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/**story**/

.story {
    margin-bottom: 20rem;
}

.heading-story {
    font-size: 2.2rem;
    font-family: 'Merriweather', serif;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
}

.seperator-white {
    display: block;
    height: .3rem;
    margin: 2rem 0;
    width: 16rem;
    background-color: #fff;
}

.story-details {
    font-size: 1.8rem;
    color: #fff;
    width: 46%;
}

.asc-logo {
    margin-top: -8rem;
    width: 40%;
}


/** Team**/

.team {
    margin-bottom: 20rem;
}

.team-details {
    font-size: 1.8rem;
    color: #fff;
}

.member {
    position: relative;
    padding: 1.5rem;
    /* filter: grayscale(100%); */
}

.teamsvg-up {
    width: 3rem;
    position: absolute;
    top: 0;
    left: 0;
}

.teamsvg-down {
    width: 3rem;
    position: absolute;
    bottom: 1rem;
    right: 0;
}

.members {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.member-text {
    /* margin-top: 2rem; */
    text-align: center;
}

.team-img {
    width: 15rem;
    height: 15rem;
    filter: grayscale(100%);
    object-fit: cover;
}

.heading-member {
    color: #fff;
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: .1rem;
    font-size: 1.5rem;
    margin-bottom: .5rem;
    margin-top: 1rem;
}

.role-text {
    color: #fff;
    font-weight: 400;
    line-height: 3rem;
    font-size: 1.4rem;
    letter-spacing: .1rem;
    text-transform: capitalize;
}

.socialink-icon {
    margin-top: 1rem;
    /* font-size: 1.5rem; */
    width: 2rem;
    color: #fff;
}

.seperator-small {
    display: inline-block;
    height: .3rem;
    /* margin: 1.5rem 0; */
    width: 5rem;
    background-color: #fff;
}

.footerabout {
    margin-top: 10rem;
    background-color: #072249;
}


/**sidebar**/

.select-heading {
    font-size: 1.8rem;
    font-family: 'Merriweather', serif;
    text-transform: capitalize;
    color: var(--color-text);
    font-weight: 700;
    padding-top: 1rem;
}

.side-content {
    padding: 2rem 4rem
}

.droits {
    font-size: 1.4rem;
    line-height: 2.7rem;
}

.icon-social {
    width: 2rem;
    margin-right: 2rem;
}


/***end sidebar**/


/** global numbers and media coverage***/

.number {
    font-size: 4.8rem;
    color: #000;
    margin-bottom: 3rem;
    text-align: center;
}

.plus {
    font-size: 6.5rem;
    color: #fff;
    margin-bottom: 3rem;
}

.board {
    display: flex;
    gap: 2rem;
}

.heading-sptheme {
    font-size: 1.3rem;
    text-transform: capitalize;
    color: #000;
    font-weight: 700;
}

.ascfigures {
    margin-bottom: 20rem;
}

.media-coverage {
    margin-bottom: 10rem;
}

.media {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: all .3s;
    filter: grayscale(50%);
}

.media-logo2 {
    width: 10rem;
    justify-self: center;
}

.media:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    border-radius: 50%;
    /* background: #fff; */
}

.social-presence {
    margin-bottom: 20rem;
}

.social-details {
    font-size: 1.8rem;
    color: #fff;
    display: inline-block;
    margin-top: 1rem;
}

.about-social {
    margin-left: 3rem;
    display: inline-flex;
    gap: 3rem;
    /* display: inline-block; */
}

.about-icon {
    color: white;
    /* margin-right: 2rem; */
    font-size: 2.5rem;
}

.about-icon:hover {
    color: var(--color-secondary);
}