* {
      margin: 0;
      padding: 0;
      box-sizing: border-box
  }

  html {
      scroll-behavior: smooth
  }

  body {
      font-family: 'Poppins', sans-serif;
      overflow-x: hidden
  }

  .preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #0F766E, #14B8A6);
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      transition: opacity .5s, visibility .5s
  }

  .preloader.hidden {
      opacity: 0;
      visibility: hidden
  }

  .preloader-plane {
      animation: flyPlane 2s ease-in-out infinite
  }

  @keyframes flyPlane {

      0%,
      100% {
          transform: translateX(0) translateY(0)
      }

      25% {
          transform: translateX(20px) translateY(-10px) rotate(5deg)
      }

      50% {
          transform: translateX(0) translateY(-20px)
      }

      75% {
          transform: translateX(-20px) translateY(-10px) rotate(-5deg)
      }
  }

  .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: .2s
  }

  .preloader-dots span:nth-child(3) {
      animation-delay: .4s
  }

  @keyframes dotBounce {

      0%,
      80%,
      100% {
          transform: scale(.6);
          opacity: .5
      }

      40% {
          transform: scale(1);
          opacity: 1
      }
  }

  ::-webkit-scrollbar {
      width: 8px
  }

  ::-webkit-scrollbar-track {
      background: #f1f1f1
  }

  ::-webkit-scrollbar-thumb {
      background: #0F766E;
      border-radius: 10px
  }

  .navbar-scrolled {
      background: rgba(255, 255, 255, .98) !important;
      box-shadow: 0 4px 20px rgba(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 {
      transform: translateX(100%);
      transition: transform .3s cubic-bezier(.4, 0, .2, 1)
  }

  .mobile-menu.active {
      transform: translateX(0)
  }

  .mobile-overlay {
      opacity: 0;
      visibility: hidden;
      transition: all .3s
  }

  .mobile-overlay.active {
      opacity: 1;
      visibility: visible
  }

  .dropdown-menu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all .3s
  }

  .dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0)
  }

  .page-hero-overlay {
      background: linear-gradient(135deg, rgba(15, 118, 110, .85), rgba(30, 41, 59, .8))
  }

  .breadcrumb-item+.breadcrumb-item::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 4px;
      background: rgba(255, 255, 255, .5);
      border-radius: 50%;
      margin: 0 10px;
      vertical-align: middle
  }

  /* Testimonial Card */
  .testimonial-card {
      transition: all .4s ease
  }

  .testimonial-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .12)
  }

  /* Rating Bar */
  .rating-bar {
      height: 10px;
      border-radius: 5px;
      background: #E5E7EB;
      overflow: hidden
  }

  .rating-fill {
      height: 100%;
      border-radius: 5px;
      background: linear-gradient(90deg, #F59E0B, #FBBF24);
      transition: width 1.5s ease
  }

  /* Filter */
  .filter-tab {
      transition: all .3s;
      cursor: pointer
  }

  .filter-tab.active {
      background: #0F766E;
      color: white;
      border-color: #0F766E;
      box-shadow: 0 4px 15px rgba(15, 118, 110, .3)
  }

  /* Video Card */
  .video-card {
      transition: all .4s ease
  }

  .video-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px -10px rgba(0, 0, 0, .15)
  }

  .video-play {
      transition: all .3s
  }

  .video-play:hover {
      transform: scale(1.1)
  }

  @keyframes pulse-ring {
      0% {
          box-shadow: 0 0 0 0 rgba(245, 158, 11, .4)
      }

      100% {
          box-shadow: 0 0 0 20px rgba(245, 158, 11, 0)
      }
  }

  .pulse-play {
      animation: pulse-ring 2s ease-out infinite
  }

  /* Star Interactive */
  .star-select {
      cursor: pointer;
      transition: all .2s
  }

  .star-select:hover {
      transform: scale(1.2)
  }

  /* Helpful */
  .helpful-btn {
      transition: all .2s
  }

  .helpful-btn:hover {
      background: #F0FDFA
  }

  .helpful-btn.active {
      color: #0F766E;
      background: #F0FDFA
  }

  /* Stats */
  .stat-card {
      transition: all .3s
  }

  .stat-card:hover {
      transform: scale(1.05)
  }

  /* Form */
  .form-input {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #E5E7EB;
      border-radius: 12px;
      font-size: 14px;
      transition: all .3s;
      background: white;
      outline: none;
      font-family: 'Poppins', sans-serif
  }

  .form-input:focus {
      border-color: #0F766E;
      box-shadow: 0 0 0 4px rgba(15, 118, 110, .08)
  }

  .form-textarea {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #E5E7EB;
      border-radius: 12px;
      font-size: 14px;
      transition: all .3s;
      background: white;
      outline: none;
      resize: vertical;
      min-height: 120px;
      font-family: 'Poppins', sans-serif
  }

  .form-textarea:focus {
      border-color: #0F766E;
      box-shadow: 0 0 0 4px rgba(15, 118, 110, .08)
  }

  .form-select {
      width: 100%;
      padding: 12px 40px 12px 16px;
      border: 2px solid #E5E7EB;
      border-radius: 12px;
      font-size: 14px;
      transition: all .3s;
      background: white;
      outline: none;
      appearance: none;
      cursor: pointer;
      font-family: 'Poppins', sans-serif
  }

  .form-select:focus {
      border-color: #0F766E;
      box-shadow: 0 0 0 4px rgba(15, 118, 110, .08)
  }

  /* Success Modal */
  .modal-overlay {
      opacity: 0;
      visibility: hidden;
      transition: all .3s
  }

  .modal-overlay.active {
      opacity: 1;
      visibility: visible
  }

  .modal-content {
      transform: scale(.9);
      opacity: 0;
      transition: all .3s
  }

  .modal-overlay.active .modal-content {
      transform: scale(1);
      opacity: 1
  }

  @keyframes checkDraw {
      from {
          stroke-dashoffset: 50
      }

      to {
          stroke-dashoffset: 0
      }
  }

  .success-check {
      animation: checkDraw .5s ease-in-out .3s forwards;
      stroke-dasharray: 50;
      stroke-dashoffset: 50
  }

  /* Pattern */
  .pattern-dots {
      background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px);
      background-size: 20px 20px
  }

  /* Pagination */
  .page-btn {
      transition: all .2s
  }

  .page-btn:hover {
      transform: translateY(-2px)
  }

  .page-btn.active {
      background: #0F766E;
      color: white;
      box-shadow: 0 4px 12px rgba(15, 118, 110, .3)
  }

  .btn-primary {
      position: relative;
      overflow: hidden;
      transition: all .3s
  }

  .btn-primary::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
      transition: left .5s
  }

  .btn-primary:hover::before {
      left: 100%
  }

  .back-to-top {
      opacity: 0;
      visibility: hidden;
      transition: all .3s
  }

  .back-to-top.visible {
      opacity: 1;
      visibility: visible
  }

  /* Quote */
  .quote-icon {
      opacity: .1;
      position: absolute;
      top: 16px;
      right: 16px
  }

  /* Sort */
  .sort-menu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all .3s;
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 8px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, .1);
      border: 1px solid #E5E7EB;
      min-width: 180px;
      z-index: 50;
      padding: 6px
  }

  .sort-menu.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0)
  }