  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      font-family: 'Poppins', sans-serif;
      overflow-x: hidden;
  }

  /* Preloader */
  .preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #0F766E 0%, #14B8A6 100%);
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      transition: opacity 0.5s ease, visibility 0.5s ease;
  }

  .preloader.hidden {
      opacity: 0;
      visibility: hidden;
  }

  .preloader-text {
      color: white;
      font-size: 1.5rem;
      font-weight: 700;
      font-family: 'Playfair Display', serif;
      letter-spacing: 3px;
      margin-top: 15px;
  }

  .preloader-dots span {
      display: inline-block;
      width: 8px;
      height: 8px;
      background: white;
      border-radius: 50%;
      margin: 0 4px;
      animation: dotBounce 1.4s ease-in-out infinite;
  }

  .preloader-dots span:nth-child(2) {
      animation-delay: 0.2s;
  }

  .preloader-dots span:nth-child(3) {
      animation-delay: 0.4s;
  }

  @keyframes dotBounce {

      0%,
      80%,
      100% {
          transform: scale(0.6);
          opacity: 0.5;
      }

      40% {
          transform: scale(1);
          opacity: 1;
      }
  }

  @keyframes flyPlane {

      0%,
      100% {
          transform: translateX(0) translateY(0) rotate(0deg);
      }

      25% {
          transform: translateX(20px) translateY(-10px) rotate(5deg);
      }

      50% {
          transform: translateX(0) translateY(-20px) rotate(0deg);
      }

      75% {
          transform: translateX(-20px) translateY(-10px) rotate(-5deg);
      }
  }

  .preloader-plane {
      animation: flyPlane 2s ease-in-out infinite;
  }

  /* Scrollbar */
  ::-webkit-scrollbar {
      width: 8px;
  }

  ::-webkit-scrollbar-track {
      background: #f1f1f1;
  }

  ::-webkit-scrollbar-thumb {
      background: #0F766E;
      border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb:hover {
      background: #0D5D56;
  }

  /* Navbar */
  .navbar-scrolled {
      background: rgba(255, 255, 255, 0.98) !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      backdrop-filter: blur(20px);
  }

  .navbar-scrolled .nav-link {
      color: #1E293B !important;
  }

  .navbar-scrolled .nav-logo {
      color: #0F766E !important;
  }

  .navbar-scrolled .nav-cta {
      background: #0F766E !important;
      color: white !important;
  }

  .navbar-scrolled .menu-icon {
      color: #1E293B !important;
  }

  /* Mobile Menu */
  .mobile-menu {
      transform: translateX(100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mobile-menu.active {
      transform: translateX(0);
  }

  .mobile-overlay {
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
  }

  .mobile-overlay.active {
      opacity: 1;
      visibility: visible;
  }

  /* Dropdown */
  .dropdown-menu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.3s ease;
  }

  .dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  /* Page Hero */
  .page-hero-overlay {
      background: linear-gradient(135deg, rgba(15, 118, 110, 0.85) 0%, rgba(30, 41, 59, 0.8) 100%);
  }

  /* Breadcrumb */
  .breadcrumb-item+.breadcrumb-item::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 4px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      margin: 0 10px;
      vertical-align: middle;
  }

  /* Destination Card */
  .destination-card {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .destination-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  }

  .destination-card:hover .dest-img {
      transform: scale(1.1);
  }

  .dest-img {
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* List View Card */
  .list-card {
      transition: all 0.3s ease;
  }

  .list-card:hover {
      transform: translateX(5px);
      box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
  }

  .list-card:hover .list-img {
      transform: scale(1.05);
  }

  .list-img {
      transition: transform 0.5s ease;
  }

  /* Filter Sidebar */
  .filter-section {
      transition: all 0.3s ease;
  }

  .filter-toggle-content {
      max-height: 500px;
      overflow: hidden;
      transition: max-height 0.3s ease;
  }

  .filter-toggle-content.collapsed {
      max-height: 0;
  }

  /* Range Slider */
  .range-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: #E5E7EB;
      outline: none;
  }

  .range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #0F766E;
      cursor: pointer;
      border: 3px solid white;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  .range-slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #0F766E;
      cursor: pointer;
      border: 3px solid white;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  /* Checkbox Custom */
  .custom-checkbox {
      display: none;
  }

  .custom-checkbox+label {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      padding: 6px 0;
      font-size: 0.875rem;
      color: #4B5563;
      transition: color 0.2s;
  }

  .custom-checkbox+label::before {
      content: '';
      width: 18px;
      height: 18px;
      border: 2px solid #D1D5DB;
      border-radius: 4px;
      transition: all 0.2s;
      flex-shrink: 0;
  }

  .custom-checkbox:checked+label::before {
      background: #0F766E;
      border-color: #0F766E;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
      background-size: 12px;
      background-position: center;
      background-repeat: no-repeat;
  }

  .custom-checkbox:checked+label {
      color: #0F766E;
      font-weight: 500;
  }

  /* Rating Stars */
  .star-interactive {
      cursor: pointer;
      transition: all 0.2s;
  }

  .star-interactive:hover {
      transform: scale(1.2);
  }

  /* View Toggle */
  .view-btn.active {
      background: #0F766E;
      color: white;
  }

  /* Sort Dropdown */
  .sort-dropdown {
      position: relative;
  }

  .sort-dropdown-menu {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 8px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
      border: 1px solid #E5E7EB;
      min-width: 200px;
      z-index: 50;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.3s ease;
  }

  .sort-dropdown-menu.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  /* Mobile Filter */
  .mobile-filter-panel {
      transform: translateX(-100%);
      transition: transform 0.3s ease;
  }

  .mobile-filter-panel.active {
      transform: translateX(0);
  }

  .filter-overlay {
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
  }

  .filter-overlay.active {
      opacity: 1;
      visibility: visible;
  }

  /* Button Hover */
  .btn-primary {
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
  }

  .btn-primary::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s ease;
  }

  .btn-primary:hover::before {
      left: 100%;
  }

  /* Back to Top */
  .back-to-top {
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
  }

  .back-to-top.visible {
      opacity: 1;
      visibility: visible;
  }

  /* Pagination */
  .page-btn {
      transition: all 0.2s ease;
  }

  .page-btn:hover {
      transform: translateY(-2px);
  }

  .page-btn.active {
      background: #0F766E;
      color: white;
      box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
  }

  /* Map Placeholder */
  .map-placeholder {
      background: linear-gradient(135deg, #E0F2FE, #DBEAFE, #E0E7FF);
      position: relative;
      overflow: hidden;
  }

  .map-placeholder::after {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(0, 0, 0, 0.03) 20px, rgba(0, 0, 0, 0.03) 21px),
          repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(0, 0, 0, 0.03) 20px, rgba(0, 0, 0, 0.03) 21px);
  }

  /* Skeleton Loading */
  @keyframes shimmer {
      0% {
          background-position: -200% 0;
      }

      100% {
          background-position: 200% 0;
      }
  }

  .skeleton {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
  }

  /* Tag/Chip */
  .chip {
      transition: all 0.2s ease;
  }

  .chip:hover {
      transform: scale(1.05);
  }

  .chip.active {
      background: #0F766E;
      color: white;
      border-color: #0F766E;
  }

  html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    position: relative;
}

.main-wrapper,
.wrapper,
.page-wrapper,
.site-wrapper {
    width: 100%;
    overflow: hidden;
}

section {
    max-width: 100%;
}