@font-face {
    font-family: Satoshi-Variable;
    src: url(./assets/Satoshi_Complete/Fonts/Variable/Satoshi-Variable.ttf);
}

body {
    margin: 0px;
    width: 100%;
    font-family: 'Satoshi-Variable';
}
.gen .body {
    text-align: justify;
}
h2 {
    margin-bottom: 40px;
}

/* top banner */
.top-banner {
    margin-bottom: 40px;
}
.top-banner-img-div img {
    width: 100%;
}

/* introduction */
.introduction {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}

/* challenges */
.challenges {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}

/* goals */
.goals {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}

/* my role */
.my-role {
    display: flex;
    padding: 0px 50px 0px 50px;
    margin-bottom: 65px;
}
.my-role-img-div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55%;
}
.my-role-img-div img {
    width: 60%;
}
.my-role-body {
    display: flex;
    align-items: center;
    width: 45%;
    font-size: normal;
}

/* user flow */
.user-flow {
    padding: 0px 50px 0px 50px;
    margin-bottom: 130px;
}
.user-flow-img-div img {
    width: 100%;
}
/* design system */
.design-system {
    padding: 0px 50px 0px 50px;
    margin-bottom: 130px;
}
/* colours */
.colour {
    margin-bottom: 60px;
}
.colour-img-div img {
    width: 100%;
}
/* cards */
.cards {
    margin-bottom: 60px;
}
.cards-img-div img {
    width: 100%;
}
/* buttons and navigation */
.buttons-and-navigation {
    margin-bottom: 60px;
}
.but-and-nav-img-div img {
    width: 100%;
}
/* icons */
.icons {
    margin-bottom: 60px;
}
.icons-img-div img {
    width: 100%;
}

/* screen details */
.screen-details {
    padding: 0px 50px 0px 50px;
    margin-bottom: 130px;
}

/* admin dashboard overview */
.admin-dashboard-overview {
    margin-bottom: 60px;
}
.ado-img-div img {
    width: 100%;
}
/* ams */
.ams {
    display: flex;
    margin-bottom: 20px;
}
.ams-icon-div {
    width: 8%;
    margin-right: 20px;
}
.ams-icon-div img {
    width: 100%;
}
.ams-text-div {
    width: 92%;
    text-align: justify;
}
/* scr */
.scr {
    display: flex;
    margin-bottom: 20px;
}
.scr-icon-div {
    width: 8%;
    margin-right: 20px;
}
.scr-icon-div img {
    width: 100%;
}
.scr-text-div {
    width: 92%;
    text-align: justify;
}
/* sa */
.sa {
    display: flex;
    margin-bottom: 20px;
}
.sa-icon-div {
    width: 8%;
    margin-right: 20px;
}
.sa-icon-div img {
    width: 100%;
}
.sa-text-div {
    width: 92%;
    text-align: justify;
}
/* aa */
.aa {
    display: flex;
}
.aa-icon-div {
    width: 8%;
    margin-right: 20px;
}
.aa-icon-div img {
    width: 100%;
}
.aa-text-div {
    width: 92%;
    text-align: justify;
}

/* order history */
.order-history {
    margin-bottom: 60px;
}
.oh-img-div img {
    width: 100%;
}
/* ams */
.ams {
    display: flex;
    margin-bottom: 20px;
}
.ams-icon-div {
    width: 8%;
    margin-right: 20px;
}
.ams-icon-div img {
    width: 100%;
}
.ams-text-div {
    width: 92%;
    text-align: justify;
}
/* toh */
.toh {
    display: flex;
    margin-bottom: 20px;
}
.toh-icon-div {
    width: 8%;
    margin-right: 20px;
}
.toh-icon-div img {
    width: 100%;
}
.toh-text-div {
    width: 92%;
    text-align: justify;
}
/* ocr */
.ocr {
    display: flex;
    margin-bottom: 20px;
}
.ocr-icon-div {
    width: 8%;
    margin-right: 20px;
}
.ocr-icon-div img {
    width: 100%;
}
.ocr-text-div {
    width: 92%;
    text-align: justify;
}
/* tpl */
.tpl {
    display: flex;
}
.tpl-icon-div {
    width: 8%;
    margin-right: 20px;
}
.tpl-icon-div img {
    width: 100%;
}
.tpl-text-div {
    width: 92%;
    text-align: justify;
}

/* product inventory */
.product-inventory {
    margin-bottom: 60px;
}
.pi-img-div img {
    width: 100%;
}
/* il */
.il {
    display: flex;
    margin-bottom: 20px;
}
.il-icon-div {
    width: 8%;
    margin-right: 20px;
}
.il-icon-div img {
    width: 100%;
}
.il-text-div {
    width: 92%;
    text-align: justify;
}
/* it */
.it {
    display: flex;
    margin-bottom: 20px;
}
.it-icon-div {
    width: 8%;
    margin-right: 20px;
}
.it-icon-div img {
    width: 100%;
}
.it-text-div {
    width: 92%;
    text-align: justify;
}
/* ia */
.ia {
    display: flex;
    margin-bottom: 20px;
}
.ia-icon-div {
    width: 8%;
    margin-right: 20px;
}
.ia-icon-div img {
    width: 100%;
}
.ia-text-div {
    width: 92%;
    text-align: justify;
}
/* tsp */
.tsp {
    display: flex;
}
.tsp-icon-div {
    width: 8%;
    margin-right: 20px;
}
.tsp-icon-div img {
    width: 100%;
}
.tsp-text-div {
    width: 92%;
    text-align: justify;
}

/* customers */
.customers {
    margin-bottom: 60px;
}
.cu-img-div img {
    width: 100%;
}
/* cd */
.cd {
    display: flex;
    margin-bottom: 20px;
}
.cd-icon-div {
    width: 8%;
    margin-right: 20px;
}
.cd-icon-div img {
    width: 100%;
}
.cd-text-div {
    width: 92%;
    text-align: justify;
}
/* pa */
.pa {
    display: flex;
    margin-bottom: 20px;
}
.pa-icon-div {
    width: 8%;
    margin-right: 20px;
}
.pa-icon-div img {
    width: 100%;
}
.pa-text-div {
    width: 92%;
    text-align: justify;
}
/* cf */
.cf {
    display: flex;
}
.cf-icon-div {
    width: 8%;
    margin-right: 20px;
}
.cf-icon-div img {
    width: 100%;
}
.cf-text-div {
    width: 92%;
    text-align: justify;
}


/* expense statement */
.expense-statement {
    margin-bottom: 60px;
}
.es-img-div img {
    width: 100%;
}
/* oe */
.oe {
    display: flex;
    margin-bottom: 20px;
}
.oe-icon-div {
    width: 8%;
    margin-right: 20px;
}
.oe-icon-div img {
    width: 100%;
}
.oe-text-div {
    width: 92%;
    text-align: justify;
}
/* pe */
.pe {
    display: flex;
    margin-bottom: 20px;
}
.pe-icon-div {
    width: 8%;
    margin-right: 20px;
}
.pe-icon-div img {
    width: 100%;
}
.pe-text-div {
    width: 92%;
    text-align: justify;
}
/* ea */
.ea {
    display: flex;
    margin-bottom: 20px;
}
.ea-icon-div {
    width: 8%;
    margin-right: 20px;
}
.ea-icon-div img {
    width: 100%;
}
.ea-text-div {
    width: 92%;
    text-align: justify;
}
/* ae */
.ae {
    display: flex;
}
.ae-icon-div {
    width: 8%;
    margin-right: 20px;
}
.ae-icon-div img {
    width: 100%;
}
.ae-text-div {
    width: 92%;
    text-align: justify;
}

/* footer image */
.footer-image {
    padding: 0px 50px 0px 50px;
    margin-bottom: 130px;
}
.footer-img-div {
    text-align: center;
}
.footer-img-div img {
    width: 70%;
}

/* media query */
@media screen and (max-width: 767px) {
    .gen {
        padding: 0px 20px 0px 20px;
        margin-bottom: 50px;
    }
    .gen h1 {
        margin-bottom: 25px;
        font-size: 1.5rem;
    }
    .gen h2 {
        font-size: 1.3rem;
    }
    .gen h4 {
        font-size: 1.1rem;
    }
    .gen .body {
        margin-bottom: 30px;
        font-size: 15.3px;
        font-weight: 400;
    }
    h2 {
        margin-bottom: 20px;
    }
}