:root{
    /* =========================
      COLOR TOKENS (approx screenshot)
    ========================== */
    --primary: #2aa6a3;
    --primary-700: #238f8c;
    --secondary: #2c7f7d;
    --accent: #e74c3c;

    --bg: #f6f7f8;
    --surface: #ffffff;

    --text: #1f2a30;
    --muted: #7a8a93;
    --border: #e6ecef;

    --white: #ffffff;

    /* =========================
      TYPOGRAPHY TOKENS
    ========================== */
    --font-head: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-body: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

    --h1: 56px;
    --h2: 34px;
    --h3: 18px;
    --body: 15px;
    --small: 12.5px;

    --lh-head: 1.15;
    --lh-body: 1.6;

    /* =========================
      SPACING RHYTHM
    ========================== */
    --section-lg: 90px;
    --section-md: 70px;
    --section-sm: 50px;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-pill: 999px;

    /* Shadows: soft, screenshot-like */
    --shadow-soft: 0 14px 30px rgba(15, 35, 45, 0.10);
    --shadow-card: 0 12px 24px rgba(15, 35, 45, 0.10);
    --shadow-float: 0 18px 34px rgba(15, 35, 45, 0.14);

    --container-max: 1200px;
  }

  /* ===== Base ===== */
  html { scroll-behavior: smooth; }
  body{
    font-family: var(--font-body);
    font-size: var(--body);
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--bg);
  }

  .container{ max-width: var(--container-max); }

  a{ color: inherit; }
  a:hover{ color: var(--primary); }

  .text-muted{ color: var(--muted) !important; }

  /* ===== Utility Topbar ===== */
  .topbar{
  background: #0f242b;
  font-size: var(--small);
  color: rgba(255,255,255,.8);
}
  .topbar a{
  color: rgba(255,255,255,.92);
}
  .topbar .icon-link{
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.9);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
  .topbar .icon-link:hover{
  transform: translateY(-1px);
  background: rgba(42,166,163,.22);
  border-color: rgba(42,166,163,.45);
  color: #fff;
}

  /* ===== Brand Mark ===== */
  .brand-mark{
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: rgba(42,166,163,.12);
    color: var(--primary-700);
    border: 1px solid rgba(42,166,163,.22);
  }

  /* ===== Logo Lockup (Icon + Stacked Text) ===== */
  .brand-logo{ color: inherit; }

  .brand-mark--logo{
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(42,166,163,.12);
    border: 1px solid rgba(42,166,163,.24);
    color: var(--primary-700);
    box-shadow: 0 10px 18px rgba(15, 35, 45, 0.08);
  }
  .brand-mark--logo .brand-mark__base{
    font-size: 18px;
  }
  .brand-mark--logo .brand-mark__badge{
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 10px 18px rgba(15, 35, 45, 0.12);
    font-size: 9px;
  }

  .brand-stack{
    display: inline-flex;
    flex-direction: column;
    line-height: 1.05;
    gap: 2px;
  }
  .brand-title{
    font-family: var(--font-head);
    font-weight: 900;
    letter-spacing: .2px;
    font-size: 16px;
    color: var(--text);
    white-space: nowrap;
  }
  .brand-title-accent{
    color: var(--primary-700);
  }
  .brand-sub{
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
    font-size: 10px;
    color: rgba(31,42,48,.70);
  }

  @media (max-width: 575.98px){
    .brand-mark--logo{ width: 34px; height: 34px; border-radius: 11px; }
    .brand-mark--logo .brand-mark__base{ font-size: 17px; }
    .brand-title{ font-size: 15px; }
    .brand-sub{ font-size: 9.5px; }
  }
  .brand-name{
    font-family: var(--font-head);
    letter-spacing: .2px;
  }
  .brand-tagline{
    font-size: 12px;
  }

  /* ===== Navbar ===== */
  .main-nav{
    border-bottom: 1px solid rgba(0,0,0,0.05);
    background: #fff;
    transition: box-shadow .2s ease, padding .2s ease, transform .2s ease;
  }
  .main-nav .nav-link{
    font-weight: 600;
    font-family: var(--font-head);
    font-size: 13px;
    color: #2a3a42;
    padding: .45rem .7rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
  }
  .main-nav .nav-icon{
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(42,166,163,.10);
    border: 1px solid rgba(42,166,163,.18);
    color: var(--primary-700);
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    flex: 0 0 auto;
  }
  .main-nav .nav-link:hover .nav-icon{
    transform: translateY(-1px);
    background: rgba(42,166,163,.16);
    border-color: rgba(42,166,163,.30);
    color: var(--primary-700);
  }
  .main-nav .nav-link.active .nav-icon{
    background: rgba(42,166,163,.18);
    border-color: rgba(42,166,163,.36);
  }
  .main-nav .nav-label{
    line-height: 1;
    white-space: nowrap;
  }
  .main-nav .nav-link:hover{
    color: var(--primary-700);
  }
  .main-nav .nav-link.active{
    color: var(--primary-700);
  }
  .main-nav .nav-link.active::after{
    content:"";
    position:absolute;
    left: .75rem;
    right: .75rem;
    bottom: .25rem;
    height: 2px;
    background: var(--primary);
    border-radius: 99px;
  }

  @media (min-width: 992px){
    .main-nav .nav-cta-wrap{
      padding-left: var(--bs-navbar-brand-margin-end);
      margin-right: var(--bs-navbar-brand-margin-end);
    }
  }

  .nav-cta{
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .3px;
    text-transform: uppercase;
  }

  /* Dropdown polish (My Account) */
  .main-nav .dropdown-menu{
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius-md);
    padding: 10px;
  }
  .main-nav .dropdown-item{
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 12px;
  }
  .main-nav .dropdown-item:hover,
  .main-nav .dropdown-item:focus{
    background: rgba(42,166,163,.10);
    color: var(--primary-700);
  }

  /* Sticky state hook (Phase D toggles .is-sticky on .main-nav) */
  .main-nav.is-sticky{
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-soft);
  }

  /* ===== Buttons ===== */
  .btn{
    border-radius: var(--radius-sm);
  }
  .btn-primary{
    background: var(--primary);
    border-color: var(--primary);
  }
  .btn-primary:hover{
    background: var(--primary-700);
    border-color: var(--primary-700);
  }
  .btn-success{
    background: var(--primary);
    border-color: var(--primary);
  }
  .btn-success:hover{
    background: var(--primary-700);
    border-color: var(--primary-700);
  }
  .btn-danger{
    background: var(--accent);
    border-color: var(--accent);
  }
  .btn-danger:hover{
    filter: brightness(.95);
  }
  .btn-outline-light{
    border-color: rgba(255,255,255,.75);
    color: #fff;
  }
  .btn-outline-light:hover{
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.95);
    color: #fff;
  }

  /* ===== Sections ===== */
  .section{
    padding: var(--section-md) 0;
    background: var(--bg);
  }
  .section-title{
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    line-height: var(--lh-head);
    font-size: var(--h2);
    margin: 0;
  }
  .section-subtitle{
    color: var(--muted);
    max-width: 720px;
    margin-top: 12px;
    font-size: 14px;
  }

  /* ===== HERO ===== */
  .hero{
    background: #0b1b22;
    padding-bottom: 0; /* overlap panel uses its own spacing */
  }
  .hero-bg{
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .hero-bg::after{
    content:"";
    position:absolute;
    inset: 0;
    /* soft haze overlay like screenshot */
    background:
      linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,.35) 100%),
      radial-gradient(1100px 520px at 30% 30%, rgba(42,166,163,.18) 0%, rgba(0,0,0,0) 60%);
  }
  .hero-row{
    min-height: 590px; /* ~75vh feel in screenshot */
    padding: 70px 0 120px; /* extra bottom space for overlapping booking panel */
  }

  .hero-content{
    color: #fff;
    max-width: 640px;
  }
  .hero-badge{
    background: rgba(42,166,163,.92);
    border: 1px solid rgba(255,255,255,.25);
    padding: .55rem .85rem;
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: .2px;
  }
  .hero-title{
    font-family: var(--font-head);
    font-size: var(--h1);
    font-weight: 800;
    line-height: 1.05;
    margin: 0;
    text-shadow: 0 10px 26px rgba(0,0,0,.35);
  }
  .hero-subtitle{
    color: rgba(255,255,255,.85);
    max-width: 560px;
    font-size: 16px;
  }

  /* ===== Floating Booking Panel ===== */
  .hero-booking-wrap{
    position: relative;
    margin-top: -68px; /* overlap like screenshot */
    z-index: 25;
    padding-bottom: 8px;
  }
  .hero-booking{
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
    border: 1px solid rgba(0,0,0,.05);
    overflow: hidden;
  }

  .booking-tabs{
    background: #f3f7f8;
    border-bottom: 1px solid var(--border);
    padding: 0 12px;
  }
  .booking-tab{
    border: 0;
    background: transparent;
    padding: 12px 16px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #4d5e67;
    position: relative;
    transition: background .2s ease, color .2s ease;
  }
  .booking-tab:hover{
    color: var(--primary-700);
  }
  .booking-tab.active{
    color: #fff;
    background: var(--primary);
    border-radius: var(--radius-pill);
    margin: 10px 6px;
    padding: 10px 16px;
    box-shadow: 0 10px 18px rgba(42,166,163,.22);
  }

  .booking-form{
    padding: 18px 18px 20px;
    background: #fff;
  }
  .booking-form .form-label{
    color: #6e7f88;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .2px;
    margin-bottom: 6px;
  }
  .booking-form .form-control,
  .booking-form .form-select{
    height: 46px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    box-shadow: none;
    font-size: 13px;
  }
  .booking-form .form-control:focus,
  .booking-form .form-select:focus{
    border-color: rgba(42,166,163,.55);
    box-shadow: 0 0 0 .2rem rgba(42,166,163,.18);
  }
  .booking-submit{
    height: 46px;
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
  }

  /* ===== WHY FEATURES ===== */
  .section-why{
    background: #fff;
    padding-top: var(--section-lg);
  }
  .feature{
    padding: 10px 6px 0;
  }
  .feature-icon{
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(42,166,163,.25);
    background: rgba(42,166,163,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-700);
    font-size: 28px;
  }
  .feature-title{
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 8px;
  }
  .feature-text{
    color: var(--muted);
    font-size: 13px;
    margin: 0 auto 10px;
    max-width: 260px;
  }
  .feature-link{
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    color: var(--primary-700);
    border-bottom: 1px solid rgba(42,166,163,.35);
    padding-bottom: 2px;
  }
  .feature-link:hover{
    border-bottom-color: var(--primary-700);
  }

  /* ===== PROMO STRIP ===== */
  .promo-strip{
    background: #0b1b22;
  }
  .promo-bg{
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .promo-bg::after{
    content:"";
    position:absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(42,166,163,.72) 0%, rgba(42,166,163,.58) 40%, rgba(42,166,163,.25) 100%),
      rgba(0,0,0,.12);
  }
  .promo-title{
    font-family: var(--font-head);
    font-weight: 800;
    color: #fff;
    letter-spacing: .4px;
  }
  .promo-text{
    color: rgba(255,255,255,.85);
    max-width: 640px;
    margin: 0;
  }
  .promo-meta{
    color: rgba(255,255,255,.85);
  }

  /* ===== POPULAR TOURS ===== */
  .section-popular{
    background: #fff;
  }
  .tour-card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .tour-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 20px 34px rgba(15, 35, 45, 0.14);
  }
  .tour-media img{
    display: block;
    height: 210px;
    object-fit: cover;
  }
  .tour-body{
    padding: 18px 18px 20px;
  }
  .tour-tag{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--radius-pill);
    padding: 6px 10px;
    background: rgba(42,166,163,.10);
    border: 1px solid rgba(42,166,163,.20);
    color: var(--primary-700);
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 11px;
    text-transform: uppercase;
  }
  .tour-title{
    font-family: var(--font-head);
    font-weight: 800;
    margin: 12px 0 8px;
    font-size: 18px;
  }
  .tour-text{
    color: var(--muted);
    font-size: 13.5px;
    margin-bottom: 14px;
  }
  .stars i{
    color: #f2c94c;
    font-size: 12px;
    margin-right: 2px;
  }

  /* Slider dots look */
  .slider-dots{
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .slider-dots .dot{
    width: 10px;
    height: 10px;
    border-radius: 99px;
    border: 0;
    background: #cfe7e7;
    transition: transform .2s ease, background .2s ease;
  }
  .slider-dots .dot.active{
    background: var(--primary);
    transform: scale(1.15);
  }

  /* ===== HAPPY CUSTOMERS ===== */
  .section-happy{
    padding: var(--section-lg) 0;
    background: #10323a;
  }
  .happy-bg{
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .happy-bg::after{
    content:"";
    position:absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(16,50,58,.86) 0%, rgba(16,50,58,.72) 50%, rgba(16,50,58,.55) 100%),
      rgba(0,0,0,.10);
  }
  .happy-photo img{
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
    border: 1px solid rgba(255,255,255,.12);
  }

  .progress{
    height: 10px;
    border-radius: 99px;
    background: rgba(255,255,255,.18);
    overflow: hidden;
  }
  .progress-bar{
    background: var(--primary);
  }

  /* ===== PARTNERS STRIP ===== */
  .partners-strip{
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.05);
    border-bottom: 1px solid rgba(0,0,0,.05);
  }
  .partner-badge{
    padding: 14px 10px;
    border: 1px dashed rgba(0,0,0,.18);
    border-radius: var(--radius-sm);
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: 1px;
    color: rgba(0,0,0,.40);
    text-transform: uppercase;
    background: #fafcfc;
  }

  /* ===== DESTINATIONS ===== */
  .section-destinations{
    background: #fff;
    padding-top: var(--section-lg);
    padding-bottom: var(--section-md);
  }
  .mini-card{
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: #fff;
    padding: 22px 20px;
    box-shadow: var(--shadow-card);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .mini-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 30px rgba(15, 35, 45, 0.13);
  }
  .mini-card-icon{
    width: 54px;
    height: 54px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(42,166,163,.10);
    border: 1px solid rgba(42,166,163,.22);
    color: var(--primary-700);
    font-size: 20px;
    margin-bottom: 12px;
  }
  .mini-card-title{
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 17px;
    margin-bottom: 8px;
  }
  .mini-card-text{
    color: var(--muted);
    margin: 0;
    font-size: 13.5px;
  }

  /* ===== TIPS ===== */
  .section-tips{
    background: #fff;
    padding-top: 0;
    padding-bottom: var(--section-lg);
  }
  .tips-media img{
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    object-fit: cover;
    width: 100%;
    min-height: 360px;
  }
  .tip-item{
    padding: 12px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: #fff;
  }
  .tip-icon{
    width: 42px;
    height: 42px;
    border-radius: var(--radius-pill);
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(42,166,163,.10);
    border: 1px solid rgba(42,166,163,.22);
    color: var(--primary-700);
    flex: 0 0 auto;
  }

  /* ===== CONTACT ===== */
  .section-contact{
    background: var(--bg);
    padding-top: var(--section-md);
    padding-bottom: var(--section-lg);
  }
  .contact-card{
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    padding: 26px 24px;
  }
  .contact-icon{
    width: 42px;
    height: 42px;
    border-radius: var(--radius-pill);
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(42,166,163,.10);
    border: 1px solid rgba(42,166,163,.22);
    color: var(--primary-700);
    flex: 0 0 auto;
  }
  .social-btn{
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border: 1px solid var(--border);
    background: #fff;
    color: #4a5a63;
    text-decoration:none;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .social-btn:hover{
    transform: translateY(-2px);
    background: rgba(42,166,163,.10);
    border-color: rgba(42,166,163,.30);
    color: var(--primary-700);
  }

  /* ===== FOOTER ===== */
  .site-footer{
    background: #0f242b;
    color: rgba(255,255,255,.86);
    position: relative;
  }
  
  /* Footer brand contrast */
  .site-footer .brand-title{ color: #fff; }
  .site-footer .brand-title-accent{ color: var(--primary); }
  .site-footer .brand-sub{ color: rgba(255,255,255,.72); }
  .site-footer .brand-mark--logo{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; box-shadow: none; }

  .footer-top{
    background: #0f242b;
  }
  .footer-title{
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 14px;
    color: #fff;
  }
  .footer-text{
    color: rgba(255,255,255,.72);
    margin: 0;
  }
  .footer-links li{
    margin-bottom: 10px;
  }
  .footer-links a{
    text-decoration: none;
    color: rgba(255,255,255,.78);
  }
  .footer-links a:hover{
    color: #fff;
  }
  .footer-social{
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.88);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .footer-social:hover{
    transform: translateY(-2px);
    background: rgba(42,166,163,.20);
    border-color: rgba(42,166,163,.28);
    color: #fff;
  }
  .newsletter .form-control{
    height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: #fff;
  }
  .newsletter .form-control::placeholder{
    color: rgba(255,255,255,.55);
  }
  .newsletter .form-control:focus{
    border-color: rgba(42,166,163,.55);
    box-shadow: 0 0 0 .2rem rgba(42,166,163,.18);
    background: rgba(255,255,255,.08);
    color: #fff;
  }
  .footer-phone{
    font-family: var(--font-head);
    font-weight: 800;
    color: rgba(42,166,163,.95);
    font-size: 18px;
    letter-spacing: .4px;
  }

  .footer-bottom{
    background: #0c1c21;
    color: rgba(255,255,255,.70);
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }
  .footer-bottom a{
    color: rgba(255,255,255,.70);
  }
  .footer-bottom a:hover{
    color: #fff;
  }

  /* ===== Back To Top ===== */
  .back-to-top{
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(42,166,163,.92);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease, background .18s ease;
    z-index: 1100;
  }
  .back-to-top:hover{
    background: var(--primary-700);
  }
  .back-to-top.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* ===== Floating WhatsApp/Call ===== */
  .floating-actions{
    position: fixed;
    left: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1095;
  }

  .floating-actions .fab{
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0,0,0,.06);
    color: #fff;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    position: relative;
  }
  .floating-actions .fab:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-float);
    filter: saturate(1.02);
  }

  .floating-actions .fab__icon{
    font-size: 20px;
    line-height: 1;
  }

  .floating-actions .fab--whatsapp{
    background: #25D366;
  }
  .floating-actions .fab--call{
    background: var(--primary);
  }

  .floating-actions .fab:focus-visible{
    outline: 3px solid rgba(42,166,163,.35);
    outline-offset: 3px;
  }

  .floating-actions .fab__label{
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: rgba(255,255,255,.98);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 10px;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .25px;
    white-space: nowrap;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
  }

  @media (min-width: 576px){
    .floating-actions .fab:hover .fab__label,
    .floating-actions .fab:focus-visible .fab__label{
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }
  }

  @media (max-width: 575.98px){
    .floating-actions .fab__label{ display: none; }
  }

  /* ===== Responsive Adjustments ===== */
  @media (max-width: 991.98px){
    :root{
      --h1: 40px;
      --h2: 28px;
    }
    .hero-row{
      min-height: 560px;
      padding: 60px 0 140px;
    }
    .hero-title{ font-size: var(--h1); }
    .hero-booking-wrap{ margin-top: -78px; }
    .tips-media img{ min-height: 300px; }

    .page-hero{
      padding: 82px 0 60px;
    }
    .page-hero .page-title{
      font-size: 36px;
    }
  }

  @media (max-width: 575.98px){
    :root{
      --h1: 34px;
      --h2: 24px;
      --section-lg: 72px;
      --section-md: 56px;
      --section-sm: 42px;
    }
    .hero-row{
      min-height: 560px;
      padding: 56px 0 150px;
    }
    .booking-tabs{
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      gap: 6px;
      padding: 10px 10px;
    }
    .booking-tab{
      white-space: nowrap;
      padding: 10px 14px;
      font-size: 11px;
    }
    .booking-tab.active{
      margin: 0;
    }
    .booking-form{
      padding: 16px 14px 18px;
    }

    /* Mobile polish: typography, spacing, and layout */
    .section{ padding: var(--section-sm) 0; }

    .page-hero{
      padding: 76px 0 54px;
    }
    .page-hero .page-title{
      font-size: 30px;
      line-height: 1.12;
    }
    .page-hero .page-subtitle{
      font-size: 14px;
    }
    .page-hero .btn{
      width: 100%;
    }

    .tours-hero-card,
    .packages-hero-card,
    .destinations-hero-card,
    .tips-hero-card,
    .about-hero-card,
    .contact-hero-card,
    .account-hero-card{
      padding: 16px;
    }
    .tours-hero-card-header,
    .packages-hero-card-header,
    .destinations-hero-card-header,
    .tips-hero-card-header,
    .about-hero-card-header,
    .contact-hero-card-header,
    .account-hero-card-header{
      flex-direction: column;
      align-items: flex-start;
    }
    .price-tag{
      align-self: flex-start;
    }

    /* Filter bars: horizontal scroll beats 2-3 wrapped rows */
    .filter-bar{
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
      padding-bottom: 6px;
    }
    .filter-pill{
      flex: 0 0 auto;
      scroll-snap-align: start;
    }

    /* Card layout: avoid squeezed price+button rows */
    .tour-footer,
    .package-footer{
      flex-direction: column;
      align-items: stretch;
    }
    .tour-footer .btn,
    .package-footer .btn{
      width: 100%;
    }

    .tour-media img,
    .package-media img,
    .destination-media img{
      height: 190px;
    }

    .detail-card,
    .form-card,
    .contact-info-card,
    .builder-card{
      padding: 18px;
    }

    .newsletter{
      flex-direction: column;
    }
    .newsletter .btn{
      width: 100%;
    }
  }
/* ===== Page Hero ===== */
.page-hero{
  background: #0b1b22;
  color: #fff;
  position: relative;
  padding: 90px 0 70px;
  overflow: hidden;
}
.page-hero::after{
  content:"";
  position:absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.35) 100%),
    radial-gradient(900px 420px at 30% 30%, rgba(42,166,163,.18) 0%, rgba(0,0,0,0) 60%);
}
.page-hero .page-hero-content{
  position: relative;
  z-index: 2;
}
.page-hero .page-title{
  font-family: var(--font-head);
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
}
.page-hero .page-subtitle{
  color: rgba(255,255,255,.82);
  max-width: 720px;
  margin-top: 12px;
}


/* ===== Tours Page ===== */
.tours-hero{
  background: #0b1b22;
  position: relative;
}
.tours-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/ato-aikins-8tZcb2l0jsA-unsplash.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.35;
}
.tours-hero .page-hero-content{
  position: relative;
  z-index: 2;
}
.tours-hero-pill{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 12px;
}
.tours-hero-pill .badge{
  background: rgba(42,166,163,.92);
  font-weight: 700;
  letter-spacing: .2px;
}
.tours-hero-stats .stat-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.2);
  font-size: 12px;
}
.tours-hero-card{
  background: #fff;
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-float);
  border: 1px solid var(--border);
}
.tours-hero-card-header{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.tours-hero-card-header h3{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  margin: 4px 0 2px;
}
.price-tag{
  background: rgba(42,166,163,.12);
  color: var(--primary-700);
  border: 1px solid rgba(42,166,163,.28);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-weight: 800;
  height: fit-content;
}
.tours-hero-list{
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
  color: #4a5a63;
}
.tours-hero-list i{
  color: var(--primary-700);
  margin-right: 8px;
}

.tours-highlights{ background: #fff; }
.highlight-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 24px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.highlight-card h3{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 16px;
  margin: 12px 0 8px;
}
.highlight-card p{ color: var(--muted); margin: 0; }
.highlight-icon{
  width: 58px;
  height: 58px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(42,166,163,.12);
  border: 1px solid rgba(42,166,163,.22);
  color: var(--primary-700);
  font-size: 22px;
}

.tours-grid{ background: #fff; }
.tours-filter{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.filter-pill{
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #4a5a63;
}
.filter-pill.active,
.filter-pill:hover{
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.tours-card .tour-media{
  position: relative;
}
.tour-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.tour-info{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #4a5a63;
  margin-bottom: 12px;
}
.tour-info i{ color: var(--primary-700); margin-right: 4px; }
.tour-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tour-price{
  font-weight: 800;
  color: var(--primary-700);
}

.tours-detail{ background: #f9fbfb; }
.detail-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 26px;
  box-shadow: var(--shadow-card);
}
.detail-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 18px 0;
  color: #4a5a63;
  font-size: 13px;
}
.detail-meta i{ color: var(--primary-700); margin-right: 6px; }
.detail-inclusions h3{
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 10px;
}
.detail-inclusions ul{
  padding-left: 18px;
  color: var(--muted);
  margin: 0 0 18px;
}
.detail-cta{ display: flex; flex-wrap: wrap; gap: 10px; }
.itinerary-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.itinerary-list li{
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #f9fcfc;
}
.itinerary-list .time{
  font-weight: 800;
  font-family: var(--font-head);
}

.tours-pricing{ background: #fff; }
.price-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 24px;
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
}
.price-card h3{
  font-family: var(--font-head);
  font-weight: 800;
  margin: 0;
}
.price-card .price{
  font-size: 22px;
  font-weight: 800;
  color: var(--primary-700);
}
.price-card ul{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}
.price-card.featured{
  border-color: rgba(42,166,163,.45);
  box-shadow: var(--shadow-float);
}

.tours-gallery{ background: #f9fbfb; }
.gallery-img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.tours-faq{ background: #fff; }
.tours-faq .accordion-button{
  font-weight: 700;
  font-family: var(--font-head);
}
.tours-faq .accordion-item{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
}
.tours-faq .accordion-button:not(.collapsed){
  background: rgba(42,166,163,.12);
  color: var(--primary-700);
}

@media (max-width: 991.98px){
  .tours-hero::before{ opacity: 0.28; }
  .itinerary-list li{ grid-template-columns: 1fr; }
  .gallery-img{ height: 200px; }
}

@media (max-width: 575.98px){
  .tours-hero-card{ margin-top: 20px; }
  .gallery-img{ height: 180px; }
}
/* ===== End Tours Page ===== */


/* ===== Packages Page ===== */
.packages-hero{
  background: #0b1b22;
  position: relative;
}
.packages-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/istockphoto-1272079552-612x612.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.35;
}
.packages-hero .page-hero-content{
  position: relative;
  z-index: 2;
}
.packages-hero-pill{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 12px;
}
.packages-hero-pill .badge{
  background: rgba(42,166,163,.92);
  font-weight: 700;
  letter-spacing: .2px;
}
.packages-hero-stats .stat-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.2);
  font-size: 12px;
}
.packages-hero-card{
  background: #fff;
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-float);
  border: 1px solid var(--border);
}
.packages-hero-card-header{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.packages-hero-card-header h3{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  margin: 4px 0 2px;
}
.packages-hero-list{
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
  color: #4a5a63;
}
.packages-hero-list i{
  color: var(--primary-700);
  margin-right: 8px;
}

.packages-highlights{ background: #fff; }
.packages-grid{ background: #fff; }
.packages-filter{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.package-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.package-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 34px rgba(15, 35, 45, 0.14);
}
.package-media{
  position: relative;
}
.package-media img{
  display: block;
  height: 210px;
  object-fit: cover;
}
.package-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.package-body{
  padding: 18px 18px 20px;
}
.package-title{
  font-family: var(--font-head);
  font-weight: 800;
  margin: 0 0 8px;
  font-size: 18px;
}
.package-text{
  color: var(--muted);
  font-size: 13.5px;
  margin-bottom: 14px;
}
.package-info{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #4a5a63;
  margin-bottom: 12px;
}
.package-info i{ color: var(--primary-700); margin-right: 4px; }
.package-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.package-price{
  font-weight: 800;
  color: var(--primary-700);
}

.packages-builder{ background: #f9fbfb; }
.builder-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.builder-list{
  display: grid;
  gap: 14px;
  margin: 18px 0 22px;
}
.builder-item{
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
}
.builder-step{
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: rgba(42,166,163,.12);
  border: 1px solid rgba(42,166,163,.22);
  color: var(--primary-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--font-head);
}
.builder-item h4{
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 4px;
}
.builder-item p{ margin: 0; color: var(--muted); font-size: 13.5px; }
.builder-media img{
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  object-fit: cover;
  width: 100%;
  min-height: 320px;
}

.packages-pricing{ background: #fff; }
.packages-testimonials{ background: #f9fbfb; }
.testimonial-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 22px;
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 12px;
}
.testimonial-stars i{ color: #f2c94c; }

.packages-faq{ background: #fff; }
.packages-faq .accordion-button{
  font-weight: 700;
  font-family: var(--font-head);
}
.packages-faq .accordion-item{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
}
.packages-faq .accordion-button:not(.collapsed){
  background: rgba(42,166,163,.12);
  color: var(--primary-700);
}

@media (max-width: 991.98px){
  .packages-hero::before{ opacity: 0.28; }
}

@media (max-width: 575.98px){
  .packages-hero-card{ margin-top: 20px; }
}
/* ===== End Packages Page ===== */


/* ===== Destinations Page ===== */
.destinations-hero{
  background: #0b1b22;
  position: relative;
}
.destinations-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/istockphoto-471448873-612x612.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.35;
}
.destinations-hero .page-hero-content{
  position: relative;
  z-index: 2;
}
.destinations-hero-pill{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 12px;
}
.destinations-hero-pill .badge{
  background: rgba(42,166,163,.92);
  font-weight: 700;
  letter-spacing: .2px;
}
.destinations-hero-stats .stat-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.2);
  font-size: 12px;
}
.destinations-hero-card{
  background: #fff;
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-float);
  border: 1px solid var(--border);
}
.destinations-hero-card-header{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.destinations-hero-card-header h3{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  margin: 4px 0 2px;
}
.destinations-hero-list{
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
  color: #4a5a63;
}
.destinations-hero-list i{
  color: var(--primary-700);
  margin-right: 8px;
}

.destinations-highlights{ background: #fff; }
.destinations-grid{ background: #fff; }
.destinations-filter{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.destination-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.destination-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 34px rgba(15, 35, 45, 0.14);
}
.destination-media{
  position: relative;
}
.destination-media img{
  display: block;
  height: 210px;
  object-fit: cover;
}
.destination-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.destination-body{
  padding: 18px 18px 20px;
}
.destination-title{
  font-family: var(--font-head);
  font-weight: 800;
  margin: 0 0 8px;
  font-size: 18px;
}
.destination-text{
  color: var(--muted);
  font-size: 13.5px;
  margin-bottom: 14px;
}
.destination-info{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #4a5a63;
  margin-bottom: 12px;
}
.destination-info i{ color: var(--primary-700); margin-right: 4px; }

.destinations-map{ background: #f9fbfb; }
.map-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.map-list{
  list-style: none;
  padding: 0;
  margin: 18px 0 22px;
  display: grid;
  gap: 10px;
  color: #4a5a63;
}
.map-list i{
  color: var(--primary-700);
  margin-right: 8px;
}
.map-media img{
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  object-fit: cover;
  width: 100%;
  min-height: 320px;
}

.destinations-packages{ background: #fff; }
.destinations-faq{ background: #fff; }
.destinations-faq .accordion-button{
  font-weight: 700;
  font-family: var(--font-head);
}
.destinations-faq .accordion-item{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
}
.destinations-faq .accordion-button:not(.collapsed){
  background: rgba(42,166,163,.12);
  color: var(--primary-700);
}

@media (max-width: 991.98px){
  .destinations-hero::before{ opacity: 0.28; }
}

@media (max-width: 575.98px){
  .destinations-hero-card{ margin-top: 20px; }
}
/* ===== End Destinations Page ===== */


/* ===== Tips Page ===== */
.tips-hero{
  background: #0b1b22;
  position: relative;
}
.tips-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/istockphoto-1297777055-612x612.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.35;
}
.tips-hero .page-hero-content{
  position: relative;
  z-index: 2;
}
.tips-hero-pill{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 12px;
}
.tips-hero-pill .badge{
  background: rgba(42,166,163,.92);
  font-weight: 700;
  letter-spacing: .2px;
}
.tips-hero-stats .stat-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.2);
  font-size: 12px;
}
.tips-hero-card{
  background: #fff;
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-float);
  border: 1px solid var(--border);
}
.tips-hero-card-header{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.tips-hero-card-header h3{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  margin: 4px 0 2px;
}
.tips-hero-list{
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
  color: #4a5a63;
}
.tips-hero-list i{
  color: var(--primary-700);
  margin-right: 8px;
}

.tips-guides{ background: #fff; }
.tip-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 24px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.tip-card h3{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 16px;
  margin: 12px 0 8px;
}
.tip-card p{ color: var(--muted); margin: 0; }

.tips-checklist{ background: #f9fbfb; }
.checklist-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.checklist-list{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
  color: #4a5a63;
}
.checklist-list i{
  color: var(--primary-700);
  margin-right: 8px;
}
.checklist-media img{
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  object-fit: cover;
  width: 100%;
  min-height: 320px;
}

.tips-etiquette{ background: #fff; }
.etiquette-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 22px;
  box-shadow: var(--shadow-card);
}

.tips-articles{ background: #f9fbfb; }
.tip-article{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.tip-article img{
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.tip-article-body{
  padding: 18px 18px 20px;
}
.tip-article-body h3{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 6px;
}
.tip-article-body p{ color: var(--muted); margin-bottom: 10px; }
.tip-article-body a{
  text-decoration: none;
  font-weight: 700;
  color: var(--primary-700);
}

.tips-faq{ background: #fff; }
.tips-faq .accordion-button{
  font-weight: 700;
  font-family: var(--font-head);
}
.tips-faq .accordion-item{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
}
.tips-faq .accordion-button:not(.collapsed){
  background: rgba(42,166,163,.12);
  color: var(--primary-700);
}

@media (max-width: 991.98px){
  .tips-hero::before{ opacity: 0.28; }
}

@media (max-width: 575.98px){
  .tips-hero-card{ margin-top: 20px; }
}
/* ===== End Tips Page ===== */


/* ===== Coming Soon Page ===== */
.coming-hero{
  background: linear-gradient(120deg, rgba(11,27,34,0.98), rgba(11,27,34,0.78)),
              url("../img/istockphoto-471448873-612x612.jpg");
  background-size: cover;
  background-position: center;
  padding: 90px 0;
  color: #fff;
}
.coming-hero-content{
  max-width: 520px;
}
.coming-hero-content h1{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 42px;
  line-height: 1.1;
  margin: 14px 0 16px;
}
.coming-hero-content p{
  color: rgba(255,255,255,.8);
  font-size: 16px;
}
.coming-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  font-size: 12px;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-weight: 700;
}
.coming-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.coming-meta{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}
.coming-meta span{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: rgba(255,255,255,.65);
}
.coming-meta strong{
  display: block;
  font-size: 16px;
}
.coming-card{
  background: #fff;
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-float);
  border: 1px solid var(--border);
}
.coming-card-header h3{
  font-family: var(--font-head);
  font-weight: 800;
  margin: 0 0 6px;
}
.coming-card-header p{
  color: var(--muted);
  margin: 0 0 18px;
}
.coming-list{
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 12px;
}
.coming-list i{
  color: var(--primary-700);
  margin-right: 8px;
}
.coming-newsletter h4{
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 10px;
}
.coming-newsletter small{
  display: block;
  margin-top: 8px;
}

@media (max-width: 991.98px){
  .coming-hero{
    padding: 70px 0;
  }
  .coming-hero-content h1{
    font-size: 34px;
  }
}

@media (max-width: 575.98px){
  .coming-meta{
    grid-template-columns: 1fr;
  }
}
/* ===== End Coming Soon Page ===== */


/* ===== About Page ===== */
.about-hero{
  background: #0b1b22;
  position: relative;
}
.about-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/istockphoto-1272079552-612x612.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.35;
}
.about-hero .page-hero-content{
  position: relative;
  z-index: 2;
}
.about-hero-pill{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 12px;
}
.about-hero-pill .badge{
  background: rgba(42,166,163,.92);
  font-weight: 700;
  letter-spacing: .2px;
}
.about-hero-stats .stat-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.2);
  font-size: 12px;
}
.about-hero-card{
  background: #fff;
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-float);
  border: 1px solid var(--border);
}
.about-hero-card-header{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.about-hero-card-header h3{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  margin: 4px 0 2px;
}
.about-hero-list{
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
  color: #4a5a63;
}
.about-hero-list i{
  color: var(--primary-700);
  margin-right: 8px;
}

.about-mission{ background: #f9fbfb; }
.mission-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.mission-list{
  list-style: none;
  padding: 0;
  margin: 18px 0 22px;
  display: grid;
  gap: 10px;
  color: #4a5a63;
}
.mission-list i{ color: var(--primary-700); margin-right: 8px; }
.mission-media img{
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  object-fit: cover;
  width: 100%;
  min-height: 320px;
}

.about-values{ background: #fff; }
.value-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 22px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.value-icon{
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(42,166,163,.12);
  border: 1px solid rgba(42,166,163,.22);
  color: var(--primary-700);
  font-size: 22px;
  margin-bottom: 12px;
}

.about-team{ background: #f9fbfb; }
.team-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.team-card img{
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.team-body{
  padding: 18px 18px 20px;
}
.team-body h3{
  font-family: var(--font-head);
  font-weight: 800;
  margin: 0 0 6px;
}
.team-body p{ color: var(--muted); margin: 0; }

.about-story{ background: #fff; }
.story-media img{
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  object-fit: cover;
  width: 100%;
  min-height: 320px;
}
.story-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.story-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 20px;
}
.story-stats strong{
  display: block;
  font-family: var(--font-head);
  font-size: 20px;
}
.story-stats span{ color: var(--muted); font-size: 12px; }

@media (max-width: 991.98px){
  .about-hero::before{ opacity: 0.28; }
  .story-stats{ grid-template-columns: 1fr; }
}

@media (max-width: 575.98px){
  .about-hero-card{ margin-top: 20px; }
}
/* ===== End About Page ===== */


/* ===== Contact Page ===== */
.contact-hero{
  background: #0b1b22;
  position: relative;
}
.contact-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/istockphoto-1208861874-612x612.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.35;
}
.contact-hero .page-hero-content{
  position: relative;
  z-index: 2;
}
.contact-hero-pill{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 12px;
}
.contact-hero-pill .badge{
  background: rgba(42,166,163,.92);
  font-weight: 700;
  letter-spacing: .2px;
}
.contact-hero-stats .stat-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.2);
  font-size: 12px;
}
.contact-hero-card{
  background: #fff;
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-float);
  border: 1px solid var(--border);
}
.contact-hero-card-header{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.contact-hero-card-header h3{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  margin: 4px 0 2px;
}
.contact-hero-list{
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
  color: #4a5a63;
}
.contact-hero-list i{
  color: var(--primary-700);
  margin-right: 8px;
}

.contact-form{ background: #fff; }
.form-card{
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.form-card .form-control,
.form-card .form-select,
.form-card textarea{
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: none;
}
.form-card .form-control:focus,
.form-card .form-select:focus,
.form-card textarea:focus{
  border-color: rgba(42,166,163,.55);
  box-shadow: 0 0 0 .2rem rgba(42,166,163,.18);
}

.contact-info-card{
  background: #f9fbfb;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.contact-info-list{
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}
.contact-info-list span{
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
}
.contact-info-list strong{
  font-size: 16px;
}
.contact-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.contact-badges span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  padding: 6px 12px;
  font-size: 12px;
}
.contact-map img{
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  min-height: 220px;
  object-fit: cover;
}

.contact-faq{ background: #fff; }
.contact-faq .accordion-button{
  font-weight: 700;
  font-family: var(--font-head);
}
.contact-faq .accordion-item{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
}
.contact-faq .accordion-button:not(.collapsed){
  background: rgba(42,166,163,.12);
  color: var(--primary-700);
}

@media (max-width: 991.98px){
  .contact-hero::before{ opacity: 0.28; }
}

@media (max-width: 575.98px){
  .contact-hero-card{ margin-top: 20px; }
}
/* ===== End Contact Page ===== */


.topbar .text-muted{ color: rgba(255,255,255,.65) !important; }

/* ===== Account Pages ===== */
.account-hero{
  background: #0b1b22;
  position: relative;
}
.account-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/istockphoto-1297777055-612x612.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.32;
}
.account-hero .page-hero-content{
  position: relative;
  z-index: 2;
}

#account-dashboard .section,
#account-bookings .section,
#account-booking-view .section,
#account-profile .section,
#account-change-password .section{
  background: #f9fbfb;
}

#account-dashboard .card,
#account-bookings .card,
#account-booking-view .card,
#account-profile .card,
#account-change-password .card{
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

#account-dashboard .card-body,
#account-bookings .card-body,
#account-booking-view .card-body,
#account-profile .card-body,
#account-change-password .card-body{
  padding: 22px;
}

#account-dashboard .h3{
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--text);
}

#account-dashboard .account-kpis{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

#account-dashboard .account-kpi{
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  padding: 18px 18px 16px;
}

#account-dashboard .account-kpi::before{
  content: "";
  position: absolute;
  right: -52px;
  top: -52px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(42,166,163,.10);
}

#account-dashboard .account-kpi__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(42,166,163,.12);
  border: 1px solid rgba(42,166,163,.22);
  color: var(--primary-700);
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

#account-dashboard .account-kpi__label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

#account-dashboard .account-kpi__value{
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 28px;
  margin-top: 8px;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}

#account-dashboard .account-kpi__hint{
  margin-top: 6px;
  color: #50646e;
  font-size: 13px;
  position: relative;
  z-index: 1;
}

#account-dashboard .account-card-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

#account-dashboard .account-card-title{
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 16px;
  margin: 0;
}

#account-dashboard .account-card-sub{
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

#account-dashboard .account-user{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
}

#account-dashboard .account-avatar{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(42,166,163,.12);
  border: 1px solid rgba(42,166,163,.22);
  color: var(--primary-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 20px;
}

#account-dashboard .account-user__name{
  font-family: var(--font-head);
  font-weight: 900;
  margin: 0;
}

#account-dashboard .account-user__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  color: #50646e;
  font-size: 13px;
}

#account-dashboard .account-user__meta .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#account-dashboard .account-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 700;
}

#account-dashboard .status-tag,
#account-bookings .status-tag,
#account-booking-view .status-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  border: 1px solid transparent;
}

#account-dashboard .status-tag--info,
#account-bookings .status-tag--info,
#account-booking-view .status-tag--info{
  background: rgba(42,166,163,.12);
  border-color: rgba(42,166,163,.26);
  color: var(--primary-700);
}

#account-dashboard .status-tag--success,
#account-bookings .status-tag--success,
#account-booking-view .status-tag--success{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.26);
  color: #166534;
}

#account-dashboard .status-tag--warning,
#account-bookings .status-tag--warning,
#account-booking-view .status-tag--warning{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.28);
  color: #7c2d12;
}

#account-dashboard .status-tag--danger,
#account-bookings .status-tag--danger,
#account-booking-view .status-tag--danger{
  background: rgba(231,76,60,.12);
  border-color: rgba(231,76,60,.26);
  color: #7f1d1d;
}

#account-dashboard .account-chips,
#account-bookings .account-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

#account-dashboard .account-chip,
#account-bookings .account-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(42,166,163,.08);
  border: 1px solid rgba(42,166,163,.18);
  font-weight: 800;
  font-size: 12px;
  color: #345158;
}

#account-bookings .account-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#account-bookings .account-toolbar h2{
  font-family: var(--font-head);
  font-weight: 900;
  margin: 0;
}

#account-bookings .account-toolbar-sub{
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

#account-bookings .account-filters{
  display: grid;
  grid-template-columns: 1fr 160px 160px auto;
  gap: 10px;
  align-items: end;
}

#account-bookings .account-filters .form-control,
#account-bookings .account-filters .form-select{
  height: 44px;
}

#account-bookings .account-cell-title{
  font-family: var(--font-head);
  font-weight: 900;
}

#account-bookings .account-cell-sub{
  color: #50646e;
  font-size: 13px;
  margin-top: 3px;
}

#account-bookings .account-actions-col{
  text-align: right;
  white-space: nowrap;
}

#account-profile .account-toolbar,
#account-change-password .account-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#account-profile .account-toolbar h2,
#account-change-password .account-toolbar h2{
  font-family: var(--font-head);
  font-weight: 900;
  margin: 0;
}

#account-profile .account-toolbar-sub,
#account-change-password .account-toolbar-sub{
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

#account-profile .account-card-head,
#account-change-password .account-card-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

#account-profile .account-card-title,
#account-change-password .account-card-title{
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 16px;
  margin: 0;
}

#account-profile .account-card-sub,
#account-change-password .account-card-sub{
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

#account-profile .account-user,
#account-change-password .account-user{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
}

#account-profile .account-avatar,
#account-change-password .account-avatar{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(42,166,163,.12);
  border: 1px solid rgba(42,166,163,.22);
  color: var(--primary-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 20px;
}

#account-profile .account-user__name,
#account-change-password .account-user__name{
  font-family: var(--font-head);
  font-weight: 900;
  margin: 0;
}

#account-profile .account-user__meta,
#account-change-password .account-user__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  color: #50646e;
  font-size: 13px;
}

#account-profile .account-user__meta .mono,
#account-change-password .account-user__meta .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#account-profile .account-sticky,
#account-change-password .account-sticky{
  position: sticky;
  top: 90px;
}

#account-profile .account-help,
#account-change-password .account-help{
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

#account-profile .account-kpi-mini{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

#account-profile .account-kpi-mini .item{
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #fff;
}

#account-profile .account-kpi-mini .item .label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

#account-profile .account-kpi-mini .item .value{
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 16px;
  margin-top: 6px;
  color: #1f2a30;
}

@media (max-width: 991.98px){
  #account-profile .account-sticky,
  #account-change-password .account-sticky{
    position: static;
  }
}

@media (max-width: 991.98px){
  #account-bookings .account-filters{
    grid-template-columns: 1fr 1fr;
  }
  #account-bookings .account-filters .btn{
    grid-column: 1 / -1;
    width: 100%;
  }
}

#account-dashboard .table,
#account-bookings .table{
  border-collapse: separate;
  border-spacing: 0;
}

#account-dashboard .table thead th,
#account-bookings .table thead th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  border-bottom-width: 1px;
}

#account-dashboard .table tbody td,
#account-bookings .table tbody td{
  font-size: 14px;
  padding-top: 13px;
  padding-bottom: 13px;
}

#account-dashboard .table tbody tr:hover td,
#account-bookings .table tbody tr:hover td{
  background: rgba(42,166,163,.06);
}

#account-dashboard .badge.bg-secondary,
#account-bookings .badge.bg-secondary{
  background: rgba(42,166,163,.16) !important;
  color: var(--primary-700);
  border: 1px solid rgba(42,166,163,.28);
}

#account-booking-view .fw-semibold{
  color: #1f2a30;
}

#account-profile .form-control[readonly]{
  background: #f3f7f8;
}

#account-login .contact-card,
#account-register .contact-card,
#account-forgot-password .contact-card,
#account-reset-password .contact-card{
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-float);
}

#account-login .form-label,
#account-register .form-label,
#account-profile .form-label,
#account-change-password .form-label,
#account-forgot-password .form-label,
#account-reset-password .form-label{
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #4d5e67;
}

#account-login .btn,
#account-register .btn,
#account-forgot-password .btn,
#account-reset-password .btn,
#account-profile .btn,
#account-change-password .btn{
  font-weight: 700;
}

#account-login .alert,
#account-register .alert,
#account-profile .alert,
#account-change-password .alert,
#account-forgot-password .alert,
#account-reset-password .alert{
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

#account-login .alert-danger,
#account-register .alert-danger,
#account-profile .alert-danger,
#account-change-password .alert-danger,
#account-forgot-password .alert-danger,
#account-reset-password .alert-danger{
  background: rgba(231,76,60,.1);
  border-color: rgba(231,76,60,.22);
  color: #7f1d1d;
}

#account-profile .alert-success,
#account-change-password .alert-success,
#account-forgot-password .alert-success,
#account-reset-password .alert-success{
  background: rgba(42,166,163,.12);
  border-color: rgba(42,166,163,.24);
  color: #0f5a4d;
}

@media (max-width: 991.98px){
  .account-hero::before{ opacity: 0.26; }

  #account-dashboard .account-kpis{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px){
  #account-dashboard .account-kpis{
    grid-template-columns: 1fr;
  }

  #account-dashboard .card-body,
  #account-bookings .card-body,
  #account-booking-view .card-body,
  #account-profile .card-body,
  #account-change-password .card-body{
    padding: 18px;
  }
}
/* ===== End Account Pages ===== */