@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700;900&display=swap');
@import 'animate.css';


.full-page {
    background-color: #581CB0;
}
.top-crumb-margin {
    position: absolute;
    top: 12vh;
    background-color:#581CB0;
    z-index: 9;
}

.bcW {
    color: #FFFFFF !important;
}
html {
    background-color: #581CB0;
    scroll-snap-type: y mandatory;
    scroll-padding-top: 10vh;
}


.first-page-container {
    background-color: #581CB0;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100vw;
    height: 92vh;
    z-index: 4;
    scroll-snap-align:start;
    scroll-snap-stop:always;
}

.title-description-button-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.header-container {
    background-color: #581CB0;
}

.sc-header-title {
    font-family: Segoe UI;
    color: #DACAFF;
    opacity: 1;
    font-size: 1.875rem;
    margin-top: 12vh;
    font-weight: 400;
}

.header-description-container {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 75%;
}

.header-description {
    font-size: 5.625rem;
    font-family: Montserrat;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    line-height: 12vh;
    text-align: center;
    font-weight: 700;
}

.download-icon-container {
    background-color: red;
    z-index: 7;
}

.download-btns-container {
    display: flex;
    flex-direction: row;
    width: 58vw;
    align-items: flex-start;
    justify-items: center;
    justify-content: space-around;
    margin-top: 1vh;
}

.download-text {
    text-align: left;
    font-family: 'Segoe UI';
    letter-spacing: 0px;
    color: #581CB0;
    opacity: 1;
}

.relatory-btn-text-style {
    font-size: 1.25rem;
    color: #581CB0;
    border-radius: 0.5rem;
    border-color: #FFFFFF;
    height: 6vh;
    outline: none;
    border-style: none;
    background-color: #F4F4F4;
}

.download-icon-resize {
    height: 3vh;
    width: 2vw;
}

.hand-with-heart-container {
    position: absolute;
    top: 28vh;
    left: 12.5vw;
    z-index: 1;
}

.hand-with-heart-resize {
    width: 55vw;
    height: 55vh;
}

.strategy-image-mask {
    background-color: #581CB0;
    height: 15vh;
    width: 60vw;
    position: absolute;
    z-index: 1;
    top: -15vh;
    left: 25vw;
}

.strategy-page-container {
    background-color: #FFFFFF;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 3;
    height: 92vh;
    width: 100vw;
    scroll-snap-align: start;
    scroll-snap-stop:always;
}

.strategy-header-description-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    right: 0;
    left: 0;
    position: absolute;
    z-index: 3;
}

.strategy-title-icon-container {
    display: flex;
}

.strategy-title-icon-resize {
    width: 1vw;
    height: auto;
    position: absolute;
    top: 5.3vh;
    left: -3vh;
}

.strategy-title {
    text-align: left;
    letter-spacing: 0px;
    color: #3F3F3F;
    text-transform: uppercase;
    line-height: 12vh;
    font-family: 'Segoe UI';
    font-weight: bold;
    font-size: 1.875rem;
}

.pink {
    color: #EA297B;
}

.white {
    color: #FFFFFF !important;
}


.red {
    color: #FF0000;
}

.strategy-title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    position: absolute;
    top: 15vh;
    z-index: 2;
}

.strategy-course-description-container {
    position: absolute;
    top: 30vh;
    z-index: 2;
}

.strategy-course-description-text {
    text-align: left;
    letter-spacing: 0px;
    line-height: 4.2vh;
    color: #1A1A1A;
    font-family: Montserrat;
    font-size: 2.5rem;
}

.strategy-course-description-second-text {
    text-align: left;
    letter-spacing: 0px;
    color: #1A1A1A;
    line-height: 5vh;
    font-family: Montserrat;
    font-size: 2.5rem;
}

.strategy-images {
    height: 92vh;
    width: 100vw;
}

.strategy-course-image-container {
    position: absolute;
    left: 6vw;
    z-index: -1;
    top: -9vh;
}

.strategy-course-image-resize {
    height: 110vh;
    width: 95vw;
}

.strategy-course-shredded-circle-container {
    position: absolute;
    right: 4vh;
    z-index: 2;
}

.shredded-circle-resize {
    height: 26vh;
}


.strategy-course-full-circle-container {
    position: absolute;
    bottom: 2vh;
    left: -1vw;
    z-index: 2;
}

.full-circle-resize {
    height: 33vh;
    width: auto;
}

.strategy-bottom-arrow-container {
    position: absolute;
    bottom: 6vh;
    left: 20vw;
}

.bottom-arrow-resize {
    width: 45vw;
}

.strategy-course-empty-circle-container {
    position: absolute;
    bottom: -8vh;
    right: 10vw;
    z-index:1;
    overflow:hidden;
}
.empty-circle-mask {
    position: absolute;
    right: 11vw;
    bottom:-10vh;
    z-index:2;
    background-color:#FFFFFF;
    width: 18vw;
    height: 10vh;
}

.empty-circle-resize {
    width: 33vh;
    overflow:hidden;
}

.strategy-course-right-arrow-container {
    position: absolute;
    right: 5vw;
    bottom: 28vh;
    z-index: 2;
}

.right-arrow-resize {
    height: 35vh;
}

.sdo-page-container {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    z-index: 2;
    height: 92vh;
    width: 100vw;
    scroll-snap-align: start;
    scroll-snap-stop:always;
}

.sdo-title-description-priority-icon {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 92vh;
    width: 100vw;
}

.sdo-title-container {
    z-index: 2;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.sdo-title-icon-container {
    z-index: 2;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.sdo-title-icon-resize {
    height: 2.5vh;
    width: auto;
}

.sdo-title {
    text-align: left;
    color: #3F3F3F;
    text-transform: uppercase;
    opacity: 100;
    line-height: 5vh;
    font-family: 'Segoe UI';
    font-weight: bold;
    font-size: 1.875rem;
    margin-bottom: 0;
    margin-left: 0.5vw;
}

.sdo-description-container {
    width: 60%;
    z-index: 2;
}

.sdo-description {
    letter-spacing: 0px;
    line-height: 9vh;
    color: #000000;
    font-size: 4.375rem;
    font-weight: 900;
    font-family: Montserrat;
    text-transform: uppercase;
    text-align: center;
    overflow-wrap: break-word;
}

.sdo-image-container {
    top: 40vh;
    z-index: 2;
}

.sdo-image-resize {
    height: 15vh;
    width: 15vw;
    margin-top: 2vh;
    margin-bottom: 2vh;
}

.test123 {
    width: 8vw;
    margin-top: -2vh;
}

.test1234 {
    margin-top: 2vh;
    width: 8vw;
}

.sdo-icon-container {
    display: flex;
    flex-direction: row;
    z-index: 4;
    align-items: center;
    justify-content: center;
}

.sdo-priority-text {
    opacity: 1;
    font-weight: 800;
    font-family: Montserrat;
    font-size: 1.875rem;
    margin-bottom: 0;
    margin-left: 0.5vw;
}


.sdo-icon-resize {
    height: 3vh;
}

.sdo-images {
    height: 92vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cursor {
    cursor: pointer;
}

.no-svg-click {
    pointer-events: none;
}

.hand-clickable {
    pointer-events: painted;
}

.sdo-top-left-purple-circle-container {
    position: absolute;
    z-index: -2;
    top: -5vh;
    left: -4vh;
}

.top-left-purple-circle-resize {
    height: 28vh;
    width: auto;
}

.sdo-bottom-left-circle-container {
    position: absolute;
    z-index: 2;
    top: 84vh;
    left: -20vh;
}

.sdo-bottom-left-circle-resize {
    height: 20vh;
    width: 20vw;
}

.sdo-centered-circles-container {
    position: absolute;
    z-index: -2;
    display: flex;
    top: 10vh;
}

.sdo-centered-circles-resize {
    height: 75vh;
    width: 75vw;
}

.sdo-top-right-purple-circle-container {
    position: absolute;
    overflow:hidden;
    right: -2vw;
    top: -10vh;
    z-index:-9;
}

.sdo-top-right-purple-circle-resize {
    height: 20vh;
    width: 16vw;
}

.sdo-purple-star-container {
    position: absolute;
    bottom: -18vh;
    left: 5vw;
    z-index: 5;
}

.sdo-purple-star-resize {
    height: 31vh;
    width: 31vw;
}

.sdo-small-bottom-circle-container {
    position: absolute;
    bottom: 5vh;
    left: 35vw;
}

.sdo-small-bottom-circle-resize {
    height: 12vh;
    width: 12vw;
}

.sdo-right-bottom-circle-container {
    position: absolute;
    bottom: -5vh;
    right: -3vw;
}

.sdo-right-bottom-circle-resize {
    height: 32vh;
    width: 32vw;
}

.pink-gender-left-hand-container {
    position: absolute;
    left: -2vw;
    top: 5vh;
}

.pink-gender-left-hand-resize {
    height: 25vh;
    width: 25vw;
}

.purple-gender-left-hand-container {
    pointer-events: none;
    position: absolute;
    left: -3vw;
    top: 5vh;
}

.purple-gender-left-hand-resize {
    pointer-events: painted;
    height: 25vh;
    width: 25vw;
}

.pink-health-left-hand-container {
    position: absolute;
    left: -2vw;
    top: 22vh;
}

.pink-health-left-hand-resize {
    height: 18vh;
    width: 18vw;
}

.purple-health-left-hand-container {
    position: absolute;
    left: -3vw;
    top: 22vh;
}

.purple-health-left-hand-resize {
    height: 18vh;
    width: 18vw;
}

.purple-decent-job-left-hand-container {
    position: absolute;
    left: -3vw;
    top: 30vh;
    z-index: 3;
}

.purple-decent-job-left-hand-resize {
    height: 22vh;
    width: 22vw;
}

.pink-decent-job-left-hand-container {
    position: absolute;
    left: -2vw;
    top: 30vh;
    z-index: 3;
}

.pink-decent-job-left-hand-resize {
    height: 22vh;
    width: 22vw;
}

.purple-quality-edc-left-hand-container {
    position: absolute;
    left: -2vw;
    top: 34vh;
}

.purple-quality-edc-left-hand-resize {
    height: 40vh;
    width: 40vh;
}

.pink-quality-edc-left-hand-container {
    position: absolute;
    left: -1vw;
    top: 34vh;
}

.pink-quality-edc-left-hand-resize {
    height: 40vh;
    width: 40vh;
}

.purple-partners-left-hand-container {
    position: absolute;
    left: -3vw;
    top: 51vh;
}

.purple-partners-left-hand-resize {
    height: 30vh;
    width: 30vh;
}

.pink-partners-left-hand-container {
    position: absolute;
    left: -2vw;
    top: 51vh;
}

.pink-partners-left-hand-resize {
    height: 30vh;
    width: 30vh;
}

.purple-industry-inovation-left-hand-container {
    position: absolute;
    left: -3vw;
    top: 61vh;
}

.purple-industry-inovation-left-hand-resize {
    height: 25vh;
    width: 25vw;
}

.pink-industry-inovation-left-hand-container {
    position: absolute;
    left: -2vw;
    top: 61vh;
}

.pink-industry-inovation-left-hand-resize {
    height: 25vh;
    width: 25vw;
}


.pink-inequalities-reduction-right-hand-container {
    position: absolute;
    right: -2vw;
    top: 5vh;
}

.pink-inequalities-reduction-right-hand-resize {
    height: 25vh;
    width: 25vw;
}

.purple-inequalities-reduction-right-hand-container {
    position: absolute;
    right: -3vw;
    top: 5vh;
    z-index:2;
}

.purple-inequalities-reduction-right-hand-resize {
    height: 25vh;
    width: 25vw;
}

.pink-renewable-energy-right-hand-container {
    position: absolute;
    right: -1vw;
    top: 22vh;
}

.pink-renewable-energy-right-hand-resize {
    height: 18vh;
    width: 18vw;
}

.purple-renewable-energy-right-hand-container {
    position: absolute;
    right: -2vw;
    top: 22vh;
}

.purple-renewable-energy-right-hand-resize {
    height: 18vh;
    width: 18vw;
}

.purple-sustentable-right-hand-container {
    position: absolute;
    right: -3vw;
    top: 32vh;
    z-index: 3;
}

.purple-sustentable-right-hand-resize {
    height: 22vh;
    width: 22vw;
}

.pink-sustentable-right-hand-container {
    position: absolute;
    right: -2vw;
    top: 32vh;
    z-index: 3;
}

.pink-sustentable-right-hand-resize {
    height: 22vh;
    width: 22vw;
}

.purple-peace-justice-right-hand-container {
    position: absolute;
    right: -2vw;
    top: 40vh;
}

.purple-peace-justice-right-hand-resize {
    height: 30vh;
    width: 30vh;
}

.pink-peace-justice-right-hand-container {
    position: absolute;
    right: -1vw;
    top: 40vh;
}

.pink-peace-justice-right-hand-resize {
    height: 30vh;
    width: 30vh;
}

.purple-cities-comunities-right-hand-container {
    position: absolute;
    right: -0vw;
    top: 53vh;
}

.purple-cities-comunities-right-hand-resize {
    height: 25vh;
    width: 25vh;
}

.pink-cities-comunities-right-hand-container {
    position: absolute;
    right: 0.5vw;
    top: 53vh;
}

.pink-cities-comunities-right-hand-resize {
    height: 25vh;
    width: 25vh;
}

.purple-climate-action-right-hand-container {
    position: absolute;
    right: -3vw;
    top: 59vh;
}

.purple-climate-action-right-hand-resize {
    height: 25vh;
    width: 25vw;
}

.pink-climate-action-right-hand-container {
    position: absolute;
    right: -2vw;
    top: 59vh;
}

.pink-climate-action-right-hand-resize {
    height: 25vh;
    width: 25vw;
}

.our-project-page-container {
    background-color: #FFFFFF;
    display: flex;
    z-index: 1;
    position: relative;
    width: 100vw;
    height: 92vh;
    scroll-snap-align: start;
    scroll-snap-stop:always;
}

.our-project-title-description-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 92vh;
    width: 100vw;
}

.our-project-title-container {
    position: absolute;
    top: 10vh;
}

.our-project-title {
    text-align: left;
    letter-spacing: 0px;
    line-height: 5vh;
    opacity: 1;
    color: #3F3F3F;
    font-weight: 650;
    font-family: 'Segoe UI';
    font-size: 1.875rem;
}

.our-project-title-icon-container {
    position: absolute;
    left: -3vw;
}

.our-project-title-icon-resize {
    width: 2.5vw;
    height: auto;
}

.page4-texts-container {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 8;
    flex-wrap: wrap;
    width: 93%;
    height: 70%;
    top:17vh;
}

.page4-texts {
    text-align: left;
    letter-spacing: 0px;
    font-weight: 900;
    font-family: Montserrat;
    font-size: 2.5rem;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.our-project-images {
    height: 92vh;
    width: 100vw;
    display: flex;
    z-index: 1;
    flex-direction: column;
    align-items: center;
}

.soft-purple-star-container {
    position: absolute;
}

.white-and-purple-star-container {
    position: absolute;
    right: -8vw;
    top: -13.5vh;
    z-index: 9;
}

.white-and-purple-star-resize {
    height: 35vh;
    width: 35vw;
}

.purple-line-container {
    position: absolute;
    z-index: -1;
}

.purple-line-resize {
    height: 100vh;
    width: 100vw;
}

.pink-hover:hover {
    color: #FF008D;
}

.our-impact-page-container {
    display: flex;
    z-index: 1;
    position: relative;
    scroll-snap-align: center;
}

.our-impact-title-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 92vh;
    width: 100vw;
    background-color: #581CB0;
    z-index: 2;
}

.our-impact-title-container {
    position: absolute;
    top: 8vh;
}

.our-impact-title-text {
    text-align: left;
    letter-spacing: 0px;
    line-height: 5vh;
    opacity: 1;
    color: #FFFFFF;
    font-weight: 650;
    font-family: 'Segoe UI';
    font-size: 1.875rem;
}

.our-impact-title-icon-container {
    position: absolute;
    left: -2vw;
    top: 1.5vh;
}

.our-impact-title-icon-resize {
    height: 2.5vh;
    width: auto;
}

.our-impact-images {
    width: 100vw;
    height: 92vh;
}

.soft-purple-left-rectangle-container {
    position: absolute;
    z-index: 2;
    left: -9vw;
    top: -2vh;
}

.soft-purple-left-rectangle-resize {
    height: 25vh;
    width: 25vw;
}

.soft-purple-middle-rectangle-container {
    position: absolute;
    z-index: 2;
    top: -4vh;
    right: 33vw;
}

.soft-purple-middle-rectangle-resize {
    height: 20vh;
    width: 20vw;
    transform: rotateZ(-110deg);
}

.soft-purple-right-rectangle-container {
    position: absolute;
    z-index: 2;
    bottom: -1vh;
    right: -9vw;
}

.soft-purple-right-rectangle-resize {
    height: 25vh;
    width: 22vw;
    transform: rotateZ(-40deg);
}

.our-impact-images-description-container {
    position: absolute;
    top: 30vh;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    z-index: 5;
    width: 100vw;
}

.our-impact-images-description-text {
    text-align: center;
    letter-spacing: 0px;
    line-height: 7vh;
    opacity: 1;
    color: #FFFFFF;
    font-weight: 900;
    font-family: Montserrat;
    font-size: 3.125rem;
}

.our-impact-people-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 25vw;
}

.our-impact-people-image-resize {
    height: 30vh;
    width: 30vw;
    margin-bottom: 8vh;
}

.our-impact-community-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 25vw;
}

.our-impact-community-image-resize {
    height: 30vh;
    width: 30vw;
    margin-bottom: 8vh;
}

.our-impact-environment-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 25vw;
}

.environment-after-click-icons-resize {
    height: 5vh;
    width: auto;
}

.our-impact-environment-image-resize {
    height: 30vh;
    width: 30vw;
    margin-bottom: 8vh;
}

.our-impact-ethic-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25vw;
}

.our-impact-ethics-image-resize {
    height: 30vh;
    width: 30vw;
    margin-bottom: 10vh;
}


.impact-purple-splash-container {
    position: absolute;
    z-index: 9;
    bottom: -15.5vh;
}

.impact-purple-splash-resize {
    width: 28vw;
    height: 28vh;
}

.etic-container {
    width: 90%;
    margin-top: -4vh;
    margin-bottom: -5vh;
}

.clickable-impacts-text {
    letter-spacing: 0px;
    line-height: 5vh;
    opacity: 1;
    color: #FFFFFF;
    font-weight: 500;
    font-family: 'Montserrat';
    font-size: 1.5625rem;
    margin-bottom: 0vh;
}

.center-goback-arrow-margin {
    justify-content: space-around;
}

.people-top-icon-resize {
    height: 90%;
    width: 90%;
}

.people-left-middle-icon-resize {
    height: 80%;
    width: 80%;
}

.people-left2-middle-icon-resize {
    height: 80%;
    width: 80%;
    margin-left: -1vh;
    margin-top: 1vh;
}

.people-right-middle-icon-resize {
    height: auto;
    width: 80%;
}

.people-first-impact-square {
    position: absolute;
    top: 5vh;
    left: 31vw;
}

.people-first-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(74deg);
}

.people-second-impact-square {
    position: absolute;
    top: 23.5vh;
    left: 27vw;
}

.people-second-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(43deg);
}

.people-third-impact-square {
    position: absolute;
    bottom: 27.5vh;
    left: 26.5vw;
}

.people-third-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(74deg);
}

.people-fourth-impact-square {
    position: absolute;
    bottom: 9vh;
    left: 31.2vw;
}

.people-fourth-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(22deg);
}

.people-fifth-impact-result {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
    margin-top: -8vh;
}

.people-sixth-impact-result {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
    margin-top: -10vh;
}

.people-seventh-impact-result {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
    margin-top: -12vh;
}

.impact-side-rows {
    height: 85vh;
    width: 40vw !important;
}

.center-row {
    width: 20vw;
}

.nomargin {
    margin-bottom: 0vh !important;
    flex-direction: row;
}

.clicked-people-impact-container {
    display: flex;
    flex-direction: row;
    z-index: 10;
    position: absolute;
    top: 14vh;
    width: 100vw;
}

.people-first-impact-text {
    margin-left: 2vw;
    margin-bottom: -3.5vh;
}

.people-second-impact-text {
    margin-left: 8vw;
    margin-bottom: -3.5vh;
}

.people-second-impact-text-reversed {
    margin-left: 4vw;
    margin-top: -4vh;
}

.people-third-impact-text {
    margin-left: 4vw;
    margin-bottom: -4.5vh;
}

.people-fourth-impact-text {
    margin-left: 4vw;
    margin-bottom: -3.5vh;
}

.people-fifth-impact-text {
    margin-right: 4vw;
    margin-bottom: -3.5vh;
}

.people-sixth-impact-text {
    margin-right: 8vw;
    margin-bottom: -3.5vh;
}

.people-sixth-impact-text-reversed {
    margin-right: 8vw;
    margin-top: -3.5vh;
}

.people-seventh-impact-text {
    margin-right: 8vw;
    margin-bottom: -3.5vh;
}

.cpic-left-images-and-description {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top: -3vh;
}

.cpic-center-images-and-description {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 2vh;
}

.centered-people-image-and-description {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: -8vh;
}

.cpic-right-images-and-description {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.people-fifth-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(24deg);
}

.people-fifth-impact-square {
    position: absolute;
    top: 12vh;
    right: 31vw;
}

.people-sixth-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(89deg);
}

.people-sixth-impact-square {
    position: absolute;
    top: 32vh;
    right: 27vw;
}

.people-seventh-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(63deg);
}

.people-seventh-impact-square {
    position: absolute;
    bottom: 18vh;
    right: 31vw;
}

.clicked-community-impact-container {
    display: flex;
    flex-direction: row;
    z-index: 10;
    position: absolute;
    top: 14vh;
    width: 100vw;
}

.ccic-left-images-and-description {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top: -3vh;
}

.community-left-top-icon-resize {
    height: 90%;
    width: 90%;
}

.community-left-middle-icon-resize {
    height: 83%;
    width: 83%;
}

.community-first-impact-square {
    position: absolute;
    top: 5vh;
    left: 31vw;
}

.community-first-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(74deg);
}

.community-first-impact-text {
    margin-left: 5vw;
    margin-bottom: -4vh;
}

.community-first-impact-text-reversed {
    margin-left: 1.5vw;
    margin-top: -4vh;
}

.community-second-impact-text {
    margin-left: 5vw;
    margin-bottom: -3.5vh;
}

.community-second-impact-text-reversed {
    margin-left: 9vw;
    margin-top: -4vh;
}

.community-third-impact-text {
    margin-left: 5vw;
    margin-bottom: -3.5vh;
}

.community-third-impact-text-reversed {
    margin-left: 6.5vw;
    margin-top: -4.5vh;
}

.community-fourth-impact-text {
    margin-left: 7vw;
    margin-bottom: -3.5vh;
}

.community-fifth-impact-text {
    margin-right: 8vw;
    margin-bottom: -3.5vh;
}

.community-fifth-impact-text-reversed {
    margin-right: 9vw;
    margin-top: -4vh;
}

.community-sixth-impact-text {
    margin-right: 6vw;
    margin-bottom: -3.5vh;
}

.community-sixth-impact-text-reversed {
    margin-right: 8vw;
    margin-top: -3.5vh;
}

.community-seventh-impact-text {
    margin-right: 8vw;
    margin-bottom: -3.5vh;
}

.community-seventh-impact-text-reversed {
    margin-right: 8vw;
    margin-top: -4vh;
}

.community-fifth-impact-result {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
    margin-top: -8vh;
}

.community-sixth-impact-result {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
    margin-top: -10vh;
}

.community-seventh-impact-result {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
    margin-top: -12vh;
}

.community-second-impact-square {
    position: absolute;
    top: 23.5vh;
    left: 28.5vw;
}

.community-second-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(43deg);
}

.community-third-impact-square {
    position: absolute;
    bottom: 28vh;
    left: 28vw;
}

.community-third-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(74deg);
}

.community-fourth-impact-square {
    position: absolute;
    bottom: 9vh;
    left: 31vw;
}

.community-fourth-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(22deg);
}

.ccic-center-images-and-description {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 2vh;
}

.our-impact-community-image-resize {
    height: 30vh;
    width: 30vw;
    margin-bottom: 8vh;
}

.centered-community-image-and-description {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: -8vh;
}

.centered-image-after-click-resize {
    height: 32vh;
    width: auto;
    margin-bottom: -10vh;
    margin-top: 15vh;
}

.community-top-icon-resize {
    height: 90%;
    width: 90%
}

.ccic-right-images-and-description {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
}

.community-right-middle-icon-resize {
    height: auto;
    width: 100%;
}

.community-fifth-impact-square {
    position: absolute;
    top: 11.5vh;
    right: 31vw;
}

.community-fifth-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(20deg);
}

.community-sixth-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(89deg);
}

.community-sixth-impact-square {
    position: absolute;
    top: 32vh;
    right: 27vw;
}

.community-seventh-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(90deg);
}

.community-seventh-impact-square {
    position: absolute;
    bottom: 18.5vh;
    right: 30.8vw;
}

.clicked-environment-impact-container {
    display: flex;
    flex-direction: row;
    z-index: 10;
    position: absolute;
    top: 14vh;
    width: 100vw;
}

.ceic-left-images-and-description {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top: -3vh;
}

.environment-left-top-icon-resize {
    height: 90%;
    width: 90%;
}

.environment-left-middle-icon-resize {
    height: 80%;
    width: 80%;
}

.environment-first-impact-square {
    position: absolute;
    top: 5vh;
    left: 30vw;
}

.environment-first-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(-1deg);
}

.environment-first-impact-text {
    margin-left: 7vw;
    margin-bottom: -2.5vh;
}

.environment-first-impact-text-reversed {
    margin-left: 8vw;
    margin-top: -4.5vh;
}

.environment-second-impact-text {
    margin-left: 9vw;
    margin-bottom: -3.5vh;
}

.environment-second-impact-text-reversed {
    margin-left: 5.5vw;
    margin-top: -4vh;
}

.environment-third-impact-text {
    margin-left: 5vw;
    margin-bottom: -3vh;
}

.environment-fourth-impact-text {
    margin-left: 5vw;
    margin-bottom: -4vh;
}

.environment-fourth-impact-text-reversed {
    margin-left: 7vw;
    margin-top: -4.5vh;
}

.environment-fifth-impact-text {
    margin-right: 2vw;
    margin-bottom: -3.5vh;
}

.environment-fifth-impact-text-reversed {
    margin-right: 4.5vw;
    margin-top: -3.5vh;
}

.environment-sixth-impact-text {
    margin-right: 6vw;
    margin-bottom: -3vh;
}

.environment-sixth-impact-text-reversed {
    margin-right: 8vw;
    margin-top: -3vh;
}

.environment-seventh-impact-text {
    margin-right: 8vw;
    margin-bottom: -3vh;
}

.environment-seventh-impact-text-reversed {
    margin-right: 8vw;
    margin-top: -3vh;
}

.environment-eighth-impact-text {
    margin-right: 4vw;
    margin-bottom: -3vh;
}

.environment-fifth-impact-result {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
}

.environment-sixth-impact-result {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
}

.environment-seventh-impact-result {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
}

.environment-eighth-impact-result {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
}

.environment-second-impact-square {
    position: absolute;
    top: 23.5vh;
    left: 27vw;
}

.environment-second-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(40deg);
}

.environment-third-impact-square {
    position: absolute;
    bottom: 24.5vh;
    left: 27vw;
}

.environment-third-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(-10deg);
}

.environment-fourth-impact-square {
    position: absolute;
    bottom: 7vh;
    left: 30.5vw;
}

.environment-fourth-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(25deg);
}

.ceic-center-images-and-description {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 2vh;
}

.our-impact-environment-image-resize {
    height: 30vh;
    width: 30vw;
    margin-bottom: 8vh;
}

.centered-environment-image-and-description {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: -8vh;
}

.centered-image-after-click-resize {
    height: 32vh;
    width: auto;
    margin-bottom: -10vh;
    margin-top: 15vh;
}

.environment-top-icon-resize {
    height: 90%;
    width: 90%
}

.ceic-right-images-and-description {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top: -3vh;
}

.environment-right-middle-icon-resize {
    height: 80%;
    width: 80%;
}

.environment-right-top-icon-resize {
    height: 90%;
    width: 90%;
}

.environment-fifth-impact-square {
    position: absolute;
    top: 4.5vh;
    right: 30.5vw;
}

.environment-fifth-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(25deg);
}

.environment-sixth-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(80deg);
}

.environment-sixth-impact-square {
    position: absolute;
    top: 23.5vh;
    right: 27vw;
}

.environment-seventh-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(95deg);
}

.environment-seventh-impact-square {
    position: absolute;
    bottom: 24.5vh;
    right: 27vw;
}

.environment-eighth-impact-square {
    position: absolute;
    bottom: 5vh;
    right: 31vw;
}

.environment-eighth-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(-33deg);
}

.our-impact-ethic-image-description-text {
    text-align: center;
    letter-spacing: 0px;
    line-height: 7vh;
    opacity: 1;
    color: #FFFFFF;
    font-weight: 900;
    font-family: 'Segoe UI';
    font-size: 2.2rem;
}

.clicked-ethic-impact-container {
    display: flex;
    flex-direction: row;
    z-index: 10;
    position: absolute;
    top: 14vh;
    width: 100vw;
}

.ethic-top-icon-resize {
    height: 90%;
    width: 90%;
}

.ethic-left-middle-icon-resize {
    height: 80%;
    width: 80%;
}

.ethic-left2-middle-icon-resize {
    height: 80%;
    width: 80%;
    margin-left: -1vh;
    margin-top: 1vh;
}

.ethic-right-middle-icon-resize {
    height: auto;
    width: 100%;
}

.ethic-first-impact-square {
    position: absolute;
    top: 20vh;
    left: 26.7vw;
}

.ethic-first-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(-45deg);
}

.ethic-second-impact-square {
    position: absolute;
    bottom: 26vh;
    left: 27vw;
}

.ethic-second-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(-5deg);
}

.ethic-third-impact-square {
    position: absolute;
    top: 12vh;
    right: 31vw;
}

.ethic-third-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(25deg);
}

.ethic-fourth-impact-square {
    position: absolute;
    top: 33vh;
    right: 27vw;
}

.ethic-fourth-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(-5deg);
}

.ethic-fifth-impact-square {
    position: absolute;
    bottom: 18vh;
    right: 29.5vw;
}

.ethic-fifth-impact-square-resize {
    height: 15vh;
    width: auto;
    transform: rotateZ(-5deg);
}

.ethic-first-impact-result {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    margin-top: -9vh;
}

.ethic-second-impact-result {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    margin-top: -15vh;
}

.ethic-third-impact-result {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
    margin-top: -8vh;
}

.ethic-fourth-impact-result {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
    margin-top: -10vh;
}

.ethic-fifth-impact-result {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
    margin-top: -12vh;
}


.impact-side-rows {
    height: 85vh;
    width: 40vw !important;
}

.center-row {
    width: 20vw;
}

.nomargin {
    margin-bottom: 0vh !important;
    flex-direction: row;
}


.ethic-first-impact-text {
    margin-left: 6vw;
    margin-bottom: -2.5vh;
}

.ethic-first-impact-text-reversed {
    margin-left: 6vw;
    margin-top: -3.5vh;
}

.ethic-second-impact-text {
    margin-left: 6vw;
    margin-bottom: -3.5vh;
}



.ethic-third-impact-text {
    margin-right: 6vw;
    margin-bottom: -3vh;
}

.ethic-third-impact-text-reversed {
    margin-right: 3vw;
    margin-top: -3.5vh;
}

.ethic-fourth-impact-text {
    margin-right: 6vw;
    margin-bottom: -3.5vh;
}

.ethic-fifth-impact-text {
    margin-right: 9vw;
    margin-bottom: -3vh;
}

.cebic-left-images-and-description {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.cebic-center-images-and-description {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 2vh;
}

.centered-ethic-image-and-description {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: -8vh;
}

.cebic-right-images-and-description {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-end;
}

.our-impact-goback-arrow-image-resize {
    height: 7vh;
    margin-bottom: 8vh;
    margin-top: -12vh;
}

.goback-arrow-container {
    position: absolute;
    bottom: 10vh;
    right: 48vw;
}


.our-future-page-container {
    display: flex;
    position: relative;
    scroll-snap-align: end;
    background-color: #FFFFFF;
    width:100vw;
    height:92vh;
    z-index:2vh;
}

.our-future-title-icon-description-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 100vh;
    width: 100vw;
    background-color: #FFFFFF;
}

.our-future-title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    position: absolute;
    top: 15vh;
    z-index: 5;
}

.our-future-title-text {
    text-align: left;
    letter-spacing: 0px;
    color: #3F3F3F;
    text-transform: uppercase;
    opacity: 1;
    line-height: 12vh;
    font-family: 'Segoe UI';
    font-weight: bold;
    font-size: 1.875rem;
}

.our-future-title-icon-container {
    display: flex;
    z-index: 5;
}

.our-future-title-icon-resize {
    width: 1vw;
    height: auto;
    position: absolute;
    top: 5.3vh;
    left: -3vh;
}

.our-future-description-container {
    position: absolute;
    flex-direction: column;
    width: 85%;
    z-index: 5;
    top: 35vh;
}

.our-future-description-text {
    text-align: left;
    letter-spacing: 0px;
    color: #1A1A1A;
    opacity: 1;
    line-height: 5vh;
    font-family: 'Segoe UI';
    font-size: 2.5rem;
    font-weight: 400;
}

.our-future-second-description-container {
    position: absolute;
    top: 55vh;
    z-index: 5;
    width: 85%;
}

.our-future-second-description-text {
    text-align: left;
    letter-spacing: 0px;
    color: #1A1A1A;
    opacity: 1;
    line-height: 5vh;
    font-family: 'Segoe UI';
    font-size: 2.5rem;
    font-weight: 700;
}

.our-future-third-description-container {
    position: absolute;
    z-index: 9;
    right: 4vw;
    bottom:18vh;
}

.our-future-third-description-text {
    text-align: left;
    letter-spacing: 0px;
    color: #1A1A1A;
    opacity: 1;
    line-height: 4vh;
    font-family: 'Segoe UI';
    font-size: 2.5rem;
    font-weight: 700;
}

.our-future-images {
    width: 100vw;
    height: 92vh;
}

.soft-purple-splash-container {
    position: absolute;
    z-index: 3;
    bottom: -20vh;
    right: -50vw;
}

.soft-purple-splash-resize {
    height: 112vh;
    width: 120vw;
}

.purple-splash-container {
    position: absolute;
    z-index: 3;
    bottom: -20vh;
    right: -50vw;
}

.purple-splash-resize {
    height: 112vh;
    width: 120vw;
}

.small-heart-container {
    position: absolute;
    z-index: 3;
    right: 22.5vw;
    bottom:2vh;
}

.small-heart-resize {
    height: 15vh;
    width: 15vw;
}

.bottom-download-page {
    background-color: #581CB0;
    position: relative;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    width: 100vw;
    height: 67vh;
    z-index:3;
    scroll-snap-align: start;
}

.description-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.bottom-download-icon-resize {
    height: 5vh;
    width: 5vw;
}
.bottom-page-description-bellow-button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.bottom-page-description-bellow-button-text {
    text-align: left;
    letter-spacing: 0px;
    color: #DACAFF;
    opacity: 1;
    line-height: 4vh;
    font-family: 'Segoe UI';
    font-size: 1.875rem;
    font-weight: 400;
    margin-top: 2vh;
}

.bottom-relatory-btn-text-style {
    font-size: 2.3125rem;
    color: #581CB0;
    border-radius: 0.5rem;
    border-color: #FFFFFF;
    width: 58vw;
    outline: none;
    border-style: none;
}

.display-onhover-container {
    z-index: 8;
    display: none;
    height: 1vh;
}

.white-crumb:hover {
}

.white-crumb {
    color: #FFFFFF;
}

.impact-texts {
    height: 1vh;
}

.white:hover{
    color:#FFFFFF;
}

.pink-impact-color {
    color: #FF008D;
}

.purple {
    color: #581CB0;
}

.placehoder {
    height: 1vh;
    display: none;
}

.slide-in-from-bottom {
    animation-name:slideInFromBottom;
    animation-iteration-count:1;
    animation-delay:2;
    animation-timing-function:ease-out;
    animation-duration:1s;
}

@keyframes slideInFromBottom {
    0% {
        opacity: 1;
        transform: translateY(18%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-left-top {
    animation: 1s ease-out 0s 0 slideInLeftTop forwards;
}

@keyframes slideInLeftTop {
    0% {
        transform: translateX(-50%) translateY(50%);
    }

    100% {
        transform: translateX(0px) translateY(0px);
    }
}

.slide-in-right-top {
    animation: 1s ease-out 0s 1 slideInRightTop forwards;
}

@keyframes slideInRightTop {
    0% {
        transform: translateX(50%) translateY(50%);
    }

    100% {
        transform: translateX(0px) translateY(0px);
    }
}

.slide-in-from-left {
    animation: 1s ease-out 0s 1 slideInFromLeft forwards;
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-80%);
    }

    100% {
        transform: translateX(0px);
    }
}
.slide-in-from-left-square {
    animation: 1s ease-out 0s 1 slideInFromLeft forwards;
}

@keyframes slideInFromLeftSquare {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0px);
    }
}

.slide-in-from-top {
    animation: 1s ease-out 0s 1 slideInFromTop forwards;
}

@keyframes slideInFromTop {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(0);
    }
}

.slide-in-from-right {
    animation: 1s ease-out 0s 1 slideInFromRight forwards;
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(80%);
    }

    100% {
        transform: translateX(0);
    }
}
.slide-in-from-right-square {
    animation: 1s ease-out 0s 1 slideInFromRight forwards;
}

@keyframes slideInFromRightSquare {
    0% {
        transform: translateX(50%);
    }

    100% {
        transform: translateX(0);
    }
}

.fade-in-text {
    animation-name: fade-in-text;
    animation: fadeIn 2s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-in-element {
    animation-name: fadeInElement;
    animation-iteration-count: 1;
    animation-delay: 1;
    animation-timing-function: ease-out;
    animation-duration: 1s;
}

@keyframes fadeInElement {
    0% {
        transform: translateY(35%);
    }

    100% {
        transform: translateY(0);
    }
}