@import url(mainstyle.css);

*{
    scroll-behavior: smooth;
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;  
}
.btn-close {
    background-image: unset;
}
a{
    color: inherit;
    text-decoration: none;
} 
[data-Stayrova-theme="dark"] [data-logo="dark"],
[data-Stayrova-theme="light"] [data-logo="light"] {
    display: block;
}

[data-Stayrova-theme="dark"] [data-logo="light"],
[data-Stayrova-theme="light"] [data-logo="dark"] {
    display: none;
}
header{
    position: relative;
    z-index: 5;
} 
#head-menu.fixed{
    position: fixed !important;
    left: 0;
    top: 0 !important;
    width: 100%; 
}
.nav-link{
    color: var(--nav-text);
    font-weight: 500;
}
.nav-item.active .nav-link, .nav-item:hover .nav-link{
    color: var(--prime-text);
}
::placeholder{
    color: var(--input-text) !important;
    opacity: 0.5 !important;
}
.navbar-brand{ 
    background-color: var(--prime-bg);
    display: flex;
    align-items: center;
}
.head-content{
    width: 920px;
    margin: auto;
    max-width: 100%;
    text-align: center;
}

.icons-bg{
    min-width: 30px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--icon-text);
    background-color: var(--prime-bg);
}

.head-bottom{
    margin-bottom: -55px;
    position: relative;
    z-index: 1;
}
 .header-top select{
    color: white !important;
 }
  .header-top option{
    color: rgb(0, 0, 0) !important;
 }
/* banner css */
#banner-slider {
    min-height: 750px;
} 
/* Slide backgrounds */
.slide-1 {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url('../../assets/images/banner1.jpg') no-repeat; 
    background-size: cover;
    background-position: bottom center;
    min-height: 750px;
}
.slide-2 {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url('../../assets/images/banner2.jpg') no-repeat;
    background-size: cover;
    background-position: bottom center;
    min-height: 750px;
}
.slide-3 {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url('../../assets/images/banner3.jpg') no-repeat;
    background-size: cover;
    background-position: bottom center;
    min-height: 750px;
}
.slide-4 {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url('../../assets/images/banner4.jpg') no-repeat;
    background-size: cover;
    background-position: bottom center;
    min-height: 750px;
}
.slide-5 {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url('../../assets/images/banner5.jpg') no-repeat;
    background-size: cover;
    background-position: bottom center;
    min-height: 750px;
}
.slide-6 {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url('../../assets/images/banner6.jpg') no-repeat;
    background-size: cover;
    background-position: bottom center;
    min-height: 750px;
}

@media(max-width:991px){
    #banner-slider, .slide-1, .slide-2, .slide-3, .slide-4, .slide-5, .slide-6{
        min-height: 400px;
    }
}

@media(max-width: 575px){
#banner-slider {
    min-height: 500px;
}    
.slide-1, .slide-2, .slide-3, .slide-4, .slide-5, .slide-6{
    min-height: 500px;
}
}
/* Content container */
.splide-container { 
    max-width: 720px;
}
.splide__slide{
    z-index: 1000;
}
/* Navigation Arrows */
.splide__arrow {
    background: transparent;
    width: 60px;
    height: 60px;
    border: 2px solid #fff;
    border-radius: 10%;
    opacity: 0.95;
    transition: all 0.3s ease; 
} 
.splide__arrow svg {
    font-size: 28px;
    fill: #fff;
} 
.splide__arrow:hover{
    background-color: #005759;
    border: #005759;
}
  
@media(max-width:1480px){
.splide__arrow--prev {  
    top: unset;
    bottom: 0;
    left: calc(50% - 70px);
}
.splide__arrow--next { 
    top: unset;
    bottom: 0;
    right: calc(50% - 70px);
}
}


/* about section */
.about-img{
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url('../../assets/images/about1.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 650px;
    width: 100%;
    max-width: 400px;
    margin: auto    ;
}
.about-img2{
    width: 200px;
    height: 200px;
    border: 5px solid whitesmoke;
    position: absolute;
    left: 0;
    top: -3%;
}
.about-img3{
    width: 200px;
    height: 200px;
    border: 5px solid whitesmoke;
    position: absolute;
    bottom: 0;
    right: 0;
}
@media(max-width: 991px){
.about-img{ 
    min-height: 500px; 
}
}
/* properties section */
.property-content{
    width: 100%;
    max-height: 450px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.room-css img{  
     max-height: 500px !important;
} 
@media(max-width:575px){
.room-css img{  
     max-height: 300px !important;
} 
}

.custom-border{
    width: 60%;
    background: var(--light-border);
    color: var(--light-border);
    display: block;
    height: 3px;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
}
.footer-top{
    position: relative;
}
.footer-top::before{
    content: '';
    position: absolute;
    width: 70%; 
    left: 15%;
    bottom: -1.2px;
    border: 3px solid var(--light-border);
}
.footer-top::after{
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 1px;
    border: 1px solid var(--light-border);
} 


/* footer wave animation */
 .waves {
  position: relative;
  width: 100%;
  height: 90px;
  overflow: hidden !important;
}

.waves::after,
.waves::before {
  content: '';
  position: absolute;
  bottom: -38px;
  width: 200%; /* make it wider for smooth looping */
  height: 90px; /* adjust height to match image */
  background: url('../../assets/images/footer-wave.png') repeat;
  background-size: contain;
}

/* Colored / filtered wave */
.waves::before {
  left: 0;
  filter: brightness(0) saturate(100%) invert(25%) sepia(10%) saturate(6613%) hue-rotate(145deg) brightness(96%) contrast(102%);
  animation: waveLeft 10s linear infinite;
  opacity: 0.6;
}

/* Original wave */
.waves::after {
  left: 0;
  animation: waveRight 5s linear infinite;
  opacity: 0.4;
}

/* Keyframes for smooth infinite movement */
@keyframes waveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes waveLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(10%);
  }
}

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  color: #fff; /* Optional: make text white too */
  background-color: transparent; /* Optional if dark header */
  border-color: #fff; /* Optional white border */
}
.border, .border-top, .border-bottom, .border-start, .border-end{
    border-color: var(--light-border) !important;
}
#backtotop {
    position: fixed;
    bottom: 30px;
    right: 30px; 
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    width: 50px !important;
    min-width: unset;
    height: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center; 
}
#backtotop.show {
    opacity: 1;
    visibility: visible;
}
.error{
    color: red;
}