/* فونت کلی */
body {
/* display: flex; */
  font-family: "Vazirmatn", sans-serif;
  margin: 0;
  padding: 0;
  direction: rtl;
  margin: auto 0;
  background-color: #2c3e50;
  /* justify-content:center ; */
  color: #1B1464;
}


/* نوار ناوبری */
nav.section {
    width: 92%;
    height: 60px;
    margin-top: 1.5rem;
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    background-color: #ecf0f1;
    /* padding: 1rem 2rem; */
    border-radius: 10px 100px / 120px;
    margin: auto ;
    border: rgb(120, 236, 234) 10px double;
    background-clip: content-box;


}


/* منوهای راست و چپ */
.home,
.panel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;


}

/* خانه و منوی اصلی سمت راست */
.home {

  order: 1;

}

/* پنل مدیریت سمت چپ */
.panel {
  order: 3;
}

/* منوی کشویی */
.dropdown {
  position: relative;
  list-style: none;
  margin-right: 1rem;
}

.dropdown a {
  color: #1B1464;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.dropdown a:hover {
  color: #31dcec
}

/* منوی کشویی پنهان */
.dropdown-menu {
    width: 14%;
  display: none;
  position: absolute;
  top: 2rem;
  right: 0;
  background: #ecf1f1;
  margin-right: 18.5rem;
  list-style: none;
  padding: 10px 0;
  min-width: 180px;
  z-index: 100;
  justify-content: center;
border-bottom-right-radius: 25%;
border:#f40895 10px double;
background-clip: content-box;
}

/* آیتم‌های داخل منوی کشویی */
.dropdown-menu li {
  padding: 8px 16px;
}

.dropdown-menu li a {
  color: #1B1464;
  text-decoration: none;
}

.dropdown-menu li a:hover {
  color: #31dcec}

/* فعال شدن با هاور */
.dropdown:hover + .dropdown-menu,
.dropdown-menu:hover {
  display: block;
}

/* لینک‌ها و آیکن‌ها */
a {
  color: #1B1464;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

a:hover {
  color: #31dcec}

.iconify {
  vertical-align: middle;
  margin-left: 5px;
}

/* واکنش‌گرایی برای موبایل */
@media (max-width: 768px) {
  nav.section {
    flex-direction: column;
    align-items: flex-start;
  }

  .home,
  .panel {
    flex-direction: column;
    width: 100%;
    gap: 0.8rem;
  }

  .dropdown-menu {
    position: static;
    box-shadow: none;
  }
}
/* کانتینر*/
.container{
    width: 92%;
    /* display: grid; */
    background-color: #ecf0f1 ;
    margin: auto;
    transform: translateY(30px);
    border-radius: 10px 100px / 120px;
    border: rgb(120, 236, 234) 10px double;
    background-clip: content-box;
    /* justify-content:right; */
    /* align-items: center; */
      text-align:center; /* هم‌تراز کردن متن از دو طرف */
    justify-content:right;

}
.text-p1{
    width: 70%;
    line-height: 2.6; /* فاصله بین خطوط */
    text-align:center; /* هم‌تراز کردن متن از دو طرف */
    justify-content:right;
    margin: auto;
    font-weight: 450;
    margin-top: 2.5rem;
}

.text-p2{
    font-weight: 450;
    /* transform:translateX(-60px ); */
    color: #ff914d;
}
.text-p3{
font-weight: 450;
margin-bottom: 2.5rem;
}
.text-p4{
    line-height: 3;
    margin: auto ;
    width: 30%;
    /* padding: 15px; */
    text-align:center; /* هم‌تراز کردن متن از دو طرف */
    justify-content:right;
    margin-bottom: 2rem;
}
.link{
    background-color: #31dcec;
    width: 30%;
    margin: auto ;
    text-align: center;
    border-radius: 10px 100px / 120px;
    border: #f60f92 10px double;
    background-clip: content-box;
}
.metod{
     width: 92%;
    display: grid;
    background-color: #ecf0f1 ;
    margin: auto;
    transform: translateY(30px);
    border-radius: 10px 100px / 120px;
    border: rgb(120, 236, 234) 10px double;
    background-clip: content-box;
    text-align: center;
    margin-top: 1.5rem;
}
.montesori ,.hayskop{
    width:50%;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;

}





/* footer */
.footer-main ,.fardad ,.fardad1{
    width: 92%;
    height: auto;
    place-items: center; /* مرکز افقی و عمودی */
    /* transform: translatey(-45px); */
    display:grid;
    grid-row-end: auto;
    background-color: #ecf0f1;
    margin: auto ;
    margin-top: 3.5rem;
    border-radius: 10px 100px / 120px;
    border: rgb(120, 236, 234) 10px double;
    background-clip: content-box;
    /* grid-area: 2 / 1 / 2 / 4; */
    /* grid-template-columns: 1fr 2fr; */
    grid-template-columns: 8ch auto;
    margin-bottom: .5rem;
}

.fardad{
    padding: 20px;
    transform:translateY(-50px);
    margin-bottom: 1rem;
    justify-content: center;
    color: #1B1464;

}
.fardad1{
    padding: 20px;
    margin-bottom: 1rem;
    transform:translateY(40px);
    color: #1B1464;
    text-decoration: none;
    list-style: none;

}

.number1{
    color:#4b7bec;
}

.number2{
    color: #fa8231;
}

.number3{
    color: #20bf6b;
}
.call-ferst{
    color: #211786;
}



/* --------- رسپانسیو برای موبایل (max-width: 768px) --------- */
@media (max-width: 768px) {

  body {
    background-color: #2c3e50;
  }

  nav.section {
    width: 95%;
    height: auto;
    flex-direction: column;
    padding: 1rem 0;
    gap: 1rem;
  }

  .home,
  .panel {
    flex-direction: column;
    gap: 0.5rem;
  }

  .dropdown-menu {
    width: 60%;
    margin-right: 0 !important;
    position: static;
    border-width: 6px;
    text-align: center;
  }

  /* کانتینر */
  .container {
    width: 95%;
    padding: 1rem 0;
  }

  .text-p1,
  .text-p2,
  .text-p3,
  .text-p4 {
    width: 90% !important;
    text-align: center;
  }

  .link {
    width: 60%;
  }

  /* متدها */
  .metod {
    width: 95%;
  }

  .montesori,
  .hayskop {
    width: 90%;
  }
/* ==================== */
/* Footer نهایی با یک border */
.footer-main {
  width: 92%;
  background-color: #ecf0f1;
  margin: 4.5rem auto 0 auto;
  border-radius: 10px 100px / 120px; /* فقط روی فوتر */
  border: rgb(120, 236, 234) 10px double; /* فقط روی فوتر */
  background-clip: content-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px 15px;
  gap: 12px;
  box-sizing: border-box;
  overflow: visible;
}

/* پاک کردن هرگونه border یا radius اضافی روی عناصر داخلی */
.fardad, .fardad1 {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1.5;
}

/* شماره‌ها */
.number1 { color: #4b7bec; }
.number2 { color: #fa8231; }
.number3 { color: #20bf6b; }
.call-ferst { font-weight: 600; }

/* متن استودیو طراحی */
.fardad a {
  text-decoration: none;
  color: #1B1464;
}

.fardad a:hover {
  color: #31dcec;
}

/* ریسپانسیو موبایل */
@media (max-width: 600px) {
  .footer-main {
    width: 95%;
    padding: 20px 10px;
  }

  .fardad, .fardad1 {
    font-size: 15px;
    border: none;
  }
}

}


/* --------- رسپانسیو برای موبایل کوچک (max-width: 480px) --------- */
@media (max-width: 480px) {

  nav.section {
    border-width: 6px;
  }

  .dropdown a {
    font-size: 0.9rem;
  }

  .dropdown-menu li {
    padding: 6px 0;
  }

  .link {
    width: 80%;
  }

  .montesori,
  .hayskop {
    font-size: 0.9rem;
  }
}