body {
    height: 100vh; 

    margin: 0%;
    padding: 0%;
    

    display: grid; 
    grid-template-columns: 
        1fr
        repeat(4,minmax(0,272px))
        1fr 
    ;
    grid-gap: 0px; 
    grid-template-rows:
        40px
        1fr
        25vh
        1fr
        1fr
        1fr
        1fr
        1fr
        50px
    ;
    grid-template-areas: 
        "top_header top_header top_header top_header top_header top_header"
        "header header header header header header"
        "Banner Banner Banner Banner Banner Banner"
        "Intro Intro Intro Intro Intro Intro"
        "MV MV MV MV MV MV"
        "Experience Experience Experience Experience Experience Experience"
        "values values values values values values"
        "footer footer footer footer footer footer"
        "credit credit credit credit credit credit"
        ;

       
    color: #0C0C0C;
    background-color: #F5F5F5;
}

.img_banner {
    grid-area: Banner;
    display: flex;
    justify-content: center;
    align-items: center;

    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) ), url(../Images/Groenland.png);
    box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.25) inset;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
    .img_banner h1 {
        font-size: 40px;
        color: #fff;
    }


#Intro_section {
    grid-area: Intro;
    display: flex;
    padding: 40px;
    justify-content: space-between;
}
    #intro_textbox {
        width: 60%;
    }

    h1 {
        color: #1BABE3;
    }

    #intro_imgbox {
        margin-left: 20px;
        width: 28%;
    }
    #intro_imgbox img {
        width: 100%;
    }


#Mission_Vision {
    grid-area: MV;
    display: flex;
    flex-direction: column;
    background-color: #E4E4E4;
    padding: 40px;
}
    #double_container {
        display: flex;
    }
        .text_box1 {
            width: 50%;
            margin-right: 15px;
        }
        .text_box2 {
            width: 50%;
            margin-left: 15px;
        }


#experience {
    grid-area: Experience;
    padding: 40px;
}

    .experience_content {
        margin-bottom: 50px;
    }

    
#value_container {
    grid-area: values;
    padding: 40px;
    background-color: #E4E4E4;
    margin-bottom: 20px;
}
#value_content_container {
    display: flex;
    justify-content: center;
}
.value_content {
    margin: 0 50px;
    width: 20%;
}


@media screen and (max-width: 600px) {
    
#Intro_section {
    flex-direction: column;
}
    #intro_textbox {
        width: 100%;
    }

    #intro_imgbox {
        margin-left: 0px;
        width: 100%;
    }

    #double_container {
        display: flex;
        flex-direction: column;
    }
    
    .text_box1 {
        width: 100%;
        margin-right: 0px;
    }
    .text_box2 {
        width: 100%;
        margin-left: 0px;
    }

    
#value_content_container {
    flex-direction: column;
}

    .value_content {
        margin: 20px 0;
        width: 100%;
    }
}