body {
 
margin: 0;
padding: 0; 
direction: rtl;
 background-color:  #ecfffc;
 font-family:"2  Homa", sans-serif; 
 transition: background-color 0.6s ease, 
 color 0.6s ease;
   overflow-x: auto;
   font-size: clamp(14px, 3vw, 18px);
-webkit-user-drag: none;
user-select: none; 
  font-size: 1.15rem;
    
} 


img, a { 
    -webkit-user-drag: none;
}



@font-face {
  font-family: "2  Homa";
  src: url("/Khat/2%20%20Homa.eot"); /* IE9 Compat Modes */
  src: url("/Khat/2%20%20Homa.eot?#iefix") format("embedded-opentype"),
       url("/Khat/2%20%20Homa.woff2") format("woff2"),
       url("/Khat/2%20%20Homa.woff") format("woff"),
       url("/Khat/2%20%20Homa.ttf") format("truetype"),
       url("/Khat/2%20%20Homa.svg#2Homa") format("svg");
  font-weight: normal;
  font-style: normal;
}





    .hover-text {
      color: black; /* رنگ اولیه متن */
      transition: color 0.3s ease; /* انیمیشن نرم هنگام تغییر رنگ */
    }
.hover-text:hover {
  color: #27959b;
  font-weight: bold;
}



h2 {
  text-align: right;
  color: #333;
  margin-bottom: 25px;
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: #444;

}

input[type="text"],
input[type="email"],
input[type="file"],
textarea {
  width: 98.5%;  
  padding: 4px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
     font-family:"2  Homa", sans-serif; 
}

textarea {
  resize: vertical;
  min-height: 100px;
      width: 97.1%;  

     font-family:"2  Homa", sans-serif; 

}



.g-recaptcha {
  margin-bottom: 2px;

  transform: scale(0.95);
  transform-origin: center;
}




.captcha-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}











.custom-file-label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ffffff;
  color: #000;
 border: 1px solid #ccc;
  border-radius: 6px;  cursor: pointer;
     font-family:"2  Homa", sans-serif; 
}

#file-preview {
  margin-top: 10px;
     font-family:"2  Homa", sans-serif; 
  display: flex;
  align-items: center;
  gap: 10px;
}

#file-name {
  color: #333;
}

#remove-file {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: red;
}







.form-container {
  max-width: 100%;
  overflow-x: hidden;
}




#scrollProgress {
  position: fixed;

  top: 0;
  right: 0; /* به‌جای left از right استفاده کن */
  width: 0%;
  height: 7px;
  background-color: #6affe5;
  z-index: 1000;
}




 .animated-icon {
    font-size: 20px;
    color: #ff6600;
    animation: pulse 2.5s infinite;
  }

  @keyframes pulse {
    10% { transform: scale(1); opacity: 0.6; }
    20% { transform: scale(1.4); opacity: 1; }
    80% { transform: scale(1); opacity: 0.6; }
  }


.line-with-ico {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: -9px; /* کاهش فاصله بین خطوط */
    margin-right: -40px; /* کاهش فاصله بین خطوط */

}




.line-with-icon {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 5px; /* کاهش فاصله بین خطوط */
}




.line-with-ico p {
  margin: 4px;           /* حذف فاصله پیش‌فرض بالا و پایین پاراگراف */
  line-height: 2.1;    /* تنظیم ارتفاع خط برای تراکم بهتر */
}




.line-with-icon p {
  margin: 4px;           /* حذف فاصله پیش‌فرض بالا و پایین پاراگراف */
  line-height: 2.1;    /* تنظیم ارتفاع خط برای تراکم بهتر */
}



.anim-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #736a00;
  animation: pulseRotate 2s ease-in-out infinite;
  flex-shrink: 0;      /* جلوگیری از تغییر اندازه آیکون در فشرده‌سازی */
  margin-top: 2px;     /* تنظیم موقعیت عمودی آیکون نسبت به متن */
position: relative;
  top: 5px; /* مقدار دلخواه برای پایین آوردن */  
  }
  
  
  








.animated-ico {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #00877f;
  animation: pulseRotate 2s ease-in-out infinite;
  flex-shrink: 0;      /* جلوگیری از تغییر اندازه آیکون در فشرده‌سازی */
  margin-top: 2px;     /* تنظیم موقعیت عمودی آیکون نسبت به متن */
}

@keyframes pulseRotate {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.5) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}










/* لودینگ */

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
background: linear-gradient(-45deg , #007f8c 15%, #00b2a7 50%, #004d5c 80%);
  background-size: 400% 400%;
  animation: gradientMove 6s ease infinite;
  color: white;
}


.loader{
    border: 6px solid #fff;
border-top: 6px solid #2c3e50;
border-radius: 50%; 
width: 60px;
height: 60px; 
animation: spin 1s linear infinite;
margin-bottom: 20px; 
} 


@keyframes spin {
    0% { 
        transform: rotate(0deg);
        } 100% { 
            transform: rotate(360deg);
            }
            }
            
            

/* Header */ 

.site-header {
  background-color: #2c3e50;
  color: white;
  padding: 18px;
  text-align: center;
}



.logo {
  display: flex;              /* فعال‌سازی Flexbox */
  justify-content: center;
  align-items: center;  
    pointer-events: none;
  gap: 15px;
  flex-wrap: wrap;            /* جلوگیری از شکستگی در موبایل */
}



.logo-img {
  max-width: 100%;            /* تصویر از عرض صفحه بیشتر نشه */
  height: auto;
  margin-top: -10px; /* عکس 20px بالا می‌ره */
 margin-bottom: 25px;
}


nav ul { list-style: none;
display: flex; 
justify-content: center;
gap: 30px;
padding: 0;
margin-top: 15px;
margin: 3; 
} 


nav ul li a { color: white;
text-decoration: none;
font-weight: bold;
font-size: 18px; 
position: relative;
transition: all 0.3s ease;
}


/* افکت زیرخط هنگام هاور */ 

nav ul li a::after { content: '';
position: absolute; 
bottom: -5px;
right: 0; 
width: 0;
height: 1px;
background-color: white; 
transition: width 0.3s ease;
} 


nav ul li a:hover::after { width: 100%; }

/* افکت بزرگ‌نمایی و تغییر رنگ هنگام هاور */ 

nav ul li a:hover { color: #00ffd0;
transform: scale(0.0);
} 


nav { background-color: #2c3e50;
padding: 19px 4; 
border: 1px solid #8f8f8f;
border-radius: 0;
margin: -18px;
box-shadow: 0 3px 8px 2px rgba(143,143,143,1); /* سایه ملایم */
border-right: none;
border-left: none; } 


/* Hero */ 


.hero { text-align: center; 
padding: 60px 20px;
background: linear-gradient(to left, #00b2a7, #00b2a7);
color: white; } 


.hero h2 { font-size: 32px;
margin-bottom: 10px; } 

.hero p { font-size: 18px;
margin-bottom: 20px; } 


.btn { background-color: white;
color: #000000;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none; 
font-weight: bold; } 


/* لودینگ تمام‌صفحه */
#loading-overlay {
  display: none; /* در ابتدا مخفی */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 400% 400%;
  animation: gradientMove 6s ease infinite;
  color: white;
  z-index: 9999;
  text-align: center;
  padding: 0;
  opacity: 1;
  transition: opacity 0.5s ease;
}



.loader-box {

  display: inline-block;
  text-align: center;
}


.spinner {
  border: 6px solid #fff;
  border-top: 6px solid #2c3e50;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

.drop-loader {
  width: 20px;
  height: 20px;
  background-color: #b7070b;
  border-radius: 50%;
  animation: dropFall 1.2s ease-in-out infinite;
  margin-bottom: 20px;
}

@keyframes dropFall {
  0% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
  69% {
    transform: translateY(40px) scaleY(0.9);
    opacity: 0.7;
  }
  70% {
    transform: translateY(55px) scaleY(0.8);
    opacity: 0.4;
  }
  100% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
}







/* انیمیشن حرکت گرادیان */
@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* Sections */

.section { background-color: #ffffff; 
margin: 40px auto;
padding: 30px; max-width: 900px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.90); } 





.section {

}




.section h2 { margin-bottom: 20px; 
color: #4c00c1; } 

.course-list { display: flex; 
flex-wrap: wrap; gap: 20px; } 

.course { flex: 1 1 250px;
background-color: #ecf0f19e; 
padding: 20px;
border-radius: 10px; 
  box-shadow:0px 0px 10px 0px #bdbdbdd1;
  
    
    
} 

.course h3 { margin-top: 0; 
color: #27ae60; }

.course a { display: inline-block;
margin-top: 10px;
color: #187c58;
text-decoration: none;
font-weight: bold; } 

/* Articles */ 

#articles ul { list-style: none;
padding: 0; } 

#articles ul li { margin-bottom: 10px; } 

#articles ul li a { color: #27ae60; 
text-decoration: none; } 

/* Contact */ 

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

input, textarea { padding: 10px;
border: 1px solid #ccc;
border-radius: 6px; }

button { background-color: #0e0624;
color: white; 
border: none; 
padding: 10px;
border-radius: 6px;
cursor: pointer; 
font-weight: bold; }

button:hover { background-color: #393f4deb; } 

/* Footer */

footer { background-color: #00b2a7;
padding-top: 2px;
padding-bottom: 10px; /* افزایش فضای داخلی */
text-align: center; 
box-shadow: 0 3px 8px 2px rgba(143,143,143,1); /* سایه ملایم */
border-top: 1px solid #8f8f8f;
  font-size: clamp(14px, 1.4vw, 20px); /* اندازه پویا */

}








.slide-img { flex: 1; max-width: 70px;
height: 120px; 
object-fit: cover; 
border: 2px solid #000000; 
border-radius: 8px; 
transition: all 1.5s ease-out;
opacity: 0.6;
cursor: none;
top: 44px; } 


.slide-img.active { flex: 2; 
max-width: 339px;


height: 193px;
object-fit: cover;
opacity: 1; z-index: 2;
top: 0;
box-shadow: 3px 3px 3px rgba(0,0,0,0);
border: 2px solid #000000; } 



button, input[type="submit"], input[type="button"] {
    font-family: '2  Homa' !important ;
    
} 




.slider-container {
  position: relative;
  width: 100%;
  max-width: 958px;
  height: 390px;
  aspect-ratio: 1 / 2;
  margin: 40px auto;
  overflow: hidden;
  border: 2px solid #222;
  border-radius: 12px;
  box-shadow: 00 17px 0 00 rgba(8,0,5,6.5);
  background-color: #000;
} 


.slider {
  position: relative;
  width: 100%;
  height: 100%;
}


.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: streach;
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
  transform: scale(1.2);
  transition: clip-path 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
}


.slide.active {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  z-index: 1;
}


.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  font-size: clamp(16px, 2vw, 32px); /* اندازه پویا */
  padding: clamp(8px, 1.2vw, 20px);   /* متناسب با زوم */
  cursor: pointer;
  z-index: 2;
  border-radius: 50%;
}



.nav.prev { 
    right: 2vw;
}
.nav.next { left: 2vw; }


.slider-controls {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
    .slider-controls button {
        padding: 6px 12px;
        font-size: 14px;
        border: none;
        border-radius: 6px;
        background-color: #334267;
        color: #fff;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
        .slider-controls button:hover {
            background-color: #556080;
        }
.content {
    padding: 20px;
}










.welcome-overlay { position: fixed;
top: 0; right: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 0;
transition: opacity 1.5s ease; 
} 


.welcome-strip { background-color:  rgb(233, 238, 255);
padding: 30px 20px;
border-radius: 10px;
font-size: 24px;
color: black;
box-shadow: 10px 15px 10px rgb(0, 0, 0);
text-align: center;
max-width: 90%; 
} 



#more { display: none;
margin-top: 20px;
background-color: #ecf0f1;
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
    
} 


.arrow-container { text-align: center; 
margin-top: 30px; } 


.arrow-button { width: 48px; 
height: 48px; 
cursor: pointer; 
transition: transform 0.3s ease; } 


.arrow-button:hover { transform: scale(1.2); } 



.image-row { display: flex; justify-content: center; gap: 4px; /* فاصله بین عکس‌ها */
flex-wrap: wrap; /* برای موبایل */
}



.image-row img { width: 30px;
height: auto; 
border: 2px solid #000000;
border-radius: 8px; /* گوشه‌های گرد */
box-shadow: 0 8px 8px rgba(0,0,0,0.9);
transition: transform 0.3s ease; } 


.image-row img:hover { transform: scale(1.05);
/* افکت هنگام هاور */ 
} 


.body {   font-family:'2  Homa', sans-serif; 
direction: rtl;
margin: 0; 
padding: 20; 
background-color: #f9f9f9; } 


html, body { height: 100%;
margin: 0; } 






.page { 
    display: grid;
grid-template-rows: 1fr auto; 
min-height: 100vh; } 


main { padding: 20px; } 




header, section, footer , #more {
  transition:color 0.1s ease, background-color 0.2s ease ;
}



/* حالت شب */
body.dark-mode {
  background-color: #1d2334;
  color: #f5f5f5;
}


body.dark-mode nav
{
border: 1px solid ##bdbdbdd1;
box-shadow: 0 3px 8px 2px rgba(189,189,189,0.82); /* سایه ملایم */
border-right: none;
border-left: none;
 } 








body.dark-mode .section
{
box-shadow: 0 4px 12px rgba(189,189,189,0.82); } 






body.dark-mode footer
{
box-shadow: 0 2px 6px 5px rgba(189,189,189,0.82); /* سایه ملایم */
border-top: 1px solid #bdbdbdd1;
border-bottom: none;
 } 


body.dark-mode .slider-container
{
  border: 2px solid #696969;
  box-shadow: 00 17px 0 00 rgba(105,105,105,1);
  background-color: #696969;
} 






body.dark-mode header,
body.dark-mode .welcome-strip,
body.dark-mode section,
body.dark-mode footer,
body.dark-mode nav,
body.dark-mode slider-container img,
body.dark-mode #search-field
{
  background-color: #181c2c;
  color: #f5f5f5;
}

body.dark-mode .custom-file-label {

  color: #000;

}


body.dark-mode #more,
body.dark-mode .course
{
  background-color: #141724;


  color: #f5f5f5;
}



body.dark-mode #scrollProgress
{
  background-color: #596c7d;
  color: #f5f5f5;
}

body.dark-mode label
{
  color: #27ae60;
}



body.dark-mode #loading-screen
{


      position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
background: linear-gradient(-45deg , #2f3756 15%, #181c2c 50%, #1d2334 80%);
  background-size: 400% 400%;
  animation: gradientMove 6s ease infinite;
  color: white;
    
    
    
}






body.dark-mode #search-btn
{
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  backdrop-filter: blur(150px);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
}


body.dark-mode #toggle-theme {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  backdrop-filter: blur(150px);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
}


@keyframes elastic-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.2, 0.8); }
  50%  { transform: scale(0.8, 1.2); }
  70%  { transform: scale(1.1, 0.9); }
  100% { transform: scale(1); }
}


#toggle-theme {
  position: absolute;
  top: 110px;
  left: 8px;
  padding: 10px 20px;
  background-color: #dddddd;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  transition: background-color 0.6s ease, color 0.6s ease;
  z-index: 999; /* 🔥 این خط دکمه رو میاره بالا */
}



#toggle-theme.elastic {
  animation: elastic-bounce 0.6s ease;
}


.search-wrapper {
  position: absolute;
  top: 89.4px;
  right: 8px; /* کنار دکمه تغییر تم */
  display: flex;
  align-items: center;
  z-index: 1000;
}


/* دکمه جستجو */
#search-btn {
    background-color: #dddddd;
      width: 44px;
  height: 44px;
  padding: 10px 20px;
  border: none;
    font-size: 16px;
  cursor: pointer;
  display: flex;            /* فعال‌سازی Flexbox */
  align-items: center;      /* وسط‌چین عمودی */
  justify-content: center;  /* وسط‌چین افقی */
  cursor: pointer;
  transition: all 0.3s ease;
}




#search-btn.elastic {
  animation: elastic-bounce 0.6s ease;
}


/* فرم جستجو مخفی */
#search-form {
  margin-left: 10px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s ease, opacity 0.4s ease;
}


/* فیلد جستجو */
#search-field {
  padding: 8px 12px;
  font-size: 15px;
  font-family:'2  Homa', sans-serif; 
  border: 2px solid #888;
  border-radius: 6px;
  outline: none;
  width: 210px;
    height: 23px;
      margin-top: 22px; /* ← این خط باعث می‌شه فیلد کمی پایین‌تر بیاد */
}


/* حالت فعال فرم */
.search-wrapper.active #search-form {
  opacity: 1;
  transform: scaleX(1);
} 

 
.search-icon {
  width: 24px;              /* اندازه تصویر */
  height: 24px;
  object-fit: contain;
}



/* حالت شب: سفید کردن عکس با فیلتر */
body.dark-mode #search-icon {
  filter: brightness(0) invert(1);
}



#toggle-theme img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}



body[data-os="Windows"] {
  font-family: "2  Homa", sans-serif;
}

body[data-os="Mac"] {
  font-family: "2  Homa", -apple-system, sans-serif;
}

body[data-os="Android"] {
  font-family: "2  Homa", sans-serif;
}

body[data-os="iOS"] {
  font-family: "2  Homa", sans-serif;
}

body[data-os="Linux"] {
  font-family: "2  Homa", sans-serif;
}


/* دکمه عمومی */
button {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: inherit;
  cursor: pointer;
}


/* عکس‌ها */
img.responsive-img {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
}


/* مرورگر خاص */
body[data-browser="Firefox"] button {
  background-color: #f0f0f0;
}


body[data-browser="Safari"] button {
  background-color: #e0e0ff;
}






  img.responsive-img {
    max-width: 200px;
  }
}





@media (min-width: 768px) {
  button {
    font-size: 18px;
  }


@media (max-width: 600px) {
  .nav {
    font-size: 36px;
    padding: 12px;
  }
 }


@media (max-width: 600px) {
  .slider-container {
    max-width: 100%;
    border-width: 5px;
    border-radius: 8px;
  }


@media (max-width: 480px) {
  button {
    font-size: 14px;
    padding: 8px 16px;
  }


@media (max-width: 600px) {
  .form-container {
    padding: 20px;
  }
}


@media (max-width: 400px) {
  .g-recaptcha {
    transform: scale(0.85);
    transform-origin: center;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 1.2rem;
  }
}


  img.responsive-img {
    max-width: 400px;
  }