@import url('normalize.css');
@import url('bootstrap.css');
@import url('swiper.css'); 
@import url('sal.css');


@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");


:root
{
    --text-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --head-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";    
    --radius:20px;        
    --body-back-color:#fafafa;

    --text-color:#303030;
    --link-color:#bf6c51;
    --first-color:#e2957c;
    --button-color:#e2957c; 
    --button-hover-color:#d86740; 
    --second-color:#cda365;

    --swiper-navigation-size: 12px;
    --swiper-theme-color: #505050;
    --swiper-pagination-bottom:-5px;
    
    --max-width:2400px;
    --small-shadow:1px 1px 4px #00000020;
    --medium-shadow:1px 1px 8px #00000040; 
    --top-photos-gap:5%;

    --header-height:100px;
 
    /*bootstrap buttons
    --bs-border-radius:20px;
    --bs-border-radius-sm:20px;
    */
}

.btn-primary 
{
background-color:var(--button-color);
border-color:var(--button-color)
}
 

.btn-primary:hover, .btn-primary:active
{
background-color:var(--button-hover-color);
border-color:var(--button-hover-color)
}

html
    {
        scroll-behavior: smooth;
    }

body
    {
        background:var(--body-back-color);
        color:var(--text-color);
        font-family:var(--text-font);
    }

.container-fluid
    {
        max-width:var(--max-width);
    }

.btn-round
{ 
    border-radius:var(--radius);   
    text-transform: uppercase;
    font-size:12px;
    letter-spacing:1px; 
}

a 
{
    text-decoration:none;
    color:var(--link-color);
}
 
.txt-shadow
{
    text-shadow: 3px 3px 7px #00000014;
}

/*box height*/

/*laptop*/
.hl-100 {height:100vh;} .hl-50 {height:50vh;} .hl-75 {height:75vh;} .hl-33 {height:33vh;} .hl-25 {height:25vh;} 

/*tablet*/
@media only screen and (max-width:62em) {.hm-100 {height:100vh;} .hm-75 {height:75vh;} 
.hm-50 {height:50vh;} .hm-33 {height:33vh;} .hm-25 {height:25vh;} .hm-auto {height:auto;}}

/*phone*/
@media only screen and (max-width:47em) {.hs-100 {height:100vh;} .hs-75 {height:75vh;} .hs-50 {height:50vh;} 
.hs-33 {height:33vh;} .hs-25 {height:25vh;} .hs-auto {height:auto;}}


/*section width*/ 
section {margin-bottom:4%;}
.container-medium {max-width:900px;margin:auto;}
.container-small {max-width:680px;margin:auto;}


/*header*/
header 
{
    position:fixed;top:0px;left:0px;width:100%;z-index:99;background:#fff;  
    box-shadow:var(--small-shadow); 
    transition: 0.3s;
}

.headerWrap {height:var(--header-height);position:relative;}

header .logoWrap
{
    cursor:pointer;  
    position: relative;
    height:100%;
    width:200px;
}


header .logoWrap .logo 
{
    width:100%;height:100%;  height:calc(var(--header-height)*0.8);max-width:180px;
    background-position:center left;
    transition: 0.3s;
} 

 
.navWrap ul {padding:0;margin:0;}

.navWrap ul li
    {
    display:inline-block;
    padding:0;margin:0;
    }

.navWrap ul li a
    {
    display:inline-block;
    line-height:50px;
    padding:0px 20px;    
    color:var(--text-color);
    transition: 0.3s;
    }

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

.navWrap ul li.current
{
   color:var(--link-color);
   border-bottom:1px solid;
}

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

/*lang*/ 
.langWrap ul {padding:0;margin:0;}

.langWrap ul li
    {
    display:inline-block;
    padding:0;margin:0;
    }

.langWrap ul li a
    {
    text-transform: uppercase;
    font-size:11px;
    display:inline-block;
    width:30px;line-height:30px;
    background:#eee;
    border-radius:100%; 
    text-align:center;  
    color:var(--text-color); 
    transition: 0.3s;
    } 

.langWrap ul li a:hover
{
    color:var(--first-color);
}

.langWrap ul li.current a
{ 
   font-weight:bold;
   color:var(--first-color);
}


/*footer*/
footer 
    {
    background:#f0f0f0; 
    padding-top:5rem;
    padding-bottom:5rem;
    } 


/*mobile menu*/

.mobileMenuWrap
    {
        position:fixed;
        bottom:2%;
        left:2%;
        width:96%;
        z-index:99; 
        border-radius:5px;
        overflow:hidden;
        text-transform:uppercase;
        font-size:11px;
        letter-spacing:1px;        
        color:#fff;
    }

.mobileMenuWrap a {color:#fff;}    
.mobileMenuWrap > *
{ 
    padding:0px 15px;     
    line-height:25px; 
    text-align:center;
    cursor:pointer;
    background:var(--text-color);
    width:100%;
    border-right:1px solid #ffffff20;
}

.mobileMenuWrap .bi
{
    font-size:20px;
    margin-top:10px;
    display:block;
} 

.mobileMenuWrap .book
{
    background:var(--button-color);
}
 

/*photo*/
.photo img
    {
        height:100%;
        width:100%;
    }

/*general class*/
.cover
    {
        background-size: cover;
        background-position:center center; 
    }

.contain
    {
        background-size: contain;
        background-position:center center; 
        background-repeat:no-repeat;
    } 
    
/*hero photos*/

.topImg  
{
    height:100%;position:relative;border-radius:var(--radius);overflow:hidden;
} 

.topImg .title {position:absolute;bottom:var(--top-photos-gap);left:var(--top-photos-gap);z-index:9;color:#fff;max-width:60%}

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


/*swiper*/ 
.swiper,.swiper-wrapper, .swiper-slide, .swiper-slide .img {height:100%;}
.sliderbooking .swiper { border-radius:var(--radius); }

.swiper-wrapper {padding-bottom:20px;}


.swiper-scale-effect .swiper-slide-cover 
{
  transition: 8s ease-out;
  transform: scale(1);
}

.swiper-scale-effect .swiper-slide.swiper-slide-active .swiper-slide-cover 
{
  transform: scale(1.08);
} 


.swiper-button-next:after, .swiper-button-prev:after
{
    content:"\F138";
    font-family:bootstrap-icons!important;
    font-size:20px;
} 

.swiper-button-prev:after
{
    content:"\F12F"; 
}

.swiper-button-next, .swiper-button-prev
    {
        border-radius: 100%;
        background: #ffffffaa;
        width: 35px;
        height: 35px;
        box-shadow:var(--small-shadow);
        transition: 0.3s;
    }

.swiper-button-next:hover, .swiper-button-prev:hover
    {
        background: #fff;
    }

.sliderbooking .title
    {
    position:absolute;bottom:var(--top-photos-gap);left:var(--top-photos-gap);z-index:9;color:#fff;
    }

/*booking bar*/
.bookingBar 
{ 
    background:#fff;  
    cursor:pointer; 
    box-shadow:var(--small-shadow); 
    border-radius:var(--radius); 
    height:60px; 
    overflow:hidden; 
    min-width:360px;
}
 
.bookingBar > div
{
    padding:0px 20px;
    min-width:100px; 
    transition: 0.3s;
    color:var(--text-color);
}


.bookingBar > div:hover
{
    color:var(--first-color);
}

.bookingBar > div:first-child
{   
    border-right:1px solid #00000010; 
    position:relative;
}

.bookingBar > div:first-child::after
{
    content:"\F135";
    font-family:bootstrap-icons!important;
    position:absolute;
    top:13px;
    right:-12px;
    font-size:24px;
} 



.bookingBar > div:last-child {padding:0;}

.bookingBar .btn
{
    height:100%;
    width:100%;
    border-radius:0px;
    text-transform: uppercase;
    font-size:12px;
    letter-spacing:1px;
}

.bookingBar .day
{
    font-size:32px; 
    padding-right:10px; 
}




.bookingBar .month
{
    font-size:13px;
   line-height:14px;
}

.bookingBar .month small
{
  font-size:11px;
  color:grey;
  display:block;
}
 
 

.sliderbooking .booking, .topImg .booking {position:absolute;bottom:var(--top-photos-gap);right:var(--top-photos-gap);z-index:9;}


/*boxes*/
.photo img
    {    
        border-radius:var(--radius);
    }

.photos .img 
    {
        border-radius:var(--radius);
        margin-bottom:20px;    
    }

.location iframe 
    {
        filter: saturate(50%);
        height:100%;
        border-radius:var(--radius);   
        border:0px;
    } 

/*room*/

.roomPageFacilities
{
    background:#fff;
    border-radius:var(--radius); 

}


/*mobile*/

@media (max-width: 1199.98px)
{
    :root
    {
    --header-height:70px;
    }

    .navWrap 
    {
        position:fixed;top:var(--header-height);
        left:0px;height:100%;
        overflow-y:auto;width:100%;
        background:#fff;
        text-align:center;
        padding-top:10%;
    }

    .navWrap ul li {width:100%;display:block;}

    .langWrap ul li a
        {   
            width:40px;
            line-height:40px;    
        } 

    footer
    {
        padding-bottom:100px;
    }
 }