/* Fonts downloaded from Google Fonts */
@font-face {
    font-family: Outfit;
    src: url("../fonts/Outfit-Medium.ttf");
}

@font-face {
    font-family: Outfit;
    src: url("../fonts/Outfit-Regular.ttf");
}

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

}

:root {
    --white: #ffffff;

    --slate-300: #d5E1Ef;
    --slate-500: #3685ff;
    --slate-900: #1f314f;

    /* ========== FONT-WEIGHTS========= */
    --font-400: 400;
    --font-700: 700;

}


/* ==========CONTAINER========== */
.component-container {
    max-width: 90rem;
    width: 100%;
    height: 100vh;
    background-color: var(--slate-300);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==========CONTAINER BOX========== */

.component-box {
    width: 20rem;
    height: 31.18rem;
    border-radius: 1.25rem;
    padding: 1rem 1rem 2.5rem;
    background-color: var(--white);
}


.component-container .component-box img {
    width: 18rem;
    height: 18rem;
}

.component-box .box-info {
    padding: 0 1rem;
}

.component-box .box-info h1 {
    font-family: Outfit, sans-serif;
    font-size: 1.37rem;
    font-weight: 700;
    color: var(--slate-900);
    width: 15rem;
    text-align: justify;
    word-spacing: 0px;
    margin: 1.25rem 0 1rem;

}

.component-box .box-info p {
    font-family: Outfit, sans-serif;
    font-size: 0.93rem;
    font-weight: 400;
    width: 16rem;
    text-align: center;
    color: var(--slate-500);

}