/* I am replicating flw, to learn to code */

*, *:before, *:after {
    box-sizing: inherit;
}

/* fonts */

/* Millik */
@font-face {
    font-family: Millik;
    src: url(../fonts/Milik/Millik.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Moderat regular */
@font-face {
    font-family: Moderat;
    src: url(../fonts/Moderat/Moderat-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Moderat light */
@font-face {
    font-family: Moderat;
    src: url(../fonts/Moderat/Moderat-Light.ttf) format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* Moderat medium */
@font-face {
    font-family: Moderat;
    src: url(../fonts/Moderat/Moderat-Medium.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* Moderat bold */
@font-face {
    font-family: Moderat;
    src: url(../fonts/Moderat/Moderat-Bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Moderat black */
@font-face {
    font-family: Moderat;
    src: url(../fonts/Moderat/Moderat-Black.ttf) format('truetype');
    font-weight: 900;
    font-style: normal;
}

html {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    font-family: Moderat, sans-serif;
    font-style: normal;
    color: #1D1D1D;
    margin: 0;
    padding: 0;
}

.wrapper {
    margin: 0;
    padding: 0;
}

section {
    padding: 0 15%;
    display: flex;
    justify-content: center;
}

h1, h2 {
    font-family: Millik;
    font-weight: 400;
    font-style: normal;
}

p {
    color: #1D1D1D;
    font-family: Moderat;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 32px;
}

/* Nav Menu */

nav {
    flex-shrink: 0;
    margin: 30px 0;
    width: 1092px;
    max-width: 1092px;
}

nav ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding: 0px;
    margin: 0;
    align-items: center;
}

.navMenu {
    display: flex;
    max-width: 811px;
    align-items: center;
}

.navMenu li {
    display: flex;
    flex-direction: column;
    padding: 10px 12px 10px 12px;
    align-items: flex-start;
    color: #262C55;
    font-family: Moderat;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

.flwLogo {
    flex-shrink: 0;
    width: 185px;
    height: 44px;
}

.rightNav {
    display: flex;
    width: 185px;
    justify-content: center;
    align-items: flex-start;
}

.navButton {
    display: flex;
    padding: 15px 50px 15px 50px;
    border-radius: 10px;
    background: #EEE;
    border: none;
    color: #262C55;
    font-family: Moderat;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
}

/* Hero section */

.hero {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    width: 1092px;
    max-width: 1092px;
    padding: 0px;
    margin-top: 90px;
    margin-bottom: 90px;
}

.heroContent {
    display: flex;
    flex-direction: column;
    flex-shrink: start;
    width: 750px;
    padding: 0px 68px 0.5px 0px;
}

.heroText {
    margin: 0;
    margin-bottom: 30px;
    font-size: 100px;
    line-height: 108px;
    letter-spacing: -2px;
    color: #fb9129;
}

.heroText span {
    color: #000;
}

.heroBody {
    color: #000;
    font-family: Moderat;
    font-size: 20px;
    font-style: normal;
    font-weight: 200;
    line-height: 32px;
    display: flex;
    width: 610px;
    max-width: 610px;
    padding: 0px 36px 40px 0px;
    align-items: flex-start;
    margin: 0;
}

.buttonWrapper {
    display: flex;
    padding-right: 0px;
    align-items: center;
    gap: 20px;
    font-family: Moderat;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 17px;
    text-align: center;
}

Button {
    display: flex;
    padding: 21px 25px 21px 25px;
    align-items: center;
    border: none;
    border-radius: 10px;
    background: #0A0E27;
    color: #FFF;
}

.secondaryButton {
    display: flex;
    align-items: center;
    padding: 21px 24px 21px 24px;
    border-radius: 10px;
    background: #EEE;
    border: none;
    color: #000;
}

.tertiaryButton {
    display: inline-flex;
    padding: 4px 0 5px;
    color: #FB4E20;
    text-align: center;
    font-family: Moderat;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 19px;
    background: none;
}

/* Businesses */

.business {
    display: flex;
    justify-content: center;
    width: 1920px;
    max-width: 1920px;
    padding: 0px 160px;
    margin: 0 160px;
}


.business-container {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 80px;
}

.footcity {
    margin: 0;
}

.Famasi {
    display: flex;
    margin: -200px 0 0;
    flex-direction: column;
    gap: 74px;
}


.Famasi figure {
    width: 673.09px;
    height: 672px;
    margin: 0;
}

figcaption {
    color: #fff;
    font-family: Moderat;
    font-size: 21px;
    font-style: normal;
    font-weight: 500;
    line-height: 29px;
    margin: -56px 32px;
}

figcaption.Foot {
    text-align: right;
    margin: -56px 32px;
}

.Famasi p {
    display: flex;
    width: 360px;
    max-width: 360px;
    padding-right: 22px;
    align-items: flex-start;
    color: #1D1D1D;
    font-family: Moderat;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 32px;
}

.socials {
    display: flex;
    flex-direction: column;
    margin: 32px 0 0;
}

h5 {
    font-family: Moderat;
    font-weight: 500;
    font-size: 22px;
    line-height: 32px;
}

strong {
    font-family: Moderat;
    font-weight: 700;
}

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

/* Socials */

.socials {
    display: flex;
    width: 1092px;
    padding-right: 0px;
    padding-bottom: 80px;
    flex-direction: column;
    gap: 32px;
}

.logo {
    display: flex;
    padding-right: 0px;
    align-content: center;
    margin: 0;
}

.socialHeader {
    display: flex;
    padding-right: 0px;
    flex-direction: column;
    align-items: flex-start;
}

h5 {
    font-family: Moderat;
    font-weight: 500;
    font-size: 22px;
    line-height: 32px;
    margin: 0;
}

strong {
    font-family: Moderat;
    font-weight: 700;
}

/* for Enterprises */

h2 {
    font-size: 80px;
    margin: 0;
}

.Enterprises {
    margin: 160px 0;
    display: flex;
    flex-direction: column;
    gap: 58px;
}

.secondHeader {
    color: #1D1D1D;
    font-size: 80px;
    line-height: 86px;
    letter-spacing: -2px;
    max-width: 650px;
}

.secondHeader span {
    color: #FB9129;
}

.enterprise-features {
    display: flex;
    width: 1092px;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

.feature {
    display: flex;
    flex-direction: column;
    width: 350px;
    align-items: flex-start;
    flex-shrink: 0;
}

h4 {
    color: #050505;
    font-family: Moderat;
    font-size: 23px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    margin: 0;
}

.feature p {
    margin-bottom: 30px;
    width: 300px;
}

.featureButton {
    padding: 15px 24px 15px 24px;
}

.featureImage {
    display: flex;
    width: 320px;
    max-width: 320px;
    padding-bottom: 0px;
    justify-content: center;
    align-items: flex-start;
    flex-shrink: 0;
}

.feature-grid {
    display: flex;
    flex-direction: column;
    width: 323.98px;
    align-items: flex-start;
    gap: 100px;
    flex-shrink: 0;
}

.featureSecondaryButton {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 8px;
    margin: 0;
}

.arrow {
    display: flex;
    align-items: center;
    padding-top: 0px;
}

div svg {
    display: block;
    width: 8.5px;
    height: 12.75px;
    padding: 0px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}

/* for SMEs */

.blue-bg {
    background: #F8FAFD;
    padding: 160px 0;
}

.sme-container {
    display: flex;
    flex-direction: column;
    gap: 92px;
}

.thirdHeader {
    color: #1D1D1D;
    font-size: 80px;
    line-height: 86px;
    letter-spacing: -2px;
    max-width: 1000px;
}

.thirdHeader span {
    color: #35A162;
}

.sme {
    display: flex;
    flex-direction: column;
    /* gap: -87.5px; */
    align-items: flex-start;
}

.sme-grid {
    display: flex;
    width: 1092px;
    padding-left: 0px;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 85px;
}

div.yanga-store {
    display: flex;
    width: 1092px;
    gap: 85px;
    justify-content: flex-end;
    align-items: flex-start;
}

.yanga-content {
    display: flex;
    flex-direction: column;
    margin: 100px 0 0 100px;
    width: 500px;
    height: 224px;
}

div.yanga-content .featureButton {
    display: flex;
    padding: 15px 28px 15px 28px;
    justify-content: center;
    width: 150px;
}

.yanga-image {
    width: 556px;
    height: 648px;
    flex-shrink: 0;
    /*background-image: url(img/yanga-beauty.png); */
    background-size: cover;
}

.sme-grid .feature {
    padding-top: 100px;
}

.sme-grid .feature p {
    width: 350px;
}

.feature-grid .feature p {
    width: 345px;
}


.creator figcaption {
    display: flex;
    margin: auto;
    justify-content: center;
    padding-top: 20px;
}

.creator {
    margin-bottom: -25px;
}

.creator figure figcaption {
    color: #1D1D1D;
    text-align: center;
    font-size: 16px;
}

.creator figure figcaption span {
    color: #35A162;
    padding-left: 5px;
}

.flex-end {
    align-items: flex-end;
    margin-top: -120px;
}

.sme-grid .feature-grid .feature {
    padding: 0;
}

.p-large {
    width: 1072px;
}
.very-large-p {
    font-family: Moderat;
    font-size: 80px;
    font-weight: 300;
    font-style: normal;
    line-height: 110px;
    color: #1D1D1D;
    letter-spacing: -1px;
    margin-bottom: 48px;
}

.very-large-p span {
    color: #35A162;
}


.large-button {
    padding: 28px 35px 28px 35px;
}

/* Individuals */

.Individuals {
    background: #1D1D1D;
    padding: 160px 0;
    display: flex;
    flex-direction: column;
}

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

.ind-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}
.fourth-header {
    color: #FFF;
    font-size: 80px;
    line-height: 86px;
    letter-spacing: -2px;
    text-align: center;
    max-width: 800px;
}

.fourth-header span {
    color: #F1A5C2;
}

.p-white {
    color: #FFF;
    text-align: center;
    max-width: 620px;
    margin-top: 48px;
    font-weight: 300;
}

.cards {
    display: flex;
    max-width: 1206px;
    width: 1206px;
    justify-content: center;
    align-items: center;
}

.card {
    display: flex;
    width: 562px;
    height: 289px;
    max-width: 562px;
    padding: 48px 60px 78px 60px;
    margin-left: -240px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: start;
    gap: 16px;
    flex-shrink: 0;
    border-radius: 16px;
    background: #313131;
    box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, 0.80);
}

.card-1 {
    margin: 0;
}

h3 {
    color: #FFF;
    font-family: Moderat;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    margin: 0;
    width: 442px;
}

.card p {
    color: #e4e4e4;
    font-family: Moderat;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
    margin: 0;
    margin-bottom: auto;
    max-width: 496px;
}

/*
.noise {
    border-radius: 16px;
    width: 562px;
    height: 289px;
    position: absolute;
    opacity: 0.3;
    background: url(/img/noise.png);
    margin-top: 30px;
}

*/

/* Developers */

.dev-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1092px;
    width: 1092px;
    gap: 24px;
}

.dev-content {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 24px;

}

.fifth-header {
    max-width: 900px;
}

.fifth-header span {
    color: #EB7DA7;
}

.dev-content p {
    max-width: 619px;
}

.list ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    padding: 0;
}

.list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
}

.bullet {
    width: 20px;
    height: 10px;
    border-radius: 56px;
    background: #262C55;
}

.p-light {
    color: #1D1D1D;
    font-family: Moderat;
    font-size: 17px;
    font-style: normal;
    font-weight: 300;
    line-height: 26px;
    margin: 0;
    padding: 0;
}

div .large-button {
    margin-top: 40px;
}

/* Global Reach */

.global-container {
    display: flex;
    flex-direction: column;
    margin: 160px auto;
    margin-bottom: 160px;
    width: 1092px;
    max-width: 1092px;
    gap: 106px;
}

.sixth-header {
    max-width: 900px;
}

.sixth-header span {
    color: #6672C7;
}

.global-content {
    display: flex;
    flex-direction: row;
}

.global-features {
    display: flex;
    width: 546px;
    flex-direction: column;
    align-items: flex-start;
    gap: 62px;
    flex-shrink: 0;
}

.slider {
    position: absolute;
    top: 1px;
    width: 1px;
    height: 550.73px;
    background: url(img/pseudo.png);
}

.global-feature {
    display: flex;
    gap: 37px;
}

.slider-active {
    width: 2px;
    height: 25px;
    border: solid #000 1px;
    margin-top: 6px;
    background-color: #000;
}

.global-feature-content {
    display: flex;
    padding: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
}

.global-feature-content h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1D1D1D;
    line-height: 32px;
    margin: 0;
}

.global-feature-content .currencies {
    color: #00ABAB;
}

.global-feature-content p {
    color: #1D1D1D;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    margin: 0;
}

.global-feature-wrap {
    display: flex;
    flex-flow: row wrap;
    width: 400px;
    max-width: 400px;
    gap: 12px;
}

.global-feature-wrap p {
    display: flex;
    width: 170px;
    padding: 0px 27px 0px 0px;
    align-items: flex-start;
}

.globe {
    display: flex;
    padding-left: 0px;
    flex-direction: column;
    align-items: center;
    width: 700px;
    align-items: flex-start;
}

.globe img {
    width: 900px;
    height: 900px;
    margin-left: -100px;
    margin-top: -120px;
}
        

/* Fina CTA */

.final-cta {
    background: #1D1D1D;
    border-radius: 20px;
    background: #1D1D1D;
    box-shadow: 0px 25px 50px 0px rgba(29, 29, 29, 0.50);
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding: 96px 175px 81px 175px;
    max-width: 1092px;
    width: 1092px;
}

.seventh-header {
    color: #FFF;
    font-size: 50px;
    font-weight: 400px;
    line-height: 54px;
    letter-spacing: -1.5px;
}

.final-cta .content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.final-cta p {
    color: #FFF;
    font-size: 20px;
    font-weight: 300;
    width: 742px;
}

.final-cta .buttonWrapper {
    display: flex;
    align-items: center;
    align-content: center;
    width: 742px;
    padding: 0;
    margin: 0;
    gap: 50px;
}

.final-cta .large-button {
    background-color: white;
    color: #1D1D1D;
    padding: 21px 24px;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.final-cta .featureSecondaryButton {
    margin: 0;
    padding: 0;
}

.final-cta .buttonWrapper .tertiaryButton {
    color: white;
    margin: 0;
}


/* footer */

.footer {
    display: flex;
    flex-direction: column;
    padding: 200px 0 0;
    align-items: flex-start;
    justify-content: flex-start;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-bottom: 100px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    width: 218.39px;
    gap: 23px;
}

h6 {
    font-size: 18px;
    line-height: 20px;
    font-weight: 500;
    color: #1d1d1d;
    margin: 0;
}

.footer-column ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 0;
    padding: 0;
}

.footer-column li {
    max-width: 218.39px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

.footer-column .api-status {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-column .status {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #35A162;
    margin-top: 3px;
}


.footer-endnotes {
    display: flex;
    width: 1092px;
    max-width: 1092px;
    height: 90px;
    padding: 30px 0px 31px 0px;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #F3F3F3;
    border-bottom: 1px solid #F3F3F3;
}

.empty-class {
    display: flex;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.country-svg {
    border-radius: 24px;
    background: #FFF;
    display: flex;
    width: 24px;
    height: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.footer-endnotes p {
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}

.chevron {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 12px;
    padding: 1px;
    padding-top: 6px;
}

.footer-right {
    display: flex;
    gap: 24px
}


/* end */