/* Global Variables */

:root {
    --main-color: rgb(0, 154, 157);
    --secondary-page-color: rgb(244, 247, 249);
}

/* Main Sections */

/* Hero Secton */

#hero {
    background-image: url(https://picsum.photos/seed/1/2020/750);
    height: 750px;
}

#hero .mask {
    width: 100%;
    height: 750px;
    position: absolute;
    background-color: black;
    opacity: 50%;
}

#hero .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    height: 750px;
    position: relative;
}