/*!
 * Theme Name: 		   OceanWP
 * Text Domain: 	   oceanwp
 * Version:            4.0.8
 * Tested up to:       6.8
 * Requires at least:  5.6
 * Requires PHP:       7.4
 * Author:             OceanWP
 * Author URI:         https://oceanwp.org/about-oceanwp/
 * Theme URI:          https://oceanwp.org/
 * Description:        OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/
 * Tags:               two-columns, right-sidebar, footer-widgets, blog, news, custom-background, custom-menu, post-formats, rtl-language-support, sticky-post, editor-style, threaded-comments, translation-ready, buddypress, custom-colors, featured-images, full-width-template, theme-options, e-commerce, block-styles, wide-blocks, accessibility-ready
 *
 * License: GNU General Public License v2.0 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 *
 * All files, unless otherwise stated, are released under the GNU General Public
 * License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

 * This theme, like WordPress, is licensed under the GPL.
 * Use it to make something cool, have fun, and share what you've learned
 * with others.
 *
 * DO NOT ADD YOUR CSS TO THIS FILE - IT WILL BE LOST
 * To add your own CSS, use a child theme: https://github.com/oceanwp/oceanwp-child-theme
 *
 * CSS file is in "assets/css"
 */
/* Global Styles */
body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #f0f4f8, #dbeafe);
  color: #1e293b;
  margin: 0;
  overflow-x: hidden;
}

h1, h2, h3, h4, p {
  margin: 0;
  padding: 0;
}

/* Hero Section */
.hero {
  text-align: center;
  padding: 6rem 1rem;
  background: linear-gradient(to right, #f9fafb, #dbeafe);
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 153, 255, 0.2), transparent);
  filter: blur(80px);
  animation: pulse 8s infinite alternate;
  z-index: 0;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
  animation: fadeInDown 1s ease forwards;
}
.protocol-hero {
  background: radial-gradient(#0c1935, #060b1a);
  padding: 4rem 1rem;
  text-align: center;
  color: #fff;
  position: relative;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.wallet-icon {
  width: 80px;
  margin-bottom: 1rem;
  animation: float 2.5s ease-in-out infinite;
}

.protocol-inner {
  max-width: 500px;
  margin: 0 auto;
}

.wallet-icon {
  width: 80px;
  margin-bottom: 1rem;
}

.protocol-hero h1 {
  font-size: 2rem;
  margin-bottom: 0.25rem;
  letter-spacing: 1px;
}

.subtext {
  font-size: 1.1rem;
  color: #cbd5e1;
  margin-bottom: 1.25rem;
}
.wallet-animation-wrapper {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
}

.wallet-icon {
  width: 100%;
  height: auto;
  display: block;
}

.wallet-line {
  position: absolute;
  top: 45%;
  left: -50%;
  width: 200%;
  height: 4px;
  background: linear-gradient(90deg, transparent, #facc15, transparent);
  animation: moveLine 2s linear infinite;
  opacity: 0.8;
}

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

.separator {
  height: 6px;
  width: 80%;
  max-width: 240px;
  margin: 0 auto 1.5rem;
  background: #facc15;
}

.resolve-btn {
  display: inline-block;
  background: #0f172a;
  padding: 0.75rem 2rem;
  border-radius: 40px;
  border: 2px solid #fff;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.resolve-btn:hover {
  background: #1e293b;
  border-color: #facc15;
}

.hero p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
  margin-top: 1rem;
  position: relative;
  z-index: 1;
  animation: fadeInUp 1.2s ease forwards;
}

/* Action Grid Section */
.action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  padding: 4rem 2rem;
}

.action-btn {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  border: none;
  border-radius: 14px;
  padding: 1rem 2rem;
  color: white;
  font-weight: bold;
  cursor: pointer;
  font-size: 1rem;
  box-shadow: 0 6px 12px rgba(59,130,246,0.2);
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 24px rgba(59,130,246,0.4);
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.5s ease;
}

.modal-content {
  background: #ffffff;
  color: #1e293b;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  max-width: 400px;
  width: 90%;
  text-align: center;
  animation: scaleUp 0.5s ease;
  
}

/* Coin Grid */
.coin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
.coin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 6px;
}

.coin-btn {
  background: #e0f2fe;
  border: 2px solid #93c5fd;
  padding: 0.7rem;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.coin-btn:hover {
  transform: scale(1.05);
}

.coin-btn img {
  width: 40px;
  height: 40px;
  margin-bottom: 0.5rem;
}

/* Loader */
.loader {
  border: 6px solid #e5e7eb;
  border-top: 6px solid #3b82f6;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: 1rem auto;
  animation: spin 1s linear infinite;
}

/* Countdown */
#countdownTimer {
  font-size: 2rem;
  margin-top: 1rem;
  color: #3b82f6;
  font-weight: bold;
}
.dfi-info {
  background: #f9fafb;
  padding: 4rem 1.5rem;
  color: #1e293b;
  display: flex;
  justify-content: center;
}

.dfi-container {
  max-width: 800px;
  width: 100%;
  text-align: center;
}

.dfi-title {
  font-size: 2.25rem;
  margin-bottom: 1rem;
  color: #0f172a;
  animation: fadeInUp 1s ease forwards;
}

.dfi-description {
  font-size: 1.15rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  color: #334155;
  animation: fadeInUp 1.2s ease forwards;
}

.dfi-features {
  list-style: none;
  padding: 0;
  margin: 0 auto 3rem;
  max-width: 600px;
  text-align: left;
}

.dfi-features li {
  font-size: 1.05rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e2e8f0;
  animation: fadeInUp 1.4s ease forwards;
}

.dfi-cta-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.animated-message {
  background: #ecfdf5;
  color: #065f46;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  font-weight: 500;
  animation: floatFade 7s ease-in-out infinite;
  max-width: 600px;
  text-align: center;
}


/* Animation Classes */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  0% { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulseOnce {
  0% { opacity: 0; transform: scale(0.9); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Button Styles */
.btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  font-size: 1rem;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Primary Button (Blue) */
.btn.primary {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  color: white;
}

/* Success Button (Green) */
.btn.success {
  background: #10b981;
  color: white;
}

/* Danger Button (Red) */
.btn.danger {
  background: #ef4444;
  color: white;
}
/* Section Base */
.dfi-info {
  background: #f9fafb;
  padding: 4rem 1.5rem;
  text-align: center;
  color: #1e293b;
}

.dfi-container {
  max-width: 800px;
  margin: 0 auto;
}

.dfi-title {
  font-size: 2.25rem;
  margin-bottom: 1rem;
  color: #0f172a;
  animation: fadeInUp 1s ease forwards;
}

.dfi-description {
  font-size: 1.15rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  color: #334155;
  animation: fadeInUp 1.2s ease forwards;
}

.dfi-features {
  list-style: none;
  padding: 0;
  margin-bottom: 3rem;
  text-align: left;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.dfi-features li {
  font-size: 1.05rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e2e8f0;
  animation: fadeInUp 1.4s ease forwards;
}

/* Animated CTA */
.dfi-cta-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.animated-message {
  background: #ecfdf5;
  color: #065f46;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  font-weight: 500;
  animation: floatFade 7s ease-in-out infinite;
  max-width: 600px;
  text-align: center;
}

/* Animations */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes floatFade {
  0%, 100% {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  50% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Success Overlay */
.success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.success-box {
  background: #ffffff;
  color: #1e293b;
  padding: 2rem 2.5rem;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  text-align: center;
  max-width: 400px;
}

.success-box a {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleUp {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.2); opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes fadeLoopSubtext {
  0%, 100% {
    opacity: 0;
    transform: translateY(5px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-loop-subtext {
  animation: fadeLoopSubtext 7s ease-in-out infinite;
  font-size: 1rem;
  color: #475569;
  margin-bottom: 1.5rem;
  text-align: center;
}
.action-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  padding: 2rem 1rem;
  background: #0f172a;
}

.action-card {
  background: #0f172a;
  color: #fff;
  text-align: center;
  border-radius: 16px;
  padding: 2rem 1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.action-card:hover {
  transform: translateY(-5px);
}

.action-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.choose-btn {
  background: #fff;
  color: #0f172a;
  padding: 0.5rem 1.5rem;
  border-radius: 24px;
  font-weight: bold;
  border: none;
  margin-top: 1rem;
  cursor: pointer;
}
.action-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  padding: 2rem 1rem;
  background: #f8fafc; /* very light background */
}

.action-card {
  background: #ffffff;
  color: #0f172a;
  text-align: center;
  border-radius: 16px;
  padding: 2rem 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

.action-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.choose-btn {
  background: #0f172a;
  color: #ffffff;
  padding: 0.5rem 1.5rem;
  border-radius: 24px;
  font-weight: bold;
  border: none;
  margin-top: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.choose-btn:hover {
  background: #1e293b;
}
.action-block-section {
  background: #0f172a;
  padding: 4rem 1rem;
}

.action-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.action-card {
  background: #ffffff;
  color: #0f172a;
  text-align: center;
  border-radius: 16px;
  padding: 2rem 1rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.choose-btn {
  background: #0f172a;
  color: #fff;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 24px;
  margin-top: 1rem;
  font-weight: bold;
}