/*
Theme Name: Mellow - Hotel HTML Website Template
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Mellow is specially designed for Hotel Website by TemplatesJungle.
Version: 1.1
*/
                    /*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/
                    /*------------------------------------*\
    Table of contents
\*------------------------------------*/
                    /*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Background Color
  2.3 Section
    - Section Paddings
    - Section Margins
    - Section Title
  2.4 Buttons
    - Primary Buttons
    - Outline Buttons
    - Button Hover Effects

3. CONTENT ELEMENTS
  - Dropdown
  - Form
  - Svg Color
  - Swiper
  - Modal Video
  - Preloader

4. SITE STRUCTURE
  4.1 Header
  4.2 Billboard
  4.3 Rooms Section
  4.4 Services Section

5. PAGES STYLE
  5.1 About page
  5.2 Blog page 
  5.3 Booking page 
  5.4 Gallery page
  5.5 Reviews page 
  5.5 FAQs page 


  
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
                    
                    body {
                        margin: 0;
                        padding: 0;
                        background-color: #ffffff !important;
                        font-family: 'Ubuntu', sans-serif;
                        /* This will make your entire page white */
                    }
                    
                     :root {
                        --primary-color: #D16806;
                        --secondary-color: #F9F6F3;
                        --black-color: #1A1A1A;
                        --dark-color: #353535;
                        --primary-color-200: #E8F0F1;
                        --primary-color-400: #c4e9ed;
                        --gray-color: #777F81;
                        --light-color: #fdfdfd;
                        /* bootstrap color-scheme */
                        --bs-dark-rgb: 80, 80, 80;
                        --bs-gray-100: #EAE5DD;
                        --bs-gray-300: #DCDCDC;
                        --bs-light-rgb: rgba(255, 255, 255, 1);
                        --bs-body-color-rgb: 53, 53, 53;
                        --bs-primary-rgb: 209, 104, 6;
                        --bs-secondary-rgb: 249, 246, 243;
                    }
                    /* Fonts */
                    
                     :root {
                        --heading-font: "Ubuntu", sans-serif;
                        --body-font: "Ubuntu", sans-serif;
                    }
                    /*----------------------------------------------*/
                    /* 2 GENERAL TYPOGRAPHY
/*----------------------------------------------*/
                    /* 2.1 General Styles
/*----------------------------------------------*/
                    
                    *,
                    *::before,
                    *::after {
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;
                    }
                    
                    html {
                        box-sizing: border-box;
                    }
                    
                    body {
                        font-family: var(--body-font);
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 164%;
                        letter-spacing: 0.32px;
                        color: var(--dark-color);
                        margin: 0;
                    }
                    
                    p {
                        color: var(--dark-color);
                    }
                    
                    a {
                        color: inherit;
                        text-decoration: none;
                        transition: 0.3s ease-in-out;
                    }
                    
                    a:hover {
                        color: var(--primary-color);
                    }
                    
                    .text-light {
                        color: var(--light-color) !important;
                    }
                    
                    .text-primary {
                        color: var(--primary-color) !important;
                    }
                    
                    .text-black {
                        color: var(--black-color) !important;
                    }
                    /* 2.2 Background Color
/*----------------------------------------------*/
                    
                    .bg-light {
                        background-color: var(--light-color) !important;
                    }
                    
                    .bg-primary {
                        background-color: var(--primary-color) !important;
                    }
                    
                    .bg-gray {
                        background-color: var(--bs-gray-100) !important;
                    }
                    /*--------------------------------------------------------------
/** 2.3 Section
--------------------------------------------------------------*/
                    /* - Section Padding
--------------------------------------------------------------*/
                    
                    .padding-small {
                        padding-top: 5em;
                        padding-bottom: 5em;
                    }
                    
                    .padding-medium {
                        padding-top: 8em;
                        padding-bottom: 8em;
                    }
                    
                    .padding-large {
                        padding-top: 8em;
                        padding-bottom: 8em;
                    }
                    
                    .padding-side {
                        padding-left: 6rem;
                        padding-right: 6rem;
                    }
                    
                    @media (max-width: 1400px) {
                        .padding-side {
                            padding-left: 5rem;
                            padding-right: 5rem;
                        }
                    }
                    
                    @media (max-width: 1200px) {
                        .padding-side {
                            padding-left: 4rem;
                            padding-right: 4rem;
                        }
                    }
                    
                    @media (max-width: 992px) {
                        .padding-side {
                            padding-left: 3rem;
                            padding-right: 3rem;
                        }
                    }
                    
                    @media (max-width: 768px) {
                        .padding-side {
                            padding-left: 2rem;
                            padding-right: 2rem;
                        }
                        .padding-large {
                            padding-top: 15em;
                        }
                    }
                    
                    @media (max-width: 576px) {
                        .padding-side {
                            padding-left: 1rem;
                            padding-right: 1rem;
                        }
                        .padding-large {
                            padding-top: 18em;
                        }
                    }
                    /* - Section Margin
--------------------------------------------------------------*/
                    
                    .margin-small {
                        margin-top: 8.125em;
                        margin-bottom: 8.125em;
                    }
                    
                    .margin-medium {
                        margin-top: 10em;
                        margin-bottom: 10em;
                    }
                    
                    .margin-large {
                        margin-top: 12em;
                        margin-bottom: 12em;
                    }
                    /* - Section Title
--------------------------------------------------------------*/
                    
                    h1,
                    h2,
                    h3,
                    h4,
                    h5,
                    h6 {
                        color: var(--black-color);
                        font-family: "Ubuntu", sans-serif;
                        text-transform: capitalize;
                        font-weight: 400;
                    }
                    /* Animation */
                    
                    @media (min-width: 200px) {
                        .animate {
                            animation-duration: 0.3s;
                            -webkit-animation-duration: 0.3s;
                            animation-fill-mode: both;
                            -webkit-animation-fill-mode: both;
                        }
                    }
                    /* Animate Slide */
                    
                    @keyframes slide {
                        0% {
                            transform: translateY(1rem);
                            opacity: 0;
                        }
                        100% {
                            transform: translateY(0rem);
                            opacity: 1;
                        }
                        0% {
                            transform: translateY(1rem);
                            opacity: 0;
                        }
                    }
                    
                    @-webkit-keyframes slide {
                        0% {
                            -webkit-transform: transform;
                            -webkit-opacity: 0;
                        }
                        100% {
                            -webkit-transform: translateY(0);
                            -webkit-opacity: 1;
                        }
                        0% {
                            -webkit-transform: translateY(1rem);
                            -webkit-opacity: 0;
                        }
                    }
                    
                    .slide {
                        -webkit-animation-name: slide;
                        animation-name: slide;
                    }
                    
                    @media (min-width: 992px) and (max-width: 1800px) {
                        .logo {
                            height: 100px !important;
                        }
                    }
                    /*--------------------------------------------------------------
/** 2.4 Buttons
--------------------------------------------------------------*/
                    
                    .btn {
                        --bs-btn-padding-x: 2.4rem;
                        --bs-btn-padding-y: 1rem;
                        --bs-btn-font-size: 1rem;
                        --bs-btn-font-weight: 400;
                        text-transform: capitalize;
                        border-radius: 10px;
                        transition: all 0.4s ease-in-out;
                    }
                    /* - Primary Buttons
--------------------------------------------------------------*/
                    
                    .btn-primary {
                        --bs-btn-color: var(--dark-color);
                        --bs-btn-bg: var(--secondary-color);
                        --bs-btn-border-color: var(--secondary-color);
                        --bs-btn-hover-color: var(--dark-color);
                        --bs-btn-hover-bg: var(--secondary-color);
                        --bs-btn-hover-border-color: var(--secondary-color);
                        --bs-btn-focus-shadow-rgb: 49, 132, 253;
                        --bs-btn-active-color: var(--dark-color);
                        --bs-btn-active-bg: var(--secondary-color);
                        --bs-btn-active-border-color: var(--secondary-color);
                        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
                        --bs-btn-disabled-color: var(--dark-color);
                        --bs-btn-disabled-bg: var(--secondary-color);
                        --bs-btn-disabled-border-color: var(--secondary-color);
                    }
                    /* - Outline Buttons
--------------------------------------------------------------*/
                    
                    .btn-outline-primary {
                        --bs-btn-color: var(--secondary-color);
                        --bs-btn-border-color: var(--secondary-color);
                        --bs-btn-hover-color: var(--dark-color);
                        --bs-btn-hover-bg: var(--secondary-color);
                        --bs-btn-hover-border-color: var(--secondary-color);
                        --bs-btn-focus-shadow-rgb: 13, 110, 253;
                        --bs-btn-active-color: var(--dark-color);
                        --bs-btn-active-bg: var(--secondary-color);
                        --bs-btn-active-border-color: var(--secondary-color);
                        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
                        --bs-btn-disabled-color: var(--secondary-color);
                        --bs-btn-disabled-bg: transparent;
                        --bs-btn-disabled-border-color: var(--secondary-color);
                        --bs-gradient: none;
                    }
                    /* - Button Hover Effects
------------------------------------------------------------- */
                    
                    .btn-arrow {
                        position: relative;
                        transition: background-color 300ms ease-out;
                    }
                    
                    .btn-arrow span {
                        display: inline-block;
                        position: relative;
                        transition: all 300ms ease-out;
                        will-change: transform;
                    }
                    
                    .btn-arrow:hover span {
                        transform: translate3d(-0.7rem, 0, 0);
                    }
                    
                    .btn-arrow svg {
                        position: absolute;
                        right: 0;
                        opacity: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        transition: all 300ms ease-out;
                        will-change: right, opacity;
                    }
                    
                    .btn-arrow:hover svg {
                        opacity: 1;
                        right: -1.6rem;
                    }
                    /*--------------------------------------------------------------
/** 3.CONTENT ELEMENTS
--------------------------------------------------------------*/
                    /* Dropdown
------------------------------------------------------------- */
                    
                    .dropdown-item {
                        color: var(--dark-color);
                        text-transform: capitalize;
                    }
                    
                    .dropdown-item.active,
                    .dropdown-item:hover,
                    .dropdown-item:active {
                        color: var(--dark-color);
                        background-color: var(--secondary-color);
                    }
                    /* Form
------------------------------------------------------------- */
                    
                    .form-control:focus,
                    .form-select:focus {
                        border-color: var(--dark-color);
                        outline: 0;
                        box-shadow: none;
                    }
                    
                    input,
                    select,
                    textarea {
                        border-color: var(--dark-color);
                        outline: 0;
                        box-shadow: none;
                    }
                    
                    select:focus {
                        box-shadow: none;
                    }
                    
                    .form-check {
                        background-color: #6BB3BC !important;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        height: 75%;
                    }
                    
                    .sliding {
                        height: 100% !important;
                    }
                    .carouselInside {
                        height: 100%;
                    }
                    
                    .slide-img {
                        height: 100%;
                    }
                    
                    #slider-carousel {
                        height: 100%;
                    }
                    
                    .bg-lightblue {
                        background-color: #def5f7 !important;
                    }
                    
                    
                    svg.light-color {
                        color: var(--light-color);
                    }
                    
                    svg.dark-color {
                        color: var(--dark-color);
                    }
                    
                    svg.color {
                        color: #ECB27B;
                    }
                    
                    svg.primary-color {
                        color: var(--primary-color);
                    }
                    
                    svg.social {
                        color: #ECB27B;
                    }
                    
                    svg.social:hover {
                        color: var(--primary-color);
                    }
                    /* Swiper
------------------------------------------------------------- */
                    /* room */
                    
                    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
                    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
                        margin: 0 5px;
                    }
                    
                    .room-pagination .swiper-pagination-bullet {
                        width: 18px;
                        height: 18px;
                        background-color: var(--primary-color);
                    }
                    
                    .room-pagination .swiper-pagination-bullet-active {
                        background-color: var(--primary-color);
                    }
                    /* gallery */
                    
                    .main-slider-button-next.swiper-button-disabled,
                    .main-slider-button-prev.swiper-button-disabled {
                        opacity: .35;
                        cursor: auto;
                        pointer-events: none;
                    }
                    
                    .swiper-button-prev {
                        position: relative !important;
                        top: 10px;
                        left: -20px;
                    }
                    
                    .swiper-button-next {
                        position: relative !important;
                        top: 10px;
                    }
                    /* modal video override
------------------------------------------------------------- */
                    
                    .modal-dialog {
                        max-width: 800px;
                        margin: auto;
                        height: 100vh;
                        display: flex;
                        align-items: center;
                    }
                    
                    .modal-content {
                        padding: 0;
                        background-color: #ffff;
                        border: none;
                        border-radius: 0
                    }
                    /* Preloader
------------------------------------------------------------- */
                    
                    .preloader {
                        width: 100%;
                        height: 100vh;
                        margin: 0 auto;
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 111;
                        background: #fff;
                    }
                    
                    .loader {
                        display: block;
                        position: relative;
                        left: 50%;
                        top: 50%;
                        width: 150px;
                        height: 150px;
                        margin: -75px 0 0 -75px;
                        border-radius: 50%;
                        border: 3px solid transparent;
                        border-top-color: #D16806;
                        -webkit-animation: spin 2s linear infinite;
                        animation: spin 2s linear infinite;
                    }
                    
                    .loader:before {
                        content: "";
                        position: absolute;
                        top: 5px;
                        left: 5px;
                        right: 5px;
                        bottom: 5px;
                        border-radius: 50%;
                        border: 3px solid transparent;
                        border-top-color: #ECB27B;
                        -webkit-animation: spin 3s linear infinite;
                        animation: spin 3s linear infinite;
                    }
                    
                    .loader:after {
                        content: "";
                        position: absolute;
                        top: 15px;
                        left: 15px;
                        right: 15px;
                        bottom: 15px;
                        border-radius: 50%;
                        border: 3px solid transparent;
                        border-top-color: #f7dac1;
                        -webkit-animation: spin 1.5s linear infinite;
                        animation: spin 1.5s linear infinite;
                    }
                    
                    @-webkit-keyframes spin {
                        0% {
                            -webkit-transform: rotate(0deg);
                            -ms-transform: rotate(0deg);
                            transform: rotate(0deg);
                        }
                        100% {
                            -webkit-transform: rotate(360deg);
                            -ms-transform: rotate(360deg);
                            transform: rotate(360deg);
                        }
                    }
                    
                    @keyframes spin {
                        0% {
                            -webkit-transform: rotate(0deg);
                            -ms-transform: rotate(0deg);
                            transform: rotate(0deg);
                        }
                        100% {
                            -webkit-transform: rotate(360deg);
                            -ms-transform: rotate(360deg);
                            transform: rotate(360deg);
                        }
                    }
                    /*----------------------------------------------*/
                    /* 4 SITE STRUCTURE */
                    /*----------------------------------------------*/
                    /* ================================
                    4.1HEADER STYLING
                    ================================ */
                    /*
 * This file contains the complete CSS for the header,
 * including both desktop and mobile layouts.
 */

/* ================================
Header Container
================================ */
.header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 80px;
    padding: 1rem 2rem;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}

/* ================================
Logo Styling
================================ */
.logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.logo img {
    height: 70px;
    max-width: 200px;
    object-fit: contain;
    display: block;
    vertical-align: middle;
}

/* ================================
Navigation & Hamburger Menu (Desktop)
================================ */
.main-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2rem;
}

.main-nav a {
    text-decoration: none;
    color: #444;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s ease, transform 0.2s ease;
    white-space: nowrap;
}

.main-nav a:hover {
    color: var(--primary-color, #0077ff);
    transform: translateY(-2px);
}

.main-nav a:first-child {
    font-weight: 600;
    color: #000;
}

/* Hide hamburger and close buttons on desktop */
.menu-toggle,
.close-btn {
    display: none;
}

/* ================================
Mobile View (Overrides for screens under 999px)
================================ */
@media (max-width: 999px) {
    .header-container {
        padding: 1rem;
    }

    .main-nav {
        /* This is the key change: */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background: #fff;
        position: fixed;
        top: 0;
        right: 0;
        width: 240px;
        height: 100vh;
        overflow-y: auto;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border-radius: 0;

        /* Initially hide the menu off-screen */
        transform: translateX(100%);
        /* Enable the sliding animation */
        transition: transform 0.5s ease-in-out;
    }

    /* JavaScript adds this class to slide the menu in */
    .main-nav.show {
        transform: translateX(0);
    }

    .main-nav .close-btn {
        display: block;
        align-self: flex-end;
        margin-bottom: 15px;
        background: none;
        border: none;
        font-size: 26px;
        cursor: pointer;
    }

    .main-nav a {
        margin: 12px 0;
        font-size: 18px;
        width: 100%;
        display: block;
    }

    .menu-toggle {
        display: block;
        font-size: 30px;
        font-weight: lighter;
        line-height: 1;
        cursor: pointer;
        color: #333;
        background: none;
        border: none;
        margin-left: 20px;
    }
}

                    /* 4.2 Billboard
/*----------------------------------------------*/
                    /* date */
                    
                    div.datetime-container,
                    div.datetime-container * {
                        box-sizing: border-box;
                        font-family: var(--body-font);
                    }
                    
                    div.datetime-container button.date,
                    div.datetime-container button.time {
                        background-color: transparent;
                        border: 1px solid #E9E9E9;
                        border-radius: 8px;
                        text-transform: capitalize;
                        text-align: start;
                        padding: 8px 20px;
                        color: var(--gray-color);
                        letter-spacing: 0.1rem;
                    }
                    
                    div.datetime-container button>span {
                        display: inline-block;
                        margin: 0 -6px;
                    }
                    
                    div.datetime-container button span.week-day {
                        font-size: 16px;
                        text-align: right;
                    }
                    
                    div.datetime-container button span.week-day::after {
                        content: ",";
                        display: inline-block;
                    }
                    
                    div.datetime-container button span.month {
                        font-size: 16px;
                        text-align: right;
                    }
                    
                    div.datetime-container button span.hours,
                    div.datetime-container button span.month-day {
                        font-size: 16px;
                        text-align: center;
                        width: 45px;
                    }
                    
                    .month br {
                        display: none;
                    }
                    
                    @media (max-width: 1500px) {
                        div.picker {
                            width: max-content;
                        }
                    }
                    /* 4.3 Rooms Section
/*----------------------------------------------*/
                    
                    .room-item img.post-image {
                        -webkit-transform: scale(1);
                        transform: scale(1);
                        -webkit-transition: .3s ease-in-out;
                        transition: all 0.5s ease-in-out;
                    }
                    
                    .room-item:hover img.post-image {
                        opacity: 0.5;
                        -webkit-transform: scale(1.1);
                        transform: scale(1.1);
                    }
                    
                    .product-description {
                        opacity: 0;
                        bottom: -125px;
                        transition: all 0.5s ease-in-out;
                    }
                    
                    .room-item:hover .product-description {
                        opacity: 1;
                        bottom: 20px;
                    }
                    
                    @media only screen and (min-width:770px) and (max-width: 1400px) {
                        .product-description {
                            bottom: -180px;
                        }
                    }
                    /* 4.4 Services Section
/*----------------------------------------------*/
                    
                    .service {
                        border: 1px solid #F4E2D8;
                        transition: all 0.3s ease-in-out;
                    }
                    
                    .service:hover {
                        border: 1px solid var(--primary-color);
                    }
                    /* 4.5 Blog Section
/*----------------------------------------------*/
                    
                    .blog-post img.blog-img {
                        -webkit-transform: scale(1);
                        transform: scale(1);
                        -webkit-transition: .3s ease-in-out;
                        transition: all 0.5s ease-in-out;
                    }
                    
                    .blog-post:hover img.blog-img {
                        opacity: 0.5;
                        -webkit-transform: scale(1.1);
                        transform: scale(1.1);
                    }
                    /*----------------------------------------------*/
                    /* 5 PAGES STYLE */
                    /*----------------------------------------------*/
                    /*--------------------------------------------------------------
5.1 About page 
--------------------------------------------------------------*/
                    
                    .breadcrumb-item+.breadcrumb-item::before {
                        color: var(--dark-color);
                    }
                    
                    svg.play-icon {
                        animation: play 1.5s alternate infinite ease-in;
                    }
                    
                    @keyframes play {
                        0% {
                            transform: scale(.8);
                        }
                        100% {
                            transform: scale(1.1);
                        }
                    }
                    /*--------------------------------------------------------------
  5.2 Blog page 
  --------------------------------------------------------------*/
                    
                    .pagination {
                        --bs-pagination-color: var(--black-color);
                        --bs-pagination-hover-color: #fff;
                        --bs-pagination-hover-bg: var(--primary-color);
                        --bs-pagination-hover-border-color: var(--primary-color);
                        --bs-pagination-focus-color: #fff;
                        --bs-pagination-focus-bg: var(--primary-color);
                        --bs-pagination-focus-box-shadow: none;
                        --bs-pagination-active-bg: var(--primary-color);
                        --bs-pagination-active-border-color: var(--primary-color);
                    }
                    /*--------------------------------------------------------------
 5.3 Booking page 
  --------------------------------------------------------------*/
                    
                    .form-check-input:checked {
                        background-color: var(--primary-color);
                        border-color: var(--primary-color);
                    }
                    
                    .form-check-input:focus {
                        box-shadow: none;
                    }
                    /*--------------------------------------------------------------
 5.4 Gallery page 
  --------------------------------------------------------------*/
                    
                    button.filter-button {
                        border: 0;
                        background: transparent;
                        text-transform: uppercase;
                        transition: all 0.5s ease-in-out;
                        border-radius: 20px;
                    }
                    
                    button.filter-button.active,
                    button.filter-button:hover {
                        color: var(--bs-light);
                        background: var(--primary-color);
                    }
                    /*--------------------------------------------------------------
 5.5 Reviews page
--------------------------------------------------------------*/
                    
                    .reviews-components {
                        box-shadow: 0px 12px 90px rgba(12, 12, 12, 0.06);
                    }
                    
                    iconify-icon.quote {
                        font-size: 60px;
                        color: var(--primary-color);
                    }
                    
                    .rate {
                        color: var(--primary-color);
                    }
                    /* === Properties Page UI Patch === */
                    /* =========================================================

        /* --- Layout wrapper ------------------------------------------------ */
                    /* =========================================================
   PROPERTIES PAGE  –  FILTER + CARD UI
   (append this to the bottom of style.css)
   ========================================================= */
                    /* --- Layout wrapper ------------------------------------------------ */
                    
                    .page-wrapper {
                        display: flex;
                        min-height: 100vh;
                    }
                    /* --- Filter sidebar ------------------------------------------------ */
                    
                    .filter-sidebar {
                        width: 280px;
                        background: #b9e1e4;
                        /* pale aqua */
                        padding: 1.5rem 1rem;
                        overflow-y: auto;
                    }
                    
                    .filter-block {
                        margin-bottom: 2rem;
                    }
                    
                    .range-track {
                        accent-color: #000;
                        width: 100%;
                    }
                    
                    .counter {
                        display: inline-flex;
                        align-items: center;
                        border: 1px solid #d9d9d9;
                        border-radius: 4px;
                    }
                    
                    .counter button {
                        width: 32px;
                        height: 32px;
                        border: none;
                        background: transparent;
                        font-size: 1.25rem;
                    }
                    
                    .counter span {
                        width: 32px;
                        text-align: center;
                    }
                    
                    .type-grid {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: .75rem;
                    }
                    
                    .type-item {
                        text-align: center;
                        padding: .6rem 0;
                        border: 1px solid #d9d9d9;
                        border-radius: 8px;
                        background: #fff;
                        font-size: .9rem;
                        cursor: pointer;
                        transition: .2s;
                    }
                    
                    .type-item:hover,
                    .type-item.active {
                        background: #91d6da;
                    }
                    /* --- Main content -------------------------------------------------- */
                    
                    .main-content {
                        flex: 1;
                        padding: 2rem 2.5rem;
                    }
                    
                    .sort-select {
                        border: 1px solid #d9d9d9;
                        border-radius: 40px;
                        padding: 0.45rem 1.2rem;
                        font-size: 0.9rem;
                        appearance: none;
                        background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='black'><path d='M6 8L2 3h8L6 8z'/></svg>") no-repeat right 1rem center/10px;
                    }
                    /* --- Property cards ------------------------------------------------- */
                    
                    .property-card {
                        background: #fff;
                        border-radius: 12px;
                        overflow: hidden;
                        box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
                        transition: transform .25s ease;
                    }
                    /* Constrain Flatpickr calendar popup width */
                    
                    .flatpickr-calendar {
                        max-width: 650px !important;
                        width: auto !important;
                        left: 0 !important;
                        /* Align to left of input */
                        right: auto !important;
                        /* Prevent auto-stretch */
                        transform: none !important;
                        margin-left: 0 !important;
                    }
                    /* Optional: Keep arrow centered under the input field */
                    
                    .flatpickr-calendar.arrowTop:before,
                    .flatpickr-calendar.arrowTop:after {
                        left: 20% !important;
                        /* Adjust as needed */
                    }
                    
                    #cardGrid {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        gap: 1.5rem;
                    }
                    
                    #cardGrid>div {
                        flex: 0 0 300px;
                        /* each card will be max 300px wide */
                    }
                    
                    .property-card:hover {
                        transform: translateY(-4px);
                    }
                    
                    .property-card img {
                        width: 100%;
                        height: 180px;
                        object-fit: cover;
                    }
                    
                    .card-title {
                        font-family: var(--heading-font);
                        font-weight: 600;
                        font-size: 1.05rem;
                    }
                    
                    .card-price {
                        font-size: .95rem;
                        font-weight: 600;
                    }
                    
                    .card-meta li:not(:last-child)::after {
                        content: "|";
                        margin: 0 .45rem;
                        color: #d9d9d9;
                    }
                    /* --- Responsive tweak: hide sidebar on tablets/phones -------------- */
                    
                    @media (max-width:992px) {
                        .filter-sidebar {
                            display: none;
                        }
                        .main-content {
                            padding: 1.5rem;
                        }
                    }
.footer-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px 0;
    font-family: Arial, sans-serif;
    position: relative;
    background-color: #fff;
}

.footer-content {
    flex: 1;
    padding: 10px;
    margin-bottom: 0;
}

.footer-content h3 {
    font-size: 22px;
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
}

.footer-content p {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 30px;
}

.footer-links {
    font-size: 13px;
    color: #333;
    margin-top: 30px;
}

.footer-links p {
    font-size: 11px;
    color: #888;
    margin-top: 20px;
}*/

.social-icons {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

/* Hill image */
#hillbottom {
    position: absolute;
    right: 0;
    bottom: 50px;
    margin-bottom: -1.3cm;
}

#hillbottom img {
    width: 500px;
    height: auto;
}

/* Back to Top */
.back-to-top {
    writing-mode: vertical-rl;
    margin-top: 0.5cm;
    transform: rotate(180deg);
    color: #999;
    font-size: 12px;
    margin-right: 20px;
    cursor: pointer;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .footer-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .back-to-top {
        position: static;
        margin: 10px 0;
        writing-mode: horizontal-tb;
        transform: none;
    }

    #hillbottom {
        position: static;
        margin: 20px auto 0;
    }

    #hillbottom img {
        max-width: 100%;
        height: auto;
    }

    .social-icons {
        justify-content: center;
    }
}
/* Desktop paragraph width control */
@media (min-width: 769px) {
    .footer-content p {
        max-width: 500px;  /* adjust size as you like */
        text-align: left;  /* keeps it aligned nicely */
    }
}






/* This section was causing the issue */
.header-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1rem 2rem;
}

.logo {
  margin-right: auto;
}

.menu-toggle {
  margin-left: auto;
}