/* PRELOADER WRAP */
#ocean-preloader {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #f7fefe, #ffffff);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  z-index:999999999;
}

/* INNER */
.preloader-inner {
  text-align: center;
  animation: fadeIn 1.2s ease forwards;
}

/* WAVE ICON */
.wave-icon {
  width: 220px;
  margin: 0 auto 30px;
  animation: waveFloat 4s ease-in-out infinite;
}

.wave-icon svg {
  width: 100%;
}

/* TITLE */
.preloader-title {
  font-size: 30px;
  letter-spacing: 1px;
  color: #1f5f66;
  margin-bottom: 8px;
}

/* SUB */
.preloader-sub {
  font-size: 15px;
  color: #7aaeb3;
  margin-bottom: 36px;
}

/* LOADING LINE */
.loading-line {
  width: 200px;
  height: 4px;
  background: #e4f4f6;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto;
}

.loading-line span {
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, #bfe8ec, #ffffff, #bfe8ec);
  animation: loadingMove 1.8s ease-in-out infinite;
  border-radius: 10px;
}

/* ANIMATIONS */
@keyframes waveFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes loadingMove {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* HIDE */
#ocean-preloader.hide {
  opacity: 0;
  visibility: hidden;
}

/* MOBILE */
@media (max-width: 768px) {
  .preloader-title {
    font-size: 24px;
  }

  .wave-icon {
    width: 180px;
  }
}