@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;
}
h3 {
    margin-bottom: 30px;
}
.h3-div {
    padding: 0px 50px 0px 50px;
    /* border: 1px solid black; */
}

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

/* about the project */
.about-the-project {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}

/* challenges goals merits */
.challenges-goals-merits {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
.challenges-goals-merits-div {
    display: flex;
}
.challenges {
    width: 50%;
    margin-right: 45px;
}
.goals-and-merits {
    width: 50%;
}

/* my role */
.my-role {
    display: flex;
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
    /* border: 1px solid black; */
}
.my-role-img-div {
    width: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
    /* border: 1px solid black; */
}
.my-role-img-div img {
    width: 40%;
}
.my-role-body-div {
    width: 50%;
    /* border: 1px solid black; */
}
.my-roles, .tools-used, .duration {
    display: flex;
    /* border: 1px solid black; */
}
.key {
    width: 40%;
    margin-right: 10px;
    font-weight: 600;
    /* border: 1px solid black; */
}
.value {
    width: 60%;
}
/* the design process */
.the-design-process {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
.the-design-process-img-div img {
    width: 100%;
}

/* user interview */
.user-interview {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
.user-interview-body {
    margin-bottom: 50px;
}
/* pie chart div 1 */
.pie-charts-div-1 {
    display:flex;
}
.pie-chart-a {
    width: 50%;
    padding-left: 40px;
    margin-right: 24px;
}
.chart-a-img-div {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-top: 35px;
}
.pie-chart-a img {
    width: 80%;
}
.pie-chart-b {
    width: 50%;
    padding-left: 40px;
}
.chart-b-img-div {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-top: 35px;
}
.pie-chart-b img {
    width: 60%;
}
/* pie chart div 2 */
.pie-charts-div-2 {
    display:flex;
}
.pie-chart-c {
    width: 50%;
    padding-left: 40px;
    margin-right: 24px;
}
.chart-c-img-div {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-top: 35px;
}
.pie-chart-c img {
    width: 75%;
}
.pie-chart-d {
    width: 50%;
    padding-left: 40px;
}
.chart-d-img-div {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-top: 35px;
}
.pie-chart-d img {
    width: 70%;
}

/* user pain points */
.user-pain-points {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
.upp-img-div {
    text-align: center;
}
.upp-img-div img {
    width: 70%;
}

/* user persona */
.user-persona {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
.user-persona-img-div {
    display: flex;
}
.user-persona-img-1 {
    width: 50%;
    margin-right: 25px;
}
.user-persona-img-1 img {
    width: 100%;
}
.user-persona-img-2 {
    width: 50%;
    margin-left: 25px;
}
.user-persona-img-2 img {
    width: 100%;
}

/* facing the challenge */
.facing-the-challenge {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}

/* competitive analysis */
.competitive-analysis {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
.competitve-analysis-img-div img {
    width: 100%;
}
.competitive-analysis table {
    width: 100%;
    position: relative;
    border-collapse: collapse;
}
.competitive-analysis td, .competitive-analysis th {
    border: 1px solid #999;
    padding: 15px;
}
table {
    display: table;
    width: 100%;
}
/* user journey map */
.user-journey-map {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
.user-journey-map-img-div img {
    width: 100%;
}
.user-journey-map table {
    width: 100%;
    position: relative;
    border-collapse: collapse;
}
.user-journey-map td, .user-journey-map th {
    border: 4px solid white;
    background: rgba(233, 229, 229, 0.952);
    padding: 10px;
}
/* finding a solution or solving the problem */
.finding-a-solution {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
/* user flow */
.user-flow {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
.user-flow-img-div img {
    width: 100%;
}

/* wireframe */
.wireframe {
    margin-bottom: 100px;
    padding: 0px 50px 0px 50px;
}
.wireframe-img-div img {
    width: 100%;
}

/* usability study */
.usability-study {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
.us-div {
    display: flex;
    margin-bottom: 25px;
}
.icon {
    width: 10%;
}
.icon img {
    width: 50%;
}
.text {
    width: 90%;
}

/* usability study reports and key insights */
.usability-study-reports {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}

/* finding solutions from the usability report */
.finding-solutions {
    padding: 0px 50px 0px 50px;
    margin-bottom: 20px;
}
.finding-solutions-img-div img {
    width: 100%;
    margin-bottom: 100px;
}

/* screens showing a simple and direct user flow */
.simple-and-direct-user-flow {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
.simple-and-direct-user-flow h2 {
    text-align: center;
}
/* interactive onboarding */
.interactive-onboarding {
    margin-bottom: 200px;
}
.number-and-body-1 {
    display: flex;
    margin-bottom: 20px;
}
.number-1 {
    width: 5%;
    margin-right: 10px;
}
.number-1 img {
    width: 100%;
}
.body-1 {
    width: 54%;
    text-align: justify;
}
.interactive-onboarding-img-div img {
    width: 100%;
}
/* sign in or sign up */
.sign-in-sign-up {
    margin-bottom: 200px;
    /* border: 1px solid black; */
}
.number-and-body-2 {
    display: flex;
    justify-content: right;
    position: absolute;
    width: 92.5%;
    /* border: 1px solid black; */
}
.number-2 {
    width: 5%;
    margin-right: 10px;
}
.number-2 img {
    width: 100%;
}
.body-2 {
    width: 56%;
    text-align: justify;
}
.sign-in-sign-up-img-div img {
    width: 61%;
}
/* search and discover your desired book */
.search-and-discover {
    margin-bottom: 200px;
}
.number-and-body-3 {
    display: flex;
    justify-content: left;
    position: absolute;
}
.number-3 {
    width: 5%;
    margin-right: 10px;
}
.number-3 img {
    width: 100%;
}
.body-3 {
    width: 56%;
    text-align: justify;
}
.search-and-discover-img-div {
    text-align: right;
}
.search-and-discover-img-div img {
    width: 61%;
}
/* make request for book */
.make-request {
    margin-bottom: 200px;
}
.number-and-body-4 {
    display: flex;
    justify-content: right;
    position: absolute;
}
.number-4 {
    width: 5%;
    margin-right: 10px;
}
.number-4 img {
    width: 100%;
}
.body-4 {
    width: 59%;
    text-align: justify;
}
.make-request-img-div img {
    width: 61%;
}
/* notification of availability */
.notification {
    margin-bottom: 200px;
}
.number-and-body-5 {
    display: flex;
    justify-content: left;
    position: absolute;
}
.number-5 {
    width: 5%;
    margin-right: 10px;
}
.number-5 img {
    width: 100%;
}
.body-5 {
    width: 56%;
    text-align: justify;
}
.notification-img-div {
    text-align: right;
}
.notification-img-div img {
    width: 61%;
}
/* payment information */
.payment-information {
    margin-bottom: 200px;
}
.number-and-body-6 {
    display: flex;
    justify-content: right;
    position: absolute;
}
.number-6 {
    width: 5%;
    margin-right: 10px;
}
.number-6 img {
    width: 100%;
}
.body-6 {
    width: 59%;
    text-align: justify;
}
.payment-information-img-div img {
    width: 61%;
}
/* access your purchased book */
.number-and-body-7 {
    display: flex;
}
.number-7 {
    width: 5%;
    margin-right: 10px;
}
.number-7 img {
    width: 100%;
}
.body-7 {
    width: 100%;
    text-align: justify;
}
.access-img-div img {
    width: 100%;
}

/* white screens */
.white-screens {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
.white-screens-img-div img {
    width: 100%;
}

/* dark screens */
.dark-screens {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
.dark-screens-img-div img {
    width: 100%;
}

/* design system */
.design-system {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
.sub-h h4 {
    margin-bottom: 30px;
}
/* colours */
.colours {
    margin-bottom: 60px;
}
.colours-img-div img {
    width: 100%;
}
/* buttons and navigation */
.buttons-and-navigation {
    margin-bottom: 60px;
}
.but-and-nav-img-div img {
    width: 100%;
}
/* icon */
.icons {
    margin-bottom: 60px;
}
.icons-img-div img {
    width: 100%;
}
/* cards */
.cards {
    margin-bottom: 60px;
}
.cards-img-div img {
    width: 100%;
}
/* typography */
.typography {
    margin-bottom: 60px;
}
.typography-img-div img {
    width: 100%;
}
.component-and-input-img-div img {
    width: 100%;
}

/* accessibility check */
.accessibility-check {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
.accessibility-check-div h2{
    margin-bottom: 40px;
}
.ac-div {
    display: flex;
}
.ac-div p {
    text-align: justify;
    width: 33.3%;
}
.ac-div p:nth-child(1), .ac-div p:nth-child(2) {
    padding-right: 40px;
}

/* take away */
.take-away {
    padding: 0px 50px 0px 50px;
    margin-bottom: 100px;
}
.take-away-div h2 {
    margin-bottom: 50px;
}
.ta-div {
    display: flex;
}
.impact {
    width: 50%;
    margin-right: 40px;
    text-align: justify;
    margin-bottom: 30px;
}
.what-was-done {
    width: 50%;
    margin-left: 40px;
    text-align: justify;
    margin-bottom: 30px;
}

/* 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;
    }
    h3 {
        margin-bottom: 0px;
    }
    /* challenges goals merits */
    .challenges-goals-merits-div {
        display: unset;
    }
    .challenges {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 50px;
    }
    .goals-and-merits {
        width: 100%;
    }
    /* my role */
    .my-role-img-div {
        width: 40%;
        text-align: center;
    }
    .my-role-img-div img {
        width: 70%;
    }
    .my-role-body-div {
        width: 60%;
    }
    /* user pain points */
    .upp-img-div img {
        width: 100%;
    }
    /* user persona */
    .user-persona-img-1 {
        width: 50%;
        margin-right: 18px;
    }
    .user-persona-img-2 {
        width: 50%;
        margin-left: 18px;
    }
    /* usability study */
    .us-div {
        margin-bottom: 0px;
    }
    .finding-solutions-img-div img:last-child {
        margin-bottom: 45px;
        /* border: 1px solid black; */
    }
    /* screens showing a simple and direct user flow */
    .simple-and-direct-user-flow h2 {
        text-align: justify;
    }
    .sec {
        margin-bottom: 90px;
    }
    .sec-explain {
        font-size: xx-small;
        line-height: 10.5px;
    }
    .number-and-body-1 {
        margin-bottom: 10px;
    }
    .body-1 {
        width: 95%;
    }
    /* design system */
    .sub-h {
        margin-bottom: 30px;
    }
    .sub-h h4 {
        margin-bottom: 15px;
    }
    /* accessibility check */
    .accessibility-check-div h2 {
        margin-bottom: 20px;
    }
    .ac-div {
        display: unset;
    }
    .ac-div p {
        text-align: justify;
        width: 100%;
    }
    .ac-div p:nth-child(1), .ac-div p:nth-child(2) {
        padding-right: 0px;
    }
    /* take away */
    .take-away-div h2 {
        margin-bottom: 30px;
    }
    .ta-div {
        display: unset;
    }
    .impact {
        width: 100%;
        margin-right: 0px;
        text-align: justify;
    }
    .what-was-done {
        width: 100%;
        margin-left: 0px;
        text-align: justify;
    }
}

@media screen and (max-width: 608px) {
    .my-role-img-div img {
        width: 100%;
    }
}
@media screen and (max-width: 439px) {
    .notification-img-div img {
        margin-top: 10px;
    }
    .payment-information-img-div img {
        margin-top: 10px;
    }
}
@media screen and (max-width: 398px) {
    .make-request-img-div img {
        margin-top: 13px;
    }
    .notification-img-div img {
        margin-top: 15px;
    }
    .payment-information-img-div img {
        margin-top: 15px;
    }
}
@media screen and (max-width: 396px) {
    .search-and-discover-img-div img {
        margin-top: 10px;
    }
    .payment-information-img-div img {
        margin-top: 20px;
    }
}