:root {
       --lk-blue-dark: #00224f;
       --lk-blue-primary: #003580;
       --lk-blue-action: #006ce4;
       --lk-light-bg: #f5f7fa;
       --lk-accent-gold: #ffb700;
       --text-dark: #1a1a1a;
       --text-muted: #4a4a4a;
       --border-muted: #e7e7e7;
   }

   body {
       font-family: 'Inter', sans-serif;
       color: var(--text-dark);
       background-color: #ffffff;
       overflow-x: hidden;
   }

   /* Global Utilities & Buttons */
   .btn-action {
       background-color: var(--lk-blue-action);
       color: white;
       font-weight: 500;
       border-radius: 4px;
       transition: background-color 0.2s ease;
   }

   .btn-action:hover {
       background-color: #0056b3;
       color: white;
   }

   .section-heading {
       font-weight: 700;
       font-size: 1.5rem;
       color: var(--text-dark);
       margin-bottom: 0.5rem;
   }

   /* Header Navigation */
   .header-main {
       /* background-color: var(--lk-blue-primary); */
       padding: 0.75rem 0;
   }

   .site-logo {
       max-height: 75px;
   }

   .navbar-brand-lk {
       border-radius: 10px;
       border: 1px solid #FFB700;
       overflow: hidden;
   }

   .navbar-brand-lk {
       font-weight: 700;
       font-size: 1.6rem;
       color: white !important;
       text-decoration: none;
       letter-spacing: -0.5px;
   }

   .navbar-brand-lk span {
       color: var(--lk-accent-gold);
   }

   .nav-btn-outline {
       background: transparent;
       color: white;
       border: 1px solid white;
       font-weight: 500;
       font-size: 0.9rem;
       padding: 0.4rem 1rem;
       border-radius: 4px;
       transition: all 0.2s;
   }

   .nav-btn-outline:hover {
       background: rgba(255, 255, 255, 0.1);
       color: white;
   }

   /* Sub Navigation Context Tabs */
   .sub-nav {
       background-color: var(--lk-blue-primary);
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }

   .sub-nav .btn-link-tab {
       color: white;
       text-decoration: none;
       padding: 0.6rem 1rem;
       font-size: 0.9rem;
       font-weight: 500;
       border-radius: 20px;
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
   }

   .sub-nav .btn-link-tab.active,
   .sub-nav .btn-link-tab:hover {
       background-color: rgba(255, 255, 255, 0.15);
   }

   /* Hero & Booking Form */
   .hero-banner {
       padding: 3.5rem 0 5.5rem 0;
   }

   .hero-banner-hotel {
       padding: 3.5rem;
   }

   .search-wrapper {
       background-color: var(--lk-accent-gold);
       padding: 4px;
       border-radius: 8px;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
       margin-top: -3.5rem;
       position: relative;
       z-index: 99;
   }

   .search-block {
       background: white;
       height: 54px;
       border-radius: 4px;
       display: flex;
       align-items: center;
       padding: 0 1rem;
       border: 2px solid transparent;
   }

   .search-block:focus-within {
       border-color: var(--lk-blue-action);
   }

   .search-block input,
   .search-block select {
       border: none;
       width: 100%;
       font-size: 0.95rem;
       font-weight: 500;
       color: var(--text-dark);
       padding-left: 0.5rem;
   }

   .search-block input:focus,
   .search-block select:focus {
       outline: none;
   }

   .search-block i {
       color: #6a6a6a;
       font-size: 1.2rem;
   }

   .btn-search-submit {
       background-color: var(--lk-blue-action);
       color: white;
       font-weight: 600;
       font-size: 1.1rem;
       height: 54px;
       width: 100%;
       border: none;
       border-radius: 4px;
       transition: background 0.2s;
   }

   .btn-search-submit:hover {
       background-color: var(--lk-blue-dark);
   }

   /* Custom Cards Layouts */
   .dest-card {
       border: none;
       border-radius: 8px;
       overflow: hidden;
       position: relative;
       cursor: pointer;
   }

   .dest-card img {
       transition: transform 0.4s ease;
       height: 240px;
       object-fit: cover;
       width: 100%;
   }

   .dest-card:hover img {
       transform: scale(1.04);
   }

   .dest-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.85) 100%);
       display: flex;
       align-items: flex-end;
       padding: 1.25rem;
   }

   /* Featured Hotel Items */
   .hotel-card {
       border: 1px solid var(--border-muted);
       border-radius: 8px;
       overflow: hidden;
       transition: box-shadow 0.3s ease;
   }

   .hotel-card:hover {
       box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
   }

   .hotel-card img {
       height: 210px;
       object-fit: cover;
       width: 100%;
   }

   .badge-rating {
       background-color: var(--lk-blue-primary);
       color: white;
       font-weight: 700;
       font-size: 0.85rem;
       padding: 5px 7px;
       border-radius: 4px 4px 4px 0;
   }

   /* Promo Features Elements */
   .promo-box {
       background: linear-gradient(135deg, #ffffff 0%, #f0f6ff 100%);
       border: 1px solid var(--border-muted);
       border-radius: 8px;
       padding: 2rem;
       height: 100%;
   }

   /* Value Features List */
   .feature-icon-box {
       width: 48px;
       height: 48px;
       background-color: rgba(0, 108, 228, 0.1);
       color: var(--lk-blue-action);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.4rem;
       margin-bottom: 1rem;
   }

   /* Testimonials Section */
   .review-box {
       background: white;
       border: 1px solid var(--border-muted);
       border-radius: 8px;
       padding: 1.5rem;
       height: 100%;
   }

   .avatar-ui {
       width: 42px;
       height: 42px;
       border-radius: 50%;
       background-color: #e2ecf7;
       color: var(--lk-blue-primary);
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       font-size: 0.9rem;
   }

   /* Structural Footer */
   footer {
       background-color: var(--lk-light-bg);
       font-size: 0.85rem;
       color: var(--text-muted);
   }

   footer .footer-section-title {
       font-weight: 700;
       color: var(--lk-blue-dark);
       font-size: 0.9rem;
       margin-bottom: 1rem;
   }

   footer ul li a {
       color: var(--lk-blue-action);
       text-decoration: none;
   }

   footer ul li a:hover {
       color: var(--lk-blue-primary);
       text-decoration: underline;
   }



   @media (max-width: 992px) {

       /* Adjust to your breakpoint (e.g. sm, md, lg) */
       .navbar-collapse {
           position: absolute;
           top: 100%;
           left: 0;
           width: 100%;
           background-color: var(--lk-blue-primary);
           /* Add a background so content doesn't overlap */
           max-height: 80vh;
           /* Limits menu so it doesn't run off-screen */
           overflow-y: auto;
           /* Adds a scrollbar if menu is too long */
       }
   }

   .nav-item {
       padding-left: 10px;
   }

   .nav-item>a {
       text-decoration: none;
   }


   .remove-image-button {
       background-color: #d82f2f;
       padding: 4px 7px;
       border-radius: 15px;
       margin-top: 4px;
       text-align: center;
       color: #fff;
       cursor: pointer;
   }


   /* Hotel Page Styles */


   .hotel-page .gallery-grid {
       display: grid;
       grid-template-columns: 2fr 1fr;
       grid-template-rows: repeat(2, 160px);
       gap: 8px;
   }

   .hotel-page .gallery-grid-2 {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       grid-template-rows: 160px;
       gap: 8px;
   }

   .hotel-page .gallery-main {
       grid-row: span 2;
       height: 328px;
       width: 100%;
       object-fit: cover;
       border-radius: 4px 0 0 4px;
   }

   .hotel-page .gallery-sub {
       height: 160px;
       width: 100%;
       object-fit: cover;
   }

   .hotel-page .gallery-sub-end {
       border-radius: 0 4px 0 0;
   }

   .hotel-page .gallery-sub-bottom {
       border-radius: 0 0 4px 0;
   }