@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stalemate&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');


html,
body {

    margin: 0px;
    padding: 0px;
    overflow-x: hidden !important;
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    color: #2A5286;
    background-color: #EDF0F5;

}

.container1 {
    width: 86%;
}

h6 {
    font-family: "Jost", sans-serif !important;
    font-weight: 400;
    color: #555555;
    font-size: 16px;
    line-height: 27px;
}

a {
    text-decoration: none !important;
    color: #2A5286;
}

.top-bar {

    background-color: #ffffff00;
    color: white;
    z-index: 1000 !important;
    position: relative;
}

#navigation {
    z-index: 10;
    background: #1d373800;
    height: 95px !important;
    padding: 5px 0px !important;
}

#navbar {

    padding: 40px 0px !important;
    z-index: 1000 !important;
    background-color: #0E1317;


}

.navbar-toggler-icon {
    display: inline-block;
   
    vertical-align: middle;
    background-image: url('../assets/images/icons8-menu-30.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.navbar>.container,
.navbar>.container-fluid,
.navbar>.container-lg,
.navbar>.container-md,
.navbar>.container-sm,
.navbar>.container-xl,
.navbar>.container-xxl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    align-content: flex-start;


}

li.nav-item a.nav-link {
    color: rgb(255, 255, 255) !important;
    font-family: 'Jost', sans-serif;
    font-weight: 500 !important;
    transition: border-bottom 0.3s ease-in-out;

}
a.nav-link:hover {
    text-decoration: none;
    border-bottom: 1px solid white;
    transition: border-bottom 0.3s ease-in-out;
}
.navbar li a.active {
    color: #ffffff !important;
    transform: scale(1.05);
    background-color: transparent;
    border-bottom: 1px double white;


}
.button {
    cursor: pointer;
    padding: 18px 40px;
    font-size: 18px;
    color: black;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 0px;
    outline: none;
    box-shadow: 0 6px 7px rgba(0, 0, 0, 0.1),
        inset 0 2px 4px rgba(255, 255, 255, 0.5);
    /* Hinzufügen eines inneren Schattens für Tiefe */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.5);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
    background-image: linear-gradient(to top,
            rgba(206, 255, 255, 0.75),
            rgba(216, 255, 244, 0.65));
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 0%;
}

.button:hover {
    box-shadow: 0 7px 9px #0E1317,
        inset 0 3px 5px rgba(255, 255, 255, 0.6);
}

@keyframes fillButtonAndPress {
    0% {
        background-size: 100% 0%;
        transform: translateY(0);
        border: 2px solid rgba(255, 255, 255, 0.6);
    }

    100% {
        background-size: 100% 100%;
        transform: translateY(2px);
        border: 1px solid rgba(205, 235, 218, 0.6);
    }
}

.button:active {
    animation: fillButtonAndPress 0.4s ease forwards;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.7);
}

.font {
    font-family: sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.justify-content-end {
    justify-content: space-evenly !important;
}

.text-bg-dark {
    color: #fff !important;
    background-color: #1F242E !important;
}



.content {
    width: 77%;
    margin: 50px auto;
    font-family: 'Merriweather', serif;
    font-size: 17px;
    color: #6c767a;
    line-height: 1.9;
}

@media (min-width: 500px) {

    .content {
        width: 43%;
    }

    #button {
        margin: 30px;
    }
}

.content h1 {
    margin-bottom: -10px;
    color: #03a9f4;
    line-height: 1.5;
}

.content h3 {
    font-style: italic;
    color: #96a2a7;
}

a {
    text-decoration: none;
}

.navbar-brand img {
    width: 60px;
}

.navbar-nav {

    align-items: center;

    padding-top: 0px;
    padding-bottom: 0px;
}

.navbar .navbar-nav .nav-link {
    color: #5c1b1b;
    font-size: 12px;
    font-weight: 400;
    padding: 0.5em 0.5em !important;

}

a.nav-link.active {
    color: #C29F7B !important;
}

.navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: white;
    background-color: transparent;
    border: none;
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
}

.navbar-collapse {

    padding-left: 0px !important;
    margin-left: 0px !important;
}

.swiper {
    height: 95vh;
    position: relative;
    margin-top: -150px;
    z-index: 1 !important;

}

.slide-caption {
    padding-top: 18%;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
}



.banner_wrapper .swiper-pagination-bullets .swiper-pagination-bullet {

    background-color: #ffffff;

}

.sticky {
    position: fixed;
    top: 0;
    z-index: 10 !important;
    background: #224c65 !important;
    transition: 1s ease !important;
    box-shadow: none !important;
    width: 100%;
}

.slide-caption h1 {
    color: #ffffff;
    font-family:  "Marcellus", serif;
    text-transform: capitalize;
    font-size: 60px !important;
    font-weight: 400 !important;
    letter-spacing: 3px;
    text-align: center;
    transform: scale(0.94);
    animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}

@keyframes scale {
    100% {
        transform: scale(1);
    }
}

span {
    display: inline-block;
    opacity: 0;
    filter: blur(4px);
}

span:nth-child(1) {
    animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(2) {
    animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(3) {
    animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}



@keyframes fade-in {
    100% {
        opacity: 1;
        filter: blur(0);
    }
}




.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
  
  .swiper-slide {
    position: relative;
    overflow: hidden;
  }
  
  /* Overlay për të errësuar videon (opsionale) */
  .swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(22, 19, 58, 0.233) 0%, rgba(0, 0, 0, 0.199) 43%);
    z-index: 0;
  }



/* footer */

footer {
    background: #224c65 !important;
    padding-top: 60px;
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
}

a.footer-link {
    color: #D2DAE7;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 300;
}

.footer-title {
    font-family: "Marcellus", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 30px;

}

.footer-h4 {
    font-family: "Marcellus", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 30px;

}

.footer-link:hover {
    color: #A9D1DB;
}

.payment {
    display: flex;
}

.socials {
    display: flex;
    color: #D2DAE7;
    border-radius: 30px solid white;
}

.footer-links {
    display: flex;
    font-family: "Marcellus", serif;

    font-size: 18px;

}

.socials a {
    text-decoration: none !important;
    color: #D2DAE7;
}

.socials a:hover h4 {
    color: #A9D1DB;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.copyright {
    display: flex;
    justify-content: right;
    text-align: right;
    align-items: end;
}


/*home two Section-title*/
.home-two .section-title {
    margin-bottom: 35px;
}

.home-two .section-title h4 {
    font-size: 18px;
    line-height: 28px;
    text-transform: uppercase;
    color: #85714C;
    font-weight: 500;
    margin-top: 0;
    margin-left: 73px;
    position: relative;
}

.home-two .section-title h4:before {
    position: absolute;
    content: "";
    width: 56px;
    height: 1px;
    top: 14px;
    left: -67px;
    background: #1e1e1e;
}

.home-two .section-title h1 {
    font-size: 38px;
    line-height: 36px;
    color: #1e1e1e;
    font-weight: 700;
    text-transform: capitalize;
}

.home-two p.section-desc {
    width: 95%;
    margin: 18px 0 0;
}

.home-two .section-title.center:before {
    background: transparent;
}

.home-two .section-title.center h4 {
    margin-left: 0;
}

.home-two .section-title.center h4:before {
    background: transparent;
}

.home-two p.section-desc-2 {
    width: 60%;
    margin: auto;
    margin-top: 12px;
}

.home-two .luxury-button {
    margin-top: -19px;
    position: relative;
}

.home-two .luxury-button:before {
    position: absolute;
    content: "";
    width: 30px;
    height: 1px;
    left: 0;
    bottom: -11px;
    background: #c19d68;
    margin: 0;
}



#bottone5 {
    align-items: center;
    background-color: #0E1317;
    border: 1px solid #ffffff;


    margin-top: 10px;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-flex;
    font-family: "Forum", serif;
    font-size: 18px;
    font-weight: 500;
    justify-content: center;
    line-height: 1.25;
    min-height: 3rem;
    padding: calc(.875rem - 1px) calc(1.5rem - 1px);
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    width: auto;
}

#bottone5:hover,
#bottone5:focus {
    border-color: #000000;
    box-shadow: #ffffff 0 1px 2px;
    color: #000000;
    background-color: #ffffff;

}

#bottone5:hover {
    transform: translateY(-1px);
}

#bottone5:active {
    background-color: #F0F0F1;
    border-color: #ffffff;

    color: #ffffff;
    transform: translateY(0);
}


@media screen and (max-width: 991px) {


    .menu-content {
        padding: 0px !important;
    }


    .title {
        font-size: 40px !important;
    }





    .top-bar {
        display: none !important;
    }
}

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


.section-separator {
    position: relative;
    margin-top: 20px;
}

.section-separator:before,
.section-separator:after {
    content: '';
    position: absolute;
    top: 50%;
    width: 70px;
    height: 1px;
    background: #eee;
}

.section-separator:before {
    left: 50%;
    margin-left: 70px;
}

.section-separator:after {
    right: 50%;
    margin-right: 70px;
}

.parallax-section .section-separator:before,
.parallax-section .section-separator:after,
.fix-bar-init .section-separator:before,
.fix-bar-init .section-separator:after,
.sect_se_transparent:after,
.sect_se_transparent:before {
    background: rgb(255, 255, 255)
}

.section-separator i {
    font-size: 1.7em;
    color: var(--main-color);
}

/* about   section in home page */

#about{
    padding-top: 100px;
    padding-bottom: 100px;
   
 
}
/* fsc section */
  #facilities{
        background: url('../assets/images/228573861.jpg'),rgb(255,255,255) linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(32,32,32,1) 100%);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-blend-mode: multiply !important;
        height: 40vh;
        padding-bottom: 100PX;
      }

      .border-left{
        border-left-width: 1px;
        border-left-style: dashed;
        border-left-color: #302e2e38;
      }

      /* restaurant */

      .section-bg-rest{
        position: relative;
        background: url('../assets/images/diamond/Filemail.com files 28.03.2024 oltjvfwckgrubwa/OO1A6065.jpg') rgba(0, 0, 0, 0.633);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-blend-mode: multiply;
        margin-top: -230px;
      padding-top: 350px;
      padding-bottom: 150px;
      }
  #facilities1{
    background: url('../assets/images/319205326.jpg'),rgb(255,255,255) linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(32,32,32,1) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-blend-mode: multiply !important;
    height: 50vh;
   
   
  }
  .pre-box{
    position: relative;
    z-index: 2;
    margin-top: -20px;
    background: rgb(255, 255, 255);
    padding: 9em 2em; /* 8em top & bottom, 2em left & right */
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border: 1px solid #B8A99A;
    outline: 2px solid #B8A99A;
    outline-offset: -10px; /* pushes the outline outward from the element */
    box-shadow: rgba(89, 98, 105, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
 
   }
 
   .pre-box p{
    color: black;
   }
 .btn:hover{
    color: #00000038;
 }


  /* room */
  
  .fac-card{
    padding: 50px 30px 50px 30px;
    background: rgb(255, 255, 255);
    position: relative;
    margin-top: -100px;
    border: 2px solid #B8A99A; /* Adjust the border width and color as needed */
    border-radius: 5px; /* Optional: Add rounded corners */
    box-shadow: none; /* Optional: Remove any default shadow */
    outline: 2px solid #B8A99A;
    outline-offset: -10px; /* pushes the outline outward from the element */
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  }
  
   /* CONTENT SECTION */
   .content-section {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding-top: 160px;
    padding-bottom:100px ;
  }
  .content-section.bottom-spacing {
    margin-bottom: 100px !important;
  }
  .content-section.top-spacing {
    margin-top: 100px !important;
  }
  #main {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
  }
  /* CAROUSEL IMAGE BOX */
  .carousel-image-box {
    /* width: calc(50vw + 100% / 2); */
    width: auto;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    padding-bottom: 30px;
  }
  .carousel-image-box figure {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    position: relative;
    overflow: hidden;
  }
  .carousel-image-box figure img {
    width: 100%;
    float: left;
  }
  .carousel-image-box figure figcaption {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 40px;
    color: #fff;
    background-color: #00000042;
    text-shadow: 3px 3px 4px #2c6499;
    
  }
  .carousel-image-box figure figcaption h5 {
    width: 100%;
    display: block;
    font-size: 32px;
    font-weight: 500;
    font-family: "Forum", serif;
    color: #ffffff;
   
  }
  .carousel-image-box figure figcaption p {
    width: 100%;
    display: block;
    margin: 0;
  }
  .swiper-scrollbar {
    width: 100%;
    height: 2px;
    display: inline-block;
    opacity: 0.1 !important;
  }




/* pool  section */

.pool-section{
    padding-top: 100px;
    padding-bottom: 100px;
}
.f1 {
    writing-mode: vertical-rl;

    color: #dbd4cb;
    padding: 4px;
    font-size:70px;

}
.v1{
  
    color: #ff9b1917;
    padding: 4px;
    font-size:170px;
    position: relative !important;
    z-index:100 !important;
    margin-left: 110px;
}
.pool-section1{
    padding-top: 100px;
    padding-bottom: 100px;
}
.pool-section1 {
    position: relative; /* Required for pseudo-element positioning */
    background-color: #ffffff;
    padding-top: 100px;
    padding-bottom: 100px;
}

.pool-section1::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('../assets/images/image-03.png') no-repeat 100% 1%;
    background-size: 27%;
    opacity: 0.3; /* Adjust this value (0.3 = 30% opacity) */
    z-index: 0; /* Ensures it stays behind content */
    pointer-events: none; /* Allows clicks to pass through */
}

.icon-lg{
    font-size: 25px;
}

.section-bg{
    position: relative;
    background: url('../assets/images/diamond/OO1A2802_2.jpg') rgba(0, 0, 0, 0.633);
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    margin-top: -230px;
  padding-top: 350px;
  padding-bottom: 150px;
  }

  /* about us page */

  .section-bg-about{
    position: relative;
    background: url('../assets/images/diamond/vw0p0020.jpg') rgba(0, 0, 0, 0.633);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    margin-top: -230px;
  padding-top: 350px;
  padding-bottom: 150px;
  }
  .about-ab1{
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .buttond1 {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
   }
   
   .buttond1.learn-more {
    width: 11rem;
    height: auto;
    content: #224668;
   }
   
   .buttond1.learn-more .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 3rem;
    height: 3rem;
    background: #c1a18842;
    border-radius: 1.625rem;
    border: 2px solid #ffffff;
   }
   
   .buttond1.learn-more .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fdfdfd;
   }
   
   .buttond1.learn-more .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 0.625rem;
    width: 1.125rem;
    height: 0.125rem;
    background: none;
   }
   
   .buttond1.learn-more .circle .icon.arrow::before {
    position: absolute;
    content: "";
    top: -0.29rem;
    right: 0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 0.125rem solid #224668;
    border-right: 0.125rem solid #224668;
    transform: rotate(45deg);
   }
   
   .buttond1.learn-more .buttond1-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 0;
    margin: 0 0 0 1.85rem;
    color: #224668;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    
   }
   
   .buttond1:hover .circle {
    width: 100%;
   }
   
   .buttond1:hover .circle .icon.arrow {
    background: #000000c4;
    transform: translate(1rem, 0);
   }
   
   .buttond1:hover .buttond1-text {
    color: #242323;
   
   }

   /* restaurant page */
   .rest-ab1{
    padding-top: 100px;
    padding-bottom: 100px;
   }

   .rest-fac{
    background: url('../assets/images/res-3.jpg')#142b41e7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-blend-mode: multiply !important;
    padding: 50px 20px;

   
   }
   .checkin{
    padding-top: 100px;
    padding-bottom: 100px;
   }


   /* spa page */
   .section-bg-spa{
    position: relative;
    background: url('../assets/images/spa-4.jpg') rgba(0, 0, 0, 0.633);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    margin-top: -230px;
  padding-top: 350px;
  padding-bottom: 150px;
  }
  .about-spa-1{
    padding-top: 100px;
    padding-bottom: 100px;
  }

  /* rooftop page */
  .section-bg-rooftop{
    position: relative;
    background: url('../assets/images/diamond/Filemail.com files 20.11.2023 ctymazornfobfhf/D05A0240.JPG') rgba(0, 0, 0, 0.633);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    margin-top: -230px;
  padding-top: 350px;
  padding-bottom: 150px;
  }

  .roftop-ab1{
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .card23{
    position: relative;
    z-index: 2;
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    outline: 1px solid #b8a99a96;
    outline-offset: -10px; /* pushes the outline outward from the element */
    box-shadow: rgba(89, 98, 105, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  }
  .card23:hover {
    transform: translateY(-1px); /* Slight lift effect */
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    outline-color: #b8a99a; /* Darker outline on hover */
}
  .move-2{
    position: relative;
    z-index: 2;
    margin-right: -130px;
  }

  .cover-bg-rooftop{
    background: url('../assets/images/pexels-dennilson-navichoque-522596985-16407624.jpg'),rgb(255,255,255) linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(32,32,32,1) 100%);
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
      
        background-blend-mode: multiply ;
       
        padding: 100px 0px;
    
  }
  .pre-box-rooftop{
    position: relative;
    background: rgb(255, 255, 255);
    padding:2em ;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   vertical-align: auto !important;
    
   
 
   }
 
   .pre-box-rooftop p{
    color: black;
   }
 .btn:hover{
    color: #00000038;
 }
.other-page{
    padding-top: 100px;
    padding-bottom: 100px;
}
.other-page img{
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px; 
}
.meet-happy{
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #b8a99a88;
}
.layout-pt-lg{
    padding-top: 100px;
    padding-bottom: 100px;
}
/* playground page */


.section-bg-play{
    position: relative;
    background: url('../assets/images/221142540.jpg') rgba(0, 0, 0, 0.633);
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    margin-top: -230px;
  padding-top: 350px;
  padding-bottom: 150px;
  }
.play{
    padding-top: 100px;
    padding-bottom: 100px;
}

/*Our Servis*/
.single-services .services-img {
    position: relative;
}
.services-img > img {
  width: 100%;
}
.services-title {
  bottom: 13px;
  left: 13px;
  position: absolute;
  right: 13px;
  transition: all 0.5s ease 0s;
}
.services-hover-desc {
  bottom: 0;
  left: 0;
  padding: 13px;
  position: absolute;
  top: 0;
}
.services-title > h2 {
  background: rgba(255, 255, 255, 0.85) none repeat scroll 0 0;
  color: #353535;
  display: inline-block;
  font-size: 24px;
  line-height: 18px;
  margin-bottom: 0;
  padding: 25px 0;
  text-transform: capitalize;
  width: 100%;
}
.single-services {
    overflow: hidden;
}
.services-hover-inner {
  background: rgba(212, 228, 243, 0.87) none repeat scroll 0 0;
  display: inline-block;
  height: 100%;
  opacity: 0;
  padding: 10px;
  transform: scale(0.5);
  transition: all 0.5s ease 0s;
  width: 100%;
}
.services-hover-table-cell > h2 {
  color: #4a4a4a;
  font-size: 30px;
  text-transform: capitalize;
}
.services-hover-table {
    display: table;
    height: 100%;
    width: 100%;
}
.services-hover-table-cell {
    display: table-cell;
    vertical-align: middle;
}
.services-hover-table-cell > p {
    font-size: 17px;
    line-height: 22px;
    margin: 0 18px;
    margin-bottom: 0;
}
.single-services:hover .services-hover-inner,.single-services.active .services-hover-inner{
  opacity: 1;
  transform: scale(1)
}
.single-services:hover .services-title{
  opacity: 0;
  transform: scale(0)
}
.boxed-layout .services-hover-table-cell > p {
  font-size: 13px;
  line-height: 20px;
}

#hotel-testimonials {
    padding:5em 0em;
    background-color: #00000034 !important;
    background: url('../assets/images/228573861.jpg'),rgb(255,255,255) linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(32,32,32,1) 100%);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-blend-mode: multiply !important;
color: white !important;
    
}
.testimonials-box{
    padding: 50px;
    background-color: #000000;
}

.btn {
    color: #ffffff ;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #000000;
  background-color: #224C65;
    border-radius: 4px !important;
    padding: 10px 25px;
    font-size: 17px;
    cursor: pointer;
    position: relative;
    transition: all 1s;
    overflow: hidden;
  
  }
  .btn:hover {
    color: rgb(5, 5, 5);
  }
  .btn::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    top: 0;
    left: -40px;
    transform: skewX(45deg);
    background-color: #dbd4cb;
    z-index: -1;
    transition: all 1s;
  }
  .btn:hover::before {
    width: 160%;
  }

  /* contact-page */
  .section-bg-contact{
    position: relative;
    background: url('../assets/images/diamond/3.jpg') rgba(0, 0, 0, 0.633);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    margin-top: -230px;
  padding-top: 350px;
  padding-bottom: 150px;
  }
  .form-box {
    position: relative;
    margin-top: -30px;
    padding: 25px 25px 10px;
    margin-right: 40px;
background-color: white;
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
 }

 .contact-box{
    padding: 90px 40px;
    background-color: #ecdccc;

 }

 /* meet page */

 .section-bg-meet{
    position: relative;
    background: url('../assets/images/res-3.jpg') rgba(0, 0, 0, 0.633);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    margin-top: -230px;
  padding-top: 350px;
  padding-bottom: 150px;
  }
  .c23 {
    font-family: "Josefin Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-style: normal;
    text-shadow: 3px 3px 4px #bcc0c2;
    /* Fluid typography with clamp() */
    font-size: clamp(32px, 5vw, 60px);
    /* Fallback for older browsers */
    font-size: min(max(32px, 5vw), 60px);
  }


/* Adjust height for mobile devices */
@media (max-width: 768px) {
    .swiper {
        height:85vh;
        position: relative;
        margin-top: -150px;
        z-index: 1 !important;
    
    }
    
    .slide-caption {
        padding-top: 13%;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .slide-caption h1 {
        font-size: 30px !important;
    }
    .section-separator {
        position: relative;
        margin-top: 260px;
        font-size: 20px;
    }
    #about{
        padding-top: 70px;
        padding-bottom: 70px;
       
     
    }
    .f1 {
        writing-mode:horizontal-tb;
        color: #dbd4cb;
        padding: 21px;
        font-size: 53px;
    }
    .pool-section{
        padding-top: 71px;
        padding-bottom: 70px;
    }
    .pre-box{
        position: relative;
        z-index: 2;
        margin-top: 46px;
        background: rgb(255, 255, 255);
        padding: 1em 2em; /* 8em top & bottom, 2em left & right */
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        border: 1px solid #B8A99A;
        outline: 2px solid #B8A99A;
        outline-offset: -10px; /* pushes the outline outward from the element */
        box-shadow: rgba(89, 98, 105, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
       }
       .move-2{
        position: relative;
        z-index: 2;
        margin-right: 0px;
      }
      .logo1{
        display: none;
      }
    
    
}

@media (max-width: 480px) {
    .swiper {
        height: 85vh;
        position: relative;
        margin-top: -150px;
        z-index: 1 !important;
    
    }
    
    .slide-caption {
        padding-top: 4%;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
      
        padding: 10px;
    }
    .slide-caption h1 {
        font-size: 30px !important;
    }
    .section-separator {
        position: relative;
        margin-top: 265px;
        font-size: 20px;
    }
    #about{
        padding-top: 70px;
        padding-bottom: 70px;
       
     
    }
    .f1 {
        /* writing-mode: vertical-rl; */
        color: #dbd4cb;
        padding: 21px;
        font-size: 53px;
        writing-mode:horizontal-tb;
    }
    .pool-section{
        padding-top: 71px;
        padding-bottom: 70px;
    }
    .pre-box{
        position: relative;
        z-index: 2;
        margin-top: 46px;
        background: rgb(255, 255, 255);
        padding: 1em 2em; /* 8em top & bottom, 2em left & right */
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        border: 1px solid #B8A99A;
        outline: 2px solid #B8A99A;
        outline-offset: -10px; /* pushes the outline outward from the element */
        box-shadow: rgba(89, 98, 105, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
       }
       .move-2{
        position: relative;
        z-index: 2;
        margin-right: 0px;
      }
      .logo1{
        display: none;
      }
    
}