body {
  font-family: 'Poppins', sans-serif;
  background: #121212;
  color: #fff;
  margin:0;
}

/* Navbar */
.navbar { background: rgba(0,0,0,0.95); padding:0.8rem 1rem; }
.navbar-brand img { height:50px; }
.navbar-nav .nav-link { color:#fff !important; margin:0 8px; }
.navbar-nav .nav-link:hover { color:#D4AF37 !important; }

/* Hero */
.hero {
  background: url('assets/banner.jpg') no-repeat center center/cover;
  height:100vh;
  display:flex; justify-content:center; align-items:center;
  text-align:center; position:relative;
}
.hero::after {
  content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6);
}
.hero-content { position:relative; z-index:1; max-width:700px; }
.hero h1 { font-size:3rem; color:#D4AF37; margin-bottom:20px; }
.hero p { font-size:1.2rem; color:#ccc; }

/* Section Titles */
h2.section-title { color:#D4AF37; font-weight:700; margin-bottom:40px; text-align:center; }

/* Cards */
.service-card, .strategy-card {
  background:#1c1c1c;
  border-radius:12px;
  padding:20px;
  margin-bottom:20px;
  border:1px solid #333;
  transition:0.3s;
}
.service-card:hover, .strategy-card:hover { border-color:#D4AF37; transform:translateY(-5px); }

/* Work Steps */
.work-step { text-align:center; padding:20px; }
.work-step i { font-size:40px; color:#D4AF37; margin-bottom:10px; }

/* Crypto Coins Scroll */
.coin-scroll {
  overflow:hidden; white-space:nowrap; background:#000; padding:20px 0;
}
.coin-scroll img { height:50px; margin:0 30px; display:inline-block; animation: scrollLeft 20s linear infinite; }
@keyframes scrollLeft { from{transform:translateX(100%);} to{transform:translateX(-100%);} }

/* Footer */
footer { background:#000; text-align:center; padding:20px 0; }
.social-icons a { color:#D4AF37; font-size:24px; margin:0 10px; transition:0.3s; }
.social-icons a:hover{ color:#fff; }

/* Responsive */
@media(max-width:768px){
  .hero h1{ font-size:2rem; }
}

 #about .section-title {
    text-align: left;
    color: #D4AF37;
    margin-bottom: 30px;
  }

  #about p {
    color: #ccc;
    font-size: 1rem;
    line-height: 1.6;
  }

  #about a.btn-warning {
    background: #D4AF37;
    border: none;
    color: #121212;
    font-weight: bold;
  }

  #about a.btn-warning:hover {
    background: #bfa135;
  }

  @media (max-width: 768px) {
    #about .section-title {
      text-align: center;
    }
    #about .text-center img {
      margin-top: 20px;
    }
  }

  /* Bounce from Left */
@keyframes bounceInLeft {
  0% { opacity: 0; transform: translateX(-200px); }
  60% { opacity: 1; transform: translateX(30px); }
  80% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

/* Bounce from Right */
@keyframes bounceInRight {
  0% { opacity: 0; transform: translateX(200px); }
  60% { opacity: 1; transform: translateX(-30px); }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

/* Initial hidden state */
.about-left, .about-right {
  opacity: 0;
}

/* Animate when visible */
.about-left.animate {
  animation: bounceInLeft 1.2s ease;
  opacity: 1;
}

.about-right.animate {
  animation: bounceInRight 1.2s ease;
  opacity: 1;
}

/* Fade Up */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Slide In Left */
@keyframes slideInLeft {
  0% { opacity: 0; transform: translateX(-100px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Slide In Right */
@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(100px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Zoom In */
@keyframes zoomIn {
  0% { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}

/* Rotate In */
@keyframes rotateIn {
  0% { opacity: 0; transform: rotate(-10deg) scale(0.8); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

/* Default hidden */
.animate-on-scroll {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Active states */
.fade-up { animation: fadeUp 1s ease forwards; }
.slide-left { animation: slideInLeft 1s ease forwards; }
.slide-right { animation: slideInRight 1s ease forwards; }
.zoom-in { animation: zoomIn 1s ease forwards; }
.rotate-in { animation: rotateIn 1s ease forwards; }