/* constants */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "DM Sans";
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

:root {
    --Purple-100: hsl(254, 88%, 90%);
    --Purple-500: hsl(256, 67%, 59%);

    --Yellow-100: hsl(31, 66%, 93%);
    --Yellow-500: hsl(39, 100%, 71%);

    --White: hsl(0, 0%, 100%);
    --Black: hsl(0, 0%, 7%);
}

p {
    font-size: 18px;
}
img {
    width: 100%;
}
/* constants */
/* main */
main {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 95%;
    height: 100%;
    background-color: var(--White);
}




/* main */
/* components */

.container {
    padding: 20px;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.card {
    align-items: center;
    width: 90%;
    text-align: center;
    border-radius: 10px;
}



.purple-1 {
    background-color: var(--Purple-500);
    color: var(--White);
}
.purple-2 {
    background-color: var(--Purple-100);
}
.yellow-1 {
    background-color: var(--Yellow-500);
}
.yellow-2 {
    background-color: var(--Yellow-100);
}
.white {
    background-color: var(--White);
}


/* components */
/* start of card-1 */
.card-1 {
    margin-top: 20px;
}

.card-1 p:nth-child(1) {
    font-size: 44px;
    font-weight: 500;
    line-height: 0.9;
    
}

.card-1 img {
    width: 75%;
    background-position: center;
}

.card-1 p:nth-child(1) span:nth-child(1) {
    color: var(--Yellow-500);
}
.card-1 p:nth-child(1) span:nth-child(2) {
    font-style: italic;
}

/* end of card-1*/
/* start of card-2 */
.card-2 p {
    text-align: left;
    font-size: 1.2em;
    font-weight: 500;
}

/* end of card-2*/
/* start of card-3 */
.card-3 p {
    text-align: left;
    font-size: 1.3em;
    font-weight: 500;
}

.card-3 .container {
    padding: 20px 10px 0px 10px;
    display: flex;
    flex-flow: column ;
    width: 80%;
    align-self: flex-start;
    justify-content: space-between;
    gap: 0px;
    overflow: hidden;
}

.card-3 img {
    width: 90%;
    position: relative;
    bottom: -15px;
    left: -10px;
}

/* end of card-3*/
/* start of card-4 */
.card-4 p:nth-child(1) {
    font-weight: 600;
    font-size: 1.2em;
}

.card-4 p:last-child {
    font-size: 1em;
    font-weight: 500;
}
/* end of card-4 */
/* start of card-5 */
.card-5 p {
    font-weight: 600;
    font-size: 1.5em;
    /* width: ; */
    line-height: 0.9;
}

.card-5  .container {
    display: flex;
    width: 80%;
    margin: auto;
    gap: 30px 0px;
}

/* end of card-5 */
/* start of card-6 */
.card-6 span {
    display: block;
    text-align: left;
    font-size: 2.3em;
    font-weight: 600;
}

.card-6 p {
    font-size: 1em;
    font-weight: 500;
}

.card-6 .container {
    text-align: left;
    align-items: flex-start;
    width: 80%;
    gap: 20px;
}

.card-6 img {
    width: 90%;
}
/* end of card-6 */
/* start of card-7 */
.card-7 p {
    text-align: left;
    font-size: 1.5em;
    font-weight: 600;
}

.card-7 span {
    color: var(--Purple-500);
    font-style: italic;
}

.card-7 .container {
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}

.card-7 img {
    width: 70%;
}
/* end of card-7 */
/* start of card-8 */
.card-8 {
    margin-bottom: 20px;
}
.card-8 p {
    text-align: left;
    font-size: 1.5em;
    font-weight: 600;
    line-height: 0.9;
}

.card-8 .container {
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
}

.card-8 img {
    width: 70%;
}