/* the + sign is used to select the sibling that comes immediately next to the element you selected.
in this case it is the div with the answer class next to the div with the active class.
this can be used for the FAQ-accordion. read more here: https://www.w3schools.com/css/css_combinators.asp */

html,
body {
    height: 100%;
    background-color: #c9c5c2;
}


/* The accordion when it's expanded*/

.active + .answer {
    display: block;
}


/* Accordion when closed*/

.answer {
    display: none;
}

h1,
h2,
h3 {
    font-family: "Montserrat", sans-serif;
}



label,
p {
    font-family: "Raleway", sans-serif;
}

main {
    display: flex;
    flex-wrap: wrap;
    background-color: #c9c5c2;
    padding-bottom: 60px;
}



.hero-container {
    position: relative;
    

}

.hero-image-container {
    height: 300px;
    background-size: cover;
    overflow: hidden;
}

img.hero-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    
    
}



.hero-text {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    color: #000;
    text-align: center;
    position: absolute;
    top: 5%;
    left: 5%;
    right: 5%;
    padding: 10px;
    border: 5px double #c9c5c2;
    border-radius: 25px;
    
    
}

section {
    width: 100%;
    background-color: #74614d;
    border-radius: 12px;
    margin: 20px;
    box-shadow: 10px 10px 5px #322015;
}

.form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.form-group {
    display: flex;
    margin: 5px;
}

.form-group label,
h2 {
    width: 150px;
    margin-left: 20px;
}

.form-group input {
    width: 150px;
}

.accordion div,
h1 {
    margin-left: 20px;
}

input {
    border-radius: 5px;
    border: 1px solid #322015;
    background-color: #c9c5c2;
}

.question,
.answer {
    background: #c9c5c2;
    width: 250px;
    border: 3px double #322015;
    border-radius: 8px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 10px 10px 5px #322015;
}

button {
    background-color: #c9c5c2;
    color: #fff;
    border-radius: 10px;
    font-size: 16px;
    padding: 10px;
    margin-left: 250px;
}

.accordion {
    padding-bottom: 40px;
}


/* --Tablet-- */

@media (min-width: 768px) {
    main {
        flex-wrap: nowrap;
    }
    section {
        width: 50%;
    }
    .question,
    .answer {
        width: 300px;
    }
    .hero-text h1 {
        font-size: 40px;
    }
    .hero-text p {
        font-size: 20px;
        font-style: bold;
    }

    .hero-image-container {
        height: 500px;
    }
}


/* --Desktop-- */

@media (min-width: 1200px) {
    .question,
    .answer {
        width: 500px;
    }
    .booking div,
    h1 {
        padding-left: 100px;
    }

    .hero-image-container {
        height: 900px;
    }
}