/* ===================== About Page Styles ===================== */
.about-page {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #222;
    scroll-behavior: smooth;
}
.about-page a { text-decoration: none; }

/* ==================================================
   Section 1: Core Values
================================================== */
.about-page .core-values-section { background: #fff; color: #222; padding: 60px 10%; }
.about-page .core-values-container { display: flex; align-items: stretch; justify-content: center; gap: 50px; flex-wrap: wrap; }
.about-page .cv-image-section { flex: 1; display: flex; justify-content: center; align-items: center; }
.about-page .cv-image-box { border-radius: 20px; width: 100%; height: 100%; animation: float 3s ease-in-out infinite; }
.about-page .cv-image-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; }

.about-page .cv-text-section { flex: 1; max-width: 600px; }
.about-page .cv-text-section h1 { font-size: 42px; line-height: 1.2; margin-bottom: 20px; color: #000; position: relative; }
.about-page .cv-text-section p { font-size: 18px; line-height: 1.7; margin-bottom: 35px; color: #444; }

.about-page .cv-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 35px; }
.about-page .cv-feature-card { background: linear-gradient(135deg, #f9f9f9, #f0f4ff); border-radius: 14px; padding: 22px; display: flex; align-items: flex-start; gap: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; opacity: 0; transform: translateY(40px); animation: fadeUp 0.9s forwards; }
.about-page .cv-feature-card:nth-child(1) { animation-delay: 0.2s; }
.about-page .cv-feature-card:nth-child(2) { animation-delay: 0.4s; }
.about-page .cv-feature-card:nth-child(3) { animation-delay: 0.6s; }
.about-page .cv-feature-card:nth-child(4) { animation-delay: 0.8s; }
.about-page .cv-feature-card:nth-child(5) { animation-delay: 1s; }
.about-page .cv-feature-card:nth-child(6) { animation-delay: 1.2s; }
.about-page .cv-feature-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 12px 25px rgba(25,25,112,0.25); background: linear-gradient(135deg, #dce4ff, #eef2ff); }
.about-page .cv-feature-icon { font-size: 24px; color: #191970; flex-shrink: 0; }
.about-page .cv-feature-text { font-size: 18px; color: #222; font-weight: 600; }

.about-page .cv-buttons { display: flex; gap: 15px; flex-wrap: wrap; }
.about-page .cv-buttons a { padding: 14px 32px; border-radius: 10px; font-size: 17px; font-weight: 600; transition: all 0.3s ease; cursor: pointer; }
.about-page .cv-btn-primary { background: linear-gradient(135deg, #191970, #0f0f5a); color: #fff; box-shadow: 0 6px 15px rgba(25,25,112,0.35); }
.about-page .cv-btn-primary:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(25,25,112,0.45); }
.about-page .cv-btn-secondary { border: 2px solid #191970; background: #fff; color: #191970; box-shadow: 0 4px 12px rgba(25,25,112,0.15); }
.about-page .cv-btn-secondary:hover { background: #f5f6ff; transform: translateY(-3px); box-shadow: 0 8px 18px rgba(25,25,112,0.25); }

.about-page @keyframes float { 0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);} }
.about-page @keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

.about-page @media(max-width:768px){
  .about-page .core-values-container { flex-direction: column; text-align:center; }
  .about-page .cv-image-box { height:auto; }
  .about-page .cv-text-section { max-width:100%; }
  .about-page .cv-buttons { justify-content:center; }
}

/* ==================================================
   Section 2: How to Invest
================================================== */
.about-page .invest-section { background:#fff; padding:50px 10%; display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start; }
.about-page .invest-left, .about-page .invest-right { flex:1; min-width:300px; }
.about-page .invest-left video { width:100%; max-height:400px; border-radius:10px; object-fit:cover; background:#fff; }

.about-page .invest-right h4 { color:#007BFF; font-size:14px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; margin:0 0 10px; }
.about-page .invest-right h2 { font-size:44px; color:#013220; margin:0 0 22px; font-weight:bold; position:relative; line-height:1.2; }
.about-page .invest-right h2::after { content:""; display:block; width:70px; height:5px; background:#191970; margin-top:10px; border-radius:3px; }
.about-page .invest-right p { color:#666; font-size:16px; margin-bottom:30px; line-height:1.6; }

.about-page .steps { display:flex; flex-direction:column; gap:50px; position:relative; }
.about-page .step { display:flex; align-items:flex-start; gap:15px; position:relative; }
.about-page .icon { width:50px; height:50px; border:2px dashed #191970; border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:20px; color:#191970; flex-shrink:0; background:#fff; z-index:2; }
.about-page .step:not(:last-child)::after { content:""; position:absolute; left:24px; top:60px; width:2px; height:70px; background: repeating-linear-gradient(to bottom,#191970,#191970 4px,transparent 4px,transparent 8px); }
.about-page .invest-card { flex:1; padding:20px; border-radius:15px; background:#191970; color:#fff; box-shadow:0 4px 20px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.15); opacity:0; transform:translateY(30px) scale(0.95); transition:all 0.8s ease-out; }
.about-page .invest-card.animate { opacity:1; transform:translateY(0) scale(1); }
.about-page .invest-card h3 { margin:0; font-size:18px; font-weight:bold; color:#fff; transition:color 0.3s ease; }
.about-page .invest-card:hover h3 { color:#dcdcff; }
.about-page .invest-card p { margin:8px 0 0; font-size:14px; line-height:1.5; color:#f0f0f0; }

.about-page @media(max-width:992px){ 
  .about-page .invest-right h2{font-size:36px;} 
  .about-page .invest-section{gap:20px;padding:30px 5%;} 
}
.about-page @media(max-width:768px){ 
  .about-page .invest-section{flex-direction:column;align-items:center;} 
  .about-page .invest-left video{max-height:250px;} 
  .about-page .invest-right h2{text-align:center;font-size:30px;} 
  .about-page .steps{gap:30px;} 
}
.about-page @media(max-width:480px){ 
  .about-page .invest-right h2{font-size:24px;} 
  .about-page .invest-card h3{font-size:16px;} 
  .about-page .invest-card p{font-size:13px;} 
}

/* ==================================================
   Section 3: Why Choose Us
================================================== */
.about-page .choose-section { background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('imagedx.png') no-repeat center/cover, url('imagedv.png') no-repeat center/cover; color:#fff; padding:80px 8%; animation:bg-pan 15s linear infinite; }
.about-page @keyframes bg-pan {0%{background-position:center top,center top,center top;}50%{background-position:center center,center center,center center;}100%{background-position:center top,center top,center top;}}
.about-page .choose-section .section-title{ text-align:center; font-size:48px; font-weight:bold; margin-bottom:20px; }
.about-page .choose-section .section-title span{ color:#FFD700; }
.about-page .choose-section .subtitle{ text-align:center; font-size:20px; color:#e0e0e0; margin-bottom:60px; max-width:900px; margin-left:auto;margin-right:auto; }
.about-page .choose-content{ display:grid; grid-template-columns:1fr 350px 1fr; gap:40px; align-items:center; }
.about-page .choose-features{ display:flex; flex-direction:column; gap:35px; }
.about-page .feature-box{ display:flex; align-items:flex-start; gap:20px; }
.about-page .feature-box i{ font-size:36px; color:#FFD700; min-width:40px; }
.about-page .feature-box h4{ margin:0 0 8px; font-size:22px; font-weight:bold; color:#fff; }
.about-page .feature-box p{ margin:0; font-size:16px; color:#e0e0e0; line-height:1.6; }
.about-page .money-icon{text-align:center;}
.about-page .money-icon img{ width:100%; max-width:300px; border-radius:12px; background:rgba(255,255,255,0.1); padding:5px; box-shadow:0 4px 12px rgba(0,0,0,0.3); }

.about-page @media(max-width:992px){ 
  .about-page .choose-content{ grid-template-columns:1fr; text-align:center; } 
  .about-page .choose-features{ align-items:center; } 
  .about-page .feature-box{ justify-content:center; text-align:left; max-width:600px; } 
  .about-page .money-icon{margin:30px 0;} 
}
.about-page @media(max-width:600px){ 
  .about-page .section-title{font-size:36px;} 
  .about-page .subtitle{font-size:16px;} 
  .about-page .feature-box h4{font-size:18px;} 
  .about-page .feature-box p{font-size:15px;} 
  .about-page .money-icon img{max-width:220px;} 
}

/* ==================================================
   Section 4: Premium Dark Banking Section
================================================== */
.about-page .banking-section { position:relative; display:flex; align-items:center; justify-content:center; background:url('ey.jpg') center/cover no-repeat; padding:50px 20px; overflow:hidden; min-height:60vh; }
.about-page .banking-section::before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 60%, rgba(255,255,255,1) 100%); z-index:1; }
.about-page .bank-image-box { flex:1; display:flex; justify-content:center; align-items:center; position:relative; z-index:2; animation: slideInLeft 1s ease forwards; opacity:0; }
.about-page .bank-image-box img { max-width:90%; height:auto; border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,0.5); animation: floatImage 4s ease-in-out infinite 1s; transition: transform 0.3s ease; }
.about-page .bank-image-box img:hover{ transform:scale(1.08); }
.about-page .bank-card{ flex:1; padding:30px; margin-left:30px; position:relative; z-index:2; background: rgba(255,255,255,0.05); border-radius:20px; backdrop-filter:blur(10px); box-shadow:0 15px 35px rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.2); animation: slideInRight 1s ease forwards; opacity:0; }
.about-page .bank-card h5{ font-size:16px; color:rgba(255,255,255,0.7); margin-bottom:8px; letter-spacing:1px; }
.about-page .bank-card h2{ font-size:30px; margin-bottom:15px; line-height:1.2; color:#fff; }
.about-page .bank-card p{ font-size:16px; line-height:1.6; margin-bottom:25px; color:rgba(255,255,255,0.85); }
.about-page .btn-container{ display:flex; gap:15px; flex-wrap:wrap; }
.about-page .btn{ display:inline-flex; align-items:center; background:#191970; color:#fff; padding:12px 24px; border-radius:50px; font-weight:600; box-shadow:0 5px 15px rgba(25,25,112,0.4); transition: all 0.3s ease; }
.about-page .btn:hover{ background:#000080; transform:translateY(-3px) scale(1.05); box-shadow:0 8px 20px rgba(0,0,128,0.6); }
.about-page .btn-secondary{ display:inline-flex; align-items:center; background:transparent; color:#fff; border:2px solid #fff; padding:12px 24px; border-radius:50px; font-weight:600; transition: all 0.3s ease; }
.about-page .btn-secondary:hover{ background:#fff; color:#191970; transform:translateY(-3px) scale(1.05); }
.about-page .btn i{ margin-right:10px; font-size:18px; }

.about-page @keyframes slideInLeft{0%{transform:translateX(-50px);opacity:0;}100%{transform:translateX(0);opacity:1;}}
.about-page @keyframes slideInRight{0%{transform:translateX(50px);opacity:0;}100%{transform:translateX(0);opacity:1;}}
.about-page @keyframes floatImage{0%{transform:translateY(0px) scale(1);}50%{transform:translateY(-15px) scale(1.03);}100%{transform:translateY(0px) scale(1);} }

.about-page @media(max-width:900px){
  .about-page .banking-section{flex-direction:column;text-align:center;padding:40px 20px;min-height:auto;}
  .about-page .bank-card{margin-left:0;margin-top:20px;}
  .about-page .bank-card h2{font-size:24px;}
  .about-page .bank-card p{font-size:15px;}
  .about-page .btn-container{justify-content:center;}
  .about-page .bank-image-box img{max-width:100%;}
}