@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

:root{
    /* Typography */
    /* => Font */
    --main-font: "League Spartan", sans-serif;

    /* Colors */
    /* => Primary Colors */
    --very-dark-magenta: hsl(300, 43%, 22%);
    --soft-pink: hsl(333, 80%, 67%);
    /* => Neutral Colors */
    --dark-grayish-magenta: hsl(303, 10%, 53%);
    --light-grayish-magenta: hsl(300, 24%, 96%);
    --white: hsl(0, 0%, 100%);
}
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
body{
    font-family: var(--main-font);
    font-size: 15px;
}



/* #main */
#main{
    width: 100vw;
    min-height: 100vh;
    background-image: url(images/bg-pattern-top-desktop.svg), url(images/bg-pattern-bottom-desktop.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: top left, bottom right;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* #main */



/* #social_proof_section */
#social_proof_section{
    display: flex;
    flex-direction: column;
    gap: 50px;
    max-width: 1280px;
    margin: auto;
    padding: 80px 50px;
    background-color: transparent;
}

/* #social_proof_section => .row_1 */
#social_proof_section > .row_1{
    display: flex;
    gap: 50px;
}
#social_proof_section > .row_1 > .col{
    flex: 1 0 45%;
}
/* #social_proof_section => .row_1 => .col_1 */
#social_proof_section > .row_1 > .col_1 > .heading{
    font-size: 55px;
    color: var(--very-dark-magenta);
    margin-bottom: 25px;
}
#social_proof_section > .row_1 > .col_1 > .description{
    font-size: 18px;
    color: var(--dark-grayish-magenta);
    font-weight: 500;
}
/* #social_proof_section => .row_1 => .col_1 */

/* #social_proof_section => .row_1 => .col_2 */
#social_proof_section > .row_1 > .col_2 > .rating{
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
}
#social_proof_section > .row_1 > .col_2 > .rating > li{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 25px;
    background-color: var(--light-grayish-magenta);
    padding: 15px 20px;
    border-radius: 8px;
}
#social_proof_section > .row_1 > .col_2 > .rating > li:nth-child(1){
    margin-right: 60px;
}
#social_proof_section > .row_1 > .col_2 > .rating > li:nth-child(2){
    margin-left: 30px;
    margin-right: 30px;
}
#social_proof_section > .row_1 > .col_2 > .rating > li:nth-child(3){
    margin-left: 60px;
}
#social_proof_section > .row_1 > .col_2 > .rating > li > .stars{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
#social_proof_section > .row_1 > .col_2 > .rating > li > .text{
    font-size: 16px;
    font-weight: bold;
    color: var(--very-dark-magenta);
}
/* #social_proof_section => .row_1 => .col_1 */
/* #social_proof_section => .row_1 */


/* #social_proof_section => row_2 */
#social_proof_section > .row_2{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
    flex-wrap: wrap;
}
/* #social_proof_section => row_2 => .card */
#social_proof_section > .row_2 > .card_2{
    margin-top: 30px;
}
#social_proof_section > .row_2 > .card_3{
    margin-top: 60px;
}
#social_proof_section > .row_2 > .card{
    background-color: var(--very-dark-magenta);
    padding: 30px 25px;
    border-radius: 8px;
    flex: 1 0 300px;
    max-width: 400px;
}
#social_proof_section > .row_2 > .card > .identity{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 25px;
    margin-bottom: 25px;
}
#social_proof_section > .row_2 > .card > .identity > .profile_pic{
    width: 45px;
    height: 45px;
    border-radius: 50%;
}
#social_proof_section > .row_2 > .card > .identity > .name_and_verification{
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 6px;
}
#social_proof_section > .row_2 > .card > .identity > .name_and_verification > .name{
    font-size: 18px;
    color: var(--white);
    font-weight: 600;
}
#social_proof_section > .row_2 > .card > .identity > .name_and_verification > .verification{
    font-size: 16px;
    color: var(--soft-pink);
    font-weight: 400;
}
#social_proof_section > .row_2 > .card > .review_text{
    color: var(--white);
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
}
/* #social_proof_section => row_2 => .card */
/* #social_proof_section => row_2 */
/* #social_proof_section */




/* Responsiveness */
/* max-width: 780px */
@media screen and (max-width: 780px){
    /* #main */
    #main{
        background-image: url(images/bg-pattern-top-mobile.svg), url(images/bg-pattern-bottom-mobile.svg);
    }
    /* #main */


    /* #social_proof_section => row_1 */
    #social_proof_section > .row_1{
        flex-direction: column;
    }

    /* #social_proof_section => row_1 => .col_1 */
    #social_proof_section > .row_1 > .col_1{
        text-align: center;
    }
    /* #social_proof_section => row_1 => .col_1 */

    /* #social_proof_section => row_1 => .col_2 */
    #social_proof_section > .row_1 > .col_2{
        margin: auto;
    }
    #social_proof_section > .row_1 > .col_2 > .rating > li{
        flex-direction: column;
        gap: 10px;
    }
    #social_proof_section > .row_1 > .col_2 > .rating > li:nth-child(1),#social_proof_section > .row_1 > .col_2 > .rating > li:nth-child(2),#social_proof_section > .row_1 > .col_2 > .rating > li:nth-child(3){
        margin-right: 0;
    }
    #social_proof_section > .row_1 > .col_2 > .rating > li:nth-child(2),#social_proof_section > .row_1 > .col_2 > .rating > li:nth-child(3){
        margin-left: 0;
    }
    /* #social_proof_section => row_1 => .col_2 */

    /* #social_proof_section => row_2 */
    #social_proof_section > .row_2 > .card{
        margin-top: 0;
    }
    /* #social_proof_section => row_2 */
    /* #social_proof_section => row_1 */
}
/* max-width: 780px */
/* Responsiveness */