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

:root
    {
        --head-font: "Outfit", sans-serif;
        --text-font: "Outfit", sans-serif;        
        --max-width:100%;
    }


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

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



header.scrolled .bookWrap
{
    display:block !important;
}

header.scrolled .langWrap
{
    display:none !important;
}


/*hero*/

.photobooking, .offerContainer, .postContainer, .roomContainer 
{
margin-top:calc(var(--header-height) - 20px); 
}


.sliderbooking 
{
    padding:0px;
}

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

.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;}






/*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);}



/*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;
    }