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

  html {
      scroll-behavior: smooth
  }

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

  .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: 6px
  }

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

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

  /* Left Panel BG */
  .auth-bg {
      position: relative;
      overflow: hidden
  }

  .auth-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(15, 118, 110, .9), rgba(30, 41, 59, .85));
      z-index: 1
  }

  .auth-bg-img {
      position: absolute;
      inset: 0;
      object-fit: cover;
      width: 100%;
      height: 100%
  }

  .auth-bg-content {
      position: relative;
      z-index: 2
  }

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

  /* Floating shapes */
  @keyframes float1 {

      0%,
      100% {
          transform: translateY(0) rotate(0deg)
      }

      50% {
          transform: translateY(-20px) rotate(5deg)
      }
  }

  @keyframes float2 {

      0%,
      100% {
          transform: translateY(0) rotate(0deg)
      }

      50% {
          transform: translateY(-15px) rotate(-5deg)
      }
  }

  .float-shape-1 {
      animation: float1 8s ease-in-out infinite
  }

  .float-shape-2 {
      animation: float2 6s ease-in-out infinite 1s
  }

  /* Form */
  .form-input {
      width: 100%;
      padding: 14px 16px;
      border: 2px solid #E5E7EB;
      border-radius: 14px;
      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-input.error {
      border-color: #EF4444;
      background: #FEF2F2
  }

  .form-input.success {
      border-color: #10B981;
      background: #F0FDF4
  }

  .error-msg {
      color: #EF4444;
      font-size: 12px;
      margin-top: 4px;
      display: none;
      align-items: center;
      gap: 4px
  }

  .error-msg.show {
      display: flex
  }

  /* Password Toggle */
  .pw-toggle {
      transition: all .2s
  }

  .pw-toggle:hover {
      color: #0F766E
  }

  /* Social Button */
  .social-btn {
      transition: all .3s;
      position: relative;
      overflow: hidden
  }

  .social-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .15)
  }

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

  .social-btn:hover::after {
      left: 100%
  }

  /* Divider */
  .divider-line {
      flex: 1;
      height: 1px;
      background: #E5E7EB
  }

  /* Btn Primary */
  .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%
  }

  /* Loading */
  .btn-loading .btn-text {
      opacity: 0
  }

  .btn-loading .btn-spinner {
      opacity: 1
  }

  .btn-spinner {
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: opacity .3s
  }

  /* Strength Meter */
  .strength-bar {
      height: 4px;
      border-radius: 2px;
      background: #E5E7EB;
      overflow: hidden;
      transition: all .3s
  }

  .strength-fill {
      height: 100%;
      border-radius: 2px;
      transition: width .5s, background .5s
  }

  /* Testimonial Slider */
  .testimonial-slide {
      opacity: 0;
      position: absolute;
      transition: opacity .8s ease
  }

  .testimonial-slide.active {
      opacity: 1;
      position: relative
  }

  /* Checkbox */
  .custom-check {
      width: 18px;
      height: 18px;
      border: 2px solid #D1D5DB;
      border-radius: 5px;
      appearance: none;
      cursor: pointer;
      transition: all .2s;
      position: relative;
      flex-shrink: 0
  }

  .custom-check:checked {
      background: #0F766E;
      border-color: #0F766E
  }

  .custom-check:checked::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 5px;
      width: 5px;
      height: 9px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg)
  }

  .custom-check:focus {
      box-shadow: 0 0 0 3px rgba(15, 118, 110, .15)
  }

  /* Success Animation */
  @keyframes successPop {
      0% {
          transform: scale(0)
      }

      50% {
          transform: scale(1.2)
      }

      100% {
          transform: scale(1)
      }
  }

  .success-pop {
      animation: successPop .5s ease
  }

  /* Link */
  .link-hover {
      position: relative
  }

  .link-hover::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: #0F766E;
      transition: width .3s
  }

  .link-hover:hover::after {
      width: 100%
  }