@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@100..900&family=Outfit:wght@100..900&display=swap');

:root
    {
        --head-font: "Noto Serif Display", serif;
        --text-font: "Outfit", sans-serif;        
        --max-width:100%;
        --radius:0px;    
        --first-color:#C5A56F;
        --link-color:#C5A56F;    
        --button-color:#C5A56F; 
        --button-hover-color:#d2b88d; 
        --body-back-color:#edeae5;
        --dark-second-color:#343935;   
        --top-photos-gap:40%;     
    }

/*general*/

h1,h2,.h1,.h2,.headFont
{
    font-family:var(--head-font);
}

h3,.h3
{
    color:var(--first-color);
}

.display-3, .display-6 {font-weight:bold;}
   


/*header*/ 

header
{
    background:none;
    box-shadow:none;
}

header.scrolled
{
    background:#fff;    
    box-shadow:var(--small-shadow); 
}

.btn-outline-light
{
    line-height:40px;
    padding:0px 40px;
}



header.scrolled .bookWrap .book
{
 background:var(--button-color);
 border-color:var(--button-color);
 color:#fff;
}



.navWrap ul li a {color:#fff;}

header.scrolled .navWrap ul li a 
{
   color:var(--text-color);
}

header.scrolled .logoWrap .logo 
{
  filter: invert(1);
} 


header.scrolled .langWrap
{
    display:none;
}



/*lang*/ 

header .langWrap
{
    position:absolute;
    top:100px;
    right:0px;
}


.langWrap ul li.current a
{  
   font-weight:normal;
   color:#fff;
   border-top:1px solid #fff;
}

.langWrap ul li a
    {    
    letter-spacing:1px;
    background:none;
    border-radius:0px; 
    color:#ffffffaa;
    border-top:1px solid #ffffff40;
    } 

.langWrap ul li a:hover
{
    color:#fff;
    border-top:1px solid #fff;
}



 

/*top slider*/

.topImg h2 
{
    font-family:var(--text-font);
    color:var(--first-color);
    font-size:22px;
}

.sliderbooking 
{
    padding:0px;
}

.sliderbooking .booking, .topImg .booking 
{
    text-align: center;
    position:absolute;
    z-index:2;
    bottom:calc(var(--top-photos-gap) - 130px);
    right:inherit;
    left:0px;
    width:100%; 
}

.sliderbooking .bookingBar, .topImg .bookingBar 
{
    max-width: 450px;
    margin:auto;
}

.bookingBar .day 
{
   font-family:var(--head-font);
}


.sliderbooking::after, .topImg::after
{
    content:'';
    position:absolute;
    z-index:1;
    top:0px;left:0px;
    height:50%;width:100%;    
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.sliderbooking .title, .topImg .title
    {
    left:0px;
    width:100%;
    max-width: 100%;
    text-align:center;
    z-index:2;
    }

 
/*footer*/ 

footer 
    {
    background:var(--dark-second-color);
    color:#fff;    
    } 

footer h3
    {
        font-family:var(--head-font); 
    } 

/*rooms cards*/
.roomCard
    {
        margin:10px auto;
        overflow:hidden; 
        position: relative;
        background:#fff;
    }

.roomCard .smallInfo
    { 
        background: #00000050;
        color: #fff;
        border-radius:var(--radius); 
        padding: 5px 11px;
        font-size: 10px; 
    }

.roomCard .img
    {   
    cursor:pointer;
    transition: 0.3s; 
    }
 

.roomCard .imgWrap .info
    {
        color:#fff;
        position:absolute;
        z-index:2;
        bottom:0px;
        top:inherit;
        left:0px;  
        width:100%;
        height:inherit;
    }


.roomCard .book
{
    position:absolute;
    top:0px;
    right:0px;
    z-index:9;
}

.roomCard .img::after
    { 
        content:'';
        position:absolute;
        z-index:2;
        top:0px;left:0px;
        height:100%;width:100%;    
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 100%)
    }

.roomCard:hover .img
    {
    transform: scale(1.07);
    }



/*rooms details*/ 
.roomPageFacilities .facility .img
{
width:35px;height:35px;    
}


/*offer cards*/
.offerCard
    {
        box-shadow:var(--small-shadow);
        border-radius:var(--radius); 
        margin:10px auto;
        overflow:hidden;
        cursor:pointer;
        position:relative;
    }


.offerCard .img,.offerCard .offerCardMore
    {
    transition: 0.3s; 
    }
 

.offerCard .img::after
    { 
        content:'';
        position:absolute;
        z-index:2;
        top:0px;left:0px;
        height:100%;width:100%;    
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 49%, rgba(0, 0, 0, 0.6) 100%);
    }

.offerCard .offerCardBody
    {
        z-index:3;
        color:#fff;
        position:absolute;
        bottom:0px;
        left:0px; 
    }

.offerCard .offerCardMore
    {
        z-index:3;     
        position:absolute;
        bottom:0px;
        right:0px;
    }

.offerCard .offerCardMore a {color:#fff;font-size:20px;}


.offerCard:hover .img{transform: scale(1.07);}
.offerCard:hover .offerCardMore {right:10px;}





/*blog cards*/
.blogCard
    {
        box-shadow:var(--small-shadow);
        border-radius:var(--radius); 
        margin:10px auto;
        overflow:hidden;
        cursor:pointer;
        position:relative;
    }


.blogCard .img,.blogCard .blogCardMore
    {
    transition: 0.3s; 
    }
 

.blogCard .img::after
    { 
        content:'';
        position:absolute;
        z-index:2;
        top:0px;left:0px;
        height:100%;width:100%;    
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 49%, rgba(0, 0, 0, 0.6) 100%);
    }

.blogCard .blogCardBody
    {
        z-index:3;
        color:#fff;
        position:absolute;
        bottom:0px;
        left:0px;        
    }

.blogCard .blogCardMore
    {
        z-index:3;     
        position:absolute;
        bottom:0px;
        right:0px;        
    }

.blogCard .blogCardMore a {color:#fff;font-size:20px;}


.blogCard:hover .img{transform: scale(1.07);}
.blogCard:hover .blogCardMore {right:10px;}


/*review cards*/
.reviewCard
    {
        box-shadow:var(--small-shadow);
        border-radius:var(--radius); 
        margin:10px auto;
        position:relative;
        background:#fff;
        min-height:300px;
    }    

.reviewCard .icon
{
    position:absolute;
    top:10px;
    right:10px;
    width:18px;
    height:18px;
}

.reviewCard .stars
    {
    color:goldenrod;
    font-size:11px;
    }

.reviewCard .date
    {
    color:gray;
    font-size:11px;
    }





/*attractions*/

.attractionCard
    {
        box-shadow:var(--small-shadow);
        border-radius:var(--radius); 
        margin:10px auto;
        overflow:hidden;
        position:relative;
    } 

.attractionCard .img {transition: 0.3s; } 

.attractionCard .img::after
    { 
        content:'';
        position:absolute;
        z-index:2;
        top:0px;left:0px;
        height:100%;width:100%;    
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 49%, rgba(0, 0, 0, 0.6) 100%);
    }

.attractionCard .attractionCardBody
    {
        z-index:3;
        color:#fff;
        position:absolute;
        bottom:0px;
        left:0px;        
    }

 

.attractionCard .attractionCardAction
    {
        z-index:3;     
        position:absolute;
        top:0px;right:0px;
    }

.attractionCardBody .author
    {
        font-size:11px;
    }
    
.attractionCardBody .title
    {
        font-size:18px;
        font-weight:bold;
        text-shadow:1px 1px 3px #00000040;
    }

.attractionCard:hover .img{transform: scale(1.07);}


/*mobile*/

@media (max-width: 1199.98px)
{
 
    header 
        {
            position:absolute;
            box-shadow:none;
            top:20px;
        }

    header .langWrap {position:relative;top:inherit;right:inherit;}

    header .logoWrap .logo {height:90px;}
    .navWrap
    {
        top:0px;
        height:100%;       
    }

    .navWrap ul li a {color:var(--text-color);}
 }