/* This is the base CSS document */


/* =============== Color Root =============== */

:root {
    /* ======= our colors ======= */
    --color-white: #F9F9F9;
    /*var(--color-white)*/

    --color-light-blue: #83D2FF;
    /*var(--color-light-blue)*/

    --color-baby-blue: #C7E9FC;
    /*var(--color-baby-blue)*/

    --color-dark-blue: #192442;
    /*var(--color-dark-blue)*/

    --color-green: #7CEEC5;
    /*var(--color-green)*/

    --color-coral-red: #FF7878;
    /*var(--color-coral-red)*/

    --color-light-coral-red: #FF9494;
    /*var(--color-light-coral-red)*/


    /* ======= primary color ======= */
    --color-primary: var(--color-light-blue);
    /*var(--color-primary)*/


    /* ======= specific colors ======= */
    --header-bg-color: var(--color-light-blue);
    /*var(--header-bg-color)*/

    --page-bg-color: var(--color-white);
    /*var(--page-bg-color)*/

    --footer-bg-color: var(--color-light-blue);
    /*var(--footer-bg-color)*/

    --text-color-light: var(--color-white);
    /*var(--text-color-light)*/

    --text-color-dark: var(--color-dark-blue);
    /*var(--text-color-dark)*/
}


/* =============== Body =============== */

body {
    margin: 0px;
    background-color: var(--page-bg-color);
}


/* =============== Typography | mobile =============== */

/* H1 text - banner title */
h1 {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    color: var(--text-color-dark);
    line-height: 150%;
    /* 31.5px */
    margin: 0px;
}


/* H2 text - headline */
h2 {
    font-family: "Poppins", sans-serif;
    font-size: 21px;
    font-weight: 700;
    font-style: normal;
    color: var(--text-color-light);
    line-height: 150%;
    /* 31.5px */
    margin: 0px;
}


/* H3 text - subheading */
h3 {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    color: var(--text-color-light);
    line-height: 150%;
    /* 27px */
    margin: 0px;
}

/* H4 text - button */
h4 {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    color: var(--text-color-dark);
    line-height: normal;
    margin: 0px;
}


/* p text - body text */
p {
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    color: var(--text-color-light);
    line-height: 150%;
    margin: 0px;
}

/* modifier - dark text */
.dark-text {
    color: var(--text-color-dark);
}

/* modifier - light text */
.light-text {
    color: var(--text-color-light);
}

/* modifier - bold */
.bold {
    font-weight: 700;
}


/* modifier - italic */
.italic {
    font-style: italic;
}

/*modifier - bold italic */
.bold-italic {
    font-weight: bold;
    font-style: italic;
}

/* p text - small body text */
p.small {
    font-size: 14px;
    color: #6E7485;
}


/* =============== Header =============== */
#header {
    display: flex;
    height: 60px;
    align-items: center;

    border-bottom: 2px solid var(--color-dark-blue);
    background: var(--header-bg-color);

    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    z-index: 100;
}

#header-inner {
    display: flex;
    padding: 0px 16px;
    justify-content: space-between;
    width: 100%;
}

.header-icons {
    height: 45px;
    width: 45px;
}


/* =============== Menu & website behavior =============== */
.mobile-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 20px;
    background-color: var(--color-dark-blue);
    position: absolute;
    top: 60px;
    right: 20px;
    width: 200px;
}

.mobile-menu li {
    margin: 10px 0;
}

.mobile-menu li a {
    font-family: poppins;
    text-decoration: none;
    color: var(--color-white);
    font-size: 16px;
    transition: color 0.3s ease;
}

.mobile-menu li a:hover {
    color: var(--color-coral-red);
}


/* Show Menu */
.mobile-menu.active {
    display: block;
}

html {
    scroll-behavior: smooth;
}


/* =============== CTA button =============== */
.cta-button {
    /* Neutralizes the default styles on the semantic tag 'button' */
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    text-decoration: none;

    /* Button style */
    display: flex;
    max-width: 124px;
    width: 100%;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;

    border-radius: 5px;
    background: #FF7878;
}

.cta-button:hover {
    background-color: var(--color-green);
    border: 3px solid var(--color-dark-blue);
}

.cta-button-kontakt {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    text-decoration: none;

    /* Button style */
    display: flex;
    max-width: 124px;
    width: 100%;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    border: 1px solid #192442;
    border-radius: 5px;
    background: var(--color-white);
}

.cta-button-kontakt:hover {
    background-color: var(--color-green);
    border: 3px solid var(--color-dark-blue);
}


/* =============== Footer | mobile =============== */

#footer {
    display: flex;
    justify-content: center;
    background: var(--footer-bg-color);
}

#footer-inner {
    display: flex;
    padding: 30px 0px 10px 0px;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

#footer-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.footer-icon {
    width: 44px;
}



/* ========================================================================================== */

/* =============== Media Query =============== */
@media only screen and (min-width: 901px) {

    /* =============== Typography | desktop =============== */
    /* H1 text - banner title */
    h1 {
        font-size: 25px;
    }


    /* H2 text - headline */
    h2 {
        font-size: 25px;
    }

    /* H4 text - button */
    h4 {
        font-size: 18px;
    }


    /* =============== CTA button =============== */
    .cta-button {
        padding: 5px 24px;
    }

    .cta-button-kontakt {
        padding: 5px 24px;
    }

    
    /* =============== Header =============== */
    #header {
        justify-content: center;
        border-bottom: 4px solid var(--color-dark-blue);
    }

    #header-inner {
        max-width: 1248px;
        padding: 0px 24px;
    }


    /* =============== Footer =============== */
    #footer {
        height: 60px;
    }

    #footer-inner {
        flex-direction: row-reverse;
        width: 100%;
        max-width: 1248px;
        justify-content: space-between;
        padding: 0 24px;
    }

    #footer-icons {
        gap: 24px;
    }
}