/*#region Root Directory for Colours*/
    /*Root Directory for Colours for easy use in other Styling Sections*/
    :root {
        --primary-color: #CD2E31;
        --secondary-color: #3B3B3B;
        --accent: #DFDFDF;
        --off-white: #F4F4F4;
    }
/*#endregion*/

/*#region Core Styling*/
    /*Core Styling goes Here*/
    body {
        font-family: "Fredoka", serif;
        margin: 0;
        padding: 0;
        background-color: var(--accent);
        color: var(--secondary-color);
    }
/*#endregion*/

/*#region Heading Styling*/
    /*Title / Heading Styling*/
    h1, h2, h3, h4, h5, h6 {
        font-weight: 500;
        text-align: center;
    }
/*#endregion*/

/*#region P Styling*/
    /*Standard P Styling*/
    p {
        text-align: justify;
    }
/*#endregion*/

/*#region Header-Styling*/
    /*Header Styling*/
    header {
        background-color: var(--primary-color);
        color: var(--off-white);
        padding: 10px;
        text-align: center;
        border-bottom: solid 5px var(--secondary-color);
    }
/*#endregion*/

/*#region Navbar-Styling*/
    /*General Navbar Styling*/
    .navbar {
        background-color: var(--off-white);
        padding: 20px;
        text-align: center;
        margin-bottom: 20px
    }

    /*Navbar Link / Text Styling*/
    .navbar a {
        color: var(--secondary-color);
        text-decoration: none;
        padding: 20px;
    }

    /*Navbar Active*/
    .navbar .active {
        background-color: var(--off-white);
    }

    /*Active Page Effect on Navbar*/
    .navbar .active-page {
        background-color: var(--accent);
        border-bottom: solid 5px var(--primary-color);
    }
/*#endregion*/

/*#region Footer-Styling*/
    /*Footer Styling*/
    footer {
        background-color: var(--off-white);
        padding: 20px;
        margin: 0;
        margin-top: 10px;
    }

    footer ul {
        padding: 0px;
        margin: 0px;
    }

    /*Centers the Footer List and Removes the General List Styling*/
    footer ul li {
        margin: 0px;
        text-align: center;
        list-style: none;
    }

    /*Styles the Footer Link Text*/
    footer ul li a {
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        color: var(--secondary-color);
        font-size: 24px;
    }

    /*Sizes the Footer Icons and Border*/
    footer ul li a img {
        width: 65px;
        height: 65px;
        border-radius: 20px;
        border: none;
        margin: 1% 5% 0 5%;
    }
/*#endregion*/

/*#region Standard Section Styling*/
    /*Standard Section Styling*/
    section {
        background-color: var(--off-white);
        border: solid 2px var(--secondary-color);
        border-radius: 5px;
        padding: 20px;
        margin: 10px;
        width: 100%;
        text-align: center;
    }

    /*Main Page Map Sizing*/
    section#contact iframe {
        width: 65%;
    }

    /*Styling for the Trainee Sections*/
    section#trainee {
        width: 100%;
        max-height: 250px;
        text-align: left;
    }
    
    /*Trainee Image Sizing and Box Shadow*/
    section#trainee img {
        width: 175px;
        height: 175px;
        box-shadow: 2px 5px 5px var(--secondary-color);
    }

    /*Apply now Section Custom Sizing*/
    section#apply-now {
        width: 600px;
        height: 200px;
    }

    section#apply-now p {
        text-align: center;
    }
/*#endregion*/

/*#region Flex Container Styling*/
    /*Standard Flex Container Styling*/
    .flex-container {
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 25px;
        margin-top: 0;
    }

    /*Seperate Flex Container for Trainee Sections*/
    .section-flex {
        text-align: left;
        display: flex;
    }
    
    /*Text Styling inside Flex Container*/
    .section-flex p {
        margin: 20px;
        font-size: large;
    }

    /*Similar to Flex Container but changes how the page is Displayed*/
    .jobs-page {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    /**/
    .jobs-page .flex-container {
        margin-bottom: 0;
        margin-top: 0;
        flex-wrap: nowrap;
    }

    /*Gives the Images on the Jobs Page Standard Sizing and Box Shadows*/
    .jobs-page .flex-container img {
        box-shadow: 5px 5px 5px;
        height: 400px;
        width: 550px;
    }
/*#endregion*/

/*#region Button Styling*/
    /*Basic Button Styling*/
    .button {
        font-family: "Fredoka", serif;
        font-size: 16px;
        background-color: var(--primary-color);
        color: var(--off-white);
        border: 2px outset var(--secondary-color);
        padding: 15px 65px;
        margin: 10px;
        border-radius: 0;
        transition-duration: 0.5ms;
    }

    /*Hover on Button Styling*/
    .button:hover {
        background-color: var(--secondary-color);
        cursor: pointer;
    }
/*#endregion*/

/*#region Contact Form Styling*/
    /*Non Focus Text Input*/
    form input[type="text"] {
        font-size: large;
        font-family: "Fredoka", serif;
        padding: 5px;
        border: solid 1px var(--secondary-color);
        border-radius: 5px;
        width: 30%;
    }

    /*Non Focus Text Area*/
    form textarea[name="message"] {
        font-size: large;
        font-family: "Fredoka", serif;
        border-radius: 5px;
        border: solid 1px var(--secondary-color);
        width: 70%;
        height: 150px;
        resize: none;
        padding: 5px;
    }

    .contact-form {
        display: flex;
    }

    .form-container {
        width: 100%;
    }
/*#endregion*/

/*#region Media Query Compatibility*/
    @media screen and (max-width: 600px) {

        /*#region Navbar Styling*/
            .navbar a {
                padding-left: 14px;
                padding-right: 14px;
            }
        /*#endregion*/

        /*#region Footer Styling*/
            footer ul li a {
                font-size: 16px;
            }

            footer ul li a img {
                margin: 10px 3% 0 3%;
                width: 55px;
                height: 55px;
                border-radius: 15px;
            }
        /*#endregion*/

        /*#region Standard Section Styling*/
            /**/
            section#contact iframe {
                width: 100%;
            }

            /**/
            section#contact-us form input[type="text"] {
                width: 60%;
            }
            
            /**/
            section#contact-us form textarea[name="message"] {
                width: 85%;
            }

            /*Apply now Section Custom Sizing*/
            section#apply-now {
                margin: 15px;
                width: 100%;
            }

            /*Styling for the Trainee Sections*/
            section#trainee {
                width: 100%;
                max-height: 70%;
                text-align: center;
            }
            
            /*Trainee Image Sizing and Box Shadow*/
            section#trainee img {
                width: 175px;
                height: 175px;
                box-shadow: 2px 5px 5px var(--secondary-color);
            }
        /*#endregion*/

        /*#region Flex Container Styling*/
            .flex-container {
                margin: 5px;
            }

            /*Similar to Flex Container but changes how the page is Displayed*/
            .jobs-page {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
            }

            /**/
            .jobs-page .flex-container {
                margin-bottom: 0;
                margin-top: 0;
                flex-wrap: wrap;
            }

            /*Gives the Images on the Jobs Page Standard Sizing and Box Shadows*/
            .jobs-page .flex-container img {
                box-shadow: 5px 5px 5px;
                height: 225px;
                width: 300px;
            }

            /*Seperate Flex Container for Trainee Sections*/
            .section-flex {
                text-align: center;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            /*Text Styling inside Flex Container*/
            .section-flex p {
                margin: 20px;
                font-size: large;
            }
        /*#endregion*/
    }
/*#endregion*/