:root {
    --primary-color: {
        {
            $primary_color
        }
    };
}

html {
  font-family: 'Poppins', sans-serif;
}

.carousel-inner {
    border-radius: 12px !important;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    border-radius: 50%;
    border: 1px solid #554a4c;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-right: 16px !important; 
}

.sv_usermenu .vbg-default-hover.host-menu {
    background: #fff !important;
    color: #222325;
    border: 2px solid #222325 !important;
    border-radius: 12px;
}
}

/*.sv_usermenu {*/
/*    z-index: 999999999999999999 !important;*/
/*}*/

button.vbtn-success {
    background-color: #dc143c;
}

button.vbtn-success:hover {
    background-color: #FF385D !important;
}

.secondary-text-color {
    color: #dc143c !important;
}

.rooms-guests-counters .room-counter {
  position: absolute;
  bottom: 0px;
  /* background-color: #4F46E5; */
  /* background-color: #DCE4F2; */
  background-color: #F2F4F7;
  left: 5px;
  padding: 3px 2px 3px 10px;
  width: 140px;
  /* color: #fff; */
  color: #4c4c4c;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 10px;
}

.chatbot-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999999999999999999999999999;
  width: 0;
  border-radius: 12px;
  height: 0;
}

#chatbot {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 460px;
  height: 550px;
  border-radius: var(--border-radius);
  background-color: rgba(251, 253, 255, 0.3); /* semi-transparent */
  backdrop-filter: blur(50px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease;
}



#chatbot.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  border-radius: 12px;
}

.chat-header {
  background: #dc143c;
  color: white;
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header h2 {
  font-size: 1.6rem;
  font-weight: 500;
}

.status-indicator {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  opacity: 0.9;
}


.status-dot {
  width: 8px;
  height: 8px;
  background-color: #4ade80;
  border-radius: 50%;
  margin-right: 8px;
  animation: pulse 1.5s infinite;
}

.message span {
    display: inline-block;
}

/* Add cursor effect during typing */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #000; }
}




.typing span::after {
    content: "|";
    animation: blink-caret 0.75s step-end infinite;
}

.minimize-btn {
  background: transparent;
  border: 1px solid #fff;
  color: white;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  border-radius: 50px;
}

.minimize-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

#chatbox {
  padding: 15px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: rgba(251, 253, 255, 0.3);
  backdrop-filter: blur(20px); 
}

.message {
  max-width: 100% !important;
  padding: 5px 5px;
  border-radius: 20px;
  line-height: 1.9;
  font-size: 1.4rem;
  position: relative;
  animation: fadeIn 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.bot-message {
  background-color: #dce5ef;
  border-bottom-left-radius: 5px;
  align-self: flex-start;
  color: var(--dark-text);
  width: 100%;
}

.user-message {
  background-color: var(--primary);
  color: white;
  border-bottom-right-radius: 5px;
  align-self: flex-end;
}

.message-time {
  font-size: 1rem;
  color: var(--light-text);
  margin-top: 5px;
  text-align: right;
}

.user-message .message-time {
  color: rgba(255, 255, 255, 0.7);
}

#user-input {
  display: flex;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 10px;
  background-color: white;
}

#message {
  flex: 1;
  padding: 12px 15px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  background-color: #f8fafc;
  margin: 4px;
  font-size: 1.5rem;
  outline: none;
  transition: all 0.2s ease;
}

#message:focus {
  border-color: var(--primary);
  background-color: white;
  box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
}

#user-input button {
  width: 45px;
  height: 45px;
  border: none;
  background: #dc143c;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  margin: 4px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(74, 111, 165, 0.2);
}

#user-input button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(74, 111, 165, 0.3);
}

.typing-indicator {
    display: flex;
    padding: 10px 15px;
    margin: 5px 10px;
    border-radius: 18px;
    background-color: #f1f1f1;
    width: fit-content;
}

.typing-dot {
    width: 7px;
    height: 7px;
    margin: 0 2px;
    background-color: #666;
    border-radius: 50%;
    opacity: 0.4;
    animation: typing-dot 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
  animation-delay: 0s;
}
.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 1; }
}

@keyframes blink-caret {
    from, to { border-right-color: transparent }
    50% { border-right-color: #000; }
}

.typing-content {
    animation: blink-caret 0.75s step-end infinite;
    padding-right: 2px;
    margin: 8px;
}
.chatbot-toggler {
  position: fixed;
  bottom: 90px;
  right: 15px;
  width: 60px;
  height: 60px;
  border: none;
  background: #dc143c;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  z-index: 999;
}

.chatbot-toggler i {
  font-size: 1.5rem;
}

.chatbot-toggler:hover {
  transform: scale(1.1);
}

.chatbot-container.open .chatbot-toggler {
  display: none;
}

.suggestion-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px;
  margin-top: 10px;
  margin-bottom: 5px;
}


.suggestion-buttons > * {
    flex: 1 1 calc(50% - 10px);
}

.suggestion-btn {
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary);
  border: 1px solid rgba(74, 111, 165, 0.2);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.suggestion-btn:hover {
  background: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.08);
}

.hotel-result {
  background: white;
  border-radius: 12px;
  padding: 15px;
  /* margin: 12px 0; */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border-left: 4px solid var(--primary);
  transition: all 0.3s ease;
}

.hotel-result:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.hotel-result a {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
  font-size: 1.5rem;
}

.hotel-result a:hover {
  text-decoration: underline;
}

.hotel-meta {
  display: flex;
  gap: 15px;
  font-size: 1.5rem;
  color: var(--light-text);
  margin-bottom: 8px;
}

.rating {
  color: #f59e0b;
  font-weight: 600;
}

.amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.amenity {
  background: rgba(74, 111, 165, 0.1);
  color: var(--primary-dark);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 0.8rem;
}

@media (max-width: 480px) {
  .chatbot-container {
    bottom: 20px;
    right: 20px;
  }
  
  #chatbot {
    width: calc(100vw - 40px);
    height: 70vh;
    right: 20px;
    bottom: 80px;
  }
  
  .chatbot-toggler {
    width: 50px;
    height: 50px;
    bottom: 130px;
    right: 20px;
  }
}

.room-info h5 {
    font-size: 1.35rem !important;
}

.rooms-guests-counters .room-counter .quantity {
    gap: .5rem !important;
}

.rooms-guests-counters .room-counter .quantity__minus, 
.rooms-guests-counters .room-counter .quantity__plus,
.rooms-guests-counters .room-counter .quantity__input
{
    /* color: #fff !important; */
    color: #4c4c4c !important;
    background: transparent !important;
    /* border-color: #fff !important; */
    border-color: #4c4c4c !important;
}

.rooms-guests-counters .guest-counter {
    width: 190px;
}

.wishicon i {
    background-color: transparent !important;
}
.text-14 {
    font-size: 14px !important;
}

#registermodel .modal-body {
    max-height: 60rem !important;
    height: 60rem;
}

.text-italic {
    font-style: italic !important;
}

.convo-list {
    max-height: 70vh !important;
    overflow-y: scroll;
}

.convo-list .list {
    width: 100%;
    overflow: auto;
    border-bottom: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
}

.convo-list .list.active {
    background-color: #f4f7f9 !important;
}

.convo-list img {
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  margin-right: 1rem;
  border: 1px solid #dee2e6;
}

.content-inbox .city-carousel-item {
    flex: 0 0 auto;
    width: calc(100% / 6);
    margin-right: 10px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.content-inbox header {
    /* position: relative;
    overflow: hidden; 
    display: flex;
    align-items: center;
    flex-wrap: wrap; 
    gap: 1rem; */
}

.content-inbox .city-carousel-item.active {
    border: 1px solid #dc143c !important;
}

.message-wrap .message-list .msg {
    background-color: #fff !important;
    border: 2px solid #dc143c !important;
    border-radius: 20px !important;
    color: #dc143c !important;
    padding: 0 15px !important;
    /* background-color: #dc143c !important; */
}

/* .message-wrap .message-list .msg {
    background-color: #dc143c !important;
    color: #fff !important;
} */

.message-wrap .message-list.me .msg {
    /* background-color: #003893 !important;
    color: #fff !important; */
     background-color: #fff !important;
    border: 2px solid #003893 !important;
    border-radius: 20px !important;
    color: #003893 !important;
    padding: 0 15px !important;
}

.yarsa-chat-btn {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 999999999999999999;
    height: 5rem;
    width: 5rem;
    background-color: #FF385D;
    border-radius: 50%;
    padding: 1.6rem 1.3rem;
    color: #fff;
    display: none;
    cursor: pointer;
}

.yarsa-chat-container {
    display: none;
    height: 35rem;
    width: 25rem;
    background-color: #fff;
    color: #fff;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 99999;
}

.yarsa-chat-container-close {
    transform: rotatez(45deg);
    position: absolute;
    top: 0rem;
    right: 1rem; 
    font-size: 4rem;
    cursor: pointer;
    border-radius: 15px;
}

.yarsa-chatbox-header {
    min-height: 4rem;
    border-bottom: 1px solid #fff;
    background-color: #FF385D;
    padding: 1rem;
}

.yarsa-chatbox-body {
    height: 23rem;
    overflow-y: scroll;
}

.message-container {
    margin: 10px;
    max-width: 80%;
    border: 1px solid #ccc;
    padding: 10px 5px;
    border-radius: 10px;
    position: relative;
    color: #4c4c4c;
}

.yarsa-chat-with-name {
    position: absolute;
    top: 0px;
    left: 10px;   
}

.yarsa-message-input {
    max-width: 22rem;
    border-radius: 10px;
}

.message-container.sent {
    float: right;
}

.message-container.received {
    float: left;
}

.message-container::after {
    clear: both;
}

.yarsa-chat-footer {
    position: absolute;
    bottom: 0;
}

.w-80 {
    width: 80%;
}

.w-75 {
    width: 75%;
}

.w-85 {
    width: 85%;
}

.w-50 {
    width: 50%;
}

.max-w-100 {
    max-width: 100% !important;
}

.w-78 {
    width: 78%;
}

.yarsa-msg-send-btn {
    cursor: pointer;
}

.yarsa-chat-btn.active, .yarsa-chat-container.active {
    display: block;
}

.text-nowrap {
    text-wrap: nowrap;
}

.yarsa-shadowed-image {
    box-shadow: 0px 4px 4px rgb(220, 20, 60, 0.25);
}

.right-0 {
    right: 0;
}

.right-1 {
    right: 1rem;
}

.min-w-225 {
    min-width: 225px !important;
}

.min-w-200 {
    min-width: 200px !important;
}

.msg-indicator {
    color: #088324 !important;
}

.mcount {
    color: #fff;
    position: absolute;
    right: 0rem;
    top: 2rem;
    height: 2rem !important;
    width: fit-content !important;
    min-width: 2rem;
    border: 1px solid #fff;
    padding: 0px;
    border-radius: 50%;
    background: #FF385D;
    font-weight: 600 !important;
  }

  .mcount-container, .bcount {
    color: #fff;
  }

.mt-12 {
    margin-top: 12rem !important;
}

.vbtn-outline-success:hover {
    color: #fff !important;
    background-color: #4c4c4c !important;
}

#front-search-field-mapboxautocomplete-list>div {
    cursor: pointer;
    border-radius: 10px;
    padding: 10px;
}

#front-search-field-mapboxautocomplete-list>div:hover {
    background: #f4f4f4;
}

#front-search-field-mapboxautocomplete-list {
    margin-top: 2rem;
    margin-left: -2rem;
    width: 400px;
    padding: 10px;
    border-radius: 3rem;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 12px 0px;
}

.hoverable {
    transition: all 0.2s ease-in-out;
}

.hoverable:hover {
    cursor: pointer;
    transform: scale(1.02);
}

.yarsa-social-login-text {
    letter-spacing: .5px;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
}

.hoverable-btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hoverable-btn:hover {
    transform: scale(1.001);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
}

.yarsa-social-login-btn {
    background: transparent !important;
    border: 1px solid #FF385D4D !important;
    color: #FF385D !important;
    width: 8rem !important;
    height: 8rem !important;
    text-align: center !important;
    border-radius: 50%;
}

.yarsa-social-login-btn:hover {
    color: #FF385D !important;
}

.yarsa-social-login-btn:hover {
    color: #FF385D !important;
}

.icon-heart-alt {
    font-weight: 600;
    background: transparent !important;
    color: #949191 !important;
}

.toast-message {
    font-size: 14px;
}

.toast.toast-success,
.toast.toast-info,
.toast.toast-warning,
.toast.toast-error {
    opacity: 1 !important;
}

.border-left-chk {
    border-left: 1px solid #ddd !important;
}

.border-bottom-chk {
    border-bottom: 1px solid #ddd !important;
}

.border-r-5 {
    border-radius: 5px !important;
}

.yarsa-border-muted {
    border-width: 1px;
    border-style: solid;
    border-color: #ddd !important;
}

/* 
login and otp verification modal
*/
.yarsa-modal-title {
    color: #1C2E7F !important;
    margin-top: -1rem !important;
    font-size: 26px !important;
}

.yarsa-highlighted-text {
    color: #1C2E7F !important;
}

.yarsa-primary-description {
    color: #455873 !important;
    font-size: 16px !important;
}

.yarsa-secondary-description {
    color: #8592a6 !important;
    font-size: 16px !important;
}

.yarsa-auth-link {
    color: #0443ffcc !important;
}

.yarsa-auth-link:hover {
    cursor: pointer !important;
    text-decoration: underline !important;
}

.yarsa-text-muted {
    color: #4c4c4c !important;
}

.yarsa-text-dark {
    color: #222 !important;
}

#front-search-form1 .form-control {
    width: 130px !important;
    font-size: 16px !important;
}

.yarsa-auth-btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
}

.yarsa-auth-btn:hover {
    color: #fff !important;
}

.yarsa-primary-btn {
    background: #FF385D !important;
    border-radius: 1rem !important;
    color: #fff !important;
    font-size: 18px;
    font-weight: 700 !important;
    height: 56px !important;
    line-height: 24px !important;
    padding: 16px;
}

.yarsa-secondary-btn {
        background: #0C356A !important;
        border-radius: 1rem !important;
        color: #fff !important;
        font-size: 18px;
        font-weight: 700 !important;
        padding: 16px;
    }

    .yarsa-secondary-btn:hover {
        color: #ccc !important;
    }


.yarsa-primary-btn:hover {
    color: #fff !important;
}

.yarsa-facebook-font-circular {
    font-size: 20px !important;
    color: white !important;
    background: #1877f2 !important;
    border-radius: 50% !important;
    width: 3.5rem !important;
    height: 3.5rem !important;
    margin-left: 1rem;
}

.yarsa-social-login-button-grp {
    margin-top: 2rem !important;
    padding: 0 5rem;
}

.code-input {
    width: 6rem !important;
    height: 6rem !important;
    margin-right: 2rem !important;
    font-size: 27px;
    font-weight: 600;
    text-align: center;
    border-radius: 10px !important;
}

.otp-input input {
    font-weight: 600 !important;
    font-size: 22px !important;
    letter-spacing: 20px !important;
    border-radius: 10px !important;
}

.code-input:focus {
    border-color: #088324 !important;
}


.yarsa-input {
    border: 1px solid #dadfe6 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    padding: 16px 12px 16px 23px !important;
    position: relative !important;
    width: 100%;
    height: 55px;
    font-size: 16px !important;
    color: #0f294d;
}

.yarsa-input:focus {
    border: 1px solid #0f294d !important;
}

.yarsa-label {
    font-weight: 600 !important;
    color: #0f294d !important;
    background: #fff;
    position: absolute;
    top: -1rem;
    left: 2rem;
    z-index: 999;
    font-size: 14px;
    padding-left: 6px;
    padding-right: 6px;
    width: fit-content;
}

.card-body{
    padding-top:0.5rem !important;
    padding:8px !important;
}


.yarsa-input-clear {
    position: absolute;
    top: 2rem;
    right: 1rem;
    font-size: 22px;
    opacity: 0.6;
}

.yarsa-input-clear:hover {
    opacity: 1;
    cursor: pointer;
}

.slider-price-container {
    left: calc(14.8%) !important;
    background: #FF385D;
    height: 2.5rem;
    width: 4.5rem;
    border-radius: 20px;
    padding: 2px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    transition: left 0.2s ease-out;
    box-shadow: 0px 4px 15px rgb(106 106 106 / 30%);
    font-size: 1.5rem;
}

.slider-selection {
    background: #FF385D !important;
}

.slider-track-low {
    background-color: #70707030 !important;
}

.slider .tooltip:first-child {
    opacity: 0 !important;
    display: none;
}

.slider .tooltip:not(:first-child) {
    opacity: 1 !important;
}

.slider .tooltip .tooltip-inner {
    background: #FF385D !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #fff !important;
    transition: left 0.2s ease-out !important;
    font-size: 1.5rem !important;
}

.slider .tooltip .arrow::before {
    top: 0;
    border-width: 0.4rem 0.4rem 0;
    border-top-color: #FF385D !important;
}

.slider .tooltip.tooltip-main {
    display: none !important;
}

.city-carousel-item {
    height: fit-content !important;
}

.category-tabs {
    border: none;
}

.category-tabs:hover {
    border: none;
}

.sectioned-bg {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADABAMAAACg8nE0AAAAG1BMVEUAAACV5duF8OCg7+O86d638euV8eGi8uic6eO8jGMcAAAACXRSTlMACRYTCBAOCwRjCXXNAAAFw0lEQVR42uzWMW/TUBAH8IsKiceIDMy8FyUZU59wO1YIiRUpS0erlspaWoQ6WliFr01rLB1+L3nP53vXyT8JMbw6F9//zg5MJpPJ5JVlXyrzzN7+qEFB9tOQb+lL/DZ9j5DWyrjOk7bn3vi2tcLnK1V4Z477AGk05pRLSGFmTlumCOAmUGCTIIZPJmSdpkGaTboxYRuQmZuYEkRyE2OVboCUOgmQjdINkDLZQyj5Iykzw4xe5zMzzF4UsWLMb8xQV4IOafbo3gy1VZohUgu2TG/XfjEK7AQR6IVgOITvyrhlqi3AWwxsgjjj4uplwatAypKM6Qf1KknKuf/cD7wnbII9tjUd5vJdngV/6TbyMZoHboBugZTiKd2FZ2wvntJluIM76Y9qGxmytXQN1pEvsJW+8PeRjDbSAnfO+UJWwO9xHVlEKyxg43/A5HYg2sMRBXK0xnT/HynQO+cXaC97/mdt+xFbf45755ZdALG7tGUvwPXQO0dkh9xdmv9TgKui8xb7Duz/8EgB24P8FuWt7mv619P5i5xd4IB93qI55wUwUIvJ0n3jSQs8YF/pvvGc8wtgWmHfpXPeOOfnwNREWlB5X4DpDIMpZ+jgvZOpx+S6d/yEXkZMMwz2qEJvypgydN0BWaDfQS4M3UKFLgDBIlAKlIBgDWhOXY/d0R8kNKVcb/FUBfp88hUYKEdP8f3ze+q/MwHsMeKoQZByCGUsT5mIMiZzRoESRsi0IqAQdCIgjV4E9ED1ybeAHHCYjzBSo9MhslDqEDnodIg0jA4pztESxqswrgCBJ4y7BoFM6TlE/rZXBr1tg1Acj6Vo3TFPsiDfo8vd0TJp99TrtdZUacdxmLojk3bYxx48XP52TAEvcFp+CQ5VIe89fkA+3qf4sLmKu0qHAJwrHQJorqQYmmsphuZKiqG5kmLwNXWKC2g+931/uLefB273rg/F12nuDQcOgp4L1OtNCT6Z7+KvPpy5Bx42Rbhzmc+++ny2dbDiAvzowzxuCvGuDwPFJTQvgeLrd2qdAsC2D9FhQGnNUFxT81PJAO9rKYbmoop/0Sv7t0voIqNTEND+QurnPPjQBHIXnF48e1xIc777AqQfrDK1NKRoRKCE537KFz8ag2nYZQZQg0ftoDmouJHCQ4kAKJrE+KJBhTVrFDCQf33LdGwqEPTaoDmseBDCN8pzLG3uw9iE19wE96i0mQtybdBZCgQhJ2NBLy+kRxSgZhXsshS41XE5mfd+eSE9TRTPKviZpcANdwqEkATNC8VSzBzIqARULcQYwSJkh516uUdtKmiCciQ0JnEycO0WXDHbhWK77q5WnpF1EppxCrEBfmKnLq8hN5J4heKWkRX5CoSrHhfSxTVkRyEfQdjUEXjGwALGQAR1z/NryGZtmsXOsN0Mx7yggj+EwfZxIV0odrApBpZjjrlmVGB67XSnaqyQ256jA9uPScC6zh1wF5qnii04NcTbLimBMx4MLoILRNA82aOsyt25LiH+TCpABdw4M4UL6QUjlXdA/lSSSkjYSgMpA9mOFGSepPC7o3ENOQSPJ5IW8+xSCpTHzWAClR+lg4gH+lkJCUeyCUkHIRZ1gbVUE+QItclj5mcgDEEzSjVMxziilrH1lGty7DB6ORCDJYGo5cZN4RmcOtgvCwizizt+k/bC1ZtELWOeklw3mGneUiSTuAIl+Z3IbFlpWgISgwYlJ29MhOIgXUSBHHFL9Lqd3FPuEwWkJUCBUiYCP00jfk5PM4F1EgioSO1bihNznE4Nha633FACjTxi7NYeM+jLHBZxnECjgAjtWgWgg+K1EvJmtqgzRrdWAdBIY72EY87UrDTa1QrAH8qg1f8eAGVmW4bjcnQRx0XYRxwXoQ0paNvj0bXTyfXwFxlW/V8HFJxKEpDwu2iAz8sAp7IsFRQOoKsHqOMYdHUdwzIcl6aSAqDrKABdXQULCafybG7cuHHj/+Evxb0QeXYo6cgAAAAASUVORK5CYII=) no-repeat right 24px top 4px, radial-gradient(ellipse 30% 26% at 80% 0, rgba(122, 226, 211, .28), transparent), radial-gradient(ellipse 30% 26% at bottom left, rgba(122, 226, 211, .28), transparent), #f7fafc !important;
}

/*button.nav-link:hover {*/
/*    border: 0 !important;*/
/*}*/

/*.category-tabs .nav-link.active {*/
/*    font-weight: initial !important;*/
/*    font-size: 14px !important;*/
/*    border: none;*/
/*    background-color: transparent !important;*/
/*    color: #dc143c !important;*/
/*}*/

/*.category-tabs .nav-link:hover {*/
/*    color: #dc143c !important;*/
/*    border: none;*/
/*}*/

button.nav-link {
    filter: 
    grayscale(100%)
    contrast(100%)
    brightness(105%)
    hue-rotate(-15deg)    /* Blue tint */
    saturate(110%)
    blur(0.2px); 
}


button.nav-link:hover {
    border: 0 !important;
        filter: 
    grayscale(0%)
    contrast(100%)
    brightness(105%)
    hue-rotate(-15deg)    /* Blue tint */
    saturate(110%)
    blur(0.2px); 
}
.category-tabs .nav-link {
    font-size: 14px !important;
    border-radius:14px !important;
    color: #4c4c4c !important; 
}
.category-tabs .nav-link.active {
    font-weight: initial !important;
    font-size: 14px !important;
    border: none;
    background-color: #dc143c0A !important;
    color: #dc143c !important;
           filter: 
    grayscale(0%)
    contrast(135%)
    brightness(105%)
    hue-rotate(-15deg)    /* Blue tint */
    saturate(110%)
    blur(0.2px); 
}

/* .category-tabs .nav-link img {
    filter: grayscale(100%) !important;
}

.category-tabs .nav-link.active img {
    filter: grayscale(0%) !important;
}

.category-tabs .nav-link:hover img {
    filter: grayscale(0%) !important;
} */

.text-color {
    color: #222325 !important;
}

#messages {
    height: 70vh !important;
}

.yarsa-carausel-item-home {
    width: 24rem !important;
    border: none !important;
}

.yarsa-carausel-item-imgcon {
    height: 15rem !important;
}

.yara-carausel-item-img {
    height: 15rem !important; 
    border-radius:12px;
    /*border-top-right-radius: 10px !important; */
    /*border-top-left-radius: 10px !important;*/
}

.yarsa-text-blue {
    color: #0C356A !important;
}

.yarsa-text-pending {
    color: #ff7b00 !important;
}

.yarsa-text-completed {
    color: #004418 !important;
}

.yarsa-text-processing {
    color: #0C356A !important;
}

.yarsa-text-accepted {
    color: #004418 !important;
}

.yarsa-text-rejected {
    color: #0C356A !important;
}

.yarsa-text-expired {
    color: #dc143c !important;
}

.yarsa-text-declined {
    color: #FF385D !important;
}

.yarsa-bg-pending {
    background-color: #ff7b00 !important;
}

.yarsa-bg-completed {
    background-color: #004418 !important;
}

.yarsa-bg-processing {
    background-color: #0C356A !important;
}

.yarsa-bg-accepted {
    background-color: #004418 !important;
}

.yarsa-bg-rejected {
    background-color: #0C356A !important;
}

.yarsa-bg-expired {
    background-color: #dc143c !important;
}

.yarsa-bg-declined {
    background-color: #FF385D !important;
}

.status-container {
    border: 1px solid #FF385D;
    border-radius: 14px;
    padding: 2px 10px;
}

.payment-options-radio > * {
    cursor: pointer !important;
}

.payment-options-radio {
    border-radius: .31rem !important;
}

.yarsa-types {
    color: #4c4c4c !important;
}

.yarsa-types.active123 {
    color: #dc143c !important;
}

.main-banner .yarsa-types {
    font-size: 14px !important;
    /* color: #4c4c4c !important; */
    color: #fff !important;
    padding: 7px 9px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 20px !important;
}

.main-banner .yarsa-types:hover {
    color: #ccc !important;
}

.main-banner .yarsa-types.active {
    /* color: #dc143c !important; */
    color: #fff !important;
    border: 1px solid #ccc !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.sv_guest_dropdown {
    color: #4c4c4c !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #dc143c !important;
    color: #fff !important;
    border-radius: 50% !important;
}

.daterangepicker td.in-range {
    background-color: #dc143c !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: 50% !important;
}

.yarsa-slim-primary-btn {
    width:fit-content !important; 
    border: 0px solid ! important;
    height:fit-content !important;
    white-space: nowrap !important;
    border-radius:12px !important; 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important;
    /* background-color:#FF385D !important; */
    background-color:#ff385d !important;
    padding:10px !important;
    gap: 4px !important;
    color: #fff !important;
    font-size:14px;
}

.rounded-4p {
    border-radius:4px !important; 
}

.rounded-8p {
    border-radius:8px !important; 
}

.rounded-24p {
    border-radius:24px !important; 
}

.yarsa-slim-ternary-btn {
    width:fit-content !important; 
    border: 0px solid ! important;
    height:fit-content !important;
    white-space: nowrap !important;
    border-radius:4px !important; 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important;
    background-color:#0C356A !important;
    gap: 10px !important;
    color: #fff !important;
}

.yarsa-slim-secondary-btn {
    border: 0px solid ! important;
    border-radius:4px !important; 
    background-color:#0C356A !important;
    color: #fff !important;
    font-family: 'Poppins', sans-serif;
    width: fit-content;

}



.yarsa-slim-primary-btn:hover, .yarsa-slim-secondary-btn:hover, .yarsa-slim-ternary-btn:hover {
    color: #fff !important;
    cursor: pointer;
}

.book-for-active:hover {
    color: #fff !important;
}

.border-top {
    border-top: 1px solid #dee2e6 !important;
}

.booking-table {
    border: none !important;
}

.card-checkin-checkout {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: rgb(252 73 73 / 39%) 0px 8px 20px;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.svwishlist:hover {
    background-color: rgb(247, 247, 247) !important;
}

.svwishlist {
    padding: 5px 10px !important;
    border-radius: 50% !important;
}

.card-checkin-checkout:hover {
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.yarsa-badge-primary {
    background-color: #FF385D !important;
}

.yarsa-badge-secondary {
    background-color: #0f294d !important;
}

.checkin-checkout-title {
    color: #0C356A !important;
    background: #fff;
    width: fit-content;
    display: block;
    position: absolute;
    top: -3.3rem;
    left: 0rem;
}

.checkin-checkout-hide-dtl {
    height: 3rem;
    overflow: hidden;
}

.checkin-checkout-show-dtl {
    height: fit-content;
    overflow: hidden;
}

.curtain-open {
    animation: curtainDrop 0.2s ease-out forwards;
}

.min-height-60 {
    min-height: 60rem !important;
}

#bottom-menu {
    transition: bottom 0.1s ease-in-out;
}

.room-images-modal .modal-body {
    overflow: hidden;
    height: 100%;
}

.room-images-modal .modal-dailog {
    max-width: 100% !important;
}

.custom-carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  text-decoration: none;
  outline: none;
}

.custom-carousel-left {
  left: 15px;
}

.custom-carousel-right {
  right: 15px;
}

.custom-blur-bg {
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.custom-blur-bg:hover {
  background: rgba(255, 255, 255, 0.8);
}


/* responsive */
@media (max-width: 991px) {
    .navbar-toggler span {
        display: block !important;
        width: 2rem !important;
        height: .2rem !important;
        background: #fff !important;
        margin: auto !important;
        margin-bottom: auto !important;
        margin-bottom: .4rem !important;
        transition: all 400ms linear !important;
        cursor: pointer !important;
    }

    .yarsa-social-login-button-grp {
        padding: 0 !important;
    }

    .rooms-guests-counters .room-counter {
        flex-direction: column;
        gap: 4px;
        width: 11.5rem !important;
    }
}

@media (max-width: 767px) {

    #message {
        width: 100%;
    }

    .rooms-guests-counters .room-counter {
        flex-direction: column;
        gap: 4px;
        width: 114px !important;
    }
    .become-host-container {
        height: 35px;
        width: 35px;
        background-color: #fff !important;
        border-radius: 50%;
        padding: 5px;
        cursor: pointer;
        position: absolute;
        top: 35px;
        right: 18px;
    }

    .payment-checkbox-container {
        height: 8rem !important;
    }

    .yarsa-chat-title {
        font-size: 1.3rem;
        text-wrap: nowrap;
        overflow-x: hidden;
        max-width: 6rem;

    }
    .yarsa-chat-entity {
        cursor: pointer;
        background-color: #fff;
        border-radius: 50%;
        width: 4rem;
        height: 4rem;
    }
    .yarsa-chat-entity.active {
        border: 2px solid #1877f2;
    }
    .yarsa-chat-container {
        height: 35rem;
        width: 25rem;
        background-color: #fff !important;
    }
    .yarsa-chat-btn {
        position: fixed;
        bottom: 8rem;
        right: 1rem;
        z-index: 999999999999999999;
        height: 5rem;
        width: 5rem;
        background-color: #FF385D;
        border-radius: 50%;
        display: none;
    }

    .sv_all_photos_mobile {
        position: absolute;
        background: #fff;
        right: 20px;
        border-radius: 10px;
        border: 1px solid #000;
        cursor: pointer;
        top: 365px;
    }

    .wishicon i {
        font-size: 20px;
        font-weight: 600;
        position: absolute;
        top: -10px;
        right: -5px;
        color: var(--primary-color);
        cursor: pointer;
        background-color: transparent !important;
    }

    .yarsa-share-save {
        position: absolute;
        top: 410px;
        right: 0rem;
        z-index: 999;
    } 
    .home.hero-banner {
        padding: 80px 0px 0 0px !important;
    }

    .code-input {
        width: 5rem !important;
        height: 5rem !important;
    }

    .yarsa-modal-title {
        font-size: 20px !important;
    }

    .yarsa-primary-description , .yarsa-secondary-description {
        font-size: 14px !important;
    }

    .checkin-checkout-title {
        top: -2rem;
    }

    .booking-success-card {
        width: 36rem !important;
    }

    #myself {
        width: 65px !important;
        height: 35px !important;
        font-size: 1.4rem !important;
    }

    #someone-else {
        width: 110px !important;
        height: 35px !important;
        font-size: 1.4rem !important;
    }

    .yarsa-input {
        border: 1px solid #dadfe6 !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        padding: 16px 12px 16px 23px !important;
        position: relative !important;
        width: 100%;
        height: 55px;
        font-size: 16px !important;
        color: #0f294d;
      }

    .checkout-img-mob {
        width: 120px !important;
        height: 89px !important;
    }

    .dropdown .sv_guest_dropdown {
        font-weight: 500 !important;
    }

    .home-red-bg {
        background: #ff385d !important;
        border-radius: 0px 0px 22px 22px;
        height: 12rem !important;
    }

    .mob-back-btn {
        background: #fff !important;
        color: #b2b2b2 !important;
        box-shadow: none !important;
        font-size: 22px !important;
    }

    .navbar-toggler {
        background: #ff385d !important;
    }

    .yarsa-primary-btn {
        font-size: 14px;
        font-weight: 700 !important;
        height: 46px !important;
        line-height: 16px !important;
        padding: 12px 16px;
    }

    .footer-fixed-nav {
        
        border-radius: 20px !important;
        box-shadow: 0 10px 30px 10px rgb(119 174 238 / 18%);
        border-bottom: 1px solid #eee;
        margin-bottom: 0px;
        background-color: #fffffffc !important;
       
    }

    .footer-fixed-nav li a {
        /* color: #fff !important; */
    }

    .footer-fixed-nav li a i {
        /* color: #fff !important; */
    }

    .mobile-footer-logo {
        margin-top: -42px;
        /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
        box-shadow: 0px 0px 10px 0px #007bff12;
        border-radius: 50% !important;
        width: 45px;
        height: 45px;
    }

    .single-container {
        margin-top: 10rem !important;
    }    

    #endDate_home {
        text-align: right !important;
        padding-right: 15px !important;
    }

    #front-search-form1 .vbtn-default {
        background-color: #dc143c !important; 
    }

    #left_modal .close {
        color: #dc143c !important;
    }

    .predefined-cities {
        color: #4c4c4c;
    }

    .guestdd {
        border: 1px solid #ccc !important;
        border-radius: 15px !important;
        padding: 10px 10px !important;
        padding-left: 10px;
        margin-bottom: 10px !important;
        padding-left: 38px !important;
    }

    .yarsa-types {
        font-size: 14px !important;
        color: white !important;
        padding: 3px 9px !important;
        font-weight: 600 !important;
        border: none !important;
        border-radius: 20px !important;
    }
    
    .yarsa-types.active {
        color: white !important;
        border: 2px solid white !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    nav.navbar {
        height: 7.1rem;
    }

    .mob-form-bg input, .mob-form-bg select {
        border: 1px solid #ced4da !important;
        height: 49px !important;
    }

    .mob-form-bg input {
        padding-left: 50px !important;
    }

    #front-search-form1 {
        margin-top: 2px !important;
        height: 4.5rem !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
        padding: 0 !important;
        margin-left: 0 !important;
        background: white;
        margin-left: 0rem !important;
    }

    #front-search-form1 .small-screen .input-items {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        justify-items: center;
        align-items: center;
        margin: 0;
    }

    #front-search-form1 input.form-control {
        width: 100%;
        max-width: 92px;
        text-align: right;
        border: 0 !important;
        font-size: 1rem !important;
    }

    #front-search-form1 button {
        grid-column: 2;
        text-align: center;
        justify-self: center;
    }

    #front-search-form1 .row>input:nth-child(2),
    #front-search-form1 .row>input:nth-child(3) {
        width: 100%;
        max-width: 300px;
    }

    #front-search-form1 button {
        justify-self: center;
    }

    .mob-back-btn {
        margin-top: -18px !important;
    }
    .navbar-toggler {
        margin-top: 16px !important;
    }

    .small-screen .btn {
        margin-top: -5.3rem;
        width: 3rem;
        height: 3rem;
    }

    #front-search-field-mapboxautocomplete-list {
        position: relative;
        background: #fff;
        border: none !important;
        box-shadow: none !important;
        padding: 0;
        margin: 0;
        width: 280px;
        z-index: 9;
    }

    .yarsa-search-card col, .yarsa-search-card .col-md-4, .yarsa-search-card .col-md-6, .yarsa-search-card .col-6, .yarsa-search-card .col-md-5 {
        padding: 0px 0px !important;
    }
    .yarsa-search-card  label {
        display: none !important;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px !important;
        font-weight: 500 !important;
        font-size: 1.5rem !important;
    }

    .yarsa-search-card #myDD .dropdown-menu label, .dropdown-menu label {
        display: block !important;
        width: 80px !important;
        
    } 

    .sub_header {
        z-index: 99999 !important;
        position: absolute !important;
        top: 6.7rem !important;
    }

    .main_formbg {
        background: #fff;
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
        border-bottom-right-radius: 20px !important;
        border-bottom-left-radius: 20px !important;
        width: 100%;
        padding: 1rem 1rem 5rem 1rem !important;
        box-shadow: rgb(0 0 0 / 15%) 0px 16px 32px, rgb(0 0 0 / 10%) 0px 3px 8px !important;
    }

    .sv_minheight {
        height: 0rem !important;
    }

    .desk-search-form {
        position: absolute;
        width: 100%;
        top: -1rem !important;
        z-index: 2;
        left: 0;
        right: 0;
        padding: 10px 0px !important;
    }

    .yarsa-search-card.active input {
        margin: 5px 0px !important;
        color: #4c4c4c !important;
        width: 100%;
        padding: 10px 10px 10px 40px !important;
        font-size: 16px !important;
        border: 1px solid #ccc !important;
        /* box-shadow: 0px 0px 2px #888888 !important; */
        border-radius: 15px !important;
    }

    .filter-size input.text-center, .dropdown-menu input {
        width: 80px !important;
        padding-left: 10px !important;
    }

    .yarsa-search-card.active input#front-search-field, .yarsa-search-card.active input#front-search-field-mapbox {
        font-size: 1.7rem !important;
        font-weight: 500 !important; 
    }

    .yarsa-search-card.active .search-icon {
        position: absolute;
        top: 2rem;
        left: 1.3rem;
        font-size: 16px;
        color: #595959;
    }

    .yarsa-search-card.active .cal-icon {

        left: 1.4rem !important;
    }

    .yarsa-search-card .user-icon {
        top: 1.4rem !important;
    }

    .yarsa-search-card.active .exp_dates .to {
        display: inline-block;
        position: absolute !important;
        border-top: 1px solid #ced4da !important;
        border-bottom: 1px solid #ced4da !important;
        z-index: 999999 !important;
        width: 7rem !important;
        text-align: center;
        height: 49px;
        top: 20px;
        left: 14.6rem;
        background-color: #fff;
        font-size: 12px !important;
        padding-top: 12px;
        text-transform: capitalize;
        font-family: 'Poppins' !important;
    }


    .yarsa-search-card.active .exp_dates .to span {
        border: 1px solid #dc143c;
        border-radius: 10px;
        padding: 3px 5px !important;
        font-family: 'Poppins' !important;
        background-color: #dc143c !important;
        color: #fff;
        font-weight: 600;
        font-size: 12px !important;
    }

    .yarsa-search-card .yarsa-primary-btn {
        height: 4.5rem !important;
        padding-top: 1rem !important;
        font-size: 1.4rem !important;
    }

}

@media (max-width: 576px) {
    .popular-city-container {
        height: 145px !important;
        width: 111px !important;
        border-radius: 20px !important;
    }

    .city-slide-button {
        display: none !important;
    }

    .category-tabs .nav-link {
        font-size: 14px !important;
        color: #4c4c4c;
    }

    .rooms-guests-counters .room-counter {
        width: 21rem !important;
    }
}

@media (max-width: 412px) {
    .rooms-guests-counters .room-counter {
        width: 152px !important;
    }
}

@media (max-width: 480px) {
    .rooms-guests-counters .room-counter {
        width: 15rem !important;
    }
}

@media (max-width: 394px) {
    .rooms-guests-counters .room-counter {
        width: 134px !important;
    }
}

@media (max-width: 384px) {
    .rooms-guests-counters .room-counter {
        width: 124px !important;
    }
}

@media (max-width: 375px) {
    .rooms-guests-counters .room-counter {
        width: 114px !important;
    }
}

@media (max-width: 360px) {
    .rooms-guests-counters .room-counter {
        width: 100px !important;
    }
}

@media (min-width: 1400px) {
    .footer-gateways {
        text-align: center;
        margin-left: 10rem;
        margin-right: 10rem;
    }

    .navbar {
        padding: 0 27rem !important;
    }
}

@media (min-width: 767px) {

    /* new search in home */

    .recommandedbg .card {
         box-shadow: none !important; 
        /*box-shadow: 0px 0px 3px #91919121 !important;*/
    }

    .tryhosting {
        border-radius: 24px in !important;
    }

    .city-carousel-item.popular-city-container .img-wrapper {
        display: block !important;
        position: relative !important;
    }

    .city-carousel-item.popular-city-container .img-wrapper img {
        height: 150px !important;
    }

    .city-carousel-item.popular-city-container .popular-cities-name {
        color: #fff;
        font-weight: 600;
        font-size: 18px;
        position: absolute;
        bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 100%;
        text-align: center;
        background: #00000021;
        padding-bottom: 6px;
    }

    .city-carousel-item {
        border-radius: 16px !important;
    }

    #front-search-form .col-md-5 {
        border-right: 2px solid #ddd;
    }

    #front-search-form .form-control, #front-search-form-home .form-control {
        border: 0 !important;
        height: 30px !important;
        background: transparent !important;
        margin-top: -5px !important;
        padding: 22px 0px 12px 0px !important;
        margin-top: -12px !important;
    }

    #front-search-form-home .form-control {
        padding-left: 22px !important;
    }

     #front-search-form .form-control, #front-search-form .guest-count-home {
        color: #2c2c2c !important;
        margin-left: 2.3rem !important;
        font-size: 16px !important;
    }
    
     #front-search-form1 .form-control {
        color: #2c2c2c !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        border-radius: 0 !important;
     }

    .home.hero-banner {
        padding: 75px 80px 0 80px !important;
    }

    .home.hero-banner .carousel-inner, .home.hero-banner .main-banner, .home.hero-banner .main-banner img  {
        border-radius: 24px !important;
    }


    #myself {
        width: 100px !important;
        height: 35px !important; 
        
    }
    
    #someone-else {
        width: 143px !important; 
        height:35px !important;
        
    }

    .header-search-icon:hover {
        filter: brightness(100%) !important;
        font-size: 18px !important;
    }

    .desk-search-form {
        position: absolute !important;
        width: 100% !important;
        top: 0rem !important;
        z-index: 2 !important;
        left: 0 !important;
        right: 0 !important;
      }

    .main-banner  .desk-search-form {
        position: absolute !important;
        width: 100% !important;
        top: -3rem !important;
        z-index: 2 !important;
        left: 0 !important;
        right: 0 !important;
      }

    .single-container {
        margin-top: 10rem !important;
    }

    /* Except for home page
    .yarsa-search-card.active .exp_dates .to {
        display: inline-block;
        position: absolute !important;
        z-index: 999999 !important;
        text-align: center;
        height: 49px;
        top: 3px;
        left: 138px;
        background-color: #fff;
        font-size: 12px !important;
        vertical-align: middle !important;
        padding-top: 12px;
        text-transform: capitalize;
        font-family: 'Poppins' !important;
    } */

    .yarsa-search-card.active .exp_dates .to {
        display: inline-block;
        position: absolute !important;
        z-index: 999999 !important;
        text-align: center;
        height: 20px;
        top: -10px;
        right: 18px;
        background-color: transparent;
        font-size: 12px !important;
        vertical-align: middle !important;
        text-transform: capitalize;
        font-family: 'Poppins' !important;
        font-weight: 600 !important;
    }

    /* Except for home page
    .yarsa-search-card.active .exp_dates .to span {
        border: 1px solid #FF385D;
        border-radius: 10px;
        padding: 3px 5px !important;
        font-family: 'Poppins' !important;
        color: #FF385D;
        font-weight: 600;
    } */

     .yarsa-search-card.active .exp_dates .to span {
        border: 2px solid #003893c9;
        border-radius: 8px;
        padding: 12px 5px !important;
        font-family: 'Poppins', sans-serif;
        background-color: transparent !important;
        color: #181035c2;
        font-weight: 500;
        background: #003893;
        display: flex;
        height: inherit;
        align-items: center;
        text-transform: uppercase;
    }


    .exp_dates {
        border-right: 2px solid #ddd !important;
        padding-right: 1rem !important;
    }

    #front-search-form-home .col-md-4, #front-search-form-home .col-md-2 {
        border-right: 2px solid #ddd !important;
    }
    nav.navbar {
        padding: 0 8rem !important;
    }
    
    .front-search-form1 {
        margin-left: -25rem !important;
    }

    #front-search-form label, #front-search-form-home label {
        font-weight: 500 !important;
        font-size: 12px !important;
        color: #757575 !important;
        margin-left: 2.3rem !important;
        margin-bottom: 6px;
        margin-top: -10px;
    }

    #front-search-form .location-btn, #front-search-form-home .location-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 5px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    #front-search-form .location-btn .spinner,  #front-search-form-home .location-btn .spinner {
        display: none !important;
        width: 24px !important;
        height: 24px !important;
        border: 3px solid rgba(58, 134, 255, 0.3) !important;
        border-top: 3px solid #3a86ff !important;
        border-radius: 50% !important;
        animation: spin 1s linear infinite !important;
    }

    #front-search-form .location-btn:hover,  #front-search-form-home .location-btn:hover {
      background: #f1f5f9 !important;
    }

    .home-search-btn {
        transition: all 0.3s ease;
    }

    .home-search-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(220, 20, 60, 0.4);
      background: #c11234;
    }

    #front-search-form .location-btn.loading svg, #front-search-form-home .location-btn.loading svg {
      display: none !important;
    }

    #front-search-form .location-btn.loading .spinner, #front-search-form-home .location-btn.loading .spinner {
      display: block !important;
    }

    #front-search-form .icon-wrapper, #front-search-form-home .icon-wrapper {
        position: absolute;
        left: 0px;
        top: 22px;
        transform: translateY(-50%);
        color: #243854;
        font-size: 22px;
        transition: color 0.3s ease;
    }

    .front-search-form-row {
        margin-top: 5px !important;
    }

    .front-search button.home-search-btn {
        border-radius: 12px;
        height: 70px;
        width: 145px;
        font-size: 17px !important;
        position: absolute;
        right: -168px;
        top: -18px;
    }

    .main_formbg.item.animated.zoomIn.mob-form-bg.mb-4.yarsa-search-card.active {
        background-color: #181035c2 !important;
        border-radius: 12px !important;
        padding: 25px 78px 25px 25px !important;
        /* padding: 25px 64px 25px 25px !important; */
        width: 1000px;
        /* width: 1200px; */
        position: absolute;
        right: -56px;
        /* right: -110px; */
    }

    .main_formbg.item.mob-form-bg.yarsa-search-card.active {
        border-radius: 12px !important;
    }

    .main_formbg.item.animated.zoomIn.mob-form-bg.mb-4.yarsa-search-card.active form {
        background-color: #fff;
        padding: 14px 6px;
        border-radius: 12px;
        max-width: 88% !important;
        height: 70px !important;
    }

    #front-search-form input, #front-search-form1 input, #front-search-form-home input {
        font-weight: 700 !important;
        font-size: 14px !important;
        /* margin-left: 1rem !important; */
    }
    
    button.vbtn-default, .btn.vbtn-default {
        background-color: #dc143c !important;
        color: #fff !important;
    }

    .main_formbg {
        padding: .5rem 1rem !important;
    }

    .header_area.sv_minheight {
        height: 100px !important;
    }

    /* .payment-form-container .main-panel {
        border: 1px solid #dee2e6 !important;
    } */

    .text-sm-18 {
        font-size: 1.8rem !important;
    }

    .text-sm-16 {
        font-size: 1.6rem !important;
    }

    .text-sm-14 {
        font-size: 1.4rem !important;
    }

    .text-sm-12 {
        font-size: 1.2rem !important;
    }

    .text-sm-20 {
        font-size: 2rem !important;
    }

    .text-sm-22 {
        font-size: 2.2rem !important;
    }

    .border-sm {
        border: 1px solid #dee2e6 !important;
    }

    .border-top-sm {
        border-top: 1px solid #dee2e6 !important;
    }

    .rounded-sm-10 {
        border-radius: 10px;
    }

    .booking-success-card {
        margin-top: 12rem !important;
        width: 50rem !important;
    }
    .yarsa-chat-entity {
        background-color: #fff;
        border-radius: 50%;
        width: 4rem;
        height: 4rem;
        cursor: pointer;
    }

    .yarsa-chat-entity.active {
        border: 1px solid #1877f2;
    }

    .yarsa-chat-title {
        font-size: 1.3rem;
        text-wrap: nowrap;
        overflow-x: hidden;
        max-width: 6rem;
    }

    .mob-search {
        width: 65rem !important;
        border-radius: 12px !important;
        position: relative;
        top:10px;
    }
}

@media (min-width: 1060px) and (max-width: 1199px) {

    .main_formbg.item.animated.zoomIn.mob-form-bg.mb-4.yarsa-search-card.active
     {
        max-width: 850px;
    }
}


@media (min-width: 1600px) {
    div.slider {
        width: 90% !important;
    }
}

@media (min-width: 1800px) {
    .navbar {
        padding: 0 35rem !important;
    }
}

/* animations */
@keyframes scaleFadeIn {
    from {
        top: 2rem;
    }

    to {
        top: -1rem;
    }
}

@keyframes curtainDrop {
    0% {
        transform: scaleY(0);
        transform-origin: top;
        opacity: 0;
    }
    100% {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1;
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .home.hero-banner {
        padding: 50px 60px 0 60px !important;
    }

    .main_formbg.item.animated.zoomIn.mob-form-bg.mb-4.yarsa-search-card.active {
        background-color: #181035c2 !important;
        border-radius: 12px !important;
        padding: 15px 35px 15px 15px !important;
        width: 630px;
        position: absolute;
        right: -60px;
    }


    .front-search button.home-search-btn {
        border-radius: 12px;
        height: 70px;
        width: 108px;
        font-size: 17px !important;
        position: absolute;
        right: -115px;
        top: -18px;
    }

    .main_formbg.item.animated.zoomIn.mob-form-bg.mb-4.yarsa-search-card.active form {
        max-width: 85% !important;
    }

    .main_formbg.item.animated.zoomIn.mob-form-bg.mb-4.yarsa-search-card.active form {
        padding: 14px 0px;
    }

    #front-search-form label,
    #front-search-form-home label {
        margin-left: 0 !important;
    }

    #front-search-form .form-control,
    #front-search-form .guest-count-home {
        color: #2c2c2c !important;
        margin-left: 1.5rem !important;
        font-size: 12px !important;
    }


    .main-banner img {
        /* top: 10px; */
        margin-top: 56px;
    }

}

@media (min-width: 1024px) and (max-width: 1024px) {
    .main_formbg.item.animated.zoomIn.mob-form-bg.mb-4.yarsa-search-card.active {
        width: 830px;
    }
}




@media (max-width: 991px) {
    .navbar-toggler {
        position: relative;
        left: 250px;
    }

    .mob-search {
        left: 150px;
        max-width: 450px;
    }
    .screen-view-common-header{
        position: relative;
        right: 50px;
    }

    .shorting-flter{
        position: relative;
        top: 15px;
    }


    .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
        top: 10px;
  }  
}

.footer-container-section {
    width: 90% !important;
    margin-right: auto;
    margin-left: auto;
}

.footer-popular-deal-section {
    padding: 0px 10px;
}