/* RESET */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
body{background:#ffffff;color:#1a1a1a;overflow-x:hidden;line-height:1.7;}

/* HERO */
.fx-hero{
  height:50vh;
  background:linear-gradient(135deg,#0078ff 0%,#00c6ff 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.fx-content{
  max-width:750px;
  padding:20px;
  z-index:2;
}
.fx-content h1{font-size:50px;margin-bottom:15px;font-weight:700;    color: white;}
.fx-content p{font-size:18px;margin-bottom:25px;}
.btn-primary{
  background:#fff;color:#0078ff;padding:12px 30px;
  border-radius:30px;font-weight:600;text-decoration:none;
  transition:all .3s ease;
}
.btn-primary:hover{background:#0078ff;color:#fff;}

/* Section Base */
.fx-section{padding:100px 8%;position:relative;}
.section-title{text-align:center;font-size:38px;font-weight:700;margin-bottom:60px;}

/* MODEL ONE — Radar Diagram */
.fx-container{
  display:flex;justify-content:space-between;align-items:center;
  gap:40px;flex-wrap:wrap;
}
.fx-text{flex:1;min-width:350px;}
.fx-text h2{font-size:36px;margin-bottom:15px;color:#002a5c;}
.fx-text p{margin-bottom:20px;color:#444;}
.fx-points li{list-style:none;padding-left:22px;position:relative;margin-bottom:8px;}
.fx-points li::before{content:'✔';position:absolute;left:0;color:#0078ff;}

.fx-radar{
  width:300px;height:300px;position:relative;flex:1;
}
.fx-radar .circle{
  position:absolute;border:2px solid rgba(0,120,255,0.3);
  border-radius:50%;
}
.outer{width:100%;height:100%;top:0;left:0;}
.middle{width:200px;height:200px;top:50px;left:50px;}
.inner{width:100px;height:100px;top:100px;left:100px;}
.radar-line{
  position:absolute;width:2px;height:50%;background:#0078ff;
  top:50%;left:50%;transform-origin:bottom center;
  animation:radarSpin 5s linear infinite;
}
@keyframes radarSpin{to{transform:rotate(360deg);}}

/* MODEL TWO — Global Structure */
.fx-structure{
  display:flex;justify-content:center;flex-wrap:wrap;gap:40px;
}
.structure-node{
  background:#fff;border:1px solid #e0e0e0;border-radius:15px;
  padding:30px;text-align:center;width:300px;
  box-shadow:0 10px 25px rgba(0,0,0,0.05);
  transition:.4s ease;
}
.structure-node img{width:70px;margin-bottom:15px;}
.structure-node:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 45px rgba(0,120,255,0.15);
}
.structure-node h3{color:#002a5c;margin-bottom:10px;}
.structure-node p{color:#555;}

/* MODEL THREE — Trading Cycle */
.cycle-container{text-align:center;}
.cycle-container h2{font-size:36px;margin-bottom:40px;color:#002a5c;}
.cycle-diagram{
  display:flex;justify-content:center;flex-wrap:wrap;gap:30px;
  position:relative;
}
.cycle-item{
  background:#f7f9fc;border:2px solid #e0e7ff;border-radius:50%;
  width:130px;height:130px;display:flex;align-items:center;justify-content:center;
  position:relative;font-weight:600;color:#0078ff;
  box-shadow:0 5px 15px rgba(0,0,0,0.05);
  transition:.4s;
}
.cycle-item:hover{
  transform:translateY(-10px) scale(1.05);
  box-shadow:0 20px 40px rgba(0,120,255,0.2);
}
.cycle-item::after{
  content:attr(data-step);
  position:absolute;top:-12px;right:-12px;
  background:#0078ff;color:#fff;font-size:12px;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* ANIMATIONS */
.fade-in{opacity:0;transform:translateY(20px);transition:1s ease;}
.slide-up{opacity:0;transform:translateY(40px);transition:1s ease;}
.show{opacity:1;transform:translateY(0);}

/* FOOTER */
.fx-footer{text-align:center;padding:25px;background:#f1f4f9;color:#555;font-size:14px;margin-top:60px;}

/* RESPONSIVE */
@media(max-width:768px){
  .fx-content h1{font-size:38px;}
  .fx-container{flex-direction:column;text-align:center;}
  .cycle-item{width:100px;height:100px;font-size:13px;}
}

/* Reverse flex for image-left sections */
.fx-container.reverse {
  flex-direction: row-reverse;
}

/* Image styling */
.about-image {
  position: relative;
  flex: 1;
  text-align: center;
  min-width: 300px;
}

.about-image img {
  width: 100%;
  max-width: 420px;
  border-radius: 18px;
  z-index: 2;
  position: relative;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Soft glowing background */
.glow-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 350px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 120, 255, 0.15), transparent 70%);
  filter: blur(25px);
  z-index: 1;
}

/* Responsive alignment fix */
@media (max-width: 768px) {
  .fx-container.reverse {
    flex-direction: column;
    text-align: center;
  }
  .about-image img {
    margin-bottom: 25px;
  }
}

/* HERO SECTION */
.fx-hero {
  position: relative;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  background: url("../images/Trading.png") center/cover no-repeat;
  overflow: hidden;
}

/* Optional: overlay tint for readability */
.fx-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* Adjust 0.45 for darker or lighter effect */
}

/* HERO CONTENT */
.fx-content {
  position: relative;
  z-index: 2;
  max-width: 750px;
  padding: 20px;
  animation: fadeIn 1.3s ease;
}

.fx-content h1 {
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 15px;
      color: white;
}

.fx-content p {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 25px;
}

.btn-primary {
  display: inline-block;
  padding: 12px 30px;
  background: #0078ff;
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.btn-primary:hover {
  background: #005fe0;
  transform: translateY(-3px);
}

/* Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .fx-content h1 {
    font-size: 38px;
  }
  .fx-content p {
    font-size: 16px;
  }
}