@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&family=Oswald:wght@400;700&display=swap');

body {
    margin:0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
}

header .line {
    height:10px;
    background-color:#117050;
}

.container {
    max-width:1140px;
    margin: auto;
}

.header_area {
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:100px;
}

.header_left img {
    width:64px;
    height:64px;
}
.header_search form {
    display:flex;
}
.header_right {
    display:flex;
    align-items:center;
}

.header_right input {
    padding:8px 15px;
    border:1px solid #999999;
    outline:none;
    width:100%;
    max-width:250px;
}

.header_right button {
    background-color:transparent;
    border:0;
}
.header_right button img {
    width:16px;
    height:16px;
    margin-left: -40px;
}
.header_menu {
    margin-left:20px;
}

.header_menu img{
    width:25px;
    height:25px;
}

.banner {
    background-image:url('../images/bg.jpg');
    background-position:center;
    background-size:cover;
    padding-top:30px;
    padding-bottom:50px;
}


.banner_images img {
    width: 148px;
    height: 148px;
    border: 6px solid #117050;
    border-radius:50%;
    margin-top:70px;
    margin-right:30px;
}

.area1 {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
}
.area1_content {
    padding:60px 150px;
}
.area1_img1 {
    background-image: url('../images/f2.jpg');
    background-size:cover;
    background-position:center;
    height:350px;
}
.area1_img2 {
    background-image: url('../images/f1.jpg');
    background-size:cover;
    background-position:center;
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

h1 {
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    font-size: 90px;
    line-height:100px;
    margin-bottom:50px;
}

h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    font-size: 35px;
    line-height:45px;
    
}

.area1_bar {
    width:168px;
    height:22px;
    background-color:#117050;
    margin-bottom:-20px;
}

.area1_quote {
    margin-bottom: 30px;
}
.area1_text {
    margin-bottom:60px;
    line-height:27px;
}
.button {
    display:inline-block;
    border:2px solid #454545;
    padding: 10px 30px;
    color:#454545;
    text-decoration:none;
}
.button:hover {
    color:#FFF;
    background-color:#454545;
}

.area2 {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
}
.area2_content {
    padding:60px 150px;
}
.area2_img1 {
    background-image: url('../images/f4.jpg');
    background-size:cover;
    background-position:center;
    height:450px;
}
.area2_img2 {
    background-image: url('../images/f3.jpg');
    background-size:cover;
    background-position:center;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
.area2_bar {
    width:168px;
    height:22px;
    background-color:#117050;
    margin-bottom:-20px;
}

.area2_text {
    margin-bottom:40px;
    line-height:27px;
}

.area3 {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
}
.area3_content {
    padding:200px 150px;
    background-image: url('../images/bg2.jpg');
    background-size:cover;
    background-position:left;
}
.area3_img1 {
    background-image: url('../images/f5.jpg');
    background-size:cover;
    background-position:center;
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.area3_text {
    margin-bottom:60px;
    line-height:27px;
}
.area4 {
    display: grid;
    grid-template-columns: 600px 1fr;
}
.area4_content {
    padding:150px 150px;
    background-color:#e8e9ee;
    /* Eye Dropper */
}

.area4_img1 {
    background-image:url('../images/bg3.jpg');
    background-position:left;
}

.area4_bar {
    width:168px;
    height:22px;
    background-color:#117050;
    margin-bottom:-20px;
}

.area4_text {
    margin-bottom:40px;
    line-height:27px;
}

.area5 {
    background-image:url('../images/bg4.jpg');
    background-size:cover;
    background-position:center;
    height:700px;
}
footer {
    background-color:#333;
    text-align:center;
    padding:80px;
    color:#FFF;
}