@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*////////////////////////
    Table of Contents
    1. Global Styles
    2. Typography
    3. Layout
        3.1 Reusables
        3.2 Other
    4. Areas
        4.1 Header
        4.2 Introduction
        etc.
    5. Media Queries
////////////////////////*/

/* ------------------------------- 1. Global Styles -------------------------------- */
/* CSS Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --purple: #6E5697; /* palet name: Chrysler Blue */
    --light-orange: #E7A464;
    --night: #0C0C0C; /* palet name: Night, used for regular text  */
    --light-purple: #F2F0FF; /* palet name: Magnolia, used for big floating words, like "hello" and "services" */
    /* Exceptions: */
    --light-grey: #F3F6F9; /* used for background-color of the projects */
    --grey: #7A7A7A;
    /* used for text service-tile */

}

/* for regular text: */
body {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--night);
}

main {
    max-width: 1200px;
    margin: 0 auto;
}


/* ------------------------------- 2. Typography ----------------------------------- */
/* for headings: */


/* for regular text: */

/* ------------------------------- 3. Layout --------------------------------------- */
/* --------------- 3.1 Reusables ----------------------- */

/* --------------- 3.2 Other --------------------------- */

/* header*/

.hero-content {
    padding: 150px 0 400px 0;
    margin: 0 auto;
    max-width: 1200px;
    text-align: center;
}
.hero-title {
    font-size: 3rem;
    color: var(--light-purple);
}
.hero-subtitle {
    font-size: 24px;
    color: var(--light-orange);

}

/*///////////// 3.5 Footer /////////////*/

.footer {
    background-color: var(--purple);
    padding-block: 32px;
}

.footer-copyright {
    font-size: 14px;
    color: var(--light-purple);
    text-align: center;
}
/* ------------------------------- 4. Areas ---------------------------------------- */


/* --------------- 4.1 Header ------------------------- */

header {
    background-image: url("Logo_Regio_Professionals.jpg");
    background-size: 1000px;
    background-position: top;
}


/* --------------- 4.2 Introduction ------------------- */

/* ------------------------------- 5. Media Queries -------------------------------- */