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
        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"
        "Headline Headline Headline Headline Headline Headline"
        "Main Main Main Main Main Main"
        "footer footer footer footer footer footer"
        "credit credit credit credit credit credit"
        ;

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

#banner {
    grid-area: Banner;
    display: flex;
    justify-content: center;
    align-items: center;

    box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.25) inset;
    background-color: #2110C8;
}
    #banner h1 {
        font-size: 40px;
        color: #fff;
    }


#Headline {
    grid-area: Headline;
    display: flex;
    align-items: center;   
    padding: 40px;
    color: #1BABE3;
}


#main_section {
    grid-area: Main;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px 40px 40px;
}
      
#booking_container {
    display: flex;
    height: fit-content;
    width: 100%;
    box-shadow: 0 4px 8px 0 rgba(114, 114, 114, 0.2), 0 6px 20px 0 rgba(114, 114, 114, 0.2);
}

#img_box {
    width: 25%;
    display: flex;
    flex-direction: column;
    }
    #img_box img {
        height: 100%;
    }

#booking_info_box {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
}

form {
    width: 90%;
    height: fit-content;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

    input {
        color: #515151;
        line-height: 28px;
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #515151;
        transition: all 0.3s;
        padding: 13px;
        margin-bottom: 15px;
        width:100%;
        box-sizing: border-box;
        outline:0;
        
        resize: vertical;
    }
        
        .different {
            margin-top: 30px;
            width: fit-content;
            cursor: pointer;
        }
        
  

@media screen and (max-width: 600px) {

    #booking_container {
        display: flex;
        flex-direction: column;
        width: 100%; 
     }

    #img_box {
        width: 100%;
        }
        
    #booking_info_box {
        width: 100%;
    }

    
form {
    width: 100%;
    padding: 12px;
}

}