@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
 
body {
    margin: auto;
    padding: 0;
    font-family: "Montserrat", serif;;
}
 
.header-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
 
header {
    padding: 0px 7%;
    display: flex;
    flex-direction: column;
    background-color: #0C696E;
    color: white;
}
 
.header-left {
    color: white;
}
 
header h1 {
    margin: 20px 0px 0px 0px;
}
 
header p {
    margin: 5px 0px 15px 0px;
}
 
nav {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    margin-bottom: 20px;
}
 
nav a {
    margin: 0px 20px;
    padding: 7px 0px;
    color: white;
    text-decoration: none;
}
 
nav a:last-child {
    margin: 0px 0px 0px 20px;
}
 
header img {
    width: 100%;
    padding: 20px 0px;
    max-height: 400px;
}
 
 
section {
    margin: 40px 0px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 20px;
    text-align: justify;
    padding: 0px 7%;
}
 
.text-container {
    flex: 1;
    margin: 0px 15px;
    background-color: #e6f0f1;
    border-radius: 5px;
    padding: 15px;
}
 
.text-container:first-child {
    margin: 0px;
}
 
.text-container:last-child {
    margin: 0px;
}
 
.text h1 {
    text-align: center;
}
 
#hover:hover {
    background-color: #6ea5a8;
    transition: 0.5s;
}
 
section img {
    width: 100%;
    max-width: max-content;
    flex: 1;
    justify-content: space-between;
}
 
.img-container {
    padding: 0px 10px;
}
 
.img-container:first-child {
    padding-left: 0px;
}
 
.img-container:last-child {
    padding-right: 0px;
}
 
.blue {
    padding: 0px 7%;
    display: flex;
    flex-direction: column;
    background-color: #6ea5a8;
    color: white;
}
 
.blue-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
 
.blue-left {
    color: black;
    font-weight: 500;
}
 
.blue-link {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    align-self: center;
    padding: 0% 20%;
}
 
#big {
    font-size: 22px;
}
 
.blue-link a {
    margin: 0px 20px;
    color: white;
    text-decoration: none;
    padding: 10px 40px;
    background-color: #0c696d;
    font-size: 17px;
}
 
#flex-2 {
    flex: 2;
    padding: 20px 10px;
}
 
#flex-2 a{
    color: white;
    text-decoration: none;
    padding: 10px 40px;
    background-color: #0c696d;
    font-size: 17px;
    margin: 20px 0px;
}
 
footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #0c696d;
    color: white;
    padding: 0px 7%;
}
 
@media (min-width: 760px) and (max-width: 1280px) {
    .header-container {
        display: block;
    }
 
    nav a:first-child {
        margin: 20px 20px 20px 0px
    }
 
    nav {
        margin-bottom: 0px;
    }
 
    nav a {
        align-self: center;
    }
}
 
@media (max-width: 760px) {
    body {
        padding: 0px;
        margin: 0px;
    }
   
    header p {
        display: none;
    }
 
    header h1 {
        margin: 0px 0px 10px 0px;
        padding-top: 15px;
    }
 
    header {
        margin-top: 0;
        display: block;
        align-items: start;
        justify-content: flex-start;
    }
 
    nav {
        display: flex;
        flex-direction: column;
        align-items: start;
    }
 
    header img {
        display: none;
    }
 
    section {
        display: flex;
        flex-direction: column;
        justify-content: justify;
    }
 
    .header-container {
        display: block;
        align-items: start;
        justify-content: flex-start;
    }
   
    .text-container {
        margin: 15px 0px;
        background-color: #fff;
    }
 
    .blue-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
 
    .blue-link {
        display: flex;
        flex-direction: column;
        align-items: start;
        align-self: flex-start;
        padding: 0%;
        margin-bottom: 20px;
    }
 
    .blue-link a {
        margin: 0px;
    }
 
    #flex-2 p{
        padding: 20px 10px;
    }
 
    .img-container {
        padding: 0px;
        margin: 15px 0px;
    }
 
    footer {
        flex-direction: column;
        justify-content: start;
    }
 
    footer p {
        margin: 10px 0px;
    }  
 
    nav a {
        margin: 0px;
    }
 
    #big p {
        margin: 10px 0px;
    }
 
    nav a:last-child {
        margin: 0px;
    }
}