/* begin main */

:root {
    --text_pc: rgb(51, 51, 51);
    --color_border: #d0d0d0;
    --color_bg: #060E9F;

}

body {
    background-color: rgb(245, 245, 245);
}

.main {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.main h2 {
    font-size: 2.5rem;
}

.main p {
    font-size: 1.2rem;
    color: rgb(51, 51, 51);
}

@media screen and (min-width: 320px) {
    .main h2 {
        font-size: 2.5rem;
    }

    .main p {
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 768px) {
    .main h2 {
        font-size: 3.6rem;
    }

    .main p {
        font-size: 1.5rem;
        color: rgb(51, 51, 51);
    }
}

/* end maiin    */


/* begin .container */
.main.container {
    width: 90%;
    display: grid;
    grid-template-areas:
        'card__1'
        'card__2'
        'card__3'
        'card__4'
        'card__5'
        'card__6'
        'card__7';

}



@media screen and (min-width: 320px) {
    .main.container {
        display: grid;
        row-gap: 5rem;
    }

}

@media screen and (min-width: 768px) {
    .main .container {
        width: 85%;
        display: grid;
        gap: 4rem;
    }


}

@media screen and (min-width: 1024px) {
    .main.container {
        width: 85%;
        display: grid;
        gap: 10rem;
    }
}

/* end .container */




/* begin .card__1 */

.card.card__1 {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;


}

.card__1.top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    animation: slideInDown;
    animation-duration: 2s;

}

.card__1.button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
    width: 50%;
    animation: slideInDown;
    animation-duration: 2s;

}

.btn {
    background: var(--color_bg);
    background: linear-gradient(to right, #060E9F, #0062cc);
    border-radius: 3rem;
    width: 95%;
    max-width: 200px;
    height: 38px;
    box-shadow: 0 0 25px var(--color_border);
    border: none;
    cursor: pointer;

}

.btn p,
.btn i {
    color: floralwhite;
    ;
}

.btn.btn1,
.btn.btn2,
.btn.btn3,
.btn.btn4,
.btn.btn5,
.btn.btn6,
.btn.btn7,
.btn.btn8,
.btn.btn9,
.btn.btn10,
.btn.btn11 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    color: var(--color_border);

}

@media screen and (min-width: 320px) {

    .btn p,
    .btn i {
        color: floralwhite;
        ;
    }

    .btn.btn1,
    .btn.btn2,
    .btn.btn3,
    .btn.btn4,
    .btn.btn5,
    .btn.btn6,
    .btn.btn7,
    .btn.btn8,
    .btn.btn9,
    .btn.btn10,
    .btn.btn11 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        color: floralwhite;

    }
}

@media screen and (min-width: 768px) {
    .card.card__1 {
        display: flex;
        grid-column: 1/3;
        gap: 5rem;
    }

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

    .card__1.button {
        display: grid;
        grid-template-rows: repeat(3, 43px);
        grid-template-columns: repeat(4, 64px);
        align-self: flex-start;


    }

    .btn p {
        display: none;
    }
}


@media screen and (min-width: 1024px) {
    .card.card__1 {
        grid-column: 1/2;
        max-width: 600px;
        display: flex;



    }


    .card__1.top h2,
    .card__1.top p {
        align-self: flex-start;
        text-align: right;
    }

    .btn p {
        display: none;
    }

    .btn {
        padding: 1rem 2rem;

    }

    .card__1.button {
        display: grid;
        grid-template-rows: repeat(3, 43px);
        grid-template-columns: repeat(4, 64px);
        align-self: auto;
    }

}


/* end .card__1 */



/* begin .card__2 */

.card__2 {
    width: 80%;
    background: var(--color_bg);
    background: linear-gradient(to right, #060E9F, #0062cc);
    border-radius: 100% 50% 50% 100% / 75% 69% 69% 75%;
    display: flex;
    justify-content: center;
    align-items: center;

}

@media screen and (min-width: 768px) {
    .card__2 {
        grid-row: 2/3;
    }
}

@media screen and (min-width: 1024px) {
    .card__2 {
        max-width: 450px;
        max-height: 450px;
    }
}


/* end .card__2 */




/* begin .card__3 */

.card__3 {

    grid-column: 1/2;
    max-width: 540px;

}

@media screen and (min-width: 1024px) {
    .card__3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}


/* end .card__3 */


/* begin .card__4 */
.card__4 {
    width: 80%;
    background: var(--color_bg);
    background: linear-gradient(to right, #060E9F, #0062cc);
    border-radius: 100% 50% 50% 100% / 75% 69% 69% 75%;
    display: flex;
    justify-content: center;
    align-items: center;

}

@media screen and (min-width: 1024px) {
    .card__4 {
        max-width: 450px;
        max-height: 450px;
    }
}



/* end .card__4 */

/* 
begin .card__5 */


.card__5 {

    max-width: 540px;

}

@media screen and (min-width: 768px) {
    .card__5 {
        grid-row: 2/3;
    }
}

@media screen and (min-width: 1024px) {
    .card__5 {
        grid-row: 2/3;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* end .card__5 */



.card__6 {
    width: 80%;
    background: #060E9F;
    background: linear-gradient(to right, #060E9F, #0062cc);
    border-radius: 100% 50% 50% 100% / 75% 69% 69% 75%;
    display: flex;
    justify-content: center;
    align-items: center;

}

@media screen and (min-width: 1024px) {
    .card__6 {
        max-width: 450px;
        max-height: 450px;
    }
}


/* begin .card__7 */
.card__7 {
    max-width: 540px;

}

@media screen and (min-width: 1024px) {
    .card__7 {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}


/* end .card__7 */

/* begin card__8 */

@media screen and (min-width: 320px) {}

.card__8 {
    display: none;
}

@media screen and (min-width: 768px) {
    .card__8 {
        display: none;
    }
}

@media screen and (min-width: 1024px) {
    .card__8 {
        margin-top: 5rem;
        grid-row: 1/2;
        grid-column: 2/3;
        width: 100%;
        background: #060E9F;
        background: linear-gradient(to right, #060E9F, #0062cc);
        border-radius: 100% 50% 50% 100% / 75% 69% 69% 75%;
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 80%;
        max-height: 100%;


    }

    .card__8 img {
        animation: slideInUp;
        animation-duration: 2s;
    }
}



/* end card__8 */