.ol-cards li,
.ol-cards li .step i {
    background-color: var(--ol-cards-color-bg)
}

.cta h2,
.cta2 h2 {
    text-decoration: none
}

#selectedFiles>li,
.upload {
    font-size: var(--reg-font)
}

footer,
form p {
    font-size: .75rem
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../font/Poppins-Regular-1.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../font/Poppins-Regular-2.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../font/Poppins-Regular-3.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Cerebri;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../font/Cerebri-Sans-Bold.woff2) format('woff2')
}

@font-face {
    font-family: fallbackFont;
    src: local("Georgia");
    font-display: swap;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%
}

@font-face {
  font-family: 'orbital';
  src:
    url('../icon/orbital.ttf?tyha0j') format('truetype'),
    url('../icon/orbital.woff?tyha0j') format('woff'),
    url('../icon/orbital.svg?tyha0j#orbital') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'orbital' !important;
  /* speak: never; */
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

i:not(.small-icon-phone, .small-icon-email, .icon-arrow-up, .icon-arrow-down){
    margin-right: 1.5rem;
}
.icon-x:before {
  content: "\e900";
}
.icon-twitter:before {
  content: "\e900";
}
.icon-arrow-down{
    margin: 0;
}
.icon-arrow-down:before {
  content: "\e901";
}
.icon-paper-plane:before {
  content: "\e90a";
  margin-left: .5rem;
}
.icon-globe:before {
  content: "\e902";
}
.icon-search:before {
  content: "\e903";
}
.icon-whatsapp:before {
  content: "\e904";
}
.icon-facebook-official:before {
  content: "\e905";
}
.icon-linkedin-square:before {
  content: "\e906";
}
.icon-email:before {
  content: "\e907";
  font-size: larger;
}

.small-icon-email:before {
  content: "\e907";
  font-size: small;
    margin-right: .5rem;
}
.icon-phone:before {
  content: "\e908";
  font-size: larger;
}
.small-icon-phone:before {
  content: "\e908";
  font-size: small;
  margin-right: .5rem;
}
.icon-arrow-up {
    margin: 0;
}
.icon-arrow-up:before {
  content: "\e909";
}

#scrollToTop {
    position: fixed;
    display: flex;
    background-color: var(--brand2);
    color: var(--white);
    z-index: 5;
    padding: .5rem .75rem;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    text-align: center;
    bottom: 1rem;
    right: 1rem;
    cursor: pointer
}

#scrollToTop:hover {
    color: var(--brand);
    background-color: var(--white)
}
#contact {
    background: var(--brand2);
}

nav button.toggler-open span {
    background-color: transparent;
}

nav button.toggler-open span:before {
    transform: translateY(0px) rotate(45deg);
}

nav button.toggler-open span:after {
    transform: translateY(-3px) rotate(-45deg);
}

.contactContent a,
.contactContent i,
.nav-menu-mobile.open {
    display: flex
}

.nav-list-item-desktop,
.nav-list-item-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding);
    color: var(--brand);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.5rem;
    letter-spacing: 2px;
    text-align: center;
    position: relative
}

.nav-list-item-mobile,
.nav-list-item-mobile a,
form li label {
    width: 100%;
    color: var(--brand)
}

.nav-list-item-desktop a {
    color: var(--accent3)
}

.nav-list-item-desktop:hover>a {
    color: var(--brand)
}

.contactContent a {
    color: var(--accent2);
}
.contactContent .logo,
.contactContent a:hover,
.contactContent i,
.contactContent i:hover,
.nav-list-item-mobile:hover>a {
    color: var(--brand)
}

.nav-list-item-mobile>details>ol {
    display: flex;
    width: 100%;
    margin-top: 1rem;
    flex-direction: column;
    background-color: var(--brand2)
}

.nav-list-item-mobile details,
.nav-list-item-mobile summary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column
}

.nav-list-item-mobile summary p {
    margin-right: 1rem
}

.nav-list-item-mobile summary i {
    position: absolute;
    right: 5%
}

.nav-list-item-mobile+.nav-list-item-mobile {
    border-top: thin solid var(--accent1)
}

.dropdown {
    width: 100%;
    display: none;
    top: 70%;
    position: absolute
}

.nav-list-item-desktop:hover .dropdown {
    display: flex;
    flex-direction: column
}

.dropdown-item {
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: calc(var(--padding)/ 1.75) 0;
    color: var(--accent3);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.5rem;
    letter-spacing: 2px;
    text-align: center;
    background-color: var(--brand2)
}

.dropdown-item:hover  a{
    cursor: pointer;
    color: var(--brand);
}

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

.container+.container {
    margin-top: 2rem
}

.container>aside:first-child {
    margin-bottom: 3rem
}

aside p {
    margin-bottom: .5rem
}

#about aside:first-child,
#whyus aside:first-child {
    padding: var(--padding)
}


 #vision h2 {
    color: var(--accent2);
    margin-bottom: 1rem;
    text-decoration: solid underline var(--brand)
} 

#timeline-section .container {
    background-color: var(--accent2);    
}

.timeline {
    position: relative;
    width: 660px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 1em 0;
    list-style-type: none
}

.timeline:before {
    position: absolute;
    left: 50%;
    top: 0;
    content: ' ';
    display: block;
    width: 6px;
    height: 100%;
    margin-left: -3px;
    background: -webkit-linear-gradient(top, hsla(199, 85%, 11%, 0) 0, hsla(199, 85%, 11%, 80) 8%, hsla(199, 85%, 11%, 80) 92%, hsla(199, 85%, 11%, 0) 100%);
    z-index: 5
}

.timeline li {
    padding: 1em 0
}

.timeline li:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.direction-l {
    position: relative;
    width: 300px;
    float: left;
    text-align: right
}

.direction-r {
    position: relative;
    width: 300px;
    float: right
}

.flag-wrapper {
    position: relative;
    display: inline-block;
    text-align: center
}

.flag {
    position: relative;
    display: inline;
    background: #f8f8f8;
    padding: 6px 10px;
    border-radius: 5px;
    font-weight: 600;
    text-align: left
}

.direction-l .flag {
    -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, .15), 0 0 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, .15), 0 0 1px rgba(0, 0, 0, .15);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, .15), 0 0 1px rgba(0, 0, 0, .15)
}

.direction-r .flag {
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15), 0 0 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15), 0 0 1px rgba(0, 0, 0, .15);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .15), 0 0 1px rgba(0, 0, 0, .15)
}

.direction-l .flag:before,
.direction-r .flag:before {
    position: absolute;
    top: 50%;
    right: -36px;
    content: ' ';
    display: block;
    width: 12px;
    height: 12px;
    margin-top: -10px;
    background: #fff;
    border-radius: 10px;
    border: 4px solid var(--brand);
    z-index: 10
}

.direction-r .flag:before {
    left: -36px
}

.direction-l .flag:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -8px;
    border: solid transparent;
    border-left-color: #f8f8f8;
    border-width: 8px;
    pointer-events: none
}

.direction-r .flag:after {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -8px;
    border: solid transparent;
    border-right-color: #f8f8f8;
    border-width: 8px;
    pointer-events: none
}

.time-wrapper {
    display: inline;
    line-height: 1em;
    font-size: .66666em;
    color: #fa5050;
    vertical-align: middle
}

.direction-l .time-wrapper {
    float: left
}

.direction-r .time-wrapper {
    float: right
}

.time {
    display: inline-block;
    padding: 4px 6px;
    background: #f8f8f8
}

.desc {
    margin: 1em .75em 0 0;
    font-size: .77777em;
    font-style: italic;
    line-height: 1.5em
}

.direction-r .desc {
    margin: 1em 0 0 .75em
}

@media screen and (max-width:660px) {
    .timeline {
        width: 100%;
        padding: 4em 0 1em 0
    }

    .timeline li {
        padding: 2em 0
    }

    .direction-l,
    .direction-r {
        float: none;
        width: 100%;
        text-align: center
    }

    .flag-wrapper {
        text-align: center
    }

    .flag {
        background: #fff;
        z-index: 15
    }

    .direction-l .flag:before,
    .direction-r .flag:before {
        position: absolute;
        top: -15px;
        left: 50%;
        content: ' ';
        display: block;
        width: 12px;
        height: 12px;
        margin-left: -6px;
        background: #fff;
        border-radius: 10px;
        border: 4px solid var(--brand);
        z-index: 10
    }

    .direction-l .flag:after,
    .direction-r .flag:after {
        content: "";
        position: absolute;
        left: 50%;
        top: -8px;
        height: 0;
        width: 0;
        margin-left: -8px;
        border: solid transparent;
        border-bottom-color: #fff;
        border-width: 8px;
        pointer-events: none
    }

    .time-wrapper {
        display: block;
        position: relative;
        margin: 4px 0 0 0;
        z-index: 14
    }

    .direction-l .time-wrapper {
        float: none
    }

    .direction-r .time-wrapper {
        float: none
    }

    .desc {
        position: relative;
        margin: 1em 0 0 0;
        padding: 1em;
        background: #f5f5f5;
        -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2);
        -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2);
        box-shadow: 0 0 1px rgba(0, 0, 0, .2);
        z-index: 15
    }

    .direction-l .desc,
    .direction-r .desc {
        position: relative;
        margin: 1em 1em 0 1em;
        padding: 1em;
        z-index: 15
    }
}

@media screen and (min-width:400px) and (max-width:660px) {

    .direction-l .desc,
    .direction-r .desc {
        margin: 1em 4em 0 4em
    }
}

#thesite {
    background: linear-gradient(180deg, rgba(237, 239, 240, .9) 82%, rgba(226, 231, 232, .9) 100%) center/cover, url(../img/header/MAP.webp) center/cover
}

.card,
.card-body,
.mtmdetails {
    background-color: #fff
}

.ol-cards,
.ol-cards *,
.ol-cards ::after,
.ol-cards ::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.ol-cards {
    --ol-cards-color-bg: var(--color-bg);
    list-style-type: none;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 45em;
    gap: 2em;
    counter-reset: ol-cards-counter
}

.ol-cards li {
    display: grid;
    grid-template-areas: "step content";
    padding: .5em .5em .5em 0;
    row-gap: .5em;
    column-gap: 2em;
    counter-increment: ol-cards-counter;
    text-align: left
}

.ol-cards.alternate li:nth-child(2n) {
    grid-template-areas: "content step";
    padding: .5em 0 .5em .5em
}

.ol-cards li .step {
    grid-area: step;
    display: flex;
    align-self: flex-start;
    background-color: var(--ol-cards-color-accent);
    border-radius: 0 50em 50em 0;
    padding: .5em;
    justify-content: flex-end;
    box-shadow: inset .25em .25em .5em rgba(0, 0, 0, .4), 0 .05em #fff;
    flex: 1;
    gap: 1em
}

.ol-cards li .step::before {
    content: "0" counter(ol-cards-counter);
    flex: 1;
    align-self: center;
    color: var(--ol-cards-color-bg);
    font-weight: 700;
    font-size: 1em;
    text-shadow: .025em .025em .125em rgba(0, 0, 0, .4)
}

.ol-cards.alternate li:nth-child(2n) .step {
    border-radius: 50em 0 0 50em;
    flex-direction: row-reverse
}

.ol-cards li .step i {
    color: var(--ol-cards-color-accent);
    width: 1em;
    height: 1em;
    font-size: 1.8em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: .25em .25em .5em rgba(0, 0, 0, .4), inset .05em .05em #fff
}

.ol-cards li .title {
    grid-area: title;
    color: var(--ol-cards-color-accent);
    font-weight: 700
}

.ol-cards li .content {
    grid-area: content;
    font-size: .9em
}

@media only screen and (max-width:500px) {
    .ol-cards {
        padding: 1em
    }

    .ol-cards li {
        column-gap: 0;
        grid-template-areas: 'step title' 'content content';
        grid-template-columns: min-content auto;
        padding: 1em 0
    }

    .ol-cards.alternate li:nth-child(2n) {
        column-gap: 0;
        grid-template-areas: 'title step' 'content content';
        grid-template-columns: auto min-content;
        padding: 1em 0
    }

    .ol-cards li .title {
        padding: 0 1em;
        align-self: center;
        width: auto
    }

    .ol-cards li .step {
        font-size: .75em
    }

    .ol-cards li .content {
        padding: 0 1em
    }
}
#vision {
    background-color: var(--brand2);
}
#vision p {
    color: var(--accent2);
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-right: -15px;
    margin-left: -15px
}

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 1px solid #ebe8e8;
    border-radius: .375rem;
    margin-bottom: 1rem
}

.card-image img,
.meetTheTeamImg {
    width: 100%;
    height: 100%
}

div.seperator,
div.small-seperator {
    font-size: 6vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--brand2);
}

div.small-seperator>h2 {
    color: var(--brand2);
    text-align: center;
    text-decoration: solid underline var(--brand)
}

div.seperator::after,
div.seperator::before,
div.small-seperator::after,
div.small-seperator::before {
    content: "";
    display: block;
    height: .09em
}

div.seperator::after,
div.seperator::before {
    min-width: 30vw
}

div.small-seperator::after,
div.small-seperator::before {
    min-width: 20vw
}

div.seperator::before,
div.small-seperator::before {
    background: linear-gradient(to right, rgba(240, 240, 240, 0), var(--brand));
    margin-right: auto
}

div.seperator::after,
div.small-seperator::after {
    background: linear-gradient(to left, rgba(240, 240, 240, 0), var(--brand));
    margin-left: auto
}

.meetTheTeamDiv {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column
}

.mtm1 {
    border: thick solid var(--brand)
}

.mtm2 {
    border: thick solid var(--brand2)
}

.mtm3 {
    border: thick solid var(--text3)
}

.mtmdetails {
    color: var(--brand2);
    margin: auto;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.img-fluid {
    max-width: 100%;
    height: auto;
        aspect-ratio: 16 / 9;
}

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 2.25rem 2rem 2.125rem
}

.cta,
footer {
    background-color: var(--text2);
    padding: var(--padding)
}

.cta {
    border-top: thick solid var(--brand);
    border-bottom: thick solid var(--brand);
}

.card-title {
    margin-bottom: .75rem;
    color: #216178
}

.cta2 h2,
.upload {
    color: var(--brand2)
}

.cta,
.cta2 {
    width: 100vw;
    text-align: center
}

.cta2 {
    padding: calc(var(--padding)/ 2)
}

.contactContent.footer,
.contactContent.footer .logo,
.contactContent.footer a,
.contactContent.footer i,
.cta h2 {
    color: var(--white)
}

.testimonials {
    display: flex;
    justify-content: center;
    align-items: center
}

#contact aside {
    color: var(--accent2);
    /* background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)) */
}

#contact p {
    padding: 0 1rem 0 0
}

.contactContent li {
    margin: 1rem;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    width: 100%
}

form ol {
    display: flex;
    flex-direction: column;
    width: 100%
}

form li {
    display: flex;
    flex-flow: row wrap;
    margin: .5rem 0
}

input,
select,
textarea {
    padding: .5rem;
    width: 100%;
    transition: .3s;
    border-radius: 0;
    cursor: pointer;
    background: var(--surface2);
    border: thin solid var(--text3);
    color: var(--text2);
    font-family: slaney, Poppins
}

input[type=file] {
    opacity: 0;
    z-index: -1;
    position: relative;
    width: 0%;
    padding: 0;
    margin: 0;
    line-height: 0;
    font-size: 0;
    height: 0
}

.upload {
    border: thin solid var(--text3);
    padding: .25rem .5rem;
    width: auto
}

#selectedFiles>li {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    border-bottom: thin solid var(--text2);
    align-items: center
}

#selectedFiles>li span:nth-child(2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 200px
}

#selectedFiles>li :not(span:nth-child(2)) {
    width: 10%;
    color: red
}

#selectedFiles>li span:nth-child(3) {
    display: flex;
    margin-left: auto
}

input:hover,
select:hover,
textarea:hover {
    box-shadow: 0 0 .25rem var(--accent1)
}

input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 .15rem var(--accent1)
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button,
textarea::-webkit-inner-spin-button,
textarea::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

form p {
    align-items: baseline;
    justify-content: flex-start
}

.button,
button[type=submit] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand2);
    background-color: var(--brand);
    border: thin solid var(--brand2);
    padding: 1rem;
    transition: .3s;
    border-radius: .25rem;
    font-size: 1rem;
    font-weight: bold;
    width: 100%;
}

.button:disabled,
.button:focus,
.button:hover,
.upload:hover,
button[type=submit]:disabled,
button[type=submit]:focus,
button[type=submit]:hover,
input:hover,
textarea:hover {
    background-color: var(--surface2);
    color: var(--brand);
    border: thin solid var(--brand);
    cursor: pointer
}

footer {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr))
}

ul.contact {
    margin-top: 1rem
}

.contactContent.footer li {
    margin: .5rem 0;
    width: 100%
}

@media (min-width:768px) {
    .container {
        flex-direction: row
    }

    .container aside {
        width: 50%
    }

    aside.how-it-works {
        width: 80%
    }

    .container>aside:first-child {
        margin-bottom: 0
    }

    .card {
        max-width: 30%;
        margin-bottom: 0 !important
    }
}

.slideInDown {
    animation-name: slideInDown
}

.slideInUp {
    animation-name: slideInUp
}

.slideInLeft {
    animation-name: slideInLeft
}

.slideInRight {
    animation-name: slideInRight;
    overflow: hidden
}

.slideInDown,
.slideInLeft,
.slideInRight,
.slideInUp {
    animation-duration: 1s;
    animation-fill-mode: both
}

@keyframes slideInDown {
    0% {
        transform: translateY(-100%);
        visibility: hidden
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes slideInUp {
    0% {
        transform: translateY(200%);
        visibility: hidden
    }

    100% {
        transform: translateY(0)
    }
}

@keyframes slideOutRight {
    0% {
        transform: translateX(0)
    }

    100% {
        visibility: hidden;
        transform: translateX(100%)
    }
}

@keyframes rotation {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(359deg)
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        visibility: visible
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(200%);
        visibility: visible;
        overflow: hidden
    }

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