/* CUSTOM PROPERTIES */
:root {
    --color-orange: rgba(237, 133, 7, 1);
    --color-blue: rgba(24, 78, 102, 1);
    --color-box-light: rgba(219, 162, 84, 1);
    --color-box-dark: rgba(178, 122, 56, 1);
    --color-white: rgba(255, 255, 255, 1);
    --color-black: rgba(0, 0, 0, 1);
    --color-gray-100: rgba(239, 239, 239, 1);
    --color-gray-200: rgba(205, 205, 205, 1);
    --color-gray-300: rgba(160, 160, 160, 1);
    --color-gray-400: rgba(85, 85, 85, 1);
    --color-gray-500: rgba(37, 37, 37, 1);

    --font-heading: 'Mulish',helvetica,arial,sans-serif;
    --font-body: 'Mulish',helvetica,arial,sans-serif;
}

/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-blue);
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: 900;
    line-height: 110%;
    margin: 0;
}

h1 { font-size: 32.44px; }
h2 { font-size: 28.83px;}
h3 { font-size: 25.63px; }
h4 { font-size: 22.78px; }
h5 { font-size: 20.25px; }
h6 { font-size: 18px; }

p, li, td {
    color: var(--color-gray-500);
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    margin: 0;
}

p.small { font-size: 13.33px; }

p.tiny { font-size: 11.11px; }

strong { font-weight: 700; }

em { font-style: italic; }

a:link {
    color: var(--color-orange);
    text-decoration: underline;
}
a:visited {
    color: var(--color-orange);
    text-decoration: underline;
}
a:hover {
    color: var(--color-orange);
    text-decoration: underline;
}
a:focus {
    color: var(--color-orange);
    text-decoration: underline;
}
a:active {
    color: var(--color-orange);
    text-decoration: underline;
}

.orange-emphasis {
    color: var(--color-orange);
    font-style: italic;
}


/* UTILITIES */
.container {
    margin: 0 auto;
}

.row {
    padding: 0 20px 60px;
}



/* BACKGROUNDS */
.bg-neutral {
    background: var(--color-gray-100);
}



/* COMPONENT: HEADER */
header {
    padding-top: 50px;
}

header .row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

header img {
    text-align: center;
    max-width: 325px;
    height: auto;
}

header .divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-gray-200);
}



/* COMPONENT: HERO */
.hero .row {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.hero .content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hero .images {
    display: flex;
    flex-direction: row;
    gap: 15px;
    width: 100%;
}

.hero .hero-image-1,
.hero .hero-image-2 {
    flex: 1 1 0;
    height: 240px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
}

.hero .hero-image-1 { margin-top: 15px; }



/* TILES */
.tiles .row {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tiles .steps {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tiles .step {
    border-radius: 55px 10px 10px 55px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    padding: 15px;
}

.tiles .step img {
    max-width: 60px;
    height: auto;
}

.tiles h2 {
    text-align: center;
}



/* LIST */
.list .row {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.list h2 {
    text-align: center;
}

.list .item-cloud {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.list .divider {
    width: 8px;
    height: 8px;
    background-color: var(--color-box-light);
}



/* LOCATION */
.location .row {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.location h2 {
    text-align: center;
}

.location td {
    vertical-align: top;
}

.location td:first-child {
    padding-right: 20px;
    text-align: right;
}



/* ABOUT */
.about .row {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.about .content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.about .card {
    border-radius: 10px;
    border: 1px solid var(--color-gray-200);
    padding: 20px;
}

.about .card h5 {
    text-align: center;
}

.about .card ul {
    list-style-type: square;
}

.about .card li::marker {
    color: var(--color-box-light);
}



/* COMPONENT: FOOTER */
footer {
    margin: 0;
    padding: 30px;
}

footer p.tiny {
    text-align: center;
}




/* ----------------------------------------------------------------------- */
/* ----- MEDIA QUERIES ----- */

/* MD */
@media screen and (min-width: 768px ) { 
    /* UTILITIES */
    .row {
        padding: 0 40px 60px;
    }

    /* COMPONENT: HEADER */
    header {
        padding-top: 40px;
    }

    /* COMPONENT: HERO */
    .hero .row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* COMPONENT: HERO */
    .hero .row {
        gap: 120px;
    }

    .hero .content {
        max-width: 50%;
    }

    .hero .images {
        max-width: 50%;
    }

    .hero .hero-image-1 {
        object-position: 32% center;
    }

    /* TILES */
    .tiles .steps {
        max-width: 480px;
        margin: 0 auto;
    }

    /* LOCATION */
    .location table {
        max-width: 480px;
        margin: 0 auto;
    }
}

/* LG */
@media screen and (min-width: 1024px ) {
    /* UTILITIES */
    .container {
        max-width: 1440px;
    }

    .row {
        padding: 0 80px 100px;
    }

    /* TYPOGRAPHY */
    h1 { font-size: 68.66px; }
    h2 { font-size: 54.93px;}
    h3 { font-size: 43.95px; }
    h4 { font-size: 35.16px; }
    h5 { font-size: 28.13px; }
    h6 { font-size: 22.5px; }

    p, li, td {
        font-size: 22px;
    }

    p.small { font-size: 14.4px; }

    p.tiny { font-size: 11.52px; }

    /* COMPONENT: HEADER */
    header {
        padding-top: 30px;
    }

    header img {
        width: 390px;
        max-width: 100%;
    }

    /* COMPONENT: HERO */
    .hero .hero-image-1,
    .hero .hero-image-2 {
        height: 360px;
    }

    /* TILES */
    .tiles .row {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .tiles .steps {
        display: flex;
        flex-direction: row;
        gap: 15px;
        max-width: 100%;
        width: 100%;
    }
    
    .tiles .step {
        flex: 1 1 33.333%;
        border-radius: 10px;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
        padding: 30px;
        text-align: center;
    }
    
    .tiles .step img {
        width: 120px;
        max-width: 100%;
    }
    
    .tiles h2 {
        text-align: center;
    }

    /* ABOUT */
    .about .row {
        flex-direction: row;
        gap: 120px;
    }

    .about .content {
        display: flex;
        flex-direction: column;
        gap: 15px;
        max-width: 50%;
    }

    .about .card {
        border-radius: 10px;
        border: 1px solid var(--color-gray-200);
        padding: 20px 30px;
        max-width: 50%;
    }

    .about .card h5 {
        text-align: center;
    }

    .about .card ul {
        list-style-type: square;
    }

    .about .card li::marker {
        color: var(--color-box-light);
    }
}

/* XL */
@media screen and (min-width: 1440px ) {
    /* UTILITIES */
    .container {
        max-width: 1680px;
    }

    .row {
        padding: 0 120px 120px;
    }

    /* COMPONENT: HERO */
    .hero .hero-image-1,
    .hero .hero-image-2 {
        height: 640px;
    }
}