@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');


.boxshadow{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

html{
	scroll-behavior: smooth;
}

body{
    font-family: "Cinzel", serif;
    /* Use a value from 400 to 900 */
}

.logo {
  display: flex;
  flex-direction: column;
}

.logo h1 {
  opacity: 0;
  animation: fadeSlideIn 0.8s ease forwards;
  animation-delay: 0.2s;
}

@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo {
  opacity: 0;
  animation: fadeSlideIn 0.8s ease forwards;
  animation-delay: 0.3s; /* Delay to appear after header begins */
}


@keyframes typing {
  0%   { width: 0 }
  80%  { width: 100% }
  100% { width: 0 } /* reset for loop */
}
.subtitle {
  font-family: "Satisfy", cursive;
  font-weight: 400;
  font-size: 20px;
  text-align: center;
  margin-top: -10px;

  width: fit-content;
  white-space: nowrap;
  overflow: hidden;

  animation: 
   slideInFromTop 0.5s ease forwards,
    typing 5s steps(30, end) infinite;
}

.menu {
 
  font-family: Montserrat;
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Menu items */
.menu > li {
  margin-left: 15px;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: slideInFromTop 0.5s ease forwards;
  position: relative;
}
.menu > li:nth-child(1) { animation-delay: 0.1s; }
.menu > li:nth-child(2) { animation-delay: 0.2s; }
.menu > li:nth-child(3) { animation-delay: 0.3s; }
.menu > li:nth-child(4) { animation-delay: 0.4s; }
.menu > li:nth-child(5) { animation-delay: 0.5s; }
.menu > li:nth-child(6) { animation-delay: 0.6s; }
/* Links */
.menu > li > a {
  font-size: 15px;
  
  color: #103741;
  font-weight: 500;
  display: inline-block;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
  border-radius: 6px;
}

/* Hover text */
.menu > li > a:hover {
  color: #FE5D37;
}

/* Active */
.menu > li > a.active {
  color: white;
}

.menu-mobile li a {
    display: inline-block;
    width: 100%;
    padding: 8px 0;
}

.menu-mobile li a:hover {
    color: #FE5D37;
}

.menu-mobile .slider {
    height: 3px;
    background-color: #FE5D37;
    transition: all 0.3s ease-in-out;
}

  /* Positioning */
  .menu-icon {
    position: relative;
  }

  .menu-icon .line1 {
    top: 10px;
  }

  .menu-icon .line2 {
    top: 50%;
    transform: translateY(-50%);
  }

  .menu-icon .line3 {
    bottom: 10px;
  }

  /* Transform into "X" */
  .menu-icon.open .line1 {
    transform: rotate(45deg);
    top: 50%;
  }

  .menu-icon.open .line2 {
    opacity: 0;
  }

  .menu-icon.open .line3 {
    transform: rotate(-45deg);
    bottom: auto;
    top: 50%;
  }

/* Slider background */
.slider {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #FE5D37;
  border-radius: 6px;
  transition: all 0.4s ease;
  z-index: 0;
}
@keyframes slideInFromTop {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Position nav at bottom-right */
.sliderCarousel .owl-nav {
  position: absolute;
  bottom: 40px;
  right: 100px;
  display: flex;
  gap: 5px;
  z-index: 10;
}

/* Style each arrow */
.sliderCarousel .owl-nav button.owl-prev,
.sliderCarousel .owl-nav button.owl-next {
  background-color: transparent; /* semi-transparent dark */
  color: white !important;                         /* white icon */
  border: 1px solid white !important;              /* white border */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px !important;
  line-height: 40px;
  text-align: center;
  transition: all 0.3s ease;
}

/* On hover: white background, white border, black icon */
.sliderCarousel .owl-nav button.owl-prev:hover,
.sliderCarousel .owl-nav button.owl-next:hover {
   width: 39px;
  height: 39px;
  background-color: white;
  color: black !important;
  border: 1px solid white;
}

/* Remove focus outline */
.sliderCarousel .owl-nav button:focus {
  outline: none;
  box-shadow: none;
}

.overlay{
  position: relative;
}
.overlay::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
}

.slide-up {
    opacity: 0;
    transform: translateY(40px);
    animation: slideUp 0.6s ease-out forwards;
  }

 @keyframes slideUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

.room-link{
    font-family: "Playfair Display", serif;
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.fade-loop {
  animation: fadeInOut 5s ease-in-out infinite;
}


.room-items{
		overflow: hidden;
}
.room-items img{
	  width: 100%;
		transition: 0.5s;
    object-fit: cover
}
.room-items:hover img{
		transform: scale(1.1,1.1);
}

.gallery {
  --g: 6px;
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  grid: auto-flow 1fr / repeat(3, 1fr);
  gap: var(--g);
}

.gallery a {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  transition: 0.5s;
  filter: grayscale();
  cursor: pointer;
}

.gallery a:hover {
  filter: grayscale(0);
}

.gallery a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}

/* Shape overrides using class names */
.gallery a.shape-two {
  grid-area: 1/2/span 2/span 2;
  clip-path: polygon(0 0,100% 0,100% 100%,calc(50% + var(--g)/4) 100%,0 calc(50% - var(--g)/4));
}

.gallery a.shape-three {
  grid-area: 2/1/span 2/span 2;
  clip-path: polygon(0 0,calc(50% - var(--g)/4) 0,100% calc(50% + var(--g)/4),100% 100%,0 100%);
}
.itemimg{
    height:140px;
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}



#itemImg .owl-nav.disabled {
    display: block !important;
}

#itemImg .owl-prev span
{
    border-radius: 50%;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    width:30px;
    font-size: 0;
    height:30px;
    background: url(../images/left-arrow.png) no-repeat center center;
    background-size:15px 15px;
    color: white;
    display: block;
    background-color: white;
            
}

#itemImg .owl-next span
{
    border-radius: 50%;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    width:30px;
    font-size: 0;
    height:30px;
    background: url(../images/right-arrow.png) no-repeat center center;
    background-size:15px 15px;
    color: white;
    display: block;
    background-color: white;
}
#itemImg .owl-prev:hover,#itemImg .owl-next:hover {
    background-color: #fff !important; /* Ensuring no change on hover */
    color: #000 !important;            /* Ensuring no change on hover */
    /* Other properties to reset */
    box-shadow: none !important;       /* Example of removing shadow */
    /* Add more properties if needed */
  }


  /* Define spinning animation */
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* Apply spin animation on hover */
.spin-on-hover:hover i {
  animation: spin 1s linear infinite;
}


.bookingform ::placeholder{
  font-size: 14px;
  color:#0F2454
}


@-moz-document url-prefix() {
  * {
    scrollbar-width: thin;
    scrollbar-color: #FE5D37 #f7f7f7;
   
  }
}

::-webkit-scrollbar{
   width:12px;
}
::-webkit-scrollbar-track{
    background-color:#f7f7f7;
}
::-webkit-scrollbar-thumb{
  background-color:#FE5D37;
  border-radius:10px
} 


#videoSection{
  position: relative;
}
#videoSection::after{
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left:0;
  background-color: rgba(0,0,0,0.4);
}

 

  @keyframes slowPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.slow-pulse {
  animation: slowPulse 2s ease-out infinite;
}

.service-heading{
   font-family: "Libre Franklin", sans-serif;
}


.bookfacility{
    font-family: "Playfair Display", serif;
    color:white;
    font-size: 20px;
    margin-bottom: 20px;
}

.roombookimg::after{
  content:'';
  width: 100%;
  height:100%;
  display: block;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  top:0;
  left:0
}

.bookingform{
   font-family: "Libre Franklin", sans-serif;
}
 .flatpickr-calendar {
    font-family: "Libre Franklin", sans-serif !important;
  }

  .flatpickr-months .flatpickr-month,
  .flatpickr-weekdays,
  .flatpickr-day {
    color: #2095AE !important;
  }

  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange {
    background: #2095AE !important;
    color: white !important;
  }

  .flatpickr-day:hover {
    background: #e0f4f9 !important;
  }

  /* ✅ Past / Disabled dates */
  .flatpickr-day.disabled {
    color: #A0AEC0 !important;         /* Inactive gray */
    background-color: #F9FAFB !important;
    cursor: not-allowed !important;
    opacity: 0.6;
  }

  .font-booking{
     font-family: Montserrat;
  }

  .BookingDetails{
    font-family: "Playfair Display", serif;
  }

 .small-swal-popup {
  font-size: 12px !important;
  padding: 0.5rem !important;
  font-family: Montserrat;
}

.small-swal-title {
  font-size: 14px !important;
}

.small-swal-text {
  font-size: 12px !important;
}

 @keyframes wave {
    0%, 100% { transform: rotate(-270deg) translateX(0); }
    50% { transform: rotate(-270deg) translateX(10px); }
  }

  .wave-animation {
    animation: wave 1.5s ease-in-out infinite;
  }


 .developer-animation-container {
    position: relative;
    width: 100%;
    height: 60px;
    overflow: hidden;
  }

  .developer-text,
  .developer-logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    animation-fill-mode: forwards;
  }

  .developer-text {
    left: -200px;
    font-size: 18px;
    
    color:lawngreen;
   font-family: "Playfair Display", serif;
    animation: slideInLeft 3s ease-in-out infinite;
  }

  .developer-logo {
    right: -200px;
    animation: slideInRight 3s ease-in-out infinite;
  }

  @keyframes slideInLeft {
    0% {
      left: -200px;
      opacity: 0;
    }
    40% {
      left: 30%;
      opacity: 1;
    }
    60% {
      left: 50%;
      opacity: 1;
      transform: translate(-50%, -50%);
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes slideInRight {
    0% {
      right: -200px;
      opacity: 0;
    }
    40% {
      right: 30%;
      opacity: 1;
    }
    60% {
      right: 50%;
      opacity: 1;
      transform: translate(50%, -50%);
    }
    100% {
      opacity: 0;
    }
  }