@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=IBM+Plex+Mono:ital@1&family=Lato:wght@700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lobster&family=Lobster+Two&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Old+Standard+TT&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Signika+Negative:wght@400;500;600&family=Song+Myung&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Forum&family=Marcellus&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Forum&family=Marcellus&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Forum&family=Marcellus&display=swap');


html, body{
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}
.navbar-nav{

    display: flex;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding-left: 0px !important;
  }

  a{
      text-decoration: none;
      color: #ffffff;
  }
  
/*  HEADER */
header .navbar {
  background-color: rgb(255, 255, 255);
}
.nav-link {
  font-size: 19px;
  text-decoration: none;
  display: inline-block;
  padding: 15px;
  color:#000000;
  transition: color 0.3s ease-in-out;
  font-family: 'Gilda Display', serif;
  font-weight: 500;


}

.navbar-scrolled .nav-link {
  color:rgb(0, 0, 0);
  }

  @media only screen and (max-width: 1000px) {
      .nav-link {
          color:rgb(0, 0, 0);
      }
    
    
    }
    @media only screen and (min-width: 767px) {
        #testimonials{
            height: auto !important;
        }
}
   @media (min-width: 769px) {
  .nav-link{
    font-size: 19px;
  }
  .container-fluid{
    width: 100% !important;
  }
   .index-bg1{
    height: auto !important;
  }
  .lli{
    width: 95%;
  }
}
  

.nav-item .underline {
  height: 4px;
  background-color: transparent;
  width: 0;
  transition: width 0.6s, background-color 0.6s;
  border-radius: 70px;
  margin: 0 auto;

}



.nav-item:hover a {

  color: #000000 ;
}


.nav-item:active a {
  transition: none;
}

.nav-item:active .underline {
  transition: none;
  background-color:#000000  ;

}

::selection {
  background-color: rgb(0, 0, 0);
  color: rgb(0, 0, 0);
}


.navbar-nav {
  margin-left: auto;
  gap: 20px;
  font-size: 18px;
padding-right: 50px;
}

.navbar {
  background-color: rgba(0,0,0,0.1);
  transition: background-color 0.3s ease-in-out;

}

.navbar-scrolled {
  background-color: #2a2c31;

}


@media only screen and (max-width: 1000px) {
  .navbar {
      background-color: #2a2c31;
      transition: background-color 0.3s ease-in-out;
  
  }

}



/* Stili për butonin */
.navbar-toggler {
  background-color: #000000; /* Sfondi i zi i butonit */
  border: 1px solid #fff; /* Vijë kufiri e bardhë */
  border-radius: 5px; /* Këndet e rrumbullakosura */
  padding: 8px; /* Hapësirë e brendshme */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Efekt i animuar */
}

/* Ikona brenda butonit */
.navbar-toggler-icon {
  display: inline-block;
  width: 20px; /* Gjerësia e ikonës */
  height: 1px; /* Trashësia e vijave */
  background-color: white; /* Ngjyra e bardhë e vijave */
  position: relative;
  transition: background-color 0.3s ease;
}

/* Vija e sipërme dhe e poshtme */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: '';
  background-color: white;
  width: 20px;
  height: 1px;
  position: absolute;
  left: 0;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.navbar-toggler-icon::before {
  top: -8px; /* Pozicionimi i vijës së sipërme */
}

.navbar-toggler-icon::after {
  top: 8px; /* Pozicionimi i vijës së poshtme */
}



@media screen and (width: 1024px) {
  .navbar-nav {
      font-size: 16px;
  }
 
}
/* GENERAL BUTTON STYLING */
#button,
#button::after {
  -webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
  -o-transition: all 0.5s;
	transition: all 0.5s;
}
#button,
#button::after {
  -webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
  -o-transition: all 0.5s;
	transition: all 0.5s;
}

#button {
  background: #000000 !important;
  border: 0;
  border-radius: 5px;
  color:#ffffff !important;
  font-size: 18px;
  font-weight: bold;
  margin: 0 auto;
  padding: 10px 30px;
  position: relative;

  border-radius:0;
  transition: 0.5s;
 font-family: "Forum", serif;
  border: 2px solid #ffffff ;

}

#button:hover {
  color: #ffffff !important;
  transform: scale(1);
  border: 2px solid #ffffff;

}
.btn-3 {
    overflow: hidden;
  }

  .btn-3::before {
    height: 100%;
    left:0;
    top: 0;
transition: 0.5s;
    width: 0;

  }
  
  .btn-3::after {
    height: 100%;
    right:0;
    top: 0;

    width: 0; }

  .btn-3:hover:after,  .btn-3:hover:before {
    height: 100%;
    width: 55%;
    color: #000000;}
  /* ------------ */



@media screen and (min-width: 200px)and (max-width: 950px) {
    .navbar-nav {
display: inline-block;      
    
    }
    .tittle1{
        padding-left: 0px !important;
    }
.index-bg1{
  height: auto !important;
}
#banner
{
  height: auto !important;

}
#banner h6
{
  
  padding-top: 150px;
  padding-left: 50px;
}
#banner h2
{
  
  padding-left: 50px;
}
#banner button{
  margin-bottom: 150px;
}

.swiper1{
 font-size:40px !important;
 }
 .bg01{
  font-size: 45px !important;
 }
 .index-bg1 h5{
  padding-bottom: 150px;
 } 
 .jumbotron{
  height: auto !important;
 }
 .menu1{
  font-size: 50px !important;
  padding-right: 0px !important;
  padding-left: 0px !important;
  margin: 0px!important;
 }
 .menu2{
  font-size: 20px !important;
  padding-right: 0px !important;
  padding-left: 0px !important;
  margin: 0px!important;
 }
 .img0{
  text-align: center !important;
 }
 .restaurant{
  height: auto !important;
 }
 .restaurant{
  padding-top: 50px;
  padding-bottom: 50px;
  background-size: cover !important;
  text-align: center;
}
.restaurant-bg{
  margin-top: 0px !important;
  padding-top: 0px;
  padding-bottom: 0px;
}
.text0{
  font-size: 16px !important;
}
.book{
  height: auto !important;
}
.book1{
  height: auto !important;
}
.story{
  font-size: 18px !important;
}
.story1{
  font-size: 30px !important;
}
.nav-item.dropdown img {
 width: 100px !important;

}
/* .nav-item.dropdown .dropdown-menu .drop1{
  width: 50px;
 
 
 } */

  }
/* Stili për dropdown */
.dropdown-menu {
  background-color: #ffffff; /* Ngjyra e sfondit */
  border: none; /* Hiqja e kufijve */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Efekti i hijes */
}

.dropdown-menu a {
  color: #000000;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
}

.dropdown-menu a:hover {
  background-color: #f2f2f2; /* Ngjyra e sfondit në hover */
}

.nav-item.dropdown:hover .dropdown-menu {
  display: block; /* Shfaqja e dropdown-it kur hover */
}

.dropdown-menu a.dropdown-item {
  padding: 8px 20px; /* Hapësira brenda dropdown-it */
}

.dropdown-menu a.dropdown-item:hover {
  background-color: #f2f2f2; /* Ngjyra e sfondit në hover */
}

/*  */
  .section-subtitle {
    position: relative;
    color: var(--gold-crayola);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letterSpacing-2);
    margin-block-end: 12px;
  }
  
  .section-subtitle::after {
    content: url('../images/separator.svg');
    display: block;
    width: 100px;
    margin-inline: auto;
    margin-block-start: 5px;
  
  }
  
  .banner_wrapper {
    height: 90vh;
  }
  
  .banner_wrapper .swiper {
    width: 100%;
    height: 100%;
  }
  
  .banner_wrapper .swiper-slide {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  
  .banner_wrapper .swiper-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
    opacity: 0.5;
    z-index: 0;
    
  }
  
  .banner_wrapper .swiper-pagination-bullets .swiper-pagination-bullet {
    width: .9375rem;
    height: .9375rem;
    background-color:#DFF2FC;
    border: .0625rem solid var(--bg-white);
  }
  
  .banner_wrapper .swiper .slide-caption {
    height: 100%;
    position: relative;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .banner_wrapper .swiper .slide-caption p {
    max-width: 37.5rem;
    margin: 0 auto;
    color: var(--text-white);
  }
  .swiper1{
   color: rgb(255, 255, 255);
   font-family: "cinzel", serif;
    font-weight:450;

   font-size:70px;
  }
  
 /* ///about-home////// */
 


#about-home h2{
  font-family: "marcellus", serif;
    font-style: italic;
    letter-spacing: 2px;
    font-weight: 500;
    font-size: 40px;
    color: #000000;
}
#about-home p{
    font-family: "Libre Baskerville", serif;
   font-size: 15px;
  
}



.about-img:hover{
    transform: scale(0.95);
}


.about-left:hover h5{
    color: white!important;
}

.about-right:hover {
   
    color: white;
}

.about-right:hover h5{
    color: white!important;
}


#button1,
#button1::after {
  -webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
  -o-transition: all 0.5s;
	transition: all 0.5s;
}
#button1,
#button1::after {
  -webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
  -o-transition: all 0.5s;
	transition: all 0.5s;
}

#button1 {
  background: #ffffff !important;
  border: 0;
  border-radius: 5px;
  color:#000000 !important;
  font-size: 20px;
  font-weight: bold;
  margin: 0 auto;
  padding: 13px 30px;
  position: relative;

  border-radius:0;
  transition: 0.2s;
  font-family: "Forum", serif;
  border: 1px solid #000000 ;

}

#button1:hover {
  color: #000000 !important;
  transform: scale(1);
  border: 2px solid #ffffff;

}
.btn-4 {
    overflow: hidden;
  }

  .btn-4::before {
    height: 100%;
    left:0;
    top: 0;
transition: 0.5s;
    width: 0;

  }
  
  .btn-4::after {
    height: 100%;
    right:0;
    top: 0;

    width: 0; }

  .btn-4:hover:after,  .btn-3:hover:before {
    height: 100%;
    width: 55%;
    color: #ffffff;
  }


  
 .rooms-section{

  background-color: #DFF2FC;
  padding-top: 10px;
  padding-bottom:50px ;
}
.room-content{
  background-color: white;
  margin-left: 20px;
  margin-right: 20px;
  padding: 40px;
  position: relative;
  margin-top: -70px;
}


.gallery {
  background-color: white;


}



.gallery .titlepage {
  text-align: center;
}

.gallery .gallery_img {
  height:20vh;
  overflow: hidden;
  margin-bottom: 30px;
  
}

.gallery .gallery_img figure {
  margin: 0;
}

.gallery .gallery_img figure img {
  width: 100%;
  transition: all .5s;

}

.gallery .gallery_img figure img:hover {
  transform: scale(1.2);
}

.index-bg1{
  background: url('image/530995992.jpg') rgb(66, 66, 66);
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
height: 50vh;
  position: relative;

}


.room-bg1{
  background: url('image/468984577.jpg') rgba(54, 50, 50, 0.705);
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  height: 50vh;
  position: relative;

  margin-top: 50px;
}


.bg01{
  text-align: center;
  font-family: 'forum', serif;
  font-style: italic; 
  font-size: 60px;
  color: #ffffff;
  padding-top: 170px; 
                 
}

 /* footer */
  .nav-link1 {
    text-decoration: none;
    display: inline-block;
    padding: 10px;
    color:rgb(255, 255, 255);
    transition: color 0.3s ease-in-out;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
  font-size: 15px;
  
  }
 
  .nav-link1:hover {
    color: white; /* Ngjyra e tekstit kur prehet me mouse-in */
}
  
  .navbar-scrolled .nav-link1 {
    color:rgb(255, 255, 255);
    }
  

  /* ---animation */
  .fadeinleft {
    opacity:0;
    transform: translateX(200px);
    transition: all 1.3s ease-out;
  }
  .fadeinright{
    opacity: 0;
    transform: translateX(-200px);
    transition: all 0.8s ease-out;
  }
  .fadeindown{
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1.2s ease-out;
  }
  .fadeinup{
    opacity: 0;
    transform: translateY(100px);
    transition: all 1.2s ease-out;
  }
  .fade-in{
    opacity:0;
    transition: all 1.3s ease-in;
  }
  .active-left,.active,.active-right,.active-down,.active-up{
    opacity:1;
    transform: translateX(0);
    transform: translateY(0);
  }
  .fadein{
  opacity: 0;
  }
  /* --------- */

    /* CAROUSEL */
.carousel-caption {
  top: 30%;
}

.c-item {
  height: 750px;
}

.c-img {
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9);
}


.carousel-caption h1 {
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  color: #C7C2AB;
  letter-spacing: 2px;
  font-weight: 500;
  font-size: 70px;

 
}

.c-img {
  filter: brightness(40%); /* Ndryshoni vlerën e ndriçimit sipas preferencave tuaja */
}
.carousel-caption p {
  font-family: "Libre Baskerville", serif;
color: #C7C2AB;
}

.gallery-bg1{
  background: url('image/468984515.jpg') rgba(54, 50, 50, 0.89);
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  height: 50vh;
  position: relative;
 
  margin-top: 50px;}
.contact-bg1{
 background: url('apartment/comfort19.jpg') rgba(54, 50, 50, 0.89);
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  height: 50vh;
  position: relative;
 
  margin-top: 50px;
}



/*#carouselExampleFade {*/
/*  margin-top: 110px;*/
/*  position: relative;*/
  
/*}*/

/*.carousel1 {*/
/*  background: url('imgmenu/pexels-roman-odintsov-4553125.jpg') rgba(20, 19, 19, 0.164);*/
/*  background-attachment: fixed;*/
/*  background-position: center;*/
/*  background-size: cover;*/
/*  background-repeat: no-repeat;*/
/*  background-blend-mode: multiply;*/
/*  height: 600px;*/
/*}*/

/*.carousel2 {*/
/*  background: url('imgmenu/pexels-oleksandr-p-3036525.jpg') rgba(20, 19, 19, 0.164) ;*/
/*  background-attachment: fixed;*/
/*  background-position: center;*/
/*  background-size: cover;*/
/*  background-repeat: no-repeat;*/
/*  background-blend-mode: multiply;*/
/*  height: 600px;*/
/*}*/

/*.carousel3 {*/
/*  background: url('imgmenu/pexels-maria-orlova-4916467.jpg') rgba(20, 19, 19, 0.164);*/
/*  background-attachment: fixed;*/
/*  background-position: center;*/
/*  background-size: cover;*/
/*  background-repeat: no-repeat;*/
/*  background-blend-mode: multiply;*/
/*  height: 600px;*/
/*}*/

.restaurant-bg1{
  background: url('newimg/WhatsApp Image 2024-09-18 at 10.40.47 (4).jpeg') rgb(73, 73, 73);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  height: 60vh;
  position: relative;
 
  margin-top: 50px;
}

.drop1{
  width:60vh;
  height:25vh;
}
.dropdown-item {
  padding: 10px;
}

.about-bg1{
  background: url('image/468984641.jpg') rgba(54, 50, 50, 0.918);
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  height: 50vh;
  position: relative;
 
  margin-top: 50px;
}
.story-bg1{
  background: url('image/pexels-ena-marinkovic-3838285.jpg') rgba(54, 50, 50, 0.87);
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  height: 50vh;
  position: relative;
 
  margin-top: 50px;
}
.book
{
  background: url('image/gold.png') rgba(43, 43, 43, 0.308);

  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  height: 40vh;
  position: relative;
 
 
}

.book1
{
  background: url('image/pattern.jpg') rgba(43, 43, 43, 0.178);

  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  height: 42vh;
  position: relative;
 
 
}
.about-box{
  padding: 5%;
  background-color: white;
}


#about-home{
  padding: 50px 0;
}

.about-left:hover .about-box{
  background-color: rgb(22, 22, 22);
  color: white;
}

.about-left:hover h5{
  color: white!important;
}

.about-right:hover .about-box{
  background-color: rgb(22, 22, 22);
  color: white;
}

.about-right:hover h5{
  color: white!important;
}

.hidden-service{
  display: none;
}
.service-box{
  
  background-color: white;
  border-radius: 50% 50% 50% 0;
  padding: 28px 0;
  transition-duration: 0.3s;

}

.service-box:hover .act-service{
  display: none;
  transition-duration: 0.3s;

}

.service-box:hover .hidden-service{
  display: block;
  transition-duration: 0.3s;

  
}


.service-box:hover h5{
 color: white!important;

  
}

.service-box:hover{
  background-color: #c5a880;
  color: white;
  transition-duration: 0.3s;
}


#banner{
 
  background: url('image/468984515.jpg')rgba(0, 0, 0, 0.76);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  height: 330px;
  background-blend-mode: multiply;
}

.card-img{
  border-radius: 0;
}

.card{
  border-radius: 0;
  transition-duration: 0.2s;
}
.card:hover{
  background-color: #252525;
  color: white;
  transition-duration: 0.2s;
  scale: 1.05;
}

.card:hover h5,.card:hover p{
  color: white!important;
  transition-duration: 0.2s;

}

.card:hover .card-img{
  filter: brightness(60%);
  transition-duration: 0.2s;

}


#banner-2{
  margin: 120px 0;
  background: url('../img/banner-2.jpg')rgba(0, 0, 0, 0.6);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 600px;
  background-blend-mode: multiply;
}

:root {
  --themeBG: #1d1e22;
  --themeFont: #efefef;
}

.menu {
  width: 50%;
  margin: 0 auto;
  padding: 10px 30px;
  background: var(--themeBG);
  border: 3px solid var(--themeFont);
  box-shadow: 1px 1px 3px black;
  color: var(--themeFont);
}

h1 {
  text-align: center;
  margin-bottom: 10px;
}

.itemWrap {
  margin-bottom: 10px;
}

/*Displaying flex and justifying content space between to take up the width of the box*/
.itemNameWrap {
  display: flex;
  justify-content: space-between;
}

.itemName {
  font-size: 1.8em;
}

/*The Radial Gradient background is used as the dots. The position being at 90% helps line up the dots with the price which is just a little smaller than the description. Flex-grow: 2 makes the middle spread out to take up the remaining space. */
.itemMiddle {
  vertical-align: bottom;
  background-image: radial-gradient(var(--themeFont) 1px, var(--themeBG) 0px);
  background-size: 8px 8px;
  background-repeat: repeat-x;
  background-position: left 90%;
  flex-grow: 2;
}

.itemPrice {
  font-size: 1.6em;
  padding-top:5px;
}

.itemDescription {
  font-size: 1.1em;
  font-style: italic;
}

 



                   /* CAROUSEL */
                   .carousel-caption {
                    top: 40%;
                  }
                  #carouselExampleFade {
                    position: relative;
                  }
                  .carousel-caption h1 {
                    font-family: var(--style-font);
                    font-weight: bold;
                    letter-spacing: 3px;
                    text-transform: uppercase;
                    color: #f2f2f2;
                  }
                  .carousel-caption h4 {
                    color: #f2f2f2;
                    font-family: var(--style-font);
                    font-weight: bold;
                  }
                  .carousel-caption h5 {
                    color: #f2f2f2;
                    font-family: var(--style-font);
                    font-weight: bold;
                  }
                  .c-item {
                    height: 80vh;
                  }
                  .c-img {
                    height: 100%;
                    object-fit: cover;
                    filter: brightness(0.6);
                  }
                  @media only screen and (max-width: 300px) {
                    .carousel-caption h1 {
                      font-size: 30px;
                    }
                  }
                  .carousel-item.active img{
                    transition: transform 5s linear;
                    transition-duration: infinite;
                    transform: scale(1.05, 1.05);
                  }
                  .carousel-control-next-icon {
                    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23A17727'  viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
                  }
                  .carousel-control-prev-icon {
                    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23A17727' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
                  }
                  .carousel-control-next-icon, .carousel-control-prev-icon {
                    display: inline-block;
                    width: 1rem;
                    height: 1rem;
                    background-repeat: no-repeat;
                    background-position: 50% center;
                    background-size: 100% 100%;
                  }
                  .carousel-control-next, .carousel-control-prev {
                    width: 10%;
                  }
                  @media only screen and (max-width: 600px) {
                  .carousel-caption{
                    text-align: center;
                  }
                    }
                  #line{
                    margin: 10px auto;
                    text-align: center;
                    max-width: 400px;
                    position: relative;
                  }
                  @media screen and (min-width: 700px) {
                    #line:before {
                        content: "";
                        display: block;
                        width: 100px;
                        height: 5px;
                        background: #f2f2f2;
                        left: 0;
                        top: 50%;
                        position: absolute;
                      }
                      #line:after {
                        content: "";
                        display: block;
                        width: 100px;
                        height: 5px;
                        background: #f2f2f2;
                        right: 0;
                        top: 50%;
                        position: absolute;
                      }
                  }
                  @media screen and (max-width: 700px) {
                    #line:before {
                        content: "";
                        display: block;
                        width: 50px;
                        height: 5px;
                        background: #f2f2f2;
                        left: 0;
                        top: 50%;
                        position: absolute;
                      }
                      #line:after {
                        content: "";
                        display: block;
                        width: 50px;
                        height: 5px;
                        background: #f2f2f2;
                        right: 0;
                        top: 50%;
                        position: absolute;
                      }
                  }
                  @media screen and (max-width: 300px) {
                    #line:before {
                        content: "";
                        display: block;
                        width: 30px;
                        height: 5px;
                        background: #f2f2f2;
                        left: 0;
                        top: 50%;
                        position: absolute;
                      }
                      #line:after {
                        content: "";
                        display: block;
                        width: 30px;
                        height: 5px;
                        background: #f2f2f2;
                        right: 0;
                        top: 50%;
                        position: absolute;
                      }
                  }
                  .slider {
                    width: 100%;
                    height: fit-content;
                    overflow: hidden;
                  }
                  .items {
                    width: fit-content;
                    display: flex;
                    animation: slide 50s linear infinite;
                  }
                  .item {
                    width: 350px;
                    border-radius: 5mm;
                    margin: 10px;
                  }
                  @keyframes slide {
                    0% {
                      transform: translateX(0);
                    }
                    100% {
                      transform: translateX(-50%);
                    }
                  }
                  
                  
                  .card-bodyy{
                   background-color: #ffffff;
                   border-style: solid;
                   border-color: #313131;
                   border-width: 1px;
                  }
                  
                  
                  .card-bodyy:hover{
                  
                  background-image: -moz-linear-gradient(170deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
                  background: linear-gradient(rgba(255, 255, 255, 0.459), rgba(255, 255, 255, 0.226)), url(image/pattern.jpg)  ;
                  border-style: solid;
                  border-color: #313131;
                  }
                  
                  .banner{
                    font-family: "Ramaraja", serif;
                    font-weight: 600;
                    font-style: normal;
                    font-size: 40px;
                  }
                  
                  
                  
                  
                  #rooms-head .col-lg-12{
                    margin-top: 27vh;
                    
                    }
                    
                  
                    #rooms-head h1{
                    font-family: 'Rubik', sans-serif;        
                      letter-spacing: 3px;
                        text-transform: uppercase;
                        color: white;}
                  
                  
                  
                        
                  
                  
                  
                        #rooms-head  h4{
                            color: #ffffffb3;
                        
                            font-family: 'Poppins', sans-serif;          
                        }
                  
                  
                  
                    
                  .accommodation .gy-5{
                    
                    --bs-gutter-y: 7rem;
                  }
                  
                  @media only screen and (min-width: 1000px) {
                    .all-rooms {
                  display: flex;    }
                  }
                  
                .accommodation h3{
                    font-weight: bold;
                    font-family: 'Rubik', sans-serif;
                  }
                  
                  .accommodation p{
                    font-family: 'Outfit', sans-serif;
                  }
                  
                  @media only screen and (min-width: 600px) {
                   .accommodation .div {display: flex;
                    justify-content: space-between;
                    }
                  }
                  
                  
                  .accommodation .carousel-indicators {
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    z-index: 2;
                    display: flex;
                    justify-content: center;
                    padding: 0;
                    margin-bottom: 1rem;
                    
                  
                  
                    [data-bs-target] {
                      box-sizing: content-box;
                      flex: 0 1 auto;
                      width: 5px;
                      height: 5px;
                  position: relative;
                      text-indent: -999px;
                      cursor: pointer;
                      box-shadow: 0 0 0 2px rgba(255,255,255,1);
                            border: none;
                            background: white;
                            border-radius: 50%;
                            border:1px solid rgb(0, 0, 0);
                  
                  
                    }
                  
                  }
                  
                  
                  
                    @media only screen and (max-width: 300px) {
                        #gallery-head .col-lg-12 h1 , #about-head .col-lg-12 h1, #rooms-head .col-lg-12 h1,#contact-head .col-lg-12 h1{
                    font-size: 30px;    }
                      }
                    
                    @media only screen and (min-width: 300px)and (max-width: 600px) {
                        #gallery-head .col-lg-12 h1, #about-head .col-lg-12 h1, #rooms-head .col-lg-12 h1, #contact-head .col-lg-12 h1{
                            font-size: 50px;
                        }
                      }
                    
                    
                    @media only screen and (min-width: 600px)  {
                        #gallery-head .col-lg-12 h1, #about-head .col-lg-12 h1, #rooms-head .col-lg-12 h1, #contact-head .col-lg-12 h1{
                            font-size: 80px;
                        }
                      }
                    
                  
                      .read-btn{
                        background: none;
                        border: 0;
                        font-family: 'Poppins', sans-serif;
                        color: white;
                    fill: white;
                    }

                    .restaurant{
                      background: url('imgmenu/img11.jpg')rgba(20, 19, 19, 0.514) ;
                      background-size: 100%;
                      background-position:center;
                      background-repeat: no-repeat;
                      background-blend-mode: multiply;
                      border-left: 1px solid #B78932; 
                      padding-top: 50px;
                      padding-bottom: 50px;
                    z-index: 100 !important;
                      
                    }
                    .restaurant-bg{
                      background: white;
                      position: relative;
                      margin-top: -150px;
                      padding-top: 100px;
                      padding-bottom: 100px;
                      z-index: 1;
                    }     


                    .moai-bg1{
                      background: url('imgmenu/WhatsApp Image 2024-03-20 at 10.43.48 (1).jpeg') rgba(54, 50, 50, 0.678);
                      background-attachment: fixed;
                      background-position: bottom;
                      background-repeat: no-repeat;
                      background-size: cover;
                      background-blend-mode: multiply;
                      height: 50vh;
                      position: relative;
                     
                      margin-top: 50px;
                    }
                    

                    
  .about-section{

    
    position: relative;
    overflow: hidden;
}

  .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    z-index: 1; /* Place it behind the content */
   
    background-size: cover;
    filter: blur(3px); /* Apply the filter effect you want */
  }
  .color-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Place it behind the content */
 
    opacity: 0.8; /* Adjust the opacity as needed (0.1 to 1) */
  }

  .about-content {
    position: relative;
    z-index: 10 !important; /* Place it above the pseudo-element */
    /* Other styles for your content */

  }
  .about-img{
    position: relative;
    margin-left: -250px;
    margin-top: 200px;
 
  }

  

/*GALLERY*/
img.zooms {
  width: 100%;
  height: 30vh;
  display: block;
  margin: 0 auto;
  object-fit: cover;
  transition: all .3s ease-in-out;
  border-radius: 10px;
}

img.zooms:hover{
 background-color: rgba(0, 0, 0, 0.1);
 transform: scale(1.1);
}
.thumb{
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}

@media screen and (min-width: 200px)and (max-width: 950px) {

  .banner_wrapper h1{
    
      font-size: 50px; 
     
  }
  .banner_wrapper .swiper .slide-caption p {
font-size: 20px !important;
    
  }
 .about01{
  font-size: 19px !important;
 }   
   .banner_wrapper .swiper {
 
  height: 80% !important;
}
}
@media screen and (max-width: 991px) {
  #about-home{
    margin-top: -130PX !important;
  }
  #about-home h2{
    font-size: 30px !important;
  }
  .rooms-section h1{
    font-size: 40px !important;
  }
  .accommodation{
    padding-top: 50px !important;
    padding-bottom: 0px !important;
  }
  .accommodation h2 {
    font-size: 30px !important;
  }
  .vt{
    font-size: 35px !important;
  }
  .room-content{
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

.drinking-bg1{
  background: url('image/468984592.jpg') rgba(54, 50, 50, 0.87);
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  height: 50vh;
  position: relative;
 
  margin-top: 50px;
}

.img {
  --s: 10px; /* control the size */
  padding: var(--s);
  border: calc(2*var(--s)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1*var(--s));
  background: conic-gradient(from 90deg at 1px 1px,#0000 25%,#000 0);
}
.img-hover {
  transition: .2s ease-in;
}
.img-hover:hover {
  transform: scale(.976666666666666);
 
}


/* --- */

  /*gallery drinking*/

  .img-hover {
    transition: .2s ease-in;
  }
  .imgg-fluid {
    box-shadow: 8px 8px 4px var(--gold);
  }
  .img-hover:hover {
    transform: scale(.8);
  }

  .coctails-bg1{
    background: url('image/468984592.jpg') rgba(0, 0, 0, 0.87);
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    height: 50vh;
    position: relative;
   
    margin-top: 50px;
  }
  
  @media(max-width:990px){

  .menu3{
    font-size:30px !important;
    }
    .ccc{
      padding-top: 50px !important;
    }
    .ll{
      padding-top: 0px !important;
    }
    .about-box{
margin-top: 50px;
    }
    .fac3{
      font-size: 40px !important;
      margin-top: 100px;
    }
    .il{
      margin-left: 30px;
    }
  
}
  
    
  /* footer */
  .contact section p {
    color: white;
    text-align: center;
  }
  
  .contact section a {
    text-decoration: none;
    color: inherit;
    transition: .1s;
    border-bottom: 1px solid transparent;
  }
  
  .contact section a:hover {
    border-color: var(--bs-secondary);
  }
  
  
  @media only screen and (min-width: 992px) {
  
    header .navbar .link-btn {
      margin: 0;
      margin-left: auto;
    }
  
    .im-img {
      width: 28%;
    }
.sub h6{
padding-top: 0px !important;
}

  }
  .footer_wrapper {
    background: linear-gradient(0deg, hsla(0, 0%, 0%, 0.822), #000000c4), url('image/591179272.jpg') center / cover no-repeat;
    padding: 5% 0 5% 0;
  }
  
  .footer_wrapper h5 {
    color: #ffffff;
    margin-bottom: 1.25rem;
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
  }
  
  .footer_wrapper ul li {
    margin-bottom: .5rem;
    list-style: none;
  }
  
  .footer_wrapper .contact-info li a {
    color: rgb(255, 255, 255);
  }
  
  .footer_wrapper .link-widget li a,
  .footer_wrapper p {
    color: rgb(255, 255, 255);
    font-size: 14px;
    padding-left: 1.5rem;
    position: relative;
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
  }
  
  .footer_wrapper .link-widget li a::before {
    content: '\f105';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0.3rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  
  }
  
  .footer_wrapper .link-widget li a:hover {
    margin-left: .625rem;
    color: hsl(0, 0%, 100%);
  }
  
  
  .footer_wrapper .form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--secondary-color);
  }
  
  .footer_wrapper .copyright-section {

    padding: 1.10rem 0 .3125rem;
    text-align: center;
  }
  
  .footer_wrapper .copyright-section a {
    color: white;
  }
  
  @media (max-width: 767px) {
    .footer_wrapper>div {
      padding: 0 1.875rem;
    }
  }

  .footer_wrapper .social-network a {
    width: 2.1875rem;
    height: 2.1875rem;
    margin: .5rem;
    line-height: 2rem;
    font-size: .975rem;
    display: inline-block;
    border: .125rem solid #ffffff;
    color: var(--text-gray);
    text-align: center;
    border-radius: 100%;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .footer_wrapper .social-network a:hover {
    background-color: rgba(0, 0, 0, 0.233);
    border-color: var(--secondary-color);
    color: var(--text-white);
    box-shadow: 0 .625rem .9375rem 0 rgb(0 0 0 / 10%);
    transform: translateY(-0.1875rem);
    border: .125rem solid #ffffff;
  }
  
/* ---------------------------------------------- */
hr {
    margin: 1rem 0;
    color: white;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: 0.25;
}

.t1{
    font-family: "Forum", serif;
    font-size: 18px ;
    letter-spacing: 0.2px;
}
/* ---------------------------- */


.accommodation h2{
  font-family: "Forum", serif;
  font-weight: 500;
  font-size: 40px;
} 
.marquee {
  position: relative;
  width: 100vw;
  max-width: 100%;
  height: 100px;
  overflow: hidden;
  font-size: 120px;
  font-weight: bold;
  margin-top: -60px;

}
.marquee .track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 140s linear infinite
}
.marquee .content {
  opacity: 0.05;
  line-height: 1.2
}
@keyframes marquee {
  from {
      transform: translateX(0)
  }
  to {
      transform: translateX(-30%)
  }
}

.Slogan .bg{
  background: url('imgmenu/WhatsApp Image 2024-03-20 at 10.44.32.jpeg')rgba(0, 0, 0, 0.541);
  background-attachment: fixed;
  background-position:center 70% ;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  height:400px;
}

.res-col{
  padding: 30px;
  margin-top: 100px;
  margin-bottom: 100px;
}

.img8{
  position: relative;
  margin-right: -180px;
  z-index: 2;
}

.img3{
  position: relative;
  margin-left: -180px;
  z-index: 2;

}

.text-coll{
padding-top: 100px;
padding-left: 100px;
padding-bottom: 0px;
padding-right: 100px;
  color: white;
  z-index: 1;
}

.menu-section{
  padding-top: 100px;
  padding-bottom: 100px;
  background: #ffffff;
  position: relative;
  margin-top: -150px;
}
.rrr{
  font-family: "forum",serif;
  font-size: 45px !important;
}
    
.loop-holder {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  font-family: "Forum", serif;
}

.loop-holder__text {
    animation: textLoop 40s linear infinite;
    font-size: 4vw;
    padding-right: .35em;
    color: #00000013;
}



/* apartment */

.apartment-bg1{
  background: url('apartment/ap4.jpg') rgb(73, 73, 73);
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  height: 60vh;
  position: relative;
 
  margin-top: 50px;
}


.text-box1{
  position: relative;
  background: #000000;
  padding: 60px;
  text-align: left;
margin-top: 40px;
  outline-offset: 5px;
  width: 80%;
  border-left: 10px solid #F1D2A9;
}







 
  /*---=================================
   <!-- Restu Fecilities Area Css -->
==================================---*/

.fecilities-area {
  background: url("../newimg/WhatsApp Image 2024-09-18 at 10.22.48.jpeg") #000000cb;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  background-blend-mode: multiply;
  padding:70px 0 100px;
}

.single-fecilities-box {
  border: 1px solid rgba(255,255,255,0.15);
  text-align: center;
  padding: 20px 0 32px;
  transition: 0.5s;
  position: relative;
  z-index: 1;
}

.single-fecilities-box:before{
  position: absolute;
  content: "";
  width:0;
  height: 100%;
  left: 50%;
  top: 0;
  background:var(--primary-color);
  transition: 0.5s;
}

.single-fecilities-box:hover:before{
  width: 100%;
  left: 0;
}

.fecilities-icon img{
  transition: 0.5s;
}

.single-fecilities-box:hover .fecilities-icon img{
  filter: brightness(0) invert(1);
}

.fecilities-content h4 {
  font-size: 20px;
  color: #ffff;
  margin: 65px 0 0;
  position: relative;
  font-weight: 400;
  font-family: "Cormorant Garamond", serif;
}

.fecilities-content h4:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 26px;
  left: 0;
  right: 0;
  top: -41px;
  margin: auto;
  background: rgba(255,255,255,0.5);
}


.hhh{
  font-family: "cinzel", serif;
  font-size: 40px;
  padding-bottom: 20px;
  text-align: center;
}
.tm{
  color: #ffffff;
   text-align: center; 
   letter-spacing: 2px;  
   font-family: "cinzel", serif;
   font-size:25px;
}


    /*** 

====================================================================
  feature-section
====================================================================

***/
.feature-section {
  position: relative;
 padding-top: 100px;
 padding-bottom: 30px;
}


.feature-row:nth-child(even) .image-column .inner-column {
  margin-right: 0;
  margin-left: -170px;
}
.feature-row:nth-child(even) .content-column .inner-column {
  padding: 23px 140px 40px 35px;
}
.feature-row:hover .image-column .inner-column .image-box .image img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.feature-row .image-column .inner-column {
  margin-right: -170px;
  position: relative;
  z-index: 9;
}
.feature-row .content-column {
  margin-bottom: 60px;
}
.feature-row .content-column .inner-column {
  position: relative;
  background-color: #DFF2FC;
  padding: 10px 0 65px 200px;

}
@media (max-width: 1199.98px) {
  .feature-row .content-column .inner-column {
      padding: 23px 0 40px 200px;
  }
}
@media (max-width: 991.98px) {
  .feature-row .content-column .inner-column {
    padding-left: 40px;
    padding-right: 0;
  }
}
@media (max-width: 575.98px) {
  .feature-row .content-column .inner-column {
    padding: 61px 40px 70px 40px;
    margin-top: 0;
  }
}
.feature-row .content-column .inner-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 232px;
  width: 95px;
  height: 11px;
  background-color:#000000;
}
.feature-row .content-column .inner-column .sec-title {
  margin-bottom: 34px;
}
.feature-row .content-column .inner-column .sec-title .text {
  margin-top: 31px;
}
.feature-row .content-column .inner-column .sec-title .sub-title {
  margin-bottom: 13px;
  font-family: "forum", serif;
  font-size: 20px;
}
.feature-row .content-column .inner-column .sec-title .sub-title::before {
  display: none;
}

@media only screen and (max-width: 991px) {
  .feature-row .content-column .inner-column {
    margin-top: 0;
  }
  .feature-row .content-column .inner-column::before {
    left: 40px;
  }
  .feature-row .image-column .inner-column {
    margin-right: 0;
  }
  .feature-row:nth-child(even) .image-column .inner-column {
    margin: 0;
  }
  .feature-row:nth-child(even) .content-column {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .feature-row:nth-child(2n) .content-column .inner-column .sec-title {
    max-width: 100%;
  }
  .feature-row:nth-child(2n) .content-column .inner-column {
    padding: 61px 40px 70px 40px;
  }
}
@media only screen and (max-width: 576px) {
  .feature-row .image-column .inner-column {
    margin-bottom: 20px;
  }
  .feature-row:nth-child(even) .content-column .inner-column .sec-title {
    max-width: 100%;
  }
}
@media only screen and (max-width: 480px) {
  .feature-row:nth-child(2n) .content-column .inner-column {
    padding: 61px 40px 70px 40px;
  }
}


.sec-title h2{
  font-family: "cinzel", serif;
  font-size: 25px;
}
.text58{
  font-family: "forum", serif;
  font-size: 18px;
  padding-right: 60px;
}
.pp{
  font-family: "forum", serif;
  font-size: 18px;
}

/* Për stilizimin e butonit të mëparshëm */
.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%; /* Vendos butonat në mes vertikalisht */
  transform: translateY(-50%); /* Qendron pozicionin e saktë */
  background-color: rgba(0, 0, 0, 0.5); /* Sfond gjysmë-transparent */
  border-radius: 50%; /* Formë rrethore */
  width: 50px; /* Gjerësia e butonit */
  height: 50px; /* Lartësia e butonit */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10; /* Siguron që butonat të jenë mbi përmbajtjen tjetër */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 20px;
  height: 20px;
}

/* Efekte hover për të dy butonat */
.carousel-control-prev:hover,
.carousel-control-next:hover {
  background-color: rgba(255, 255, 255, 0.8); /* Sfond i bardhë me transparencë */
  transform: translateY(-50%) scale(1.1); /* Rritje e lehtë kur lëviz miu mbi butonin */
}

.feature-row .content-column .inner-column{
  margin-top: 30px;
}



@media (max-width: 991px){
  .i{
    display: none;
  }
  .text-box1{
    width: 100%;
  }
  .hhh{
    font-size: 28px;
  }
  .inner-column{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .feature-row{
    margin-bottom: 0px !important;
    margin-top: 0PX !important;
  }
}