*{
    padding:0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style-type: none;
}
:root{
    --colorPaletteMain : #2e5a41ec;
    --colorPaletteMainHighlight : #528267ec;
    --yellowButton : rgb(217, 178, 20);
    --yellowButtonHighlight: rgb(255, 216, 59);
}
img[src$=".svg"]{
    width: 2.5rem;
}
.flexRow{
    display: flex;
    flex-direction: row;
}
.flexColumn{
    display: flex;
    flex-direction: column;
}

@font-face {
    font-family: 'Roboto';
    src: url(./fonts/Roboto-VariableFont_wdth\,wght.ttf);
}
@font-face {
    font-family: 'Fineday';
    src: url(./fonts/Fineday-StyleTwo.ttf);
}
html,body{
    height: 100%;
    scroll-behavior: smooth;
    font-family: 'Roboto';
}
button, a {
    cursor: pointer;
}
/*HEADER*/
header{
    position: absolute;
    top: 0px;
    width: 100%;    
}
header img[src$=".svg"]{
    width: clamp(2rem,3,2.5rem);
}
.headerContent{
    padding:0.8rem 1rem;
    justify-content: space-around;
    align-items: center;
    background-color: white;

}
.headerContent > *{
    font-weight: bold;
    text-align: center;
    font-size: 0.7rem;
    justify-content: center;
    align-items: center;
    gap:0.5rem;
}
.headerContent > *:not(.headerContentLogo){
    width: 15%;
    min-width: 0px;
        word-break: break-word;
    overflow-wrap: break-word;
}
.headerContentLogo{
    font-family: 'Fineday';
    font-size: clamp(2rem, 3.25vw ,2.6rem);
    font-weight: unset;
}
.headerContentLogoFlowers{
    width: 6rem;
    width: clamp(4.8rem,7.5vw,6rem) ;
    margin-right: -3.5rem;
    margin-top: 1rem;
    transform: rotate(15deg);
}
.headerContentLogoUppserCase{
    font-weight: bold;
    font-size: 3rem;
    font-size: clamp(2rem, 3.8vw ,3.5rem);
    margin-left: 1rem;
}
.headerContentLogoG{
    width: 4rem ;
    width: clamp(2.4rem,5vw,4rem) ;
    margin-left: 0.5rem;
    margin-right: -0.5rem;
    margin-top: -1rem;

}
.headerContentLogoArdens{
    color: rgb(13, 87, 31); 
}
.headerContent > *:last-child > *{ /*messenger contact*/
    text-align: center;
    justify-content: center;
    align-items: center;
}
/***NAV***/
nav{
    box-shadow: 0px 20px 55px 20px rgba(0,0,0,0.75);
}
nav > ul{
    align-items: center;
    text-align: center;
    list-style-type: none;


}
nav > ul > *{
    background-color: var(--colorPaletteMain);
    width: 25%;
}
nav > ul > li > a{
    display: block;
    width: 100%;
    padding:0.8rem 0rem;
    text-decoration: none;
    color:white;
    font-weight: bold;
    font-size: 1rem;
    transition: 0.4s;
    background-color: #2e5a4174;
    border-left: 1px solid white;
}
nav > ul > li > a:hover{   
    background-color: var(--colorPaletteMainHighlight);
}


/*MAIN*/
/*HERO*/
.hero{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.347), rgba(0, 0, 0, 0.311)) ,url("./img/heroBackground.png");
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    height: 130vh;
    z-index: -1;
}
.heroMessage{
    gap:2rem;
    position: relative;
    top:45vh;
    width: 50vw;
    background-color: rgba(255, 255, 255, 0.815);
    padding:2rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-right: 0.3rem solid var(--colorPaletteMainHighlight);
    border-radius: 0.5rem;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.heroMessage > h2{
    font-weight: 500;
    font-size: 1.5rem;
}
.heroMessage > a > button{
    color:white;
    padding:0.8rem 3rem;
    border: none;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 0.5rem;   
    background-color: var(--yellowButton);
    transition: 0.4s;
    border : 1px solid white;
}
.heroMessage > a > button:hover, 
.heroMessage > a > button:active {
    background-color: var(--yellowButtonHighlight);
}
/*BOOK*/
.book{
    gap:2rem;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.868), rgba(255, 255, 255, 0.845)), url("./img/9987357.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    z-index: 9;
    box-shadow: 0px 0px 37px 20px rgba(0,0,0,0.75);
    padding:4rem;   
    flex-wrap: wrap;

}
.bookLeavesBack{
    position: relative;
    
}
.book > .bookTitle > h1{
    text-align: center;
    font-size: clamp(1.8rem,2.5vw,2rem);
}
.bookSetting > form{
    gap:2rem;
}
.bookSetting > form > fieldset:first-child{
    font-size: 1.3rem;
    background-color: rgba(249, 249, 249, 0.925);
    padding:4rem;
    border-radius: 1rem;
    border: 1px solid gray;
    display: grid;
    grid-template-areas: 
    "bookSettingCheckInDate bookSettingCheckOutDate"
    "bookSettingGuests bookSettingGuests"
    "bookSettingSubmit bookSettingSubmit";
    gap:3rem 5rem;
}
.bookSettingCheckInDate{
    grid-area: bookSettingCheckInDate;
}
.bookSettingCheckOutDate{
    grid-area: bookSettingCheckOutDate;
}
.bookSettingGuests{
    grid-area: bookSettingGuests;
    flex-wrap: wrap;
    gap:2rem;
    justify-content: center;
    align-items: center;
}
.bookSettingGuests > *{
    gap:2rem;    
    justify-content: center;
    align-items: center;
}
.bookSettingGuests > * > input{
    padding:1rem;

}
.bookSetting > form > fieldset:first-child > button, .bookCreateUserFormSubmit,
.reviews button {
    grid-area: bookSettingSubmit;
    justify-self: center;
    padding:0.8rem 4rem;
    border-radius: 0.5rem;
    border: none;
    background-color: var(--yellowButton);
    transition: 0.4s;
    font-size: 1.1rem;
}
.bookSetting > form > fieldset:first-child > button:hover,
.bookSetting > form > fieldset:first-child > button:active, .bookCreateUserFormSubmit,
.reviews button{
    background-color: var(--yellowButtonHighlight);
}

.bookSettingCheckInDate, .bookSettingCheckOutDate{
    display: grid;
    grid-template-areas: 
    "bookSettingCheckLabel bookSettingCheckLabel"
    "bookSettingCheckLabelInput bookSettingCheckTime";
    justify-content: center;
    align-items: center;
    text-align: center;
    gap:1rem;
}
.bookSettingCheckInDate > label, .bookSettingCheckOutDate > label{
    grid-area: bookSettingCheckLabel;
}
.bookSettingCheckInDate > input, .bookSettingCheckOutDate > input{
    grid-area: bookSettingCheckLabelInput;
    font-family: 'Roboto';
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    border: 1px solid black;
}
.bookSettingCheckInDate > p, .bookSettingCheckOutDate > p{
    grid-area: bookSettingCheckTime;
}
.bookSetting > form > fieldset:last-child{
    display: none;
    flex-direction: column;
    gap:2rem;
    background-color: rgba(249, 249, 249, 0.925);
    padding:3rem;
    border-radius: 1rem;
    border: 1px solid gray;
    justify-content: center;
    align-items: center;

}
.bookSettingUserInformationInput{
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 3fr 1fr;
    gap:1rem 2rem;
}
.bookCreateUserFormField{
    gap:0.5rem;
}
.bookCreateUserFormField > input{
    
    border: 1px solid gray;
    padding: 0.5rem;
    border-radius: 0.3rem;
}
.bookSettingGuestsSummaryContainer{
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap:3rem;
}
/*AboutUs*/
.aboutUs{
    position: relative;
    z-index: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.804), rgba(0, 0, 0, 0.785)), url("./img/aboutUsBackground.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    justify-content: center;
    align-items: center;
    padding:5rem clamp(1rem,12.5vw,10rem);

}
.aboutUsContainer{
    padding:1rem;
    color: white;
    gap:1rem;
    backdrop-filter: blur(3px);
    justify-content: flex-start;
    align-items: flex-start;
    
}
.aboutUsContainerScroll{
    display: none;
}
.aboutUsContent{
    position: sticky;
    top: 3rem  ;
    justify-content: center;
    align-items: center;
    gap:1rem;
    padding:1rem;
    font-size: clamp(0.9rem,1.25vw,1rem);
}
.aboutUsPicture{
    gap:20vh;
    justify-content: center;
    align-items: center;
}
.aboutUsPicture > img{
    width: 30rem; 
    border-radius: 1rem;
    
}
/*REVIEWS*/
.reviews{
    position: relative;
    padding:5rem clamp(0.5rem,12.5vw,10rem);
    box-shadow: 0px 0px 37px 20px rgba(0,0,0,0.75);
    gap:2rem;
    z-index: 9;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.868), rgba(255, 255, 255, 0.845)), url("./img/9987357.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.reviewsTitle{
    gap:1rem;
}

.reviewsLists{
    gap:2rem;
    justify-content: center;
    align-items: center;
}
.reviewsLists > *{
    gap:1.3rem;
    padding:2rem;
    font-size: 1.1rem;
    border-bottom: 1px solid gray;
}
.reviewsLists > li > p:not(:first-child){
    font-style: italic;
    text-align: center;
}
.reviewsContainer{
    justify-content: center;
    align-items: center;
    gap:4rem;
}
/*Find Us*/
.findUs{
    position: relative;
    padding:4rem clamp(1rem,12.5vw,10rem);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.655), rgba(0, 0, 0, 0.742)) ,url("./img/heroBackground.png");
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    gap:3rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.findUs a{
    color:white;
    text-decoration: none;
}
.findUsContactContainer{
    color:white;
    gap:1.5rem;
    padding:clamp(0.5rem,6.25vw,5rem);

}
.findUsContainerItem{
    gap:1rem;
    align-items: center;
}
.findUsContainerItem a{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:1rem;
    
}
.findUsContainerItem img{
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(119%) contrast(119%);
}
.findUsMapContainer{
    gap:1rem;
    color: white;
    font-size: 2rem;
    font-weight: bold;
}
.findUsMap{
    width:100%;
    height: 20rem;
    border:1px solid white;

}
/*FOOTER*/
footer{
    padding: 2rem;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: rgb(0, 43, 29);
    
}


/**PHONE**/
@media only screen and (max-width: 800px) {
   .headerContent > *:not(.headerContentLogo){
    display: none;
    } 
    .hero{
        height: 100vh;
        
    }
    .heroMessage{
        top:30vh;
        left: 5vw;
        width: 90vw;
    }
    .bookSetting > form > fieldset:first-child{
    grid-template-areas: 
    "bookSettingCheckInDate"
    "bookSettingCheckOutDate"
    "bookSettingGuests"
    "bookSettingSubmit";
    }
    .bookSettingUserInformationInput{
        grid-template-columns: 1fr;
    }
    .bookSetting > form > fieldset:first-child{
        padding:1rem;
    }
    .bookSetting > form > fieldset:last-child{
        padding: 1rem;
    }
    .aboutUs{
        padding:2rem 1rem;
    }
    .aboutUsContainer{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
    }
    .aboutUsContent{
        position: relative;
        top: 0;
    }
    .aboutUsContainerScroll{
        display: block;
    }
    .aboutUsPicture{
        width: 100%;
        padding: 1rem;
        flex-direction: row;
        overflow: auto;
        gap:1rem;
        justify-content: unset;
        align-items: unset;
    }

    .aboutUsPicture > img{
        width: clamp(12rem, 80vw, 20rem);
        height: auto;
        object-fit: cover;
        
    }
    
    .reviewsLists{
        flex-direction: column;
    }
    .findUs{
        grid-template-columns: 1fr;
    }
}