@font-face {
  font-family: 'SiteFont';
  src: url('YekanBakh-Black.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'SiteFont', 'Tahoma', sans-serif;
}

body {
background-color: #140346;
color: white;
overflow-x: hidden;
}

.main-header {
position: fixed;
top: 20px;
width: 100%;
z-index: 1000;
display: flex;
justify-content: center;
transition: all 0.5s;
}

.nav-container {
  background:#140346;
width: 96%;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50px;
padding: 10px 40px;
display: flex;
align-items: center;
justify-content: space-between;
}

.logo-circle {
width: 4rem;
height: 4rem;
border-radius: 50%;
overflow: hidden;
border: 2px solid #08f17c;
}

.logo-circle img {
width: 100%;
height: 100%;
object-fit: cover;
}

.desktop-nav {
display: flex;
gap: 40px;
}

.nav-link {
color: white;
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}

.nav-link:hover,
.nav-link.active {
color: #08f17c;
}

.auth-btn {
height: 3.2rem;
background: #08f17c;
color: #140346;
border: none;
padding: 10px 25px;
border-radius: 25px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}

.auth-btn:hover {
transform: scale(1.05);
}
/* اصلاح بخش هیرو برای داشتن تصویر پس‌زمینه */
.hero-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 100px;
  position: relative;
  overflow: hidden;
}

/* برای اینکه زیر بخش هیرو سفید باقی بماند، مطمئن شوید بخش بعدی استایل زیر را دارد */
.home-second-section {
  background: #ffffff !important; /* تضمین سفیدی زیر بخش هیرو */
  position: relative;
  z-index: 10;
}

.hero-content h1 {
font-size: 60px;
margin: 10px 0;
}

.hero-content h2 {
font-size: 50px;
color: #08f17c;
margin: 20px 0;
}

.cta-button {
background: #08f17c;
color: #140346;
border: none;
padding: 15px 40px;
border-radius: 30px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
margin-top: 30px;
transition: 0.3s;
}

.cta-button:hover {
transform: scale(1.05);
}

.robot-image {
width: 400px;
}

.robot-image img {
width: 100%;
}

.page {
display: none;
}

.page.active {
display: block;
}

.white-section {
background: white;
min-height: 800px;
width: 100%;
}

.main-header.sticky {
top: 0;
}

.main-header.sticky .nav-container {
background: #140346;
backdrop-filter: blur(0);
border-radius: 0;
border: none;
border-bottom: 1px solid #08f17c;
width: 100%;
}

.hamburger {
display: none;
cursor: pointer;
flex-direction: column;
gap: 5px;
}

.hamburger span {
width: 25px;
height: 3px;
background: white;
border-radius: 2px;
}

.mobile-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
background: #140346;
flex-direction: column;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid #08f17c;
}

.mobile-nav a {
color: white;
text-decoration: none;
padding: 15px;
}

.home-second-section {
width: 100%;
min-height: 100vh;
background: #f5f8ff;
}

.main-header.sticky {
box-shadow: 0 15px 25px -5px rgba(20, 3, 70, 0.6);
}

.event-container {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
padding: 80px 5%;
flex-wrap: wrap;
}

.timer-glass-card {
margin-right: 9rem;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 30px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
width: 450px;
text-align: center;
}

.timer-header {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 30px;
color: #1a237e;
font-weight: bold;
}

.dot-icon {
width: 8px;
height: 8px;
background: #4ade80;
border-radius: 50%;
}

.timer-boxes {
display: flex;
justify-content: center;
gap: 15px;
}

.t-box {
background: white;
padding: 20px;
border-radius: 20px;
min-width: 100px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.t-box span {
display: block;
font-size: 2.5rem;
font-weight: 900;
color: #1a237e;
}

.t-box p {
margin: 5px 0 0;
font-size: 0.9rem;
color: #666;
}

.event-image {
max-width: 350px;
}

.event-image img {
width: 100%;
height: auto;
}

.green-text {
color: #4ade80;
}

.event-text-section {
flex: 1;
max-width: 600px;
text-align: right;
padding-right: 85px;
}

.event-text-section h1 {
color: #1a237e !important;
font-size: 3.5rem !important;
line-height: 1.3 !important;
margin-bottom: 20px !important;
}

.description {
color: #555;
margin-bottom: 30px;
line-height: 1.6;
}

.info-boxes-row {
display: flex;
gap: 15px;
margin-bottom: 30px;
}

.info-box {
background: white;
border: 1px solid #e0e0e0;
backdrop-filter: blur(5px);
padding: 15px;
border-radius: 15px;
flex: 1;
text-align: center;
font-size: 0.9rem;
color: #1a237e;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.info-box img {
width: 30px;
margin-bottom: 5px;
}

.cta-button-event {
background: #4ade80;
color: white;
border: none;
padding: 15px 30px;
border-radius: 10px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}

.cta-button-event:hover {
transform: scale(1.05);
}

/* ===== موبایل ===== */
@media (max-width: 768px) {
  .logo-circle {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid #08f17c;
    }
  .auth-btn {
      height: 2rem;
    }
.main-header {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    position: fixed;
    z-index: 1000;
}

.main-header.sticky {
    top: 0;
}

.nav-container {
  background:#140346;
    position: relative;
    width: 100%;
    padding: 10px 16px;
    border-radius: 0;
}

.desktop-nav {
    display: none !important;
}

.hamburger {
    display: flex !important;
    z-index: 1001;
}

.auth-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
}

.mobile-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background: #140346;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #08f17c;
}

.mobile-nav.active {
  position: fixed;
    display: flex;
}

.hero-section {
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    height: auto;
    min-height: 100vh;
    padding: 90px 16px 40px;
    text-align: center;
}

.hero-content {
  position: relative;
  top: 7rem;
    width: 100%;
}
.card-text{
    width: 20%;
}

.hero-content h1 {
    font-size: 28px;
}

.hero-content h2 {
    font-size: 24px;
}

.robot-image {
    width: 220px;
    max-width: 80%;
    position: absolute;
    top: 5rem;
    margin: 0 auto 20px;
}

.home-second-section {
    padding-top: 60px;
}

.event-container {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 60px 16px;
    text-align: center;
}

.event-text-section {
    width: 100%;
    padding-right: 0;
    text-align: center;
}

.event-text-section h1 {
    font-size: 1.8rem !important;
}

.event-text-section p {
    font-size: 1rem;
}

.info-boxes-row {
    flex-direction: column;
    width: 100%;
}

.info-box {
    width: 100%;
}

.timer-glass-card {
    margin-right: 0;
    width: 100%;
    max-width: 450px;
    padding: 24px 16px;
}

.timer-boxes {
    flex-wrap: wrap;
    gap: 10px;
}

.t-box {
    min-width: calc(50% - 10px);
    padding: 16px 10px;
}

.t-box span {
    font-size: 1.8rem;
}

.t-box p {
    font-size: 0.8rem;
}

.event-image {
    max-width: 100%;
    width: 100%;
}

.cta-button,
.cta-button-event {
    width: 50%;
    padding: 12px 24px;
}
}



.events-page{
  min-height: 100vh;
  background-color: #140346; /* آبی */
  padding-top: 120px;
}


/* کانتینر اصلی */
.events-page {
  min-height: 100vh;
  background-color: #140346; /* همان رنگ سایت */
  padding: 160px 20px 100px;
  text-align: center;
  color: white;
}

.events-content h1 { font-size: 3rem; margin-bottom: 10px; }
.events-content p { color: #aaa; margin-bottom: 50px; }

/* گرید کارت‌ها */
.events-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* استایل عمومی کارت‌ها (شیشه‌ای) */
.event-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 380px;
  min-height: 450px;
  border-radius: 20px;
}


.card-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}
.card-bg-m{
  position: absolute;
  width: 60%;
  height: 60%;
  object-fit: cover;
  top: 0;
  left: 4.5rem;
}
/* کارت وسط (Featured) - استایل نئونی */
.event-card.featured {
  border: 2px solid #08f17c; /* رنگ سبز نئونی */
  box-shadow: 0 0 20px rgba(90, 250, 68, 0.2);
  transform: scale(1.05);
}

/* کارت‌های به زودی */
.event-card.coming-soon { opacity: 0.7; }

/* دکمه‌ها */
.btn-active { 
  height: 3rem;
  background: #08f17c; color: #140346; border: none; 
  padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer;
}
.btn-disabled { 
  background: transparent; color: #fff; border: 1px solid #555;
  padding: 10px 20px; border-radius: 8px; cursor: not-allowed;
}
.green-text { color: #08f17c; }

/* جایگاه عکس */
.card-image { width: 100%; height: 150px; background: #333; margin-bottom: 20px; border-radius: 10px; }

.card-content {
  position: relative;
  z-index: 2;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 25px;
  color: white;

  background: linear-gradient(
      to top,
      rgba(0,0,0,0.7),
      rgba(0,0,0,0.2),
      transparent
  );
}


.event-vision-page {
  min-height: 100vh;
  background: #ffffff;
}

body.light-page .main-header .nav-container {
  background: #140346;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
body.light-page .main-header a,
body.light-page .main-header .logo,
body.light-page .main-header .nav-link {
  color: #ffffff;
}

/* کانتینر اصلی */
#event-vision1.event-vision-page {
  padding: 100px 20px 30px !important; 
  min-height: 100vh;
  background: #f9f9f9;
}
.vision-container { max-width: 1200px; margin: 0 auto; }

/* بخش هدر */
#event-vision1 .hero-section {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 10px;
  direction: ltr;
}

/* افکت ذوزنقه برای تصویر */
#event-vision1 .hero-image-wrapper {
  flex: 1;
  height: 350px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}
#event-vision1 .main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#event-vision1 .hero-text {
  flex: 1;
  text-align: right;
  direction: rtl;
}
.hero-text h1 { font-size: 2.5rem; color: #140346; margin-bottom: 15px; }

/* گرید کارت‌ها */
.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.info-card {
  background: white;
  padding: 20px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.card-icon {
  width: 50px;
  height: 50px;
  background: #d4fcd4; /* رنگ سبز ملایم */
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#event-vision1 .hero-text p {
  color: #333;
}

#event-vision1 .info-card small {
  color: #777;
}

#event-vision1 .info-card h3 {
  color: #140346;
}

#event-vision1.event-vision-page {
  padding: 100px 20px 30px !important;
}

#event-vision1 .vision-main-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#event-vision1 .hero-top {
  margin-bottom: 1px;
}

#event-vision1 .info-grid {
  margin-top: 0;
  width: 90%;
}

#event-vision1 .hero-section {
  height: auto !important; /* یا مقدار کمتر */
}

/* ریسپانسیو */
@media (max-width: 900px) {
  .hero-section { flex-direction: column; }
  .hero-image-wrapper { clip-path: none; border-radius: 20px; width: 100%; }
  .info-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .info-grid { grid-template-columns: 1fr; }
}

/* -- بخش سخنران -- */

/* برای اینکه دقیقاً عرض 4 کارت بالایی را بگیرد، max-width را تنظیم می‌کنیم */
.speaker-section {
  grid-column: 1 / -1 !important; /* اگر والد گرید باشد، این تمام عرض را می‌گیرد */
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  /* فاصله بالا را کاملاً حذف می‌کنیم */
  padding-top: 0 !important; 
  /* این فاصله پایین کمی باعث زیبایی می‌شود، اگر خواستی این را هم صفر کن */
  padding-bottom: 20px !important; 
  margin-top: 0 !important; /* حاشیه منفی بالا را هم حذف می‌کنیم */
  margin-bottom: 0 !important; /* حاشیه پایین را هم حذف می‌کنیم */
  position: relative;
  z-index: 10;
}

.speaker-box {
  display: flex !important;
  flex-direction: row-reverse !important;
  /* این عرض را برابر با مجموع 3 کارت + گپ‌ها قرار می‌دهیم */
  /* چون در صفحه شما 3 کارت وجود دارد (380*3 + 30*2 = 1200px) */
  width: 100% !important;
  max-width: 1200px !important; 
  background-color: #f15d3e !important;
  border-radius: 30px !important;
  padding: 30px !important;
  gap: 30px !important;
  align-items: center !important;
  margin: 0 auto !important; /* وسط‌چین کردن باکس */
}

.speaker-image {
  width: 250px !important; 
  height: 250px !important;
  object-fit: cover !important;
  border-radius: 20px !important;
  flex-shrink: 0 !important;
}

.speaker-content {
  flex-grow: 1;
  direction: rtl;
  text-align: right;
  color: white;
}

.speaker-content h3 {
  margin-bottom: 15px;
  font-size: 28px;
}

/* -- ریسپانسیو -- */
@media (max-width: 768px) {
  .speaker-box {
      flex-direction: column !important;
      text-align: center;
      padding: 20px !important; /* کمی پدینگ در موبایل */
  }
  .speaker-content {
      text-align: center;
  }
  .speaker-image {
      width: 180px !important; /* کمی کوچک‌تر در موبایل */
      height: 180px !important;
  }
}

/* ---------------------------------------------------- */
/* --- NEW CONFERENCE DETAILS SECTION (جزئیات همایش) --- */
/* ---------------------------------------------------- */





.details-right-column {
  flex: 2; /* این ستون دو برابر ستون چپ فضا بگیرد */
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-left: 1px solid #eee; /* جداکننده عمودی */
  padding-left: 30px;
}


.details-box h2, .details-left-column h2 {
  color: #333;
  font-size: 20px;
  border-bottom: 2px solid #08f17c; /* خط زیر عنوان */
  padding-bottom: 10px;
  margin-bottom: 15px;
  font-weight: bold;
  text-align: right;
}

.details-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.details-box ul li {
  font-size: 16px;
  color: #555;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  line-height: 1.6;
}

.bullet-icon {
  color: #4CAF50; /* رنگ تیک سبز */
  font-size: 18px;
  margin-left: 8px;
  font-weight: bold;
}

/* استایل دهی برنامه زمانی (ستون چپ) */
.schedule-content ul {
  list-style: none;
  padding: 0;
}

.schedule-content ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed #eee;
  font-size: 16px;
}

.schedule-content ul li:last-child {
  border-bottom: none;
}

.schedule-content .time {
  color: #08f17c; /* رنگ قرمز برای زمان */
  font-weight: bold;
  flex-basis: 30%; /* فضای زمان */
  text-align: left;
}

.schedule-content .event-title {
  color: #333;
  flex-basis: 65%; /* فضای عنوان */
  text-align: right;
}

/* برای موبایل */
@media (max-width: 900px) {
  .details-container {
      flex-direction: column; /* ستون‌ها زیر هم می‌آیند */
      padding: 20px;
      gap: 20px;
  }

 
  
  .schedule-content .time {
      flex-basis: 40%; 
  }

  .schedule-content .event-title {
      flex-basis: 55%; 
  }
}

/* تنظیمات کانتینر اصلی */
.details-container {
  display: flex;
  flex-direction: row-reverse; /* برای قرارگیری فرم در سمت راست در حالت فارسی */
  gap: 30px;
  padding: 40px;
  background-color: #f9f9f9;
}

/* ستون سمت چپ (محتوا) */
.details-left-column {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ستون سمت راست (فرم) */
.details-registration-column {
  flex: 2;
  min-width: 320px;
}

/* استایل کارت ثبت نام */
.registration-card {
  background: #fff;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  position: sticky;
  top: 20px;
}

.registration-card h3 {
  margin-bottom: 20px;
  color: #333;
  border-right: 4px solid #08f17c;
  padding-right: 10px;
}

.form-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: bold;
  font-size: 0.9rem;
}

.form-group input, .form-group select {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
}

.radio-group {
  display: flex;
  gap: 20px;
}

.submit-btn {
  width: 100%;
  padding: 15px;
  background: #e91e63;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

.submit-btn:hover {
  background: #c2185b;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 900px) {
  .details-container {
      flex-direction: column;
  }
  .details-registration-column {
      order: -1; /* فرم در موبایل اول نمایش داده شود */
  }
}


/* استایل بخش جزئیات همایش */
.conference-details-section {
  width: 100%;
  margin: 40px 0;
  background-color: #f9f9f9;
}

.details-container {
  display: flex;
  flex-direction: row;
  gap: 30px;
  padding: 40px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ستون چپ - محتوای اصلی */
.details-left-column {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.details-box {
  background: #fff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.details-box h2 {
  margin-bottom: 20px;
  color: #333;
  border-right: 4px solid #e91e63;
  padding-right: 15px;
}

.details-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.details-sub-box h3 {
  color: #555;
  margin-bottom: 12px;
}

.details-sub-box ul {
  list-style: none;
  padding: 0;
}

.details-sub-box li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bullet-icon {
  color: #e91e63;
  font-weight: bold;
}

/* برنامه زمانی */
.schedule-box {
  background: #fff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.schedule-box h2 {
  margin-bottom: 20px;
  color: #333;
  border-right: 4px solid #e91e63;
  padding-right: 15px;
}

.schedule-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 8px;
}

.time {
  font-weight: bold;
  color: #e91e63;
  min-width: 120px;
}

.event-title {
  color: #555;
}

/* ستون راست - فرم ثبت‌نام */
.details-registration-column {
  flex: 1;
  min-width: 320px;
  max-width: 400px;
}

.registration-card {
  background: #fff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  position: sticky;
  top: 20px;
}

.registration-card h3 {
  margin-bottom: 25px;
  color: #333;
  border-right: 4px solid #08f17c;
  padding-right: 12px;
  font-size: 1.2rem;
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #444;
  font-size: 0.95rem;
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group select {
  width: 100%;
  padding: 12px 15px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #e91e63;
}

.radio-group {
  display: flex;
  gap: 25px;
  margin-top: 8px;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: normal;
}

.radio-group input[type="radio"] {
  cursor: pointer;
  width: 18px;
  height: 18px;
}

.submit-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #e91e63, #c2185b);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s;
  margin-top: 10px;
}

.submit-btn:hover {
  background: linear-gradient(135deg, #c2185b, #a01549);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(233, 30, 99, 0.3);
}

/* ریسپانسیو */
@media (max-width: 900px) {
  .details-container {
      flex-direction: column;
      padding: 20px;
      gap: 25px;
  }
  
  .details-registration-column {
      order: -1;
      max-width: 100%;
  }
  
  .registration-card {
      position: relative;
  }
}
/* Mobile Responsive for Registration Form */
@media (max-width: 768px) {
  .registration-card {
      padding: 20px 15px;
      position: static;
  }
  
  .registration-card h2 {
      font-size: 1.3rem;
      margin-bottom: 20px;
  }
  
  .form-group {
      margin-bottom: 15px;
  }
  
  .form-group label {
      font-size: 0.9rem;
      margin-bottom: 6px;
  }
  
  .form-group input[type="text"],
  .form-group input[type="tel"],
  .form-group select {
      padding: 10px;
      font-size: 14px;
  }
  
  .radio-group {
      flex-wrap: wrap;
      gap: 10px;
  }
  
  .radio-option {
      min-width: 45%;
  }
  
  .submit-btn {
      padding: 12px;
      font-size: 0.95rem;
      width: 100%;
  }
}

@media (max-width: 480px) {
  .details-registration-column {
      min-width: 100%;
  }
  
  .registration-card {
      padding: 15px 10px;
  }
  
  .registration-card h2 {
      font-size: 1.1rem;
  }
  
  .form-group label {
      font-size: 0.85rem;
  }
  
  .radio-option {
      min-width: 100%;
  }
}
/* Mobile Responsive for Event Vision Page & Registration Form */
@media (max-width: 768px) {
  /* Event Vision Page Adjustments */
  #event-vision1.event-vision-page {
      padding-top: 80px;
  }
  
  #event-vision1 .hero-section {
      padding: 20px 15px;
      margin-bottom: 20px;
  }
  
  #event-vision1 .hero-image-wrapper {
      max-width: 100%;
      margin: 0 auto 20px;
  }
  
  #event-vision1 .main-img {
      max-height: 200px;
  }
  
  #event-vision1 .hero-text {
      padding: 15px;
  }
  
  #event-vision1 .hero-text h1 {
      font-size: 1.5rem;
      margin-bottom: 15px;
  }
  
  #event-vision1 .hero-text p {
      font-size: 0.9rem;
      line-height: 1.6;
  }
  
  /* Registration Card Mobile Optimization */
  .details-registration-column {
      width: 100%;
      max-width: 100%;
      padding: 20px 15px;
      margin: 0;
      position: static;
  }
  
  .registration-card {
      padding: 25px 20px;
      position: static;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
  }
  
  .registration-card h2,
  .registration-card h3 {
      font-size: 1.4rem;
      margin-bottom: 20px;
      text-align: center;
  }
  
  .form-group {
      margin-bottom: 18px;
  }
  
  .form-group label {
      font-size: 0.95rem;
      margin-bottom: 8px;
      display: block;
  }
  
  .form-group input[type="text"],
  .form-group input[type="tel"],
  .form-group select {
      width: 100%;
      padding: 12px 15px;
      font-size: 15px;
      border-radius: 8px;
      box-sizing: border-box;
  }
  
  .radio-group {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
  }
  
  .radio-option {
      flex: 1 1 45%;
      min-width: 45%;
      padding: 12px;
      font-size: 0.9rem;
  }
  
  .submit-btn {
      padding: 14px 20px;
      font-size: 1rem;
      width: 100%;
      margin-top: 10px;
  }
}

@media (max-width: 480px) {
  #event-vision1.event-vision-page {
      padding-top: 70px;
  }
  
  #event-vision1 .hero-text h1 {
      font-size: 1.3rem;
  }
  
  #event-vision1 .hero-text p {
      font-size: 0.85rem;
  }
  
  .details-registration-column {
      padding: 15px 10px;
  }
  
  .registration-card {
      padding: 20px 15px;
  }
  
  .registration-card h2,
  .registration-card h3 {
      font-size: 1.2rem;
      margin-bottom: 15px;
  }
  
  .form-group {
      margin-bottom: 15px;
  }
  
  .form-group label {
      font-size: 0.9rem;
      margin-bottom: 6px;
  }
  
  .form-group input[type="text"],
  .form-group input[type="tel"],
  .form-group select {
      padding: 10px 12px;
      font-size: 14px;
  }
  
  .radio-group {
      flex-direction: column;
      gap: 10px;
  }
  
  .radio-option {
      flex: 1 1 100%;
      min-width: 100%;
      width: 100%;
  }
  
  .submit-btn {
      padding: 12px 15px;
      font-size: 0.95rem;
  }
}

/* Extra Small Devices */
@media (max-width: 360px) {
  .registration-card {
      padding: 15px 12px;
  }
  
  .registration-card h2,
  .registration-card h3 {
      font-size: 1.1rem;
  }
  
  .form-group label {
      font-size: 0.85rem;
  }
  
  .form-group input[type="text"],
  .form-group input[type="tel"],
  .form-group select {
      padding: 10px;
      font-size: 13px;
  }
}
/* کانتینر 4 باکس */
.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
}

/* هر باکس */
.info-card {
  width: 100%;
  min-height: 140px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* باکس قرمز زیر */
.conference-details-section,
.details-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .info-grid {
      grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .info-grid {
      grid-template-columns: 1fr;
  }
}
.event-vision-page {
  min-height: 100vh;
  background: #ffffff;
}

body.light-page .main-header .nav-container {
  background:#140346;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

body.light-page .main-header a,
body.light-page .main-header .logo,
body.light-page .main-header .nav-link {
  color: #ffffff;
}

/* کانتینر اصلی */
#event-vision1.event-vision-page {
  padding: 100px 20px 30px !important;
  min-height: 100vh;
  background: #f9f9f9;
}

#event-vision1 .vision-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* بخش هدر */
#event-vision1 .hero-section {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 30px;
  direction: ltr;
  height: auto !important;
}

#event-vision1 .hero-image-wrapper {
  flex: 1 1 50%;
  min-height: 350px;
  height: 350px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}

#event-vision1 .main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#event-vision1 .hero-text {
  flex: 1 1 50%;
  text-align: right;
  direction: rtl;
}

#event-vision1 .hero-text h1 {
  font-size: 2.5rem;
  color: #140346;
  margin-bottom: 15px;
  line-height: 1.4;
}

#event-vision1 .hero-text p {
  color: #333;
  line-height: 2;
}

/* گرید کارت‌ها */
#event-vision1 .info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  margin-top: 0;
  align-items: stretch; /* این خط باعث هم‌ارتفاع شدن باکس‌ها می‌شود */
}

#event-vision1 .info-card {
  background: white;
  padding: 20px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  min-height: 130px;
  height: 100%;
  width: 100%;
}

#event-vision1 .card-text {
  flex: 1;
}

#event-vision1 .card-text small {
  color: #777;
  display: block;
  margin-bottom: 8px;
}

#event-vision1 .info-card h3 {
  color: #140346;
  font-size: 1rem;
  line-height: 1.8;
  margin: 0;
}

#event-vision1 .card-icon {
  width: 56px;
  min-width: 56px;
  height: 56px;
  background: #d4fcd4;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#event-vision1 .card-icon img {
  max-width: 24px;
  max-height: 24px;
}

/* ریسپانسیو */
@media (max-width: 992px) {
  #event-vision1 .hero-section {
      flex-direction: column;
      gap: 24px;
  }

  #event-vision1 .hero-image-wrapper {
      width: 100%;
      min-height: 280px;
      height: 280px;
      clip-path: none;
      border-radius: 20px;
  }

  #event-vision1 .hero-text {
      width: 100%;
  }

  #event-vision1 .info-grid {
      /* در تبلت ۲ ستونه می‌شود */
      grid-template-columns: repeat(2, minmax(0, 1fr)); 
  }
}

@media (max-width: 576px) {
  #event-vision1.event-vision-page {
      padding: 90px 16px 24px !important;
  }

  #event-vision1 .info-grid {
      /* در موبایل ۱ ستونه تمام‌عرض می‌شود */
      grid-template-columns: 1fr;
      gap: 16px;
  }
}
/* =========================================
 Maktabkhooneh Style for Vision 1 
 ========================================= */
 .mk-vision-container {
  width: 100%;
  background-color: #f8f9fa; /* پس زمینه روشن سایت مکتبخونه */
  color: #333;
  padding: 40px;
  border-radius: 12px;
}

/* Header Section */
.mk-header-section {
  text-align: right;
  margin-bottom: 40px;
  padding: 20px 0;
}

.mk-header-text h1 {
  color: #140346;
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 15px;
}

.mk-header-text p {
  color: #555;
  font-size: 1.1rem;
  line-height: 1.8;
  max-width: 800px;
}

/* 4 Info Cards Grid */
.mk-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}

.mk-info-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  border: 1px solid #eee;
  transition: transform 0.3s ease;
}

.mk-info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.mk-icon-box {
  background-color: #e6f9ed; /* سبز خیلی روشن */
  color: #28a745;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  margin-left: 15px;
}

.mk-info-text {
  display: flex;
  flex-direction: column;
}

.mk-info-text span {
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 5px;
}

.mk-info-text strong {
  font-size: 1rem;
  color: #333;
}

/* Details and Form Grid (Two Columns) */
.mk-content-grid {
  display: grid;
  grid-template-columns: 1fr 400px; /* فرم کوچکتر، جزئیات بزرگتر */
  gap: 30px;
}

.mk-details-card, .mk-form-card {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  border: 1px solid #eee;
}

.mk-section-title {
  font-size: 1.4rem;
  color: #140346;
  margin-bottom: 25px;
  border-bottom: 2px solid #28a745;
  display: inline-block;
  padding-bottom: 10px;
}

/* Topics list */
.mk-topics {
  margin-bottom: 30px;
}

.mk-topics h3 {
  font-size: 1.1rem;
  color: #444;
  margin-bottom: 15px;
}

.mk-topics ul {
  list-style: none;
  padding: 0;
}

.mk-topics ul li {
  margin-bottom: 12px;
  color: #555;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.mk-topics ul li i {
  color: #de1059; /* تیک های رنگی مکتبخونه */
  margin-left: 10px;
  font-size: 1rem;
}

/* Form Styles */
.mk-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mk-input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #444;
}

.mk-input-group input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #fcfcfc;
  transition: all 0.3s;
}

.mk-input-group input:focus {
  border-color: #28a745;
  outline: none;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.mk-radio-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.mk-radio-group label {
  font-weight: 600;
  color: #444;
  font-size: 0.9rem;
}

.mk-radios {
  display: flex;
  gap: 15px;
}

.mk-radios label {
  font-weight: normal;
  cursor: pointer;
}
.mk-submit-btn {
  background-color: #28a745; /* دکمه سبز مکتبخونه */
  color: white;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 10px;
}

.mk-submit-btn:hover {
  background-color: #218838;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .mk-content-grid {
      grid-template-columns: 1fr 350px;
  }
}

@media (max-width: 992px) {
  .mk-info-grid {
      grid-template-columns: repeat(2, 1fr);
  }
  
  .mk-content-grid {
      grid-template-columns: 1fr; /* فرم میره زیر جزئیات */
  }
  
  .mk-form-column {
      order: -1; /* فرم میاد بالای جزئیات در موبایل */
  }
}


@media (max-width: 768px) {
  .mk-vision-container {
      padding: 20px;
  }

  .mk-info-grid {
      grid-template-columns: 1fr;
  }
  
  .mk-header-text h1 {
      font-size: 1.8rem;
  }
}

/* این کد را جایگزین استایل قبلی هدر کن */
#main-header {
  background-color: #27006d !important; /* رنگ بنفش تیره مدنظرت */
  width: 100%;
  padding: 10px 0;
  color: #fff;
}
/* این کد را جایگزین بخش info-grid قبلی کن */
.info-grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 100%; /* کاملا برابر با عرض صفحه */
  margin: 30px 0;
}

.info-card {
  flex: 1; /* هم‌اندازه شدن باکس‌ها */
  background: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}
/* چیدمان جدید بخش جزئیات همایش */
.conference-details-layout {
  width: 100%;
  margin-top: 40px;
}

.details-top-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.details-right-half, .details-left-half {
  flex: 1; /* هر کدام دقیقا نصف عرض را می‌گیرند */
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.details-bottom-row {
  width: 100%;
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 15px;
}

.details-container {
  display: flex;
  gap: 20px;
}
#event-vision1 .info-grid {
  width: 96%;
  padding-right: 4%;
}
.auth-page-container {
  width: 100%;
  min-height: calc(100vh - 90px);
  padding: 140px 20px 80px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  background: #1a0541;
}

.auth-form-box {
  width: 100%;
  max-width: 520px;
  padding: 40px 35px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(39, 0, 109, 0.14);
  border: 1px solid rgba(39, 0, 109, 0.12);
  box-sizing: border-box;
}

.auth-form-box h1 {
  margin: 0 0 12px;
  color: #27006d;
  font-size: 32px;
  font-weight: 800;
  text-align: center;
}

.auth-description {
  margin: 0 0 30px;
  color: #555555;
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
}

.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
}

.auth-form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.auth-form-group label {
  color: #27006d;
  font-size: 15px;
  font-weight: 700;
}

.auth-form-group input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(39, 0, 109, 0.22);
  border-radius: 14px;
  outline: none;
  color: #222222;
  background: #ffffff;
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.auth-form-group input:focus {
  border-color: #27006d;
  box-shadow: 0 0 0 4px rgba(39, 0, 109, 0.1);
}

.auth-rules-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #333333;
  font-size: 14px;
  line-height: 1.8;
  cursor: pointer;
  user-select: none;
}

.auth-rules-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: #27006d;
  cursor: pointer;
}

.auth-submit-btn {
  width: 100%;
  height: 54px;
  margin-top: 8px;
  border: none;
  border-radius: 16px;
  background: #27006d;
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.auth-submit-btn:hover {
  background: #d60000;
  box-shadow: 0 12px 28px rgba(214, 0, 0, 0.25);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .auth-page-container {
      padding: 120px 16px 60px;
  }

  .auth-form-box {
      max-width: 100%;
      padding: 32px 24px;
      border-radius: 20px;
  }

  .auth-form-box h1 {
      font-size: 28px;
  }
}

@media (max-width: 480px) {
  .auth-page-container {
      padding: 105px 14px 45px;
  }

  .auth-form-box {
      padding: 28px 18px;
      border-radius: 18px;
  }

  .auth-form-box h1 {
      font-size: 24px;
  }

  .auth-description {
      font-size: 14px;
  }

  .auth-form-group input {
      height: 50px;
      font-size: 14px;
  }

  .auth-submit-btn {
      height: 52px;
      font-size: 16px;
  }
}
/* ==========================================================================
 بخش درباره ما با طراحی شیشه‌ای نئونی مدرن (دقیقاً مشابه تصویر ارسالی)
 ========================================================================== */

/* ظرف کل بخش درباره ما */
.about-section {
  width: 100%;
  min-height: 100vh;
  padding: 140px 20px 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* کارت در دسکتاپ سمت راست/چپ شناور باشد */
  box-sizing: border-box;
  /* اعمال گرادینت تیره بنفش روی عکس برنامه‌نویسان */
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 20%, rgba(39, 0, 109, 0.25) 100%),
  url("/static/darbare.jpg") no-repeat center center / cover;
  
  position: relative;
  overflow: hidden;
}

/* کانتینر داخلی برای ایجاد فاصله استاندارد از کناره‌ها */
.about-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start; /* ترازبندی کارت به سمت چپ طبق تصویر */
  box-sizing: border-box;
}

/* کارت شیشه‌ای با افکت Glassmorphism */
.about-glass-card {
  width: 100%;
  max-width: 540px; /* پهنای متناسب کارت */
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 40px;
  padding: 50px 40px;
  box-sizing: border-box;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 
              inset 0 1px 0 rgba(255, 255, 255, 0.18), 
              0 0 40px rgba(39, 0, 109, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: aboutFadeInUp 0.8s ease-out;
}

/* آیکون دایره‌ای بالای کارت */
.about-top-icon {
  width: 80px;
  height: 80px;
  background: rgba(46, 255, 124, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  border: 1px solid rgba(46, 255, 124, 0.25);
  box-shadow: 0 0 25px rgba(46, 255, 124, 0.15);
}

/* عنوان سبز نئونی فوق‌العاده جذاب */
.about-title {
  font-size: 42px;
  font-weight: 900;
  color: #2eff7c !important;
  margin: 0 0 10px 0 !important;
  text-shadow: 0 0 25px rgba(46, 255, 124, 0.35);
  letter-spacing: -0.5px;
}

/* زیرعنوان همراه با لوزی‌های نئونی */
.about-subtitle {
  font-size: 16px;
  font-weight: 700;
  color: #2eff7c !important;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 0 10px rgba(46, 255, 124, 0.2);
}

.about-subtitle .diamond {
  font-size: 13px;
  opacity: 0.9;
}

/* پاراگراف توضیحات */
.about-description {
  font-size: 15.5px;
  line-height: 2;
  color: #e0d9f0 !important;
  margin: 0 0 40px 0 !important;
  font-weight: 400;
  text-align: justify;
  text-align-last: center;
}

/* گرید سه‌ستونه برای آیکون‌های پایین (تحول، توسعه، جذب) */
.about-features-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 35px;
  margin-bottom: 45px;
}

.about-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* پس‌زمینه مربعی کوچک برای آیکون‌های سه‌گانه */
.feature-icon-wrapper {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* افکت هاور روی آیکون‌های سه‌گانه */
.about-feature-item:hover .feature-icon-wrapper {
  background: rgba(46, 255, 124, 0.12);
  border-color: rgba(46, 255, 124, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(46, 255, 124, 0.18);
}

/* متن زیر آیکون‌های سه‌گانه */
.feature-label {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff !important;
}

/* دکمه کپسولی سبز نئونی خیره‌کننده */
.about-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #2eff7c !important;
  color: #09001a !important;
  padding: 16px 36px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 25px rgba(46, 255, 124, 0.35);
}

/* افکت هاور روی دکمه کپسولی */
.about-action-btn:hover {
  background: #ffffff !important;
  color: #27006d !important;
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
}

/* فلش متحرک دکمه */
.btn-arrow {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.about-action-btn:hover .btn-arrow {
  transform: translateX(-5px);
}

/* انیمیشن لود ملایم کارت */
@keyframes aboutFadeInUp {
  from {
      opacity: 0;
      transform: translateY(40px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

/* ==========================================================================
 ریسپانسیو سازی هوشمند برای انواع نمایشگرها
 ========================================================================== */

@media (max-width: 992px) {
  .about-container {
      justify-content: center; /* در تبلت و موبایل کارت در مرکز صفحه قرار بگیرد */
  }
}

@media (max-width: 768px) {
  .about-section {
      padding: 110px 16px 60px;
  }
  
  .about-glass-card {
      padding: 40px 24px;
      border-radius: 30px;
  }
  
  .about-title {
      font-size: 34px;
  }
  
  .about-description {
      font-size: 15px;
      line-height: 1.8;
  }
}

@media (max-width: 480px) {
  .about-glass-card {
      padding: 30px 16px;
      border-radius: 24px;
  }
  
  .about-title {
      font-size: 28px;
  }
  
  .about-subtitle {
      font-size: 14px;
      margin-bottom: 20px;
  }
  
  .about-description {
      font-size: 14px;
      margin-bottom: 30px;
  }
  
  .about-features-grid {
      grid-template-columns: 1fr; /* تبدیل به تک ستونی برای موبایل‌های خیلی کوچک */
      gap: 20px;
      padding-top: 25px;
  }
  
  .about-action-btn {
      width: 100%;
      padding: 14px 24px;
      font-size: 15px;
  }
}
/* ==========================================
 Contact Page - TechBot Theme
 ========================================== */

 .contact-page {
  width: 100%;
  min-height: 100vh;
  padding: 130px 20px 70px;
  background:
      radial-gradient(circle at top right, rgba(39, 0, 109, 0.14), transparent 34%),
      radial-gradient(circle at bottom left, rgba(220, 38, 38, 0.12), transparent 32%),
      linear-gradient(135deg, #ffffff 0%, #f7f4ff 48%, #ffffff 100%);
  box-sizing: border-box;
  overflow: hidden;
}

.contact-page-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}

.contact-header-box {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 45px;
}

.contact-mini-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: rgba(39, 0, 109, 0.08);
  color: #27006d;
  font-size: 14px;
  font-weight: 800;
  border: 1px solid rgba(39, 0, 109, 0.14);
}

.contact-header-box h1 {
  margin: 0 0 16px;
  color: #27006d;
  font-size: 42px;
  font-weight: 900;
  line-height: 1.4;
}

.contact-header-box p {
  margin: 0;
  color: #4b5563;
  font-size: 17px;
  line-height: 2;
}

.contact-content-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.35fr);
  gap: 28px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.contact-info-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  width: 100%;
  box-sizing: border-box;
}

.contact-info-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  min-height: 118px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(39, 0, 109, 0.12);
  box-shadow: 0 18px 45px rgba(39, 0, 109, 0.09);
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.contact-info-card:hover {
  transform: translateY(-6px);
  border-color: rgba(220, 38, 38, 0.32);
  box-shadow: 0 24px 60px rgba(39, 0, 109, 0.14);
}

.contact-icon-box {
  width: 58px;
  height: 58px;
  min-width: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(135deg, #27006d 0%, #4b1499 58%, #dc2626 100%);
  box-shadow: 0 12px 26px rgba(39, 0, 109, 0.24);
}

.contact-info-card h3 {
  margin: 0 0 8px;
  color: #27006d;
  font-size: 18px;
  font-weight: 900;
}

.contact-info-card p {
  margin: 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.8;
}

.contact-form-column {
  width: 100%;
  box-sizing: border-box;
}

.contact-form-card {
  width: 100%;
  height: 100%;
  padding: 34px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(39, 0, 109, 0.12);
  box-shadow: 0 22px 70px rgba(39, 0, 109, 0.12);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.contact-form-card::before {
  content: "";
  position: absolute;
  top: -90px;
  left: -90px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.12);
  pointer-events: none;
}

.contact-form-card::after {
  content: "";
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(39, 0, 109, 0.12);
  pointer-events: none;
}

.contact-form-card h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: #27006d;
  font-size: 28px;
  font-weight: 900;
}

.contact-form-description {
  position: relative;
  z-index: 1;
  margin: 0 0 28px;
  color: #6b7280;
  font-size: 15px;
  line-height: 2;
}

.contact-form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
}

.contact-form-group {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
}

.contact-form-group label {
  color: #27006d;
  font-size: 14px;
  font-weight: 800;
}

.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
  width: 100%;
  padding: 15px 16px;
  border-radius: 17px;
  border: 1px solid rgba(39, 0, 109, 0.16);
  background: #ffffff;
  color: #111827;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
  color: #9ca3af;
}

.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
  border-color: #27006d;
  box-shadow: 0 0 0 4px rgba(39, 0, 109, 0.1);
  background: #ffffff;
}

.contact-form-group textarea {
  min-height: 135px;
  resize: vertical;
  line-height: 1.9;
}

.contact-submit-btn {
  width: 100%;
  border: none;
  outline: none;
  margin-top: 4px;
  padding: 16px 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 18px 34px rgba(220, 38, 38, 0.27);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact-submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 46px rgba(220, 38, 38, 0.34);
}

.contact-bottom-banner {
  margin-top: 32px;
  padding: 28px 32px;
  border-radius: 30px;
  background: linear-gradient(135deg, #27006d 0%, #3b0d82 55%, #08f17c 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  box-shadow: 0 24px 60px rgba(39, 0, 109, 0.22);
  box-sizing: border-box;
}

.contact-bottom-banner h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 900;
}

.contact-bottom-banner p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.9;
}

.contact-event-btn {
  border: none;
  outline: none;
  min-width: 170px;
  padding: 14px 22px;
  border-radius: 999px;
  background: #ffffff;
  color: #27006d;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, background 0.25s ease;
}

.contact-event-btn:hover {
  transform: translateY(-3px);
  background: #f4f0ff;
}

@media (max-width: 900px) {
  .contact-page {
      padding: 115px 16px 55px;
  }

  .contact-content-grid {
      grid-template-columns: 1fr;
  }

  .contact-info-column {
      grid-template-columns: 1fr 1fr;
  }

  .contact-bottom-banner {
      flex-direction: column;
      align-items: flex-start;
  }

  .contact-event-btn {
      width: 100%;
  }
}

@media (max-width: 640px) {
  .contact-header-box h1 {
      font-size: 32px;
  }

  .contact-header-box p {
      font-size: 15px;
  }

  .contact-info-column {
      grid-template-columns: 1fr;
  }

  .contact-form-card {
      padding: 24px 18px;
      border-radius: 26px;
  }

  .contact-form-row {
      grid-template-columns: 1fr;
  }

  .contact-info-card {
      padding: 18px;
      border-radius: 22px;
  }

  .contact-bottom-banner {
      padding: 24px 20px;
      border-radius: 24px;
  }

  .contact-bottom-banner h3 {
      font-size: 20px;
  }
}

@media (max-width: 420px) {
  .contact-page {
      padding: 105px 12px 45px;
  }

  .contact-mini-title {
      font-size: 13px;
      padding: 7px 16px;
  }

  .contact-header-box h1 {
      font-size: 28px;
  }

  .contact-icon-box {
      width: 52px;
      height: 52px;
      min-width: 52px;
      border-radius: 18px;
  }

  .contact-info-card h3 {
      font-size: 16px;
  }

  .contact-info-card p {
      font-size: 14px;
  }

  .contact-form-card h2 {
      font-size: 24px;
  }
}
body .main-header,
body.light-page .main-header,
body .main-header.sticky,
body.light-page .main-header.sticky {
  background: #ffffff00 !important;
}

body .desktop-nav a,
body.light-page .desktop-nav a,
body .mobile-nav a,
body.light-page .mobile-nav a,
body .auth-btn,
body.light-page .auth-btn {
  color: #ffffff !important;
}

/* =====================================================
 کنترل نمایش صفحات سایت
 این کد باید حتماً آخر فایل style.css باشد
 ===================================================== */

 main > section.page {
  display: none !important;
}

main > section.page.active {
  display: block !important;
}

main > section.page.active.about-section {
  display: flex !important;
}

main > section.page.active.event-vision-page {
  display: block !important;
}

main > section.page.active.events-page {
  display: block !important;
}

main > section.page.active.white-section {
  display: block !important;
}
main > section.page {
  display: none !important;
}

main > section.page.active {
  display: block !important;
}
/* ===============================
 EVENT VISION - DETAILS SECTION
 =============================== */

 .conference-details-section{
  padding:60px 20px;
  background:#f9f9f9;
}

.details-container{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:stretch;
}

/* ستون چپ */
.details-left-column{
  display:flex;
  flex-direction:column;
  gap:30px;
}

/* باکس جزئیات */
.details-box{
  background:#ffffff;
  padding:30px;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.details-sub-box h3{
  color:#140346;
  margin-bottom:15px;
}

.details-sub-box ul{
  list-style:none;
  padding:0;
}

.details-sub-box li{
  margin-bottom:10px;
  color:#444;
}

/* برنامه زمانی */
.schedule-box{
  background:#ffffff;
  padding:30px;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.schedule-box h3{
  color:#140346;
  margin-bottom:20px;
}

.schedule-item{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #eee;
  padding:10px 0;
}

.schedule-item span{
  font-weight:bold;
  color:#140346;
}

.schedule-item p{
  color:#08f17c;
}

/* ستون فرم */
.details-registration-column{
  display:flex;
}

.registration-card{
  background:#ffffff;
  padding:40px;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
  width:100%;
}

.registration-card h3{
  color:#140346;
  margin-bottom:25px;
  text-align:center;
}

.registration-card form{
  display:flex;
  flex-direction:column;
  gap:15px;
}

.registration-card input,
.registration-card select{
  padding:12px;
  border-radius:10px;
  border:1px solid #ddd;
  font-family:inherit;
}

.radio-group{
  display:flex;
  flex-direction:column;
  gap:10px;
  color:#333;
}

.registration-card button{
  background:#08f17c;
  color:white;
  padding:14px;
  border:none;
  border-radius:30px;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
}

.registration-card button:hover{
  background:#08f17c;
}

/* ===============================
 RESPONSIVE
 =============================== */

@media(max-width:900px){

  .details-container{
      grid-template-columns:1fr;
  }

  .details-left-column{
      order:2;
  }

  .details-registration-column{
      order:1;
  }

}
/* =========================================
 FIX EVENT VISION DETAILS / REGISTRATION
 این بلوک را دقیقاً آخر style.css قرار بده
 ========================================= */

 #event-vision1 .conference-details-section{
  width: 100%;
  padding: 40px 0 0;
}

#event-vision1 .details-container{
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: stretch;
  direction: ltr;
}

#event-vision1 .details-left-column{
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  min-width: 0;
}

#event-vision1 .details-registration-column{
  grid-column: 2;
  display: flex;
  width: 100%;
  min-width: 0;
}

#event-vision1 .details-box,
#event-vision1 .schedule-box,
#event-vision1 .registration-card{
  width: 100%;
  max-width: 100%;
}

#event-vision1 .registration-card{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-height: 100%;
  padding: 40px;
  box-sizing: border-box;
}

#event-vision1 .registration-card form{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#event-vision1 .registration-card input,
#event-vision1 .registration-card select,
#event-vision1 .registration-card button{
  width: 100%;
  box-sizing: border-box;
}

#event-vision1 .details-box,
#event-vision1 .schedule-box,
#event-vision1 .registration-card{
  direction: rtl;
  text-align: right;
}

#event-vision1 .details-box,
#event-vision1 .schedule-box{
  box-sizing: border-box;
}

@media (max-width: 900px){
  #event-vision1 .details-container{
      grid-template-columns: 1fr;
      direction: rtl;
  }

  #event-vision1 .details-registration-column{
      grid-column: auto;
      order: 1;
  }

  #event-vision1 .details-left-column{
      grid-column: auto;
      order: 2;
  }
}
/* =================================================================
 استایل‌های اختصاصی بخش جزئیات و ثبت‌نام همایش ویژن (نسخه بی نقص و عریض)
 محل قرارگیری: این بلوک را دقیقا عینا کپی کرده و به انتهای فایل style.css اضافه کنید.
 ================================================================= */

/* تنظیم کلی سکشن */
#event-vision1 .conference-details-section {
  background-color: #f9f9f9 !important;
  padding: 60px 0 !important;
  width: 100% !important;
}

/* کانتینر اصلی - تقسیم دقیق ۵۰ / ۵۰ کامل */
#event-vision1 .details-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* تخصیص دقیق دو ستون هم‌اندازه */
  gap: 40px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  direction: rtl !important; /* راست‌چین پیش‌فرض */
}

/* ستون چپ (جدول‌ها) */
#event-vision1 .details-left-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 30px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* باکس جزئیات چپ */
#event-vision1 .details-box {
  background: #ffffff !important;
  padding: 35px !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#event-vision1 .details-content-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 35px !important;
}

/* استایل عنوان جدول‌های چپ */
#event-vision1 .details-sub-box h3 {
  color: #140346 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 0 20px 0 !important;
  padding-right: 12px !important;
  border-right: 4px solid #27006d !important; /* خط سرمه‌ای شاخص تم رنگی شما در سمت راست هدر */
  text-align: right !important;
}

/* لیست محورها و چرا شرکت کنم */
#event-vision1 .details-sub-box ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  text-align: right !important;
}

#event-vision1 .details-sub-box li {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  font-size: 15px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  margin: 0 !important;
  text-align: right !important;
  direction: rtl !important;
}

/* آیکون تیک سبز نئونی/زمردی */
#event-vision1 .check-icon {
  color: #10b981 !important; /* تیک سبز زمردی درخشان */
  font-weight: bold !important;
  margin-left: 10px !important; /* فاصله تیک از نوشته جلوی آن */
  font-size: 16px !important;
  display: inline-block !important;
}

/* باکس برنامه زمانی */
#event-vision1 .schedule-box {
  background: #ffffff !important;
  padding: 30px 35px !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#event-vision1 .schedule-box h3 {
  color: #140346 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 0 20px 0 !important;
  padding-right: 12px !important;
  border-right: 4px solid #27006d !important;
  text-align: right !important;
}

#event-vision1 .schedule-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 15px 0 !important;
  border-bottom: 1px dashed #e2e8f0 !important;
  direction: rtl !important;
}

#event-vision1 .schedule-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

#event-vision1 .schedule-time {
  font-weight: 700 !important;
  color: #27006d !important;
  font-size: 14px !important;
  background: #f1f5f9 !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
}

#event-vision1 .schedule-text {
  color:#06145f !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}


/* =================================================================
 ستون راست (فرم ثبت‌نام کاملا عریض و پهن بدون فضای خالی هرز)
 ================================================================= */

#event-vision1 .details-registration-column {
  display: flex !important;
  width: 100% !important; /* اشغال کل عرض نصف سمت راست */
  box-sizing: border-box !important;
}

#event-vision1 .registration-card {
  background: #ffffff !important;
  padding: 40px !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  width: 100% !important; /* کشیدگی کامل به لبه راست ستون */
  max-width: 100% !important; /* خنثی کردن تمام محدود کننده‌های قبلی */
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

#event-vision1 .registration-card h3 {
  color: #140346 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  margin: 0 0 30px 0 !important;
  text-align: center !important;
  position: relative !important;
  padding-bottom: 12px !important;
}

/* خط تزیینی قرمز زیر هدر فرم ثبت نام */
#event-vision1 .registration-card h3::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 60px !important;
  height: 3px !important;
  background-color: #08f17c !important; /* قرمز برند همایش شما */
  border-radius: 2px !important;
}

#event-vision1 .registration-card form {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
}

/* استایل فیلدهای ورودی */
#event-vision1 .registration-card input[type="text"],
#event-vision1 .registration-card input[type="tel"],
#event-vision1 .registration-card select {
  width: 100% !important;
  height: 52px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  border: 1.5px solid #e2e8f0 !important;
  background-color: #f8fafc !important;
  font-size: 15px !important;
  font-family: inherit !important;
  color: #334155 !important;
  outline: none !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
  text-align: right !important;
}

/* افکت فوق‌العاده فوکوس روی فیلدها */
#event-vision1 .registration-card input:focus,
#event-vision1 .registration-card select:focus {
  border-color: #27006d !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(39, 0, 109, 0.1) !important;
}

/* تنظیم بخش انتخاب جنسیت (رادیو باتن ها) */
#event-vision1 .radio-group {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin: 10px 0 !important;
  direction: rtl !important;
  text-align: right !important;
  width: 100% !important;
}

#event-vision1 .radio-title {
  font-weight: 700 !important;
  color: #140346 !important;
  font-size: 15px !important;
}

#event-vision1 .radio-options {
  display: flex !important;
  align-items: center !important;
  gap: 25px !important;
}

#event-vision1 .radio-option {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-size: 15px !important;
  color: #475569 !important;
  font-weight: 600 !important;
  user-select: none !important;
}

/* اصلاح قطعی کلیدهای رادیویی جنسیتی (رفع مشکل عرض ۱۰۰٪ و ناهماهنگی تراز) */
#event-vision1 .radio-option input[type="radio"] {
  width: 20px !important; /* عرض دقیق دایره رادیویی */
  height: 20px !important; /* ارتفاع دقیق */
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: #27006d !important; /* هماهنگ با تم سرمه‌ای تیره برند شما */
}

/* دکمه ثبت‌نام نهایی */
#event-vision1 .registration-card button[type="submit"] {
  width: 100% !important;
  height: 52px !important;
  background: #08f17c !important; /* قرمز همایش شما */
  color: #ffffff !important;
  border: none !important;
  border-radius: 30px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 6px 20px rgba(255, 59, 96, 0.25) !important;
  box-sizing: border-box !important;
}

#event-vision1 .registration-card button[type="submit"]:hover {
  background: #08f17c !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(255, 59, 96, 0.35) !important;
}


/* =================================================================
 ریسپانسیو کامل برای صفحات موبایل و تبلت
 ================================================================= */

@media (max-width: 991px) {
  #event-vision1 .details-container {
      grid-template-columns: 1fr !important; /* تبدیل چیدمان به تک ستونی در موبایل */
      gap: 30px !important;
  }

  #event-vision1 .details-registration-column {
      order: 1 !important; /* فرم ثبت‌نام ابتدا نمایش داده شود */
  }

  #event-vision1 .details-left-column {
      order: 2 !important; /* جدول‌ها به زیر فرم منتقل شوند */
  }
}
/* [نینجا]: اصلاح تراز عمودی آیکون‌ها از سقف باکس */

.info-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  /* تغییر از center به flex-start برای تراز شدن از بالا */
  justify-content: flex-start !important; 
  
  /* فاصله دقیق و یکسان آیکون از سقف باکس */
  padding-top: 25px !important; 
  padding-left: 15px !important;
  padding-right: 15px !important;
  padding-bottom: 20px !important;
  
  background: white !important;
  border-radius: 15px !important;
  min-height: 150px !important; /* ارتفاع ثابت برای یکدست شدن باکس‌ها */
  flex: 1 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.icon-wrapper {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(90, 250, 68, 0.1) !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important; /* فاصله ثابت آیکون با متن زیرش */
  flex-shrink: 0 !important; /* جلوگیری از تغییر سایز آیکون */
}

.style-svg-icon {
  width: 26px !important;
  height: 26px !important;
  stroke: #08f17c !important;
}

.info-text-content {
  font-size: 0.95rem !important;
  font-weight: bold !important;
  color: #1a237e !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* اصلاح ریسپانسیو برای موبایل */
@media (max-width: 768px) {
  .info-boxes-row {
      flex-direction: column !important;
      gap: 15px !important;
  }
  
  .info-box {
      min-height: auto !important;
      flex-direction: row !important; /* در موبایل آیکون کنار متن باشد */
      justify-content: flex-start !important;
      padding: 15px !important;
      text-align: right !important;
  }

  .icon-wrapper {
      margin-bottom: 0 !important;
      margin-left: 15px !important; /* فاصله در حالت راست‌چین موبایل */
  }
  
  .info-text-content {
      text-align: right !important;
  }
}
/* [نینجا]: اصلاح تم رنگی بخش تماس با ما مطابق با برند تک‌بات */

/* ۱. تغییر رنگ دایره پشت کارت ارسال پیام (که در عکس صورتی بود) */
.contact-form-card::before {
  background: radial-gradient(circle, rgba(90, 250, 68, 0.2) 0%, transparent 70%) !important;
}

/* ۲. اصلاح آیکون‌های سمت راست (شماره تماس و ایمیل) */
.contact-icon-box {
  background: linear-gradient(135deg, #27006d 0%, #140346 100%) !important; /* پس‌زمینه سرمه‌ای */
  border: 1px solid #08f17c !important; /* لبه سبز نئون */
  box-shadow: 0 10px 20px rgba(90, 250, 68, 0.15) !important;
}

.contact-icon-box svg {
  stroke: #08f17c !important; /* رنگ آیکون‌ها سبز نئونی */
}

/* ۳. اصلاح استایل فیلد‌های ورودی (Input) */
.contact-form-group input:focus, 
.contact-form-group textarea:focus {
  border-color: #08f17c !important;
  box-shadow: 0 0 10px rgba(90, 250, 68, 0.2) !important;
}

/* ۴. اصلاح رنگ تیترها و متون برای هماهنگی بیشتر */
.contact-info-card h3 {
  color: #27006d !important; /* رنگ سرمه‌ای برای عنوان‌ها */
}

.contact-header-box h1 {
  color: #27006d !important;
}

.contact-mini-title {
  background: rgba(39, 0, 109, 0.1) !important;
  color: #27006d !important;
  border: 1px solid #27006d !important;
}

/* ۵. اصلاح دکمه ارسال پیام */
.contact-submit-btn {
  background: #08f17c !important;
  color: #140346 !important;
  font-weight: bold !important;
  border: none !important;
}

.contact-submit-btn:hover {
  box-shadow: 0 5px 15px rgba(90, 250, 68, 0.4) !important;
  transform: translateY(-2px);
}
main > section.page.active {
  display: block !important;
}
/* =====================================================
 حالت اختصاصی هدر فقط برای صفحه تماس با ما
 وقتی سکشن contact-page کلاس active دارد
 ===================================================== */

 body:has(.contact-page.active) .main-header {
  top: 20px !important;
  background: transparent !important;
}

body:has(.contact-page.active) .nav-container {
  background: #140346 !important;
  border: 1px solid rgba(90, 250, 68, 0.45) !important;
  box-shadow: 0 14px 35px rgba(20, 3, 70, 0.28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:has(.contact-page.active) .desktop-nav .nav-link {
  color: #ffffff !important;
}

body:has(.contact-page.active) .desktop-nav .nav-link:hover,
body:has(.contact-page.active) .desktop-nav .nav-link.active {
  color: #08f17c !important;
}

body:has(.contact-page.active) .auth-btn {
  background: #08f17c !important;
  color: #140346 !important;
  box-shadow: 0 8px 20px rgba(90, 250, 68, 0.28) !important;
}

body:has(.contact-page.active) .logo-circle {
  border-color: #08f17c !important;
}

body:has(.contact-page.active) .hamburger span {
  background: #ffffff !important;
}

body:has(.contact-page.active) .mobile-nav {
  background: #140346 !important;
  border-bottom: 1px solid #08f17c !important;
}

body:has(.contact-page.active) .mobile-nav a {
  color: #ffffff !important;
}

body:has(.contact-page.active) .mobile-nav a:hover {
  color: #08f17c !important;
}

/* وقتی داخل صفحه تماس اسکرول می‌کنی هم هدر خوانا بماند */
body:has(.contact-page.active) .main-header.sticky {
  top: 0 !important;
}

body:has(.contact-page.active) .main-header.sticky .nav-container {
  width: 100% !important;
  border-radius: 0 !important;
  background: #140346 !important;
  border: none !important;
  border-bottom: 1px solid #08f17c !important;
  box-shadow: 0 15px 25px -5px rgba(20, 3, 70, 0.45) !important;
}
.home-hero{
  background-image: url('00-18.jpg');
  background-size: cover;
  background-position: center;
}
.flee-laptop{
  transition: transform 0.12s linear;
  will-change: transform;
  position: relative;
  z-index: 2;
}
/* اصلاحات نینجا برای نمایش صحیح در موبایل */
@media (max-width: 768px) {
  /* ۱. جلوگیری از بیرون زدن کارت ثبت نام */
  .registration-card {
      width: 95% !important; /* عرض کارت را ۹۵ درصد صفحه می‌کند */
      margin: 10px auto !important; /* وسط‌چین کردن */
      padding: 15px !important; /* کاهش پدینگ داخلی برای فضای بیشتر */
      box-sizing: border-box;
  }

  /* ۲. اصلاح بخش جنسیت و رادیوباتن‌ها */
  .gender-options {
      display: flex !important;
      flex-direction: row-reverse !important; /* جهت راست به چپ */
      justify-content: space-around !important; /* پخش کردن گزینه‌ها */
      align-items: center;
      width: 100% !important;
      background: #f9f9f9; /* کمی متمایز کردن پس‌زمینه */
      padding: 10px;
      border-radius: 8px;
  }

  .gender-options label {
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      font-size: 0.9rem;
  }

  /* ۳. اصلاح فیلدهای ورودی که در عکس کشیده شده بودند */
  .form-group input, 
  .form-group select {
      width: 100% !important;
      box-sizing: border-box; /* جلوگیری از بیرون زدن بر اثر پدینگ */
  }

  /* ۴. اصلاح دکمه ثبت نام نهایی */
  .submit-btn {
      width: 100% !important;
      margin-right: 0 !important;
  }
}

/* ========================================================= */
/* --- اصلاحات جامع نینجا برای واکنش‌گرایی در موبایل --- */
/* ========================================================= */

/* ریست عمومی box-sizing برای همه عناصر */
* {
  box-sizing: border-box; /* حیاتی برای طراحی واکنش‌گرا */
  margin: 0;
  padding: 0;
}

/* جلوگیری از اسکرول افقی و تضمین عرض کامل صفحه */
html, body {
  width: 100%;
  overflow-x: hidden; /* جلوگیری از اسکرول افقی */
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%; /* برای جلوگیری از بزرگنمایی خودکار متن در iOS */
}

/* اطمینان از واکنش‌گرا بودن کانتینر اصلی */
main {
  width: 100%;
  overflow-x: hidden;
  padding: 0;
}

/* اطمینان از واکنش‌گرا بودن صفحات (سکشن‌ها) */
.page {
  width: 100%;
  overflow-x: hidden;
  padding: 0;
  min-height: 100vh; /* حداقل ارتفاع برای هر صفحه */
}

/* --- Media Query برای موبایل (عرض صفحه حداکثر ۷۶۸ پیکسل) --- */
@media (max-width: 768px) {

  /* ===================== Header ===================== */
  .main-header {
      width: 100%;
      padding: 0; /* پدینگ عمودی برای هدر */
      box-sizing: border-box;
      position: sticky; /* اطمینان از چسبندگی صحیح */
      top: 0;
      z-index: 1000;
  }

  .main-header .nav-container {
      padding: 0 15px; /* پدینگ افقی برای محتوای هدر */
      justify-content: space-between; /* پخش شدن آیتم‌ها در هدر */
      align-items: center;
      width: 100%;
  }

  /* مخفی کردن منوی دسکتاپ و دکمه ثبت نام در موبایل */
  .desktop-nav, .auth-btn {
      display: none !important;
  }

  /* نمایش دکمه همبرگری در موبایل */
  .hamburger {
      display: flex !important; /* اطمینان از نمایش دکمه همبرگری */
      z-index: 1001; /* بالاتر از منوی موبایل */
  }

  /* استایل منوی موبایل */
  #mobile-menu {
      width: 100%;
      position: absolute;
      top: 60px; /* ارتفاع هدر شما (ممکن است نیاز به تنظیم دستی داشته باشد) */
      left: 0;
      background-color: var(--navy-color, #27006d); /* از متغیر CSS یا رنگ ثابت استفاده کنید */
      flex-direction: column;
      display: none; /* به صورت پیش‌فرض مخفی، با JS نمایش داده می‌شود */
      z-index: 999;
      padding-bottom: 20px;
  }
  #mobile-menu a {
      padding: 15px 20px;
      text-align: right;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      width: 100%;
      display: block;
  }
  #mobile-menu a:last-child {
      border-bottom: none;
  }

  /* ===================== Home Page (Hero Section) ===================== */
  .home-hero {
      flex-direction: column !important; /* عناصر را روی هم قرار می‌دهد */
      text-align: center;
      padding: 40px 15px !important;
  }
  .hero-content {
      width: 100%;
      margin-bottom: 30px;
  }
  .hero-content h1 {
      font-size: 2.5rem !important;
  }
  .hero-content h2 {
      font-size: 1.5rem !important;
  }
  .robot-image {
      width: 100%;
      text-align: center;
  }
  .flee-laptop {
      max-width: 80%; /* اطمینان از کوچک شدن عکس لپ‌تاپ */
      height: auto;
  }

  .home-second-section {
      flex-direction: column !important;
      padding: 40px 15px !important;
  }
  .event-text-section {
      width: 100%;
      text-align: center;
      margin-bottom: 30px;
  }
  .info-boxes-row {
      flex-direction: column !important;
      width: 100%;
      gap: 15px;
  }
  .info-box {
      width: 100%;
      padding: 15px;
      justify-content: center;
  }
  .timer-glass-card {
      width: 100% !important;
      margin-top: 30px;
  }
  .timer-boxes {
      justify-content: space-around;
      padding: 0 10px;
  }
  .t-box {
      width: 30% !important;
      padding: 10px 5px;
      font-size: 0.9rem;
  }
  .t-box span {
      font-size: 2rem !important;
  }

  /* ===================== Events Page ===================== */
  .events-content {
      padding: 40px 15px !important;
  }
  .events-grid {
      flex-direction: column !important;
      gap: 30px;
  }
  .event-card {
      width: 100% !important;
      max-width: unset !important; /* حذف محدودیت عرض */
      margin: 0 auto;
  }

  /* ===================== About Section ===================== */
  .about-section .about-container {
      padding: 40px 15px !important;
  }
  .about-glass-card {
      width: 100% !important;
      padding: 30px 20px !important;
  }
  .about-features-grid {
      flex-direction: column !important;
      gap: 20px;
  }
  .about-feature-item {
      width: 100%;
  }

  /* ===================== Contact Page ===================== */
  .contact-page-container {
      padding: 40px 15px !important;
  }
  .contact-header-box {
      text-align: center;
      margin-bottom: 30px;
  }
  .contact-content-grid {
      flex-direction: column !important;
      gap: 30px;
  }
  .contact-info-column, .contact-form-column {
      width: 100% !important;
  }
  .contact-info-card {
      width: 100%;
      justify-content: flex-start; /* تراز کردن محتوا به راست */
      padding: 15px;
  }
  .contact-form-row {
      flex-direction: column !important;
      gap: 20px;
  }
  .contact-form-group {
      width: 100% !important;
  }
  .contact-bottom-banner {
      flex-direction: column !important;
      text-align: center;
      gap: 20px;
      padding: 30px 15px;
  }
  .contact-bottom-banner h3, .contact-bottom-banner p {
      width: 100%;
      margin-bottom: 10px;
  }
  .contact-event-btn {
      width: 100% !important;
  }

  /* ===================== Auth Page ===================== */
  .auth-page-container {
      padding: 40px 15px !important;
  }
  .auth-form-box {
      width: 100% !important;
      margin: 0 auto;
      padding: 30px 20px !important;
  }
  .auth-form-group input {
      width: 100% !important;
      box-sizing: border-box;
  }
  .auth-submit-btn {
      width: 100% !important;
      box-sizing: border-box;
  }

  /* ===================== Event Vision 1 Page ===================== */
  .vision-container {
      padding: 40px 15px !important;
  }
  .vision-container .hero-section {
      flex-direction: column !important;
      padding: 0 !important;
      margin-bottom: 30px;
  }
  .vision-container .hero-image-wrapper {
      width: 100%;
      margin-bottom: 20px;
  }
  .vision-container .hero-text {
      width: 100%;
      text-align: center;
  }
  .vision-container .main-img {
      width: 100%;
      height: auto;
  }
  .info-grid {
      flex-direction: column !important;
      gap: 20px;
  }
  .info-card {
      width: 100% !important;
  }
  .speaker-section .speaker-box {
      flex-direction: column !important;
      text-align: center;
      padding: 30px 20px;
      gap: 20px;
  }
  .speaker-image {
      margin-bottom: 0; /* حذف margin-bottom اضافی */
      width: 120px; /* اندازه مشخص برای عکس سخنران */
      height: 120px;
      object-fit: cover;
      border-radius: 50%;
  }
  .speaker-content {
      width: 100%;
  }

  /* بخش جزئیات همایش و فرم ثبت نام */
  .conference-details-section {
      padding: 0 !important;
  }
  .conference-details-section .details-container {
      flex-direction: column !important; /* ستون‌ها را روی هم قرار می‌دهد */
      align-items: center; /* عناصر را در مرکز قرار می‌دهد */
      width: 100%;
      padding: 0;
      gap: 30px; /* فاصله بین دو ستون وقتی روی هم هستند */
  }

  .details-left-column,
  .details-registration-column {
      width: 100% !important; /* هر دو ستون کل عرض را می‌گیرند */
      margin: 0;
      padding: 0;
  }

  /* کارت ثبت نام */
  .registration-card {
      width: 100% !important; /* کل عرض ستون والد خود را می‌گیرد */
      margin: 0 auto !important; /* وسط‌چین کردن کارت */
      padding: 30px 20px !important; /* تنظیم پدینگ برای موبایل */
      box-sizing: border-box; /* حیاتی */
      border-radius: 15px; /* گوشه‌های گرد */
  }

  .registration-card h3 {
      font-size: 1.6rem !important; /* تنظیم اندازه عنوان */
      text-align: center;
      margin-bottom: 25px;
  }

  /* فیلدهای ورودی فرم */
  .registration-card form input[type="text"],
  .registration-card form input[type="tel"],
  .registration-card form select {
      width: 100% !important;
      padding: 12px 15px !important; /* پدینگ داخلی ثابت */
      margin-bottom: 18px !important; /* فاصله بین فیلدها */
      font-size: 1.05rem !important; /* اندازه فونت خوانا */
      box-sizing: border-box; /* حیاتی */
      border-radius: 8px; /* گوشه‌های گرد */
      border: 1px solid #ddd;
      background-color: #f9f9f9;
      color: #333;
  }
  .registration-card form input::placeholder {
      color: #888;
  }
  .registration-card form select {
      appearance: none; /* حذف استایل پیش‌فرض select */
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') !important;
      background-repeat: no-repeat !important;
      background-position: left 15px center !important; /* آیکون به سمت چپ */
      background-size: 16px !important;
      padding-left: 40px !important; /* فاصله برای آیکون */
  }

  /* بخش جنسیت (radio group) */
  .form-group label {
      display: block;
      margin-bottom: 10px;
      font-size: 1.1rem;
      color: #333;
  }
  .radio-group.gender-options {
      display: flex !important;
      flex-direction: row-reverse !important; /* نمایش راست به چپ */
      justify-content: space-around !important; /* توزیع یکنواخت آیتم‌ها */
      align-items: center;
      width: 100% !important;
      padding: 12px 0 !important;
      margin-bottom: 18px !important;
      background-color: #f0f0f0;
      border-radius: 8px;
  }

  .radio-group.gender-options label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 1.05rem;
      color: #333;
      margin-bottom: 0; /* حذف margin-bottom اضافی */
  }
  .radio-group.gender-options input[type="radio"] {
      margin: 0; /* ریست مارجین پیش‌فرض */
      width: auto !important; /* عرض خودکار برای رادیو باتن */
      height: auto;
      min-width: unset; /* حذف min-width احتمالی */
      min-height: unset; /* حذف min-height احتمالی */
  }

  /* دکمه ثبت نام نهایی */
  .registration-card form button[type="submit"] {
      width: 100% !important;
      padding: 14px !important;
      font-size: 1.2rem !important;
      margin-top: 25px !important;
      border-radius: 8px;
      box-sizing: border-box;
  }
}
/* استایل دکمه نوبار */
.btn-login-nav {
  background-color: #27006d;
  color: #fcfdff !important;
  padding: 8px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  border: 2px solid #27006d;
}
.btn-login-nav:hover {
  background-color: transparent;
  color: #27006d !important;
}

/* استایل‌های پاپ آپ ورود */
.techbot-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(39, 0, 109, 0.5); /* رنگ سورمه‌ای با شفافیت */
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  direction: rtl;
}
.techbot-modal-content {
  background-color: #fcfdff;
  padding: 35px;
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  position: relative;
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  animation: modalFadeIn 0.3s ease;
}
@keyframes modalFadeIn {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.close-modal-btn {
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 28px;
  font-weight: bold;
  color: #27006d;
  cursor: pointer;
  transition: color 0.2s;
}
.close-modal-btn:hover {
  color: #e53e3e;
}
.modal-header-brand {
  text-align: center;
  margin-bottom: 25px;
}
.modal-header-brand h2 {
  color: #27006d;
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.modal-header-brand p {
  color: #666;
  font-size: 0.9rem;
}
.modal-input-group {
  margin-bottom: 18px;
  text-align: right;
}
.modal-input-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: #333;
  font-size: 0.9rem;
}
.modal-input-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.3s;
}
.modal-input-group input:focus {
  border-color: #27006d;
  outline: none;
}
.btn-modal-submit {
  width: 100%;
  background-color: #27006d;
  color: #fcfdff;
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.3s;
}
.btn-modal-submit:hover {
  background-color: #1a004d;
}
.modal-alert-box {
  margin-top: 15px;
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: bold;
}
.modal-alert-box.success {
  background-color: #e6fffa;
  color: #08f17c;
  border: 1px solid #08f17c;
}
.modal-alert-box.danger {
  background-color: #fff5f5;
  color: #e53e3e;
  border: 1px solid #e53e3e;
}
.mobile-nav {
  display: none;
}

.mobile-nav.active {
  position: fixed;
  display: flex; /* یا block بسته به طراحی */
}
/* بازگرداندن هدر به حالت اولیه و منظم */
#navbar .nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#navbar .nav-links {
  display: flex;
  align-items: center;
  gap: 25px; /* فاصله بین آیتم‌های منو */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* خوش‌آمدگویی موبایل در سایزهای بزرگ پنهان باشد */
.mobile-only-welcome {
  display: none !important;
}

/* استایل‌ها در حالت موبایل (زیر 900 پیکسل) */
@media (max-width: 900px) {
  .mobile-only-welcome {
    display: inline-block !important;
    font-size: 13px;
    color: #08f17c; /* رنگ سبز تم شما */
    margin-right: 5px;
  }
}
.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-user-greeting {
  display: none;
  color: #08f17c;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .mobile-user-greeting.show {
    display: inline-block;
  }
}

@media (min-width: 901px) {
  .mobile-user-greeting {
    display: none !important;
  }
}
/* =========================
   Sticky Navbar - Mobile
========================= */

@media (max-width: 900px) {
  #navbar {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    background-color: #27006d; /* رنگ اصلی نوبار */
  }

  /* جلوگیری از رفتن محتوا زیر نوبار */
  body {
    padding-top: 70px; 
  }
}
/* =========================
   Fix Mobile Navbar
========================= */

@media (max-width: 900px) {

  #navbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4rem;
    width: 100%;
    border-radius: 0;
    box-shadow: none;

    background: #27006d; 
    z-index: 9999;
  }

  /* اگر کلاس sticky فعال شد هم خنثی شود */
  #navbar.sticky{
    top: 0;
    box-shadow: none;
    border-radius: 0;
  }

  /* جلوگیری از رفتن محتوا زیر نوبار */
  body{
    padding-top: 40px;
  }

}
/* حذف پدینگ از بادی برای جلوگیری از ایجاد نوار رنگی */
body {
  padding-top: 0 !important; 
}

/* اعمال فاصله به خودِ صفحات برای اینکه محتوا پایین بیاید */
.page {
  padding-top: 100px; /* این مقدار محتوا را به زیر هدر می‌برد */
  min-height: 100vh;
  box-sizing: border-box;
}

/* استایل لوگو (سمت راست) */
.logo-circle {
  z-index: 10; /* برای اینکه زیر منو نرود */
}

/* استایل بخش دکمه ورود/خروج (سمت چپ) */
.user-info-area {
  z-index: 10;
  display: flex;
  align-items: center;
}
body.light-page .page {
  background-color: #ffffff; /* یا هر رنگ روشنی که مد نظر است */
}
/* ۱. کانتینر اصلی نوار ناوبری - تمام صفحه و منعطف */
.nav-container {
  display: flex;
  justify-content: space-between; /* لوگو و بخش کاربر را به طرفین می‌برد */
  align-items: center;
  width: 100%; 
  max-width: 100%; /* حذف محدودیت عرض برای تمام‌صفحه شدن */
  padding: 0 40px; /* فاصله از کناره‌های مرورگر */
  box-sizing: border-box;
}

/* ۲. منوی دسکتاپ - تمام فضای وسط را اشغال می‌کند */
.desktop-nav {
  display: flex;
  flex: 1; /* مهم: این دستور باعث می‌شود منو تمام فضای خالی وسط را بگیرد */
  justify-content: center; /* لینک‌ها را دقیقاً در مرکز آن فضای اشغال شده قرار می‌دهد */
  gap: 35px; /* تنظیم فاصله دقیق - اگر هنوز دو خطی شد این مقدار را کمتر کن (مثلا 25px) */
  white-space: nowrap; /* جلوگیری از شکستن خط */
  margin: 0 20px; /* فاصله از لوگو و دکمه ورود */
}

/* ۳. استایل دکمه‌ها و لینک‌ها برای یکپارچگی */
.desktop-nav a {
  text-decoration: none;
  color: white;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

/* ۴. مدیریت وضعیت چسبیده (Sticky) - اگر کلاس sticky دارید */
.main-header.sticky .nav-container {
  width: 100%;
  padding: 10px 40px; /* تنظیم پدینگ در حالت چسبیده */
  background: rgba(20, 3, 70, 0.95); /* برای بک‌گراند یکپارچه */
}
/* کانتینر اصلی هدر به صورت گرید ۸ ستونه */
.nav-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* تقسیم به ۸ ستون کاملاً مساوی */
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
  direction: rtl; /* چیدمان از راست به چپ */
}

/* ستون ۱: لوگو */
.logo-circle {
  grid-column: 1;
  justify-self: start;
}

/* ستون ۲: محدوده سلام به کاربر دسکتاپ (بغل دست لوگو) */
.desktop-user-area {
  grid-column: 2;
  justify-self: start;
  white-space: nowrap;
}

.desktop-user-area .user-greeting {
  color: #08f17c;
  font-weight: bold;
  margin-right: 1rem;
  font-size: 0.95rem;
}

/* ستون‌های ۳ تا ۶: منوهای دسکتاپ */
.desktop-nav {
  grid-column: 3 / 7; /* پوشش ستون‌های ۳، ۴، ۵ و ۶ */
  display: flex;
  justify-content: space-around; /* پخش مساوی در میان ستون‌ها */
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

.desktop-nav a {
  white-space: nowrap;
  text-decoration: none;
  color: white;
  font-size: 0.95rem;
}

/* ستون ۸: دکمه خروج یا ورود (چسبیده به سمت چپ صفحه) */
.user-actions-area {
  grid-column: 8;
  justify-self: end;
  display: flex;
  justify-content: flex-end;
}

/* استایل دکمه خروج برای متمایز شدن */
.auth-btn.logout {
  background-color: #ff4d4d;
  color: white;
}

/* حل مشکل واکنش‌گرایی در دسکتاپ/موبایل برای گرید */
@media (max-width: 900px) {
  .nav-container {
      display: flex; /* بازگشت به حالت فلکس در موبایل */
      justify-content: space-between;
  }
  .desktop-user-area, .desktop-nav, .user-actions-area {
      display: none; /* پنهان کردن منوهای دسکتاپ در موبایل */
  }
}
.auth-switch-text{
  text-align:center;
  margin-top:15px;
  font-size:14px;
  }
  
  .auth-switch-text a{
  color:#08f17c;
  font-weight:bold;
  text-decoration:none;
  cursor:pointer;
  }
  .auth-switch-text {
    text-align: center;
    margin-top: 20px;
    font-size: 0.95rem;
    color: #4a5568; /* رنگ خاکستری مناسب بخش ثبت نام */
}

.auth-switch-text a {
    color: #08f17c; /* رنگ سبز تم شما */
    font-weight: bold;
    text-decoration: none;
    margin-right: 5px;
    transition: color 0.2s ease-in-out;
}

.auth-switch-text a:hover {
    color: #06c263; /* کمی تیره‌تر در حالت هوور */
}
/* پدینگ پیش‌فرض برای تمام صفحات جهت جلوگیری از رفتن زیر هدر */
.page {
  padding-top: 90px;
  box-sizing: border-box;
}

/* حذف پدینگ بالا فقط برای صفحه اصلی و صفحه ثبت‌نام در دسکتاپ (کامپیوتر) */
@media (min-width: 901px) {
  #home, 
  #auth.page, 
  .home-section {
      padding-top: 0 !important;
  }
}

/* واکنش‌گرایی و زیباسازی کارت فرم ثبت‌نام و ورود در موبایل */
.auth-page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 20px;
}

.auth-form-box {
  width: 100%;
  max-width: 450px; /* حداکثر عرض در دسکتاپ */
  background: #ffffff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .auth-form-box {
      padding: 20px 15px; /* پدینگ فشرده‌تر در موبایل برای خوانایی بهتر */
      margin: 10px;
      border-radius: 12px;
  }
  
  .auth-form-group input {
      font-size: 14px;
      padding: 10px;
  }
  
  .auth-submit-btn {
      padding: 12px;
      font-size: 15px;
  }
}
/* ===== Auth Page Fix ===== */
#auth.page {
  min-height: 100vh;
  background: #140346;
  padding-top: 120px;
  padding-bottom: 60px;
  box-sizing: border-box;
}

#auth .conference-details-section {
  min-height: calc(100vh - 120px);
  background: transparent;
  padding: 0;
  margin: 0;
}

#auth .details-container {
  min-height: calc(100vh - 120px);
  align-items: flex-start;
}

#auth .details-registration-column {
  display: flex;
  align-items: flex-start;
}

#auth .registration-card {
  position: relative !important;
  top: auto !important;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  background: #fff;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* فاصله بهتر در موبایل */
@media (max-width: 768px) {
  #auth.page {
      padding-top: 20px;
      padding-bottom: 40px;
  }

  #auth .details-container {
      min-height: auto;
  }

  #auth .registration-card {
      max-width: 100%;
      padding: 20px 16px;
      border-radius: 14px;
  }
}

.navarkh {
  width: 4rem;
  height: 6rem;
}
.navarkh {
  width: 4rem;
  height: 2.5rem;
}
@media (max-width: 768px) {
  .timer-boxes {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
  }

  /* دقیقه -> بالا راست */
  .timer-boxes .t-box:nth-child(2) {
      order: 1;
      flex: 0 0 calc(50% - 5px);
  }

  /* ساعت -> بالا چپ */
  .timer-boxes .t-box:nth-child(3) {
      order: 2;
      flex: 0 0 calc(50% - 5px);
  }

  /* ثانیه -> کل ردیف پایین */
  .timer-boxes .t-box:nth-child(1) {
      order: 3;
      flex: 0 0 100%;
  }
}
/* =========================
   Footer
========================= */
.site-footer {
  width: 100%;
  background: #27006d;
  color: #fcfdff;
  padding: 14px 10px;
  margin-top: 40px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.footer-text {
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.8;
  color: #fcfdff;
}

.footer-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-logo-box {
  width: 70px;
  height: 70px;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  padding: 6px;
  transition: 0.3s ease;
}

.footer-logo-box:hover {
  transform: translateY(-3px);
}

.footer-logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* موبایل */
@media (max-width: 768px) {
  .site-footer {
      padding: 12px 8px;
      margin-top: 30px;
  }

  .footer-text {
      font-size: 13px;
      margin-bottom: 10px;
  }

  .footer-logos {
      gap: 10px;
  }

  .footer-logo-box {
      width: 60px;
      height: 60px;
      border-radius: 8px;
  }
}
/* جلوگیری از دو رنگ شدن پایین صفحه */
html, body {
  background: #fcfdff;
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* خود فوتر */
.site-footer {
  width: 100%;
  background: #140346;
  color: #fcfdff;
  padding: 10px 10px;
  margin-top: 0;
  box-sizing: border-box;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.footer-text {
  margin: 0 0 8px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #fcfdff;
}

.footer-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-logo-box {
  width: 52px;
  height: 52px;
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  padding: 4px;
  transition: 0.3s ease;
}

.footer-logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* موبایل */
@media (max-width: 768px) {
  body{
    padding-top: 40px;
  }
  .site-footer {
      padding: 8px 8px;
  }

  .footer-text {
      font-size: 12px;
      margin-bottom: 6px;
  }

  .footer-logos {
      gap: 8px;
  }

  .footer-logo-box {
      width: 46px;
      height: 46px;
  }
}

@media (max-width: 768px) {
  .page {
      padding-top: 20px;
      padding-bottom: 40px;
  }
}

.contact-page{
  padding-bottom: 2rem;
}

.hero-image-wrapper {
  border-bottom-left-radius: 1rem;
  border-top-left-radius: 1rem;

}
/* ===== Fix mobile layout for Events section only ===== */
@media (max-width: 768px) {
  .events-section .hero-section,
  .events-section .event-card,
  #events .hero-section,
  #events .event-card {
    flex-direction: column !important;
    align-items: center;
  }

  .events-section .hero-image-wrapper,
  .events-section .robot-image,
  .events-section .event-card img,
  #events .hero-image-wrapper,
  #events .robot-image,
  #events .event-card img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 16px;
  }

  .events-section .hero-image-wrapper,
  .events-section .event-card-image,
  #events .hero-image-wrapper,
  #events .event-card-image {
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .events-section .hero-content,
  .events-section .event-content,
  #events .hero-content,
  #events .event-content {
    width: 100%;
    text-align: center;
  }

  .events-section .hero-content,
  #events .hero-content {
    top: 0 !important;
  }
}
@media (max-width: 768px) {
  .events-section .hero-image-wrapper::before,
  .events-section .event-card-image::before,
  #events .hero-image-wrapper::before,
  #events .event-card-image::before {
    width: 100%;
    height: 100%;
    inset: 0;
    border-radius: 16px;
  }
}
/* ==========================================================================
   رفع مشکل ریسپانسیو و چیدمان بخش همایش ویژن در موبایل
   ========================================================================== */
   @media (max-width: 768px) {
    /* تنظیم کانتینر اصلی همایش ویژن */
    #event-vision1 .vision-container {
      padding: 10px 10px 30px !important;
    }
  
    /* تنظیم سکشن هیرو همایش ویژن به صورت ستونی */
    #event-vision1 .hero-section {
      flex-direction: column !important;
      height: auto !important;
      min-height: auto !important;
      padding: 80px 10px 20px !important; /* ایجاد فاصله مناسب از هدر موبایل */
      display: flex !important;
      align-items: center !important;
      text-align: center !important;
      background: none !important; /* جلوگیری از تداخل پس‌زمینه‌های تکراری */
    }
  
    /* اصلاح ظرف تصویر همایش */
    #event-vision1 .hero-image-wrapper {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      margin-bottom: 20px !important;
      clip-path: none !important;
      border-radius: 16px !important;
      overflow: hidden !important;
      position: relative !important;
      order: -1 !important; /* تصویر ابتدا در بالا قرار بگیرد */
    }
  
    /* اصلاح خود تصویر همایش */
    #event-vision1 .hero-image-wrapper img.main-img {
      width: 100% !important;
      height: auto !important;
      display: block !important;
      object-fit: cover !important;
      border-radius: 16px !important;
    }
  
    /* اصلاح بخش متن‌های هیرو همایش */
    #event-vision1 .hero-text {
      width: 100% !important;
      position: relative !important;
      top: 0 !important;
      left: 0 !important;
      transform: none !important;
      padding: 0 10px !important;
    }
  
    #event-vision1 .hero-text h1 {
      font-size: 20px !important;
      line-height: 1.5 !important;
      margin-bottom: 12px !important;
    }
  
    #event-vision1 .hero-text p {
      font-size: 14px !important;
      line-height: 1.6 !important;
      color: #5f5f5f !important;
    }
  
    /* اصلاح کارت‌های اطلاعات ۴گانه (مدت، مکان، تاریخ، قیمت) */
    #event-vision1 #info-v1.info-grid {
      grid-template-columns: 1fr !important; /* قرارگیری کارت‌ها به صورت تک‌ستونی زیر هم */
      gap: 12px !important;
      padding: 10px !important;
      width: 100% !important;
    }
  
    #event-vision1 #info-v1.info-grid .info-card {
      flex-direction: row-reverse !important; /* آیکون سمت راست، متن سمت چپ */
      justify-content: space-between !important;
      padding: 15px !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
  
    /* اصلاح بخش معرفی سخنران */
    #event-vision1 .speaker-section {
      padding: 15px 10px !important;
    }
  
    #event-vision1 .speaker-box {
      flex-direction: column !important; /* قرارگیری عکس سخنران بالای متن */
      text-align: center !important;
      padding: 20px !important;
      align-items: center !important;
    }
  
    #event-vision1 .speaker-image {
      width: 100px !important;
      height: 100px !important;
      margin-bottom: 15px !important;
      margin-left: 0 !important; /* حذف مارجین لفت دسکتاپ */
    }
  
    /* اصلاح بخش جزئیات همایش و فرم ثبت نام */
    #event-vision1 .conference-details-section .details-container {
      flex-direction: column !important;
      gap: 20px !important;
      padding: 10px !important;
    }
  
    #event-vision1 .details-left-column,
    #event-vision1 .details-registration-column {
      width: 100% !important;
    }
  
    #event-vision1 .details-content-wrapper {
      flex-direction: column !important;
      gap: 20px !important;
    }
  }
  
/* ===============================
   Events Cards & Overlay Fix
   =============================== */

/* ۱. مطمئن شدن از اینکه کارت محفظه اصلی است و هیچ چیزی از لبه‌های گرد آن بیرون نمی‌زند */
.event-card {
  position: relative;
  overflow: hidden; /* برش خوردن گوشه‌های تصویر و هاله بر اساس border-radius کارت */
  z-index: 1;
}

/* ۲. تنظیم تصویر پس‌زمینه برای پر کردن دقیق و ۱۰۰ درصدی کل کارت */
.event-card .card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 15px;
  z-index: -2; /* رفتن به پشت‌ترین لایه کارت */
  display: block;
}

/* ۳. هاله سیاه دقیقاً روی تصویر و با ابعاد کاملاً برابر (بدون تاثیر از پدینگ) */
.event-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55); /* هاله مشکی یکدست */
  border-radius: 15px;
  z-index: -1; /* قرارگیری روی تصویر و زیر متن‌ها */
  transition: background 0.3s ease;
}

.event-card:hover::before {
  background: rgba(0, 0, 0, 0.7);
}

/* ۴. قرارگیری محتوا روی هاله */
.event-card .card-content {
  position: relative;
  z-index: 2; /* بالاتر از تصویر و هاله */
  width: 100%;
}

/* ۵. افزایش فاصله (gap) کارت‌ها در دسکتاپ */
.events-grid {
  gap: 45px !important; /* فاصله بیشتر بین کارت‌ها در دسکتاپ */
}

/* ===============================
 تنظیمات ریسپانسیو و موبایل
 =============================== */
@media (max-width: 768px) {
  .events-grid {
      gap: 35px !important; /* فاصله مناسب بین کارت‌ها در موبایل هنگام قرارگیری زیر هم */
      padding: 0 20px;
  }

  .event-card {
      width: 100%;
      max-width: 350px;
      min-height: 280px;
      margin: 0 auto;
      padding: 0;
  }

  .events-content h1 {
      font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .events-grid {
      gap: 30px !important; /* فاصله کارت‌ها در گوشی‌های کوچک */
  }
  
  .event-card {
      max-width: 100%;
      min-height: 100%;
  }
}
.speaker-box{
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.speaker-box img{
  display: block;
  width: clamp(110px, 22vw, 190px);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  align-self: flex-end;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  bottom: -2px;
}
@media (max-width: 768px){
  .speaker-box img{
      width: clamp(90px, 28vw, 150px);
  }
}
/* کادر نارنجی سخنران */
.speaker-box {
  display: flex;
  align-items: stretch; /* کشیده شدن فرزندان از بالا تا پایین کادر */
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  height: 320px; /* یا هر ارتفاعی که برای کادر نارنجی در نظر گرفته‌اید */
}

/* تصویر سخنران */
.speaker-box img {
  display: block;
  height: 100%; /* چسبیدن کامل از بالا تا پایین کادر */
  width: auto; /* تغییر عرض متناسب با ارتفاع برای جلوگیری از دفرمه شدن */
  max-width: 45%; /* جلوگیری از بزرگ شدن بیش از حد عرض در دسکتاپ */
  object-fit: cover; /* پر کردن فضا بدون کشیدگی */
  object-position: center bottom; /* تراز کردن تصویر به سمت پایین و مرکز */
  align-self: flex-end;
  margin: 0;
  padding: 0;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
  .speaker-box {
      height: auto;
      min-height: 250px;
      flex-direction: column-reverse; /* در موبایل عکس و متن زیر هم قرار بگیرند */
      align-items: center;
  }
  
  .speaker-box img {
      height: 220px; /* تنظیم ارتفاع مناسب برای موبایل */
      width: auto;
      max-width: 80%;
  }
}
/* تنظیمات کادر نارنجی سخنران */
.speaker-box {
  display: flex;
  align-items: flex-end; /* تراز عمودی برای چسبیدن به پایین */
  background-color: #f15a2b; /* رنگ کادر نارنجی شما */
  height: 320px; /* ارتفاع ثابت برای دسکتاپ */
  width: 100%;
  padding: 0 !important; /* حذف هرگونه فاصله داخلی */
  margin: 0;
  overflow: hidden; /* جلوگیری از بیرون زدگی عکس */
  position: relative;
}

/* تنظیمات تصویر سخنران */
.speaker-box img.sokhan {
  display: block; /* حذف فاصله اضافی پایین عکس */
  height: 100%; /* چسبیدن به بالا و پایین کادر */
  width: auto; /* عرض متناسب با ارتفاع */
  object-fit: contain; /* نمایش کامل عکس بدون کشیدگی */
  object-position: bottom; /* چسباندن به لبه پایینی */
  margin: 0;
  flex-shrink: 0;
}

/* تنظیمات متن کنار عکس */
.speaker-box .speaker-content {
  padding: 20px;
  flex-grow: 1;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
  .speaker-box {
      flex-direction: column; /* چیدمان ستونی */
      height: auto; /* ارتفاع خودکار */
  }

  .speaker-box img.sokhan {
      width: 100%; /* عرض کامل در موبایل */
      height: auto;
      object-fit: cover;
  }
}
/* --- بخش سخنران در دسکتاپ --- */
.speaker-box {
    display: flex;
    align-items: flex-end; 
    background-color: #f15a2b; 
    height: 350px; /* ارتفاع را کمی بیشتر کردم که سر سخنران به سقف بچسبد */
    width: 100%;
    padding: 0 !important;
    margin: 40px 0;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    direction: rtl; /* اطمینان از راست‌چین بودن محتوا */
}

.speaker-box img.sokhan {
    display: block;
    height: 100%; /* چسبیدن از بالا تا پایین */
    width: auto;
    object-fit: contain;
    object-position: bottom;
    margin-right: 20px; /* این خط باعث می‌شود عکس در دسکتاپ کمی به سمت راست (داخل کادر) برود */
    flex-shrink: 0;
}

.speaker-content {
    flex: 1;
    padding: 40px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- تنظیمات مخصوص موبایل (این بخش مشکل اسکرین‌شات شما را حل می‌کند) --- */
@media (max-width: 768px) {
    .speaker-box {
        flex-direction: column; /* چیدمان عمودی */
        height: auto; /* ارتفاع خودکار بر اساس محتوا */
        align-items: stretch; /* کشیده شدن فرزندان برای پر کردن عرض */
        margin-bottom: 6rem;
    }
    .speaker-box img.sokhan {
        width: 100% !important; /* چسبیدن به چپ و راست گوشی */
        height: auto !important; /* حفظ تناسب ابعاد */
        margin-right: 0 !important; /* حذف فاصله راست در موبایل */
        object-fit: cover; /* پر کردن کامل عرض */
        border-radius: 25px 25px 0 0; /* گرد کردن گوشه‌های بالای عکس مطابق کادر */
    }

    .speaker-content {
        padding: 25px;
        text-align: center; /* وسط‌چین شدن متن در موبایل برای زیبایی */
    }
    
    .speaker-content h3 {
        justify-content: center; /* تراز کردن آیکون و متن در وسط */
    }
   .basalam{
position: absolute;
width: 0;
height: 0;
    }
    .sokhan{
      position: absolute;
    }
}
/* ۲. تنظیمات مخصوص موبایل (صفحه نمایش کوچک‌تر از 768 پیکسل) */
@media (max-width: 768px) {
 .speaker-box {
    margin-bottom: 6rem;
  }

  /* چسبیدن کامل عکس سخنران به لبه‌های چپ، راست و بالا در موبایل */
  section.speaker-section .speaker-box img.sokhan {
    position: absolute;
    margin-left: 1rem;
  }

  /* لوگوی باسلام در موبایل */
  section.speaker-section .speaker-box img.basalam {

     width:0.01rem;
     height: 0.01rem;
  }

.speaker-content {
      margin-bottom: 8rem;
      
  }
}
/* ==========================================================
   حذف لوگوی باسلام در موبایل
   ========================================================== */

   @media (max-width: 768px) {
    section.speaker-section .speaker-box img.basalam {
        display: none !important; /* حذف کامل از صفحه */
    }
}
/* ==========================================================
   سه لوگوی خیلی ریز بالای لوگوهای فوتر
   ========================================================== */

   .footer-mini-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.footer-mini-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
}

.footer-mini-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* موبایل */
@media (max-width: 768px) {
    .footer-mini-icons {
        gap: 6px;
        margin-bottom: 8px;
    }

    .footer-mini-icon {
        width: 28px;
        height: 28px;
    }
}
/* ===== Robot beside timer card ===== */
.timer-area{
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 420px;
  overflow: visible;
}

.timer-area .timer-glass-card{
  position: relative;
  z-index: 2;
}

.timer-area .timer-robot{
  position: absolute;
  left: -110px;
  bottom: -35px;
  width: 220px;
  z-index: 1;
  pointer-events: none;
}
.timer-robot{
margin-bottom: 11rem;
margin-right: 19rem;


}


.timer-area .timer-robot img{
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px){
  .timer-area{ max-width: 100%; display:block; }
  .timer-area .timer-robot{ left: -40px; bottom: -25px; width: 160px; }
  .timer-robot{
    margin-bottom: 17rem;
    margin-right: 1rem;
  }
}
.robo_img{
  margin-right: 11rem;
  margin-bottom: 3rem;
}

/* Mobile */
@media(max-width: 768px){
  .robo_img{
    margin: 0 !important;
  }
}
.modern-otp {
    background: #1a1a2e !important; /* تم تیره هماهنگ با تک‌بات */
    border: 1px solid #08f17c;
    box-shadow: 0 0 20px rgba(8, 241, 124, 0.2);
    color: white !important;
}

.otp-inputs-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 25px 0;
}

.otp-field {
    width: 45px;
    height: 55px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid #27006d;
    border-radius: 8px;
    color: #08f17c;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
}

.otp-field:focus {
    border-color: #08f17c;
    box-shadow: 0 0 10px rgba(8, 241, 124, 0.4);
    outline: none;
    background: rgba(8, 241, 124, 0.05);
}

.modern-timer {
    font-family: monospace;
    font-size: 1.2rem;
    color: #ff4d4d;
    margin-bottom: 20px;
}

.modal-header h3 { color: #fff; margin-bottom: 5px; }
.modal-header p { color: #ccc; font-size: 0.9rem; }
.otp-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 32, 0.72);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.otp-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  padding: 28px 24px 24px;
  text-align: center;
  direction: rtl;
}

.otp-back-btn {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: #f3f4f6;
  color: #27006d;
  font-size: 20px;
  cursor: pointer;
  transition: 0.2s ease;
}

.otp-back-btn:hover {
  background: #e8ebf2;
}

.otp-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}

.otp-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.otp-brand-text {
  font-size: 22px;
  font-weight: 800;
  color: #27006d;
  letter-spacing: -0.3px;
}

.otp-title {
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.otp-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 22px;
  line-height: 1.8;
}

.otp-phone {
  color: #27006d;
  font-weight: 700;
}

.otp-inputs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  direction: ltr;
}

.otp-field {
  width: 48px;
  height: 56px;
  border: 1.8px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: #27006d;
  outline: none;
  transition: all 0.2s ease;
  caret-color: #08f17c;
}

.otp-field:focus {
  border-color: #08f17c;
  box-shadow: 0 0 0 4px rgba(8, 241, 124, 0.12);
  transform: translateY(-1px);
}

.otp-timer {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 22px;
  font-family: monospace;
}

.otp-submit-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #27006d, #08f17c);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 16px;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.otp-submit-btn:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

.otp-classic-text {
  margin-top: 16px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.8;
}

@media (max-width: 480px) {
  .otp-card {
    max-width: 100%;
    padding: 24px 18px 18px;
    border-radius: 16px;
  }

  .otp-brand-text {
    font-size: 19px;
  }

  .otp-title {
    font-size: 19px;
  }

  .otp-field {
    width: 42px;
    height: 52px;
    font-size: 20px;
  }

  .otp-inputs {
    gap: 8px;
  }
}
/* استایل‌های پایه برای کارت و مودال تغییر رمز */
.otp-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(39, 0, 109, 0.7); /* Navy با opacity */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.otp-card {
  background: #fcfdff; /* رنگ سفید تم سایت */
  padding: 30px;
  border-radius: 16px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  text-align: center;
  direction: rtl;
}

.otp-logo-container {
  margin-bottom: 15px;
}

.otp-logo {
  max-height: 60px;
  object-fit: contain;
}

.otp-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #27006d; /* Navy */
  margin-bottom: 8px;
}

.otp-description {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 20px;
}

.otp-submit-btn {
  background-color: #27006d; /* Navy */
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  transition: background 0.3s ease;
}

.otp-submit-btn:hover {
  background-color: #08f17c; /* Green در hover */
  color: #27006d;
}
/* ===== Loading Overlay (Mobile + Desktop) ===== */
.loading-overlay{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;

  /* برای موبایل: کل صفحه واقعی */
  height: 100vh;
  height: 100svh;  /* بهتر برای موبایل */
  height: 100dvh;  /* مدرن‌ترین */

  background: rgba(39, 0, 109, 0.82); /* سورمه‌ای نیمه شفاف */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 9999999;

  opacity: 1;
  visibility: visible;
  transition: opacity 1.5s ease, visibility 1.5s ease;
}

.loading-overlay.hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-content{
  width: min(88vw, 360px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 8px;
}

.loading-logo{
  width: clamp(84px, 26vw, 130px);
  height: clamp(84px, 26vw, 130px);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #08f17c;
  box-shadow: 0 0 20px rgba(8, 241, 124, 0.25);
}

.loading-text{
  margin: 0;
  color: #fcfdff;
  font-weight: 700;
  line-height: 1.9;
  font-size: clamp(14px, 4vw, 18px);
}
.no-scroll{
  overflow: hidden !important;
  touch-action: none !important;
}
/* =========================
   Vision Register Popup
========================= */
.vision-register-popup {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.vision-register-popup.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.vision-register-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 20, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.vision-register-box {
  position: relative;
  z-index: 2;
  width: min(92%, 520px);
  background: rgba(252, 253, 255, 0.95);
  border: 2px solid rgba(8, 241, 124, 0.18);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(39, 0, 109, 0.25);
  padding: 70px 24px 32px;
  text-align: center;
  animation: visionPopupIn 0.45s ease;
}

.vision-register-content h2 {
  margin: 0 0 14px;
  color: #27006d;
  font-size: clamp(1.3rem, 2vw, 2rem);
  line-height: 1.8;
  font-weight: 800;
}

.vision-register-content p {
  margin: 0 0 28px;
  color: #444;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 500;
}

.vision-register-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 14px 28px;
  border-radius: 14px;
  background: linear-gradient(135deg, #08f17c, #00c853);
  color: #111;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 800;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(8, 241, 124, 0.28);
}

.vision-register-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(8, 241, 124, 0.38);
}

.vision-close-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  border: none;
  background: #ffffff;
  color: #d62828;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.25s ease;
}

.vision-close-btn:hover {
  background: #ffeaea;
  transform: scale(1.03);
}

@keyframes visionPopupIn {
  from {
      opacity: 0;
      transform: translateY(24px) scale(0.96);
  }
  to {
      opacity: 1;
      transform: translateY(0) scale(1);
  }
}

/* جلوگیری از اسکرول وقتی پاپ‌آپ باز است */
body.popup-open {
  overflow: hidden;
}

/* موبایل */
@media (max-width: 768px) {
  .vision-register-box {
      width: 92%;
      padding: 72px 18px 24px;
      border-radius: 20px;
  }

  .vision-register-content h2 {
      font-size: 1.15rem;
      line-height: 1.9;
  }

  .vision-register-content p {
      font-size: 0.95rem;
      margin-bottom: 22px;
  }

  .vision-register-btn {
      width: 100%;
      min-width: unset;
      padding: 14px 20px;
      font-size: 0.95rem;
  }

  .vision-close-btn {
      top: 12px;
      left: 12px;
      font-size: 0.85rem;
      padding: 8px 13px;
  }
}

@media (max-width: 480px) {
  .vision-register-box {
      padding: 68px 16px 22px;
  }

  .vision-register-content h2 {
      font-size: 1.05rem;
  }

  .vision-register-content p {
      font-size: 0.9rem;
  }
}