/* ================= پایه ================= */
* { 
    box-sizing:border-box; 
    margin:0; 
    padding:0; 
}
body { 
    font-family:"Vazirmatn",sans-serif; 
    line-height:1.6; 
}
body.lang-fa {
     direction:rtl;
     }
body.lang-en { 
    direction:ltr;
    
 }

/* ================= هدر ================= */
.site-header {
  position:sticky;
   top:0;
    z-index:1000;
  display:flex;
   justify-content:space-between;; 
   align-items:center;
  padding:12px 24px; 
  backdrop-filter:blur(12px);
  background:rgba(230,240,255,0.9);
   transition:all 0.3s ease;
}

body.dark-mode .site-header { 
background:rgba(10,18,40,0.9);
 color:#fff; 
}

.header-left {
 display:flex; 
 align-items:center; 
 gap:12px; 
}

.logo img {
 height:80px; 
}

.header-controls { 
    display:flex; 
    align-items:center; 
    gap:8px; 
}

.lang-switch button, .mode-switch, .btn-back{
  border:none; 
  border-radius:80px; 
  padding:6px 12px;
  cursor:pointer; 
  font-weight:600; 
  transition:all 0.3s ease;
}

.lang-switch button { 
    background:rgba(0,0,0,0.35); 
    color:#fff; 
}

body.dark-mode .lang-switch button { 
    background:rgba(255,255,255,0.35); 
    color:#000; 
}

.mode-switch { 
    font-size:24px; 
    background:none; 
}
.mode-switch:hover{
    opacity:0.85;
}

.header-center{ 
    position:absolute; 
    left:50%; 
    transform:translateX(-50%);
}
.btn-back{
 display:inline-flex; 
 align-items:center; 
 gap:5px;
 padding:10px 35px; 
 border-radius:10px; 
 text-decoration:none;
 font-weight:bold; 
 background:rgba(87, 179, 229, 0.35); 
 color:#fffcfc;
 transition:0.3s;
}

body.dark-mode .btn-back { 
    background:rgba(87,179,229,0.35); 
    color:#ffffff; 
}
.btn-back:hover { 
    background:rgba(20, 116, 122, 0.6);
}
body.dark-mode .btn-back:hover { 
    background:rgba(0, 242, 255, 0.55); 
}

/* ================= پس‌زمینه ================= */
.about-page{
 min-height:100vh; 
 display:flex; 
 flex-direction:column;
 background:
  radial-gradient(ellipse 800px 400px at 20% 30%, rgba(160,190,255,0.32) 0%, transparent 67%),
  radial-gradient(ellipse 600px 280px at 80% 72%, rgba(210,220,255,0.28) 0%, transparent 72%),
  linear-gradient(133deg, #eaf0ff 0%, #f6f9ff 40%, #fff 100%);
 color:#0a0a0a; 
 transition:background 0.5s ease,color 0.3s ease;
}
body.dark-mode.about-page{
 background:
  radial-gradient(ellipse 900px 400px at 30% 22%, rgba(35,105,255,0.24) 0%, transparent 68%),
  radial-gradient(ellipse 650px 300px at 70% 81%, rgba(40,90,180,0.20) 0%, transparent 80%),
  linear-gradient(135deg, #06132a 0%, #0c1b36 49%, #000 100%);
 color:#fff;
}

/* ================= محتوا ================= */
.about-wrapper{
 display:flex; 
 justify-content:center; 
 align-items:flex-start;
 gap:30px; 
 flex-wrap:wrap; 
 margin:80px auto; 
 max-width:1100px; 
 padding:0 20px;
}

.about-box{
 flex:1; 
 min-width:340px; 
 padding:28px; 
 border-radius:16px;
 border:1px solid rgba(0,60,150,.25);
 background:rgba(230,240,255,0.9);
 box-shadow:0 4px 15px rgba(0,60,150,0.1);
 transition:transform 0.35s ease, box-shadow 0.35s ease; 
 position:relative;
}
body.dark-mode .about-box{ 
    background:rgba(5,15,35,0.9); 
    border-color:rgba(0,150,255,.25); 
    color:#fff; }
.about-box:hover{ 
    transform:translateY(-6px); 
    box-shadow:0 12px 25px rgba(0,60,150,.25);
}
body.dark-mode .about-box:hover{ 
    box-shadow:0 12px 25px rgba(0,150,255,0.35);
}

.about-box h2{ 
    margin-bottom:18px; 
    font-size:1.6rem; 
    font-weight:600; 
    color:#002b6b;
}
body.dark-mode .about-box h2{ 
    color:#80cfff;
}

/* لیست تماس */
.contact-list{ 
    list-style:none; 
    padding:0; 
    margin:0;
}
.contact-list li{ 
    display:flex; 
    align-items:center; 
    margin-bottom:10px;
}
.contact-list .icon{ 
    margin-right:10px; 
    font-size:1.2rem;
}

/* دکمه تلگرام */
.btn-telegram{
 display:inline-block; 
 margin-top:0px; 
 padding:10px 20px;
 background-color:#0088cc; 
 color:#fff; 
 border-radius:8px; 
 text-decoration:none;
 font-weight:600; 
 transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.btn-telegram:hover{ 
    transform:translateY(-3px) scale(1.02); 
    box-shadow:0 8px 20px rgba(0,136,204,0.18);
}
body.dark-mode .btn-telegram{ 
    background-color:#005577;
}

/* ================= فرم تماس ================= */
.contact-form{ 
    display:flex; 
    flex-direction:column; 
    gap:12px; margin-top:10px;
}
.contact-form input, .contact-form textarea{
 padding:10px 14px; 
 border-radius:10px; 
 border:1px solid rgba(0,60,150,.25); 
 font-family:inherit; 
 font-size:1rem;
}
.contact-form textarea{ 
    resize:vertical;
}
.contact-form button{
 padding:10px; 
 border:none; 
 border-radius:10px; 
 background:#0088cc; 
 color:#fff; 
 font-weight:700; 
 cursor:pointer;
}
.contact-form button:hover{ 
    opacity:0.9; 
}
body.dark-mode .contact-form input, body.dark-mode .contact-form textarea{
     background:#0b152b; 
     color:#fff;
    }
.form-message {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  display: none;
}
.form-message.success { 
    background-color: #28a745; 
    color: #fff; 
}
.form-message.error { 
    background-color: #dc3545; 
    color: #fff; 
}
body.dark-mode .form-message.success { 
    background-color: #1e7e34;
 }
body.dark-mode .form-message.error { 
    background-color: #a71d2a;
 }

/* ================= ریسپانسیو ================= */
@media(max-width:768px){
 .about-wrapper{ 
    flex-direction:column; 
    margin-top:60px; padding:0 10px;
}
 .about-box{
     min-width:auto;
}
 .site-header{ 
    flex-wrap:wrap; 
    padding:8px 12px; 
    gap:6px;
}
 .header-left{
     gap:6px;
    }
 .logo img{ 
    height:32px;
}
 .lang-switch button{ 
    padding:4px 6px; font-size:11px;
}
 .mode-switch{ 
    font-size:18px; padding:4px;
}
}
#successOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  color: #fff;
  font-family: sans-serif;
}

#successOverlay .checkmark{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid #4CAF50;
  position: relative;
  margin-bottom: 15px;
  animation: pop .4s ease;
}

#successOverlay .checkmark::after{
  content: "";
  position: absolute;
  left: 22px;
  top: 38px;
  width: 22px;
  height: 6px;
  border-left: 4px solid #4CAF50;
  border-bottom: 4px solid #4CAF50;
  transform: rotate(-45deg);
}
/* تایم‌لاین کلی */
.timeline {
  position: relative;
  margin-top: 40px;
  padding-left: 40px;
}

/* خط عمودی */
.timeline::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #49494a;
}

/* هر آیتم */
.timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

/* دایره */
.timeline-dot {
  width: 14px;
  height: 14px;
  background: #545e68;
  border-radius: 50%;
  margin-right: 20px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

/* محتوا */
.timeline-content {
  background: transparent;
  padding: 8px 0;
  max-width: 600px;
  transition: all 0.3s ease;
}

.timeline-content h2{
  font-size: 25px;
  background: #545e68;
}

.timeline-content h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.timeline-content p {
  font-size: 0.9rem;
  line-height: 1.7;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Hover افکت */
.timeline-item:hover .timeline-dot {
  border-radius: 6px;
  width: 18px;
  height: 18px;
  background: #2d89ef;
}

.timeline-item:hover .timeline-content {
  background: #f4f6f8;
  padding: 16px;
  border-radius: 8px;
}

.timeline-item:hover .timeline-content p {
  opacity: 1;
  max-height: 200px;
}

/* دارک مود */
body.dark-mode .timeline::before {
  background: #444;
}

body.dark-mode .timeline-dot {
  background: #aaa;
}

body.dark-mode .timeline-item:hover .timeline-content {
  background: #1e1e1e;
}


@keyframes pop{
  from{ transform: scale(.4); opacity:0 }
  to{ transform: scale(1); opacity:1 }
}