*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;    
}

body{
    overflow-x: hidden;
}

/* fonts */
@font-face {
    font-family: DancingScript-Bold;
    src: url(Fonts/Dancing_Script/DancingScript-Bold.ttf);
}

@font-face {
    font-family: DancingScript-Regular;
    src: url(Fonts/Dancing_Script/DancingScript-Regular.ttf);
}

@font-face {
    font-family: Vollkorn-Regular;
    src: url(Fonts/Vollkorn/Vollkorn-Regular.ttf);
}

@font-face {
    font-family: Vollkorn-Bold;
    src: url(Fonts/Vollkorn/Vollkorn-Bold.ttf);
}

::selection{
    background-color: Gold;
}
/* variables */
:root{
    --Header-Bold:DancingScript-Bold;
    --Header-Regular:DancingScript-Regular;
    --P-regular:Vollkorn-Regular;
    --P-bold:Vollkorn-Bold
}

/* headings */
h1{
  font-family: var(--Header-Bold);    
}

h2,h3,h4,h5,h6{
    font-family: var(--Header-Regular);    
}

/* container */

.container{
    display: grid;
    grid-template-rows: 1fr 0.1fr;       
}

main{
    background-color: white;        
    border: 90px solid #fae9b1;
    border-bottom: 110px solid #fae9b1;          
}


p{
    font-family: var(--P-regular);
}
/* content */

#content1{
    display: grid;
    box-shadow: rgba(0, 0, 0, 0.3)0 5px 10px;      
    grid-template-columns: 0.7fr 1fr 2fr 1.5fr;       
    /* grid-template-rows: 1fr 1fr 1fr 1fr; */
    grid-template-areas: 
    "sidenav subnav section todo"
    ;    
    /* border: 110px solid #fae9b1;       */
}

/* navbar */
#side-navbar{
    background: #ffd703;
    grid-area: sidenav;
    padding: 15px;   
    padding-right: 0px; 
    padding-top: 30px;
}

#sub-navbar{
    background: #ffffff;
    grid-area: subnav;
}

#section{
    background: #ffffff;
    grid-area: section;
}

#side-navbar nav{
    font-family: var(--P-regular);
    margin-top: 25px;
}

#side-navbar nav ul li{
    list-style: none;
    padding: 8px 0px;
    color: #dca833;
}

#side-navbar nav ul li:hover{
    color: black;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

#sub-navbar{
    padding: 15px;
    font-family: var(--P-regular);    
    padding-right: 0px;
    padding-top: 30px;
}

#sub-navbar nav ul{
    color: gray;
    list-style: none;
    padding: 10px 20px;

}

#sub-navbar nav ul li{
    padding: 10px 0px;
}

#sub-navbar nav ul li:hover{
    color: black;
    cursor: pointer;
}

#checkin{
    padding: 15px 5px;
    border: 1px solid lightgrey;
}

#checkin p{
    padding: 7px 0px;
}

#checkin h2{
    margin-bottom: 10px;
}

#map h2{    
    padding: 25px 0px;
    margin-top: 15px;
}

#map img{
    width: 231px;
    height: 150px;
}

.book{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    font-family: var(--P-regular);
    margin-top: -90px;
    cursor: default;
}
.room{
    background-color: #cccccc;
    padding: 5px 10px;
}

.book:hover .Arrival{
    animation: Arrival 0.2s 1 ease-in-out;
    display: inherit;
    transform-origin: top;
}

.Arrival{
    display: none;
    transform-origin: top;
    background-color: #cccccc;
    padding: 5px 10px;
    border-bottom: 1px solid white;
    animation: Arrival 0.2s 1 ease-in-out;
}

.input_arrival{
    border: 3px double #cccccc;
    padding: 5px ;
    outline: none;
}

.book:hover .Departure{
    animation: Arrival_delay 0.3s 1 ease-in-out;
    display: inherit;
    transform-origin: top;
}

.Departure{
    display: none;
    transform-origin: top;
    background-color: #cccccc;
    padding: 5px 10px;
    animation: Arrival_delay 0.3s 1 ease-in-out;
}


.book:hover .Nights{
    animation: Arrival_delay 0.4s 1 ease-in-out;
    display: inherit;
    transform-origin: top;
}

.Nights{
    display: none;
    transform-origin: top;
    background-color: #cccccc;
    padding: 5px 10px;    
    border-bottom: 1px solid white;
    animation: Arrival_delay 0.4s 1 ease-in-out;
}


.book:hover .Adults{
    animation: Arrival_delay 0.5s 1 ease-in-out;
    display: inherit;
    transform-origin: top;

}

.Adults{
    display: none;
    transform-origin: top;
    background-color: #cccccc;
    padding: 5px 10px;
    animation: Arrival_delay 0.5s 1 ease-in-out;
}


.book:hover .book-btn{
    animation: Arrival_delay 0.6s 1 ease-in-out;
    display: inherit;
    transform-origin: top;
}

.book-btn{
    display: none;       
    /* transform:rotateX(-102deg) rotateY(0deg) rotateZ(0deg); */
    transform-origin: top;
    background-color: #cccccc;
    padding: 5px 10px;
    animation: Arrival_delay 0.6s 1 ease-in-out;
}

.book-btn button{
    padding: 5px 10px;    
    font-family: var(--P-regular);
}

.book{
    font-family: var(--P-regular);
}

input[type="number"]{
    width: 40px;   
    font-size: 1.2rem; 
}

input[type="number"]::-webkit-inner-spin-button{
    opacity: 1;
    
}

.book2{
    position: absolute;    
    font-family: var(--P-regular);    
    cursor: default;
    right: 0;
    left: 0;
    display: none;
}
.room{
    background-color: #cccccc;
    padding: 5px 10px;
}

.book2:hover .Arrival{
    animation: Arrival 0.2s 1 ease-in-out;
    display: inherit;
    transform-origin: top;
}

.Arrival{
    display: none;
    transform-origin: top;
    background-color: #cccccc;
    padding: 5px 10px;
    border-bottom: 1px solid white;
}

.input_arrival{
    border: 3px double #cccccc;
    padding: 5px ;
    outline: none;
}

.book2:hover .Departure{
    animation: Arrival_delay 0.3s 1 ease-in-out;
    display: inherit;
    transform-origin: top;
}

.Departure{
    display: none;
    transform-origin: top;
    background-color: #cccccc;
    padding: 5px 10px;
}


.book2:hover .Nights{
    animation: Arrival_delay 0.4s 1 ease-in-out;
    display: inherit;
    transform-origin: top;
}

.Nights{
    display: none;
    transform-origin: top;
    background-color: #cccccc;
    padding: 5px 10px;    
    border-bottom: 1px solid white;
}


.book2:hover .Adults{
    animation: Arrival_delay 0.5s 1 ease-in-out;
    display: inherit;
    transform-origin: top;

}

.Adults{
    display: none;
    transform-origin: top;
    background-color: #cccccc;
    padding: 5px 10px;
}


.book2:hover .book2-btn{
    animation: Arrival_delay 0.6s 1 ease-in-out;
    display: inherit;
    transform-origin: top;
}

.book2-btn{
    display: none;       
    /* transform:rotateX(-102deg) rotateY(0deg) rotateZ(0deg); */
    transform-origin: top;
    background-color: #cccccc;
    padding: 5px 10px;
}

.book2-btn button{
    padding: 5px 10px;    
    font-family: var(--P-regular);
}

.book2{
    font-family: var(--P-regular);
}

@keyframes Arrival {
    0%{
        transform: rotateX(180deg) ;
        transform-origin: top;
        transition: all .2s ease-in-out;
    }
    20%{
        transform: rotateX(270deg);
        transform-origin: top;
        transition: all .2s ease-in-out;
    }
    100%{
        transform: rotateX(360deg);
        transition: all .2s ease-in-out;
    }
}


@keyframes Arrival_delay {
    0%{
        transform: rotateX(180deg) scaleY(0) ;
        transform-origin: top;
        transition: all .3s ease-in-out;
        display: none;
    }
    60%{
        transform: rotateX(270deg) scaleY(0);
        transform-origin: top;
        display: none;
        transition: all .3s ease-in-out;
    }
    100%{
        transform: rotateX(360deg);
        transition: all .3s ease-in-out;
    }
}
/* things to do */
#todo{
    background: #efefef;    
    grid-area: todo;    
}


/* section */

#Meeting{
    padding: 15px 10px;
    margin-left: 15px;
    padding-top: 30px;
}

#Meeting h2{
    margin: 0px 0px 10px 0px;
}

#Meeting p{
    padding: 15px 0px ;    
    font-size: 1rem;
}

#Photos{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;    
 
}

#Photos img{
    filter: grayscale(90%) brightness(120%);
    width: 300px;    
    height: 410px;
    object-fit: cover;
    transition: all 0.1s ease-in-out;
}

#Photos div:hover img{
    filter: none;    
}

#Photos div{
    position: relative;
    cursor: default;    
}


#Photos div span{
    font-family: var(--P-bold);
    position: absolute;
    left: 0;
    bottom: 0;
    color: white;
    z-index: 10;
    font-size: 2rem;
    padding: 45px 28px;
}

#Gallery{
    padding: 15px 10px;
    margin-left: 15px;

}

#Gallery h2{
    margin-bottom: 20px;
}    

#photo-gallery{
    width: 100%;
    margin: 15px 0px;
    box-shadow: rgba(0, 0, 0, 0.1)0 5px 10px;
}

#Gallery div img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    margin-top: 15px;
}

#Gallery div{
    position: relative;
}

#Gallery div span{
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: var(--P-bold);
    font-size: 2.5rem;
    color: white;
    padding: 50px 30px;
}

#Testimonials{
    margin-top: 0px;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "context outside"
    "context inside";    
    margin-bottom: -20px;
}

#Testimonials div img{
    height: 390px;    
}

#context{
    grid-area: context;
    padding-top: 40px;
    padding-right: 29px;
}

#context p{
    font-size: 1.1rem;
}


#outside{
    grid-area: outside;  
}

#inside{
    grid-area: inside;
    margin-top: -10px;
}

blockquote{
    border-left: 4px solid gold;
    padding: 60px 25px;
    font-family: var(--P-regular);
    font-size: 2.2rem;       
    margin: 20px 0px; 
}

#todo{
    padding: 15px 10px;
    padding-top: 30px;
    position: relative;
}

#todo h2{
    margin-bottom: 30px;
}

#ads{
    display: grid;
    grid-template-columns: 1fr 1fr ;
    grid-template-rows: 1fr 1fr;
    grid-gap: 5px 12px;
    margin-bottom: 40px;
}

#ads img{
    width: 100%;
    height: 100px;
}

#todo span{
    font-family: var(--P-regular);
    color: gray;
}

/* footer */

footer{
    background: linear-gradient(rgb(250,239,202),rgba(250,226,143));    
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 0.1fr;
    grid-template-areas: 
    "contact footer subscribe hotels"
    "copyright copyright copyright copyright";        
}


#contact{
    grid-area: contact;    
}
#contact p:first-of-type {
    margin-bottom: 30px;
}

#footer{
    grid-area: footer;
    padding-right: 50px;
}
#subscribe{
    grid-area: subscribe;
    padding-left: 40px;
}

#hotels{
    grid-area: hotels;         
}

#copyright{
    grid-area: copyright;            
}

footer {
   padding: 50px 80px;   
    
}

footer div h3{
    margin-bottom: 25px;
}

#icons{    
    display: grid;    
    grid-template-columns: 1fr 1fr 1fr;
    /* 10fr 10fr 10fr; */
    grid-gap: 2px 13px;
    margin-top: 15px;       
}

#icons img{
    /* width: 100%; */
   /* width: 110px;     */
   width: 100%; 
}


/* responsive */

@media screen and (max-width:1450px){
    #Photos{
        width: 100%;    
    }

    
    #Photos img{
        filter: grayscale(90%) brightness(120%);
        width: 100%;    
        height: 310px;
        object-fit: cover;
        transition: all 0.1s ease-in-out;
    }

    #content1{    
        grid-template-columns: 0.8fr 1.3fr 4.5fr 2fr;       
        grid-template-areas: 
        "sidenav subnav section todo"
        ;    

    }

    main{
        border: 80px solid #fae9b1;
    }

    #Photos div span{
        padding-left: 10px;
        font-size: 1.5rem;
    }

    
    #map img{
        width: 100%;
        height: 100%;
    }

    .book{
        margin-top: -80px;
    }

    ul li{        
        font-size: 0.8rem;
    }

    #side-navbar{
        padding-left: 10px;        
    }

    h1{
        font-size: 1.7rem;
    }

    h2,h3,h4,h5,h6{
        font-size: 1rem;
    }

    p,#Meeting p{
        font-size: 0.9rem;
    }

    #todo span{
        font-size: 0.7rem;
    }

    #ads{
        margin-bottom: 20px;
    }

    blockquote{
        font-size: 1.7rem;
        font-weight: bolder;
        padding: 15px 10px;
    }

    #context{
        padding: 0px;
        margin-top: 35px;        
    }
    #context p{
        padding-right: 20px;
        font-size: 0.8rem;
    }

    #Testimonials div img{
        height: 300px;
        margin-top: 12px;    
    }

    #inside{
        margin-bottom: 5px;
    }

    #Testimonials{
        grid-template-columns: 1fr 1.2fr;
        grid-gap: 0px;
    }
}


@media screen and (max-width:1250px){
    #Photos{
        width: 100%;    
    }

    
    #Photos img{
        filter: grayscale(90%) brightness(120%);
        width: 100%;    
        height: 310px;
        object-fit: cover;
        transition: all 0.1s ease-in-out;
    }

    #content1{    
        grid-template-columns: 0.9fr 1.3fr 4.5fr 1.2fr;       
        grid-template-areas: 
        "sidenav subnav section todo"
        ;    

    }

    main{
        border: 80px solid #fae9b1;
    }

    #Photos div span{
        padding-left: 10px;
        font-size: 1.5rem;
    }

    
    #map img{
        width: 100%;
        height: 100%;
    }

    .book{
        margin-top: -80px;
    }

    ul li{        
        font-size: 0.8rem;
    }

    #side-navbar{
        padding-left: 10px;        
    }

    h1{
        font-size: 1.7rem;
    }

    h2,h3,h4,h5,h6{
        font-size: 1rem;
    }

    p,#Meeting p{
        font-size: 0.9rem;
    }

    #todo span{
        font-size: 0.7rem;
    }

    #ads{
        margin-bottom: 20px;
        grid-template-columns: 1fr;
    }

    blockquote{
        font-size: 1.7rem;
        font-weight: bolder;
        padding: 15px 10px;
    }

    #context{
        padding: 0px;
        margin-top: 35px;        
    }
    #context p{
        padding-right: 20px;
        font-size: 0.8rem;
    }

    #Testimonials div img{
        height: 300px;
        margin-top: 12px;    
    }

    #inside{
        margin-bottom: 5px;
    }

    #Testimonials{
        grid-template-columns: 1fr 1.2fr;
        grid-gap: 0px;
    }

    .book{
        margin-left: -140px;
    }
}


@media screen and (max-width:950px){
    #Photos{
        width: 100%;    
    }

    
    #Photos img{
        filter: grayscale(90%) brightness(120%);
        width: 100%;    
        height: 310px;
        object-fit: cover;
        transition: all 0.1s ease-in-out;
    }

    #content1{    
        grid-template-columns: 1fr 1.3fr 4fr;       
        grid-template-areas: 
        "sidenav subnav section"
        ;    

    }

    #todo{
        display: none;
        position: inherit;}

    .book2{
        display: inherit;
        position: absolute;        
        margin-right: 80px;
        margin-left: 65%;
        z-index: 40;
    }

    main{
        border: 80px solid #fae9b1;
    }

    #Photos div span{
        padding-left: 10px;
        font-size: 1.5rem;
    }

    
    #map img{
        width: 100%;
        height: 100%;
    }

    .book{
        margin-top: -80px;
    }

    ul li{        
        font-size: 0.8rem;
    }

    #side-navbar{
        padding-left: 10px;        
    }

    h1{
        font-size: 1.7rem;
    }

    h2,h3,h4,h5,h6{
        font-size: 1rem;
    }

    p,#Meeting p{
        font-size: 0.9rem;
    }

    #todo span{
        font-size: 0.7rem;
    }

    #ads{
        margin-bottom: 20px;
        grid-template-columns: 1fr;
    }

    blockquote{
        font-size: 1.7rem;
        font-weight: bolder;
        padding: 15px 10px;
    }

    #context{
        padding: 0px;
        margin-top: 35px;        
    }
    #context p{
        padding-right: 20px;
        font-size: 0.8rem;
    }    

    #Testimonials div img{
        height: 300px;
        margin-top: 12px;    
    }

    #inside{
        margin-bottom: 5px;
    } 
    #Testimonials{
        margin-top: 0px;
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        grid-template-areas: 
        "context outside"
        "context context";    
        margin-bottom: -20px;
    }

    #book{
        margin-left: -140px;
    }

    footer{
        grid-gap: 30px;
    }
}


@media screen and (max-width:650px){
    #Photos{
        width: 100%;    
    }

    
    #Photos img{
        filter: grayscale(90%) brightness(120%);
        width: 100%;    
        height: 310px;
        object-fit: cover;
        transition: all 0.1s ease-in-out;
    }

    #content1{    
        grid-template-columns: 1.3fr 4fr;       
        grid-template-areas: 
        "sidenav sidenav"
        "subnav section"
        ;    

    }

    #side-navbar{
        display: flex;
        justify-content: start;
        align-items: center;
        padding: 0px;
    }

    #side-navbar h1{
        padding: 0px;     
        margin-right: 15px;   
    }

    #side-navbar ul li{
        display: inline-flex;
        font-size: 1rem;
        margin: 0px 10px;
        align-items: center;          
    }

    #todo{
        display: none;
        position: inherit;}

    .book2{
        display: inherit;
        position: absolute;        
        margin-right: 80px;
        margin-left: 50%;
        z-index: 40;
    }

    main{
        border: 80px solid #fae9b1;
    }

    #Photos div span{
        padding-left: 10px;
        font-size: 1rem;
    }

    .input_arrival{
        width: 100%;
    }

    
    #map img{
        width: 100%;
        height: 100%;
    }

    .book{
        margin-top: -80px;
    }

    ul li{        
        font-size: 0.8rem;
    }

    #side-navbar{
        padding-left: 10px;        
    }

    h1{
        font-size: 1.7rem;
    }

    h2,h3,h4,h5,h6{
        font-size: 1rem;
    }

    p,#Meeting p{
        font-size: 0.7rem;
    }

    #todo span{
        font-size: 0.5rem;
    }

    #ads{
        margin-bottom: 20px;
        grid-template-columns: 1fr;
    }

    blockquote{
        font-size: 1.1rem;
        font-weight: bolder;
        padding: 15px 10px;
    }

    #context{
        padding: 0px;
        margin-top: 35px;        
    }
    #context p{
        padding-right: 20px;
        font-size: 0.7rem;
    }    

    #Testimonials div img{
        height: 100px;
        margin-top: 12px;    
    }

    #inside{
        margin-bottom: 5px;
    } 
    #Testimonials{
        margin-top: 0px;
        display: grid;
        grid-template-columns: 2fr 1.5fr;
        grid-template-areas: 
        "context outside"
        "context context";  
        margin-bottom: 0px;  
    }

    #book{
        margin-left: -140px;
    }

    footer{
        grid-gap: 0px;
    }

    footer{
        background: linear-gradient(rgb(250,239,202),rgba(250,226,143));    
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 0.1fr;
        grid-template-areas: 
        "contact footer"
        "subscribe hotels"
        "copyright copyright";        
    }

    #subscribe{
        padding-left: 0px;
    }
}


@media screen and (max-width:460px){
    #Photos{
        width: 100%;    
    }

    
    #Photos img{
        filter: grayscale(90%) brightness(120%);
        width: 100%;    
        height: 310px;
        object-fit: cover;
        transition: all 0.1s ease-in-out;
    }

    #content1{    
        grid-template-columns:1fr;       
        grid-template-areas: 
        "sidenav"
        "section"
        "subnav"
        ;    

    }

    #sub-navbar nav{
        display: none;
    }

    #sub-navbar{
        padding-right: 15px;
    }

    #side-navbar{
        display: block;
        justify-content: start;
        align-items: center;
        padding: 0;
        margin: 0;     
    }

    #side-navbar h1{
        padding: 15px;         
    }

    #side-navbar ul li{
        display: inline;
        font-size: 0.9rem;        
        align-items: center;  
        justify-content: center;
        text-align: center;
    }

    #side-navbar ul{
        margin: 0;     
    }

    #todo{
        display: none;
        position: inherit;}

    .book2{
        display: inherit;
        position: absolute;  
        margin-left: 50px;
        margin-right: 50px;
        z-index: 40;        
    }

    .room{
        background-color: transparent;  
        z-index: 40;
        text-align: center;
    }

    .book2:hover .room,.book2:hover .Arrival,.book2:hover .Departure,.book2:hover .Nights,.book2:hover .Adults,.book2:hover .book2-btn{
        background-color: #cccccc;        
    }
    

    main{
        border: 20px solid #fae9b1;
        border-top: 80px solid #fae9b1;
    }

    #Photos div span{
        padding-left: 10px;
        font-size: 1rem;
    }

    .input_arrival{
        width: 100%;
    }

    
    #map img{
        width: 100%;
        height: 100%;
    }

    .book{
        margin-top: -80px;
    }

    ul li{        
        font-size: 0.8rem;
    }

    #side-navbar{
        padding-left: 10px;        
    }

    h1{
        font-size: 1.7rem;
    }

    h2,h3,h4,h5,h6{
        font-size: 1rem;
    }

    p,#Meeting p{
        font-size: 0.7rem;
    }

    #todo span{
        font-size: 0.5rem;
    }

    #ads{
        margin-bottom: 20px;
        grid-template-columns: 1fr;
    }

    blockquote{
        font-size: 1.5rem;
        font-weight: bolder;
        padding: 15px 10px;
    }

    #context{
        padding: 0px;              
    }
    #context p{
        padding-right: 20px;
        font-size: 0.7rem;
    }    

    #outside{
        margin-top: 0;
    }

    #Testimonials div img{
        height: 100%           
    }
    #Testimonials{
    
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0.5fr 1fr;
        grid-template-areas: 
        "outside inside"
        "context context";  
        grid-gap: 25px;
        margin-top: 10px;
         
    }

    #Gallery div img{
        margin-top: 0;
    }

    #inside, #inside img{
        margin-bottom: 0;
        padding-bottom: 0;
        margin-top: 0;
    }

    #book{
        margin-left: -140px;
    }

    footer{
        grid-gap: 0px;
    }

    #context{
        margin-top: 15px;
    }

    footer{
        background: linear-gradient(rgb(250,239,202),rgba(250,226,143));    
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 0.1fr;
        grid-template-areas: 
        "contact footer"
        "subscribe hotels"
        "copyright copyright";        
    }

    #subscribe{
        padding-left: 0px;
    }
}