body {
    background-color: #0c0c0c; 
    color: #F2F2F2;

    height: 100vh; 

    margin: 0%;
    padding: 0%;
    

    display: grid; 
    grid-template-columns: 
        1fr
        repeat(4,minmax(0,272px))
        1fr 
    ;
    grid-gap: 0px; 
    grid-template-rows: 
        1fr
        25vh
        1fr
        1fr
        1fr
        1fr
        40px
    ;
    grid-template-areas: 
        "header header header header header header"
        "BG BG BG BG BG BG"
        "PageIntro PageIntro PageIntro PageIntro PageIntro PageIntro"
        "bodySection bodySection bodySection bodySection bodySection bodySection"
        "FAQ FAQ FAQ FAQ FAQ FAQ"
        "footer footer footer footer footer footer"
        "credit credit credit credit credit credit"
        ;
}


#BG_banner {
    grid-area: BG;
    background: url("../images/contact-BG.png") repeat 0 0;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    box-shadow: 0px 10px 8px 0px #000000e5 inset;
}

#page_intro_container {
    grid-area: PageIntro;
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    width: auto;
    padding: 10px;
}
    
    #studio_section {
        padding: 10px;
        width: 99%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid white;
        border-top: 1px solid white;
    }
    #studio_section h5 {
        margin: 0 50px;
        font-family: nova cut;
        font-weight: lighter;
    }


#contact-container {
    grid-area: bodySection; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.kontaktForm {
    width: 50%;
    padding: 30px;
    height: auto;
}
    .contact-form {
        height: fit-content;
        display: flex;
        padding: 30px;
        flex-direction: column;
    }


label {
    margin: 0;
    font-family: new icon serif;
    font-size: medium;
}

input {
    padding: 15px 0;
    margin: 10px 0;
    border: none;
    font-family: new icon serif;
    background-color: transparent;
    border: 1px solid white;
    color: white;
    font-size: medium;
}
    .message {
        height: 100px;
        margin: 10px 0;
        border: none;
        font-family: new icon serif;
    }
    .message::placeholder {
        padding: 10px;
    }

.white {
    color: white;
    margin-top: 20px;
    font-family: nova cut;
}

#divider {
    width: 100%;
    margin-bottom: 40px;
    border: rgb(51, 51, 51) 1px solid;
}

#service-box {
    margin-top: 30px;
}


.secondary-btn {
     border: none;
     background-color: #48897B;
     font-size: large;
}


#FAQ-container {
    grid-area: FAQ;
    
    background-color: #F2F2F2;
    color: #000000;
    
    display: flex;
    justify-content: center;
    align-items: center;
}


.collapsible {
    background-color: transparent; 
    color: #000000;

    cursor: pointer;
    padding: 3% 0;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;

    font-size: larger;
    font-family: new icon serif;
    font-weight: bold;
}
    
    .collapsible:after {
        content: '\002B';
        color: #000000;
        font-weight: bold;
        float: right;
    }
    
    .active:after {
        content: "\2212";
    }
    
    .content {
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        border-bottom: 1px solid #000000;
    }
        .content a, .content p {
            color: #000000;
        }


@media screen and (max-width: 1050px){
    #page_intro_container {
        flex-direction: column;
    }
    h1 {
        font-size: x-large;
        width: auto;
    }
    
  
.kontaktBox {
    flex-direction: column;
    margin: 10px;
}
    .kontaktInfo {
        width: auto;
        padding: 10px;
    }
        .kontaktForm {
            width: 100%;
            padding: 0px;
            margin: 10px;
        }
    
}