/**
 * --- 01 TYPOGRAPHY SYSTEM
 *
 * - Font sizes (px)
 * 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
 *
 * - Font weights
 * Default: 400
 * Medium: 500
 * Semi-bold: 600
 * Bold: 700
 *
 * - Line heights
 * Default: 1
 * Small: 1.05
 * Medium: 1.2 / 1.3
 * Paragraph default: 1.6
 *
 * - Letter spacing
 * -0.5px
 * 0.75px
 *
 * --- 02 COLORS
 *
 * - Primary: #47977D
 * - Secondary: #EE854B
 * - Tints:
 *
 *
 * - Shades:
 *
 *
 * - Accents:
 * - Greys
 *
 * #888
 * #767676 (lightest grey allowed on #fff)
 * #6f6f6f (lightest grey allowed on #fdf2e9)
 * #474747
 * #333
 *
 * --- 05 SHADOWS
 *
 * 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
 *
 * --- 06 BORDER-RADIUS
 *
 * Default: 9px
 * Medium: 11px
 *
 * --- 07 WHITESPACE
 *
 * - Spacing system (px)
 * 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
 *
 * @format
 */

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

html {
    /* font-size: 10px; */
    /* 10px / 16px = 0.625 = 62.5% */
    /* Percentage of user's browser font-size setting */
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    font-family: "Poppins", sans-serif;
    font-weight: normal;
    line-height: 1;
    font-weight: 400;
    color: #474747;
    overflow-x: hidden;
}

/**************************/
/* GENRAL REUSABLE COMPONENTS */
/**************************/

.container {
    /* 1140px */
    max-width: 160rem;
    padding: 0 4.8rem;
    margin: 0 auto;
}

.grid {
    display: grid;
    column-gap: 4rem;
    row-gap: 9.6rem;

    /* margin-bottom: 9.6rem; */
}

.grid--2-cols {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3-cols {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4-cols {
    grid-template-columns: repeat(4, 1fr);
}

.grid--2-1-cols {
    grid-template-columns: 2fr 1fr;
}

.secondary-text {
    color: #ee854b;
}
.heading-tertiary {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 3.2rem;
}
.subheading {
    font-style: normal;
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.5;
}

.gray-text {
    color: #616161;
}

.primary-text {
    color: #47977d;
}
.secondary-text {
    color: #4b61ee;
}

.btn:link,
.btn:visited {
    display: inline-block;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 600;
    padding: 1.2rem 3.2rem;
    border-radius: 9px;

    border-radius: 4px;
    transition: background-color 0.3s;
}
.submit-btn {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: #ffffff;
    padding: 1rem 0;
    background: #ee854b;
    border: 1px solid #ee854b;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 3px;
    cursor: pointer;
}
.btn--full:link,
.btn--full:visited {
    background: #4b71ee;
    border: 1px solid #4b71ee;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    color: #fff;
}

.btn--full:hover,
.btn--full:active {
    background-color: #1f8ccf;
}