:root {

    /* Primary */
    --clr-primary: hsl(300, 43%, 22%);
    --clr-secondary: hsl(333, 80%, 67%);

    /* Neutral */
    --clr-neutral-1: hsl(303, 10%, 53%);
    --clr-neutral-2: hsl(300, 24%, 96%);
    --clr-neutral-3: hsl(0, 0%, 100%);

    /* Font */
    --ff-primary: 'League Spartan', sans-serif;

    /* font weight */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
}

/***** Element-lvl Global Styling *****/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* html {
    font-size: 93.75%; 15px
} */

body {
    font-family: var(--ff-primary);
    font-weight: var(--fw-regular);
    color: var(--clr-primary);
    background-color: var(--clr-neutral-3);

    line-height: 1.5;

    background-image: url("./images/bg-pattern-top-mobile.svg"),
                      url("./images/bg-pattern-bottom-mobile.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: top left, bottom right;
    background-size: auto, 100vh 50vh;
}

blockquote, blockquote  p{
    margin-bottom: 0 !important;
}


/***** Global Styling *****/

.container {
    width: min(87%, 69.375rem);
    padding-inline: 0 ;

    min-height: 100vh;
    display: grid;
    place-items: center;
}

.ratings-container{
    padding-inline: 0;
}


/***** Utility Styling *****/
.bg-primary {
    background-color: var(--clr-primary) !important;
}

.bg-primary-subtle{
    background-color: hsl(from var(--clr-secondary) h s l/0.1) !important;
}

.col-12 {
    padding-inline: 0 !important;
}
.fs-6 {
    font-size:2.5rem !important;
    line-height: 0.75;
}

.letter-spacing-1 {
    letter-spacing: -0.2px;
}

.text-primary {
    color: var(--clr-primary) !important;
}

.text-secondary {
    color: var(--clr-secondary) !important;
}

.py-5 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

.px-4 {
    padding-left: 1.875rem !important;
    padding-right: 1.875rem !important;
}

.row{
    width: 100%;
    padding-inline: 0 !important;
}

@media (min-width: 992px) {
    body {
        background-image: url("./images/bg-pattern-top-desktop.svg"),
                          url("./images/bg-pattern-bottom-desktop.svg");
        background-position: top left, bottom right;
        background-size: auto, auto;
    }

    .testimonial-container > div{
        height: 265px;
    }

    .ratings{
        width: 80%;
    }
}