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

:root
    {
        
        --header-height:150px;
        --head-font: "Cinzel Decorative", serif;
        --text-font: "Outfit", sans-serif;        
        --max-width:100%;
        --radius:3px;   
        
        --first-color:#191a1c;
        --link-color:#191a1c;    
        --button-color:#191a1c; 
        --button-hover-color:#d2b88d; 
        --body-back-color:#e7e3db;

        --text-color:#0a2316;
        --dark-second-color:#0a2316;   
        
        --top-photos-gap:35%;     
        --hero-content-gap:60px; 
    }


h4, .h4 
{
    font-family:var(--text-font);
}

.btn
{
    font-size:12px;
    text-transform: uppercase;    
    letter-spacing: 1px;
    padding-left:20px;
    padding-right:20px;
}

.btn-sm
    {
    font-size:10px;
    }

.btn-secondary
{
    --bs-btn-bg:#001527;
    --bs-btn-border-color:#001527;
}

/*general*/

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

 

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

 

.container-fluid
    { 
        padding:0;  
    }

.container-fluid .row
    {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    } 


/*header*/
 

header
{
    background:none;
    box-shadow:none;  
    transition: 0.3s; 
}

header, header a {color:#fff;}

header.scrolled
{ 
   backdrop-filter: blur(3px);
   background: linear-gradient(0deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0.6) 100%); 
}



.headerWrap
{
    padding:var(--hero-content-gap);
}



.headPhone, .headLocation {font-size:12px;text-transform: uppercase;letter-spacing:1px}

.showScrolled{display:none;}
header.scrolled .hideScrolled{display:none;}
header.scrolled .showScrolled{display:block;}
 
.headerTopBar {gap:30px;}
 
.navWrap {margin-top:10px;}
.navWrap ul li:last-child a {padding-right:0px;} 
.navWrap ul li a {color:#fff; }


.navWrap ul li ul
{  
    border-radius:5px;
    text-align:left;
    font-size:14px;
}

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

/*lang*/  


.langWrap ul li a
    {        
    font-size:10px;
    letter-spacing:1px;
    background:none; 
    color:#ffffffaa;    
    border:1px solid #ffffff40;
    } 

.langWrap ul li.current a    
{
font-weight:bold;
}

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

  


/*top slider*/

.topImg
{
border-radius:0px;
}



.sliderbooking .booking, .topImg .booking 
{ 
    position:absolute;  
    left:0px;
    width:100%;
    max-width:100%;
    z-index:2;
    text-align:center;
    bottom:10%;    
}


.topImg .title h1
{
    text-shadow:1px 1px 5px #00000030;
    font-size:5em;
    padding:0 10%;
}

.topImg .title h2 
{
    padding:1% 10%;
    font-family:var(--text-font);
    font-size:2em;
    font-weight:200;
}
 

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

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

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

.bookingBar .month
{
    text-align:left;
}


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

 
/*footer*/ 

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

footer h3
    {
        font-family:var(--head-font); 
    } 
/*rooms cards*/
.roomCard
    {
        background:#fff;
        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; 
        width:100%;        
        transition: 0.3s all;
    }

 

.offerCard .offerAdvert
{ 
    opacity:0;
    transition: 0.7s all;
    position:absolute;
    width:100%;
    height:40%;
    padding-right:150px !important;
    top:-20px;
    left:0px;
    color:#fff;
    background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
}

.textphoto > div
{ 
    background: linear-gradient(274deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, .6) 100%);
    position:relative; 
    padding:100px;
    border-radius:var(--radius);
}

.textphoto > div h2 {font-size:3em;}


.offerCard .offerCardMore a {color:#fff;font-size:20px;}
.offerCard:hover .img{transform: scale(1.07);}
.offerCard:hover .offerCardMore {right:10px;} 
.offerCard:hover .offerAdvert {opacity:1;top:0px;} 

/*offer details*/
.offerPageSidebar
{
    min-width:300px;
    border-radius:var(--radius); 
    background: #fff;
    position:relative; 
    z-index:3;
    left:40px;
    padding:40px;
    top:var(--header-height);
    box-shadow:0px 0px 3px #0000000a;
    top:150px;
    left:0px;
    position:sticky;
    text-align: left;
}


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



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


.voucherCard .img,.voucherCard .voucherCardMore
    {
    transition: 0.3s; 
    }
 

.voucherCard .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%);
    }

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

.voucherCard .voucherCardMore
    {
        z-index:3;     
        position:absolute;
        bottom:0px;
        right:0px;        
    }

.voucherCard .voucherCardMore a {color:#fff;font-size:20px;}


.voucherCard:hover .img{transform: scale(1.07);}
.voucherCard:hover .voucherCardMore {right:10px;}


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


.ticketCard .img,.ticketCard .ticketCardMore
    {
    transition: 0.3s; 
    }
 

.ticketCard .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%);
    }

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

.ticketCard .ticketCardMore
    {
        z-index:3;     
        position:absolute;
        bottom:0px;
        right:0px;        
    }

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


.ticketCard:hover .img{transform: scale(1.07);}
.ticketCard:hover .ticketCardMore {right:10px;}





/*mobile*/
@media (max-width: 1199.98px)
{


    .navWrap {margin-top:0px;}


    .textphoto > div
    { 
        padding:40px;
        z-index:3;
        left:inherit;
        top:inherit;
        box-shadow:none;
    }

  
    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 ul 
        { 
            position: relative;
            top: 0;        
        }

    .navWrap ul li a {color:var(--text-color);padding:0px 20px;}
    .navWrap ul li:last-child a {padding-right:20px;} 

 }


 @media (max-width: 576px)
{
    .textphoto > div h2
    {
        font-size:2em;
    }

    .topImg .title h1
    {
        font-size:3em;
    }

     .headerWrap {
        padding: 40px;
        height:100px;
    }

    .sliderbooking::after, .topImg::after
    {
        height:50%;
    }


    .sliderbooking .title, .topImg .title
        {
            bottom:var(--hero-content-gap);            
        }
}