/*
yellow: #f8dd9f
black: #000000
white: #ffffff
*/

:root {
}

body{
    padding:0;
    margin:0;
}


/* Header Related */
#header {
    grid-area: header;
    display:grid;
    grid-template-areas:  "logo nav headerbtn";
}

#logo {
    grid-area: logo;
    vertical-align: middle;
    margin-block:1em;
    margin-left:8em;
    margin-right:8em;
}

nav ul{
    display:inline-block;
    grid-area: nav;   
    grid-template-areas: "link1 link2 link3 link4 link5";
    background:#ffffff;
}

nav ul li{
    list-style-type: none;
    display:inline-block;
}

.nav_link{
    display:inline-block;
    text-decoration:none;
    color: #000000;
    background: #ffffff;
    margin-right:3em;
    font-family: 'Poppins', sans-serif;
    height:3em;
    padding-top:1.5em;
    padding-inline:1em;
}

.nav_link:hover{
    color: #ffffff;
    background: #000000;
}

#header_meeting {
    grid-area: headerbtn;  
    padding-left:2.5em;
    margin-left:8em;
    margin-right:1em;
}

/* Main Content Related */
main {
    display:grid;
    grid-template-areas:  
    "header"
    "section1"
    "section2"
    "section3"
    "section4"
    "section5"
    "section6"
    "footer";
}

section {
    min-height:2em;
}

section::after{
    clear:both;
}

section strong{
    display:block;
    font-family: 'DM Serif Display';
}

section span {
    display:block;
    font-family: 'DM Serif Display';
}

.split img {
    display:inline;
}

.split {
    display:inline;
}

.split-left{
    display:inline;
    margin-right:5em;
}

.split-right{
    display:inline;
}

.split-image {
    display:inline-block;
    width:45em;
    height:45em;
    vertical-align:top;
}

.split-text {
    display:inline-block;
    width:50em;
    padding-block:10em;
}

/* Section 1 Related */
#section1 {
    grid-area: section1;
    background-image: url("image/topbillede.jpg");
    background-repeat: round;
    background-size: auto;
    background-color:transparent;
    color:#ffffff;
    padding-inline:5em;
    padding-block:5em;
    height:50em;
}

#section1_container {
    margin-left:5em;
    margin-top:10em;
    width:65em;
}

#section1 strong{
    font-size:5.5em;
}

#section1 span{
    font-size:2.1em;
    margin-block:1em;
}

/* Section 2 Related */
#section2 {
    grid-area: section2;
    background-color: #f8dd9f;
    height:40em;
}

#section2_container {
    text-align:center;
    width:90em;
    margin:auto;
    margin-block:10em;
}

#section2 strong {
    font-size:5.5em;
    display:block;
}

#section2 span {
    font-size:1.7em;
    margin-block:1em;
    font-family: 'Poppins', sans-serif;
}

#section2 a {
    margin-inline:auto;
}

/* Section 3 Related */
#section3 {
    grid-area: section3;
    padding:10em;
    padding-right:5em;
}

#section3 strong {
    font-size:5.5em;
    display:block;
}

#section3 span {
    font-size: 1.16em;
    margin-block:1em;
    font-family: 'Poppins', sans-serif;
}

#section3 a {
    margin-top:2em;
}

/* Section 4 Related */
#section4 {
    grid-area: section4;
    display:grid;
    grid-template-areas:  "ydelser service kontaktos";
    grid-template-columns: 1fr 1fr 1fr;
    height:50em;
}
#section4 a{
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
    background-color:transparent;
    color:#ffffff;
    font-family: 'DM Serif Display';
    font-weight:bold;
    font-size:5em;
    text-decoration:none;
}

#ydelser{
    grid-area: ydelser;
    background-image: url("./image/ydelser.jpg");
    background-repeat:round;
}

#service {
    grid-area: service;
    background-image: url("./image/service.jpg");
}

#kontaktos {
    grid-area: kontaktos;
    background-image: url("./image/kontaktos.jpg");
    background-repeat:round;
}

/* Section 5 Related */
#section5 {
    grid-area: section5;
    padding:10em;
    padding-right:5em;
}

#section5 strong {
    font-size:5.5em;
    display:block;
}

#section5 span {
    font-size: 1.16em;
    margin-block:1em;
    font-family: 'Poppins', sans-serif;
}

#section5 a {
    margin-top:2em;
}


/* Section 6 Related */
#section6 {
    grid-area: section6;
    display:grid;
    grid-template-areas:  "contactText contactForm";
    grid-template-columns: 1.5fr 1fr;
    height:35em;
    padding:10em;
    background-color: #f8dd9f;
}
#contactText {
    margin-right:5em;
}
#contactText strong {
    display:block;
    font-weight:bold;
}

#contactText .heading {
    font-size:5em;
    font-family: 'DM Serif Display';
    margin-bottom:0.3em;
}

#contactText .sub {
    font-size:2em;
    font-family: 'Poppins', sans-serif;
    margin-bottom:0;
} 

#contactText .sub:last-of-type {
    margin-bottom:0.5em;
}

#contactText span {
    display:block;
    margin-bottom:1em;
    font-family: 'Poppins', sans-serif;
}

#contactForm {
    grid-area: contactForm;
    padding-right:2em;
}

#contactForm textarea {
    resize:none;
    width:100% !important;
    height:5em !important;
}

.input {
    display:block;
    margin-bottom:2em;
    border-radius: 10px;
    width:100%;
    padding:1em;
    border:0;
    font-size:1.1em;
}

.input::placeholder {
    color:#000000;
    opacity:1;
}

#form_submit_button {
    float:right;
    margin:0;
    margin-right:-2.5em;
    border:0;
    padding-block:1em;
    padding-inline:2em;
}

/* Footer Related */
#footer {
    grid-area: footer;
    display:grid;
    grid-template-areas:  "footer1 footer2 footer3 footer4";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background:#000000;
    color:#ffffff;
    padding-inline:10em;
    padding-top:5em;
    height:25em;
}


#footer span, #footer a {
    display:block;
    color:#ffffff;
    text-decoration:none;
    font-family: 'Poppins', sans-serif;
    font-weight:bold;
}

#company_pages a{
    display:inline-block;
}

#footer strong {
    font-size:2em;
    font-family: 'DM Serif Display';
}

#openhours {
    font-size: 1em;
    font-family: initial;
    font-weight:bold;
    margin-bottom:0.5em;
}

.icon {
    width:1.5em;
    height:1.5em;
}



/* General Styling */
.btn {
    display:inline-block;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    text-transform: uppercase;
    padding:0.5em;
    padding-inline:1.5em;
    text-decoration:none;
    font-weight:bold;
}

.btn-white {
    background:#ffffff;
    color:#000000;
}

.btn-black {
    background:#000000;
    color:#ffffff;
}

.btn-right {
    text-align:right;
}