:root{
  --app-main:#59322E;
  --app-accent:#733636;
  --app-accent-light:#D9B8B8;
  --app-light:#D9B8B8;
--bg-dark-1-rgb: 89, 50, 46;
}




#back-to-top{
    background-color: var(--app-accent-light);
}
.app-footer{
    background-color: var(--app-main);
}

.bg-app{
    background-color: var(--app-accent);
}

.btn-main{
    background-color: var(--app-accent);
}

.btn-app-success{
    background-color: var(--app-accent-light);
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
}

.btn-book-now{
    background: var(--app-accent);
    color: #fff;
    border-radius: 8px;
    border: none;
    padding: 12px;
    transition: all 0.3s ease;
}

.app-text{
    color: var(--app-accent);
}

.subtitle{
    color: var(--app-accent-light);
}

.sw-overlay{
  background: -webkit-linear-gradient(0deg,rgba(var(--bg-dark-1-rgb), .8) 0%, rgba(var(--bg-dark-1-rgb), .8) 50%);
  background: -moz-linear-gradient(0deg,rgba(var(--bg-dark-1-rgb), .8) 0%, rgba(var(--bg-dark-1-rgb), .8) 50%);
  background: linear-gradient(0deg,rgba(var(--bg-dark-1-rgb), .8) 0%, rgba(var(--bg-dark-1-rgb), .8) 50%);
}

.btn-book-now:hover {
    background-color: var(--app-accent-light) !important;
    color: var(--app-accent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-weight: 600;
}

@media only screen and (max-width: 992px){
    .smm-hide{
        display: none;
    }
}

.btn-mainn{
    background: var(--app-accent);
    color: #fff;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

.btn-mainn:hover{
    background-color: var(--app-accent-light);
    color: #733636;
}

a.btn-mainn:focus{
color: #733636;
outline: none;
box-shadow: 0 0 0 3px rgba(var(--app-accent-rgb), 0.4);
}

/* Target mobile screens (standard Bootstrap breakpoint) */
@media (max-width: 767px) {
    .mobile-jarallax {
        height: 400px !important;
        min-height: 400px !important;
    }

    /* Optional: Ensures the parallax image fills the new height correctly */
    .mobile-jarallax .jarallax-img {
        height: 100% !important;
        object-fit: cover;
    }
    
    /* Center the content vertically within the 400px height */
    .mobile-jarallax .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.reserve-btn{
    padding: 10px 20px;
    border-radius: 10px;
    border: 2px solid var(--app-main);
    color: var(--app-main);
    background-color: transparent;
}

.social-icons i{
    color: #fff !important;
}

.social-icons i:hover{
    color: var(--app-main) !important;
}