@media (max-width:1200px) {
  .panel-card {
    width: 50%
  }
}

@media (max-width:991px) {

  .calendars-wrap,
  .listing-layout {
    flex-direction: column
  }

  .listing-layout {
    display: flex
  }

  .listing-main {
    width: 100%;
    padding-right: 0
  }

  .booking-sidebar {
    width: 100%;
    position: relative;
    top: 0;
    margin-top: 40px
  }

  .gallery-grid,
  .location-section,
  .reviews-grid {
    grid-template-columns: 1fr
  }

  .amenities-grid,
  .gallery-right {
    grid-template-columns: 1fr 1fr
  }

  .gallery-right {
    grid-template-rows: auto;
    height: auto
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .vb-title {
    font-size: clamp(3rem, 8vw, 5rem)
  }

  .loc-title,
  .panel-heading {
    font-size: clamp(2rem, 5vw, 3rem)
  }

  .top-main-heading {
    padding: 20px;
    text-align: center;
    position: relative;
    z-index: 5
  }

  .top-main-heading h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.2;
    color: #fff;
    font-family: 'Cormorant Garamond', serif
  }

  .panel-card {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 40px auto
  }

  .panel.has-card {
    flex-direction: column;
    height: auto;
    min-height: auto;
    padding: 60px 20px
  }

  .panel-content {
    padding: 20px;
    width: 100%
  }

  .location-info {
    padding: 60px 40px
  }

  .nav-links {
    display: flex;
    order: 3;
    width: 100%;
    margin-top: 15px;
    gap: 15px;
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 5px
  }

  #mainNav {
    flex-wrap: wrap;
    padding: 15px 30px
  }

  #mainNav.scrolled {
    padding: 10px 30px
  }

  .btn-nav-book {
    /* margin-left: auto */
  }

  .booking-section {
    padding: 0
  }

  .section-divider {
    display: none
  }
}

@media (max-width:768px) {
  body {
    overflow-x: hidden
  }

  .video-banner-section {
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 100px;
    padding-bottom: 40px
  }

  .vb-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 20px
  }

  .vb-actions {
    flex-direction: column;
    gap: 15px
  }

  .vb-btn-primary,
  .vb-mute-btn {
    width: 100%;
    text-align: center;
    justify-content: center
  }

  #bannerBookingBar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 40px;
    padding: 0 20px
  }

  .booking-bar {
    flex-direction: column;
    padding: 24px !important;
    background: rgba(14, 10, 6, .8) !important;
    backdrop-filter: blur(10px);
    border-radius: 8px
  }

  .booking-field {
    width: 100%;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
  }

  .booking-divider,
  .gallery-right,
  .section-divider {
    display: none
  }

  .btn-avail {
    width: 100%;
    margin: 20px 0 0 !important;
    padding: 16px !important
  }

  .questions-link {
    text-align: center;
    margin: 15px 0 0 !important
  }

  .amenities-grid,
  .property-grid {
    grid-template-columns: 1fr
  }

  .attractions-scroll {
    grid-auto-columns: 90%;
    padding-bottom: 20px
  }

  .location-info {
    padding: 50px 24px
  }

  .panel-card {
    padding: 40px 24px;
    margin: 20px auto
  }

  .listing-layout {
    padding: 0 15px
  }

  .section-title {
    font-size: 2rem
  }

  .property-title {
    font-size: 2.2rem
  }

  .panel-bg {
    background-attachment: scroll !important
  }

  .vb-title {
    font-size: 2.8rem;
    margin-bottom: 20px
  }

  .vb-sub {
    font-size: .9rem;
    margin-bottom: 30px
  }

  .vb-eyebrow {
    margin-bottom: 15px;
    letter-spacing: .2em
  }

  .property-meta,
  .section-title {
    margin-bottom: 0
  }

  .marquee-item {
    padding: 0 20px;
    font-size: .55rem
  }

  .btn-nav-book {
    padding: 8px 16px;
    font-size: .6rem
  }

  #mainNav {
    padding: 15px 20px
  }

  section#experiences {
    width: auto
  }

  /* Booking Page Consolidated Styles */
  .property-hero {
    height: 40vh !important;
    min-height: 250px;
  }

  .hero-overlay {
    padding: 40px 20px;
  }

  .hero-content h1 {
    font-size: 2.4rem;
  }

  .booking-container {
    padding: 30px 15px 60px;
    gap: 30px;
    margin-top: 20px;
  }

  .booking-left h1 {
    font-size: 2rem;
    margin-bottom: 25px;
  }

  .booking-section {
    padding: 25px 20px !important;
    border-radius: 12px;
    margin-bottom: 25px;
  }

  .booking-section h3 {
    font-size: 1.4rem;
    margin-bottom: 18px;
  }

  .form-row {
    grid-template-columns: 1fr !important;
    gap: 15px;
    margin-bottom: 15px;
  }

  .form-group label {
    margin-top: 10px;
    font-size: 0.7rem;
  }

  .phone-field-row {
    flex-direction: column;
    gap: 10px;
  }

  .phone-field-row .phone-code-select {
    width: 100%;
  }

  .sidebar-card {
    padding: 25px !important;
    background: #f8fbff !important;
    border: 1px solid #e1e9f5 !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05) !important;
  }

  .price-summary {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
  }

  .complete-booking {
    padding: 30px 20px;
  }
}

@media (max-width:480px) {
  .vb-title {
    font-size: 2.5rem
  }

  .loc-title,
  .panel-heading {
    font-size: 2rem
  }

  .section-title {
    font-size: 1.8rem
  }

  .property-meta {
    flex-wrap: wrap;
    gap: 10px
  }

  .meta-item {
    font-size: .8rem
  }

  .loc-stats {
    flex-direction: column;
    gap: 0px
  }

  .loc-stat {
    width: 100%;
    text-align: center
  }

  .nav-brand span,
  .section-divider {
    display: none
  }

  /* Booking Page refinements for very small screens */
  .hero-content h1 {
    font-size: 1.8rem;
  }

  .booking-left h1 {
    font-size: 1.6rem;
  }

  .booking-section {
    padding: 20px 15px !important;
  }

  .price-row {
    font-size: 0.85rem;
  }

  .btn-confirm {
    padding: 16px 12px;
    font-size: 0.8rem;
  }
}