/* Base components, shared colors and desktop layout. */

:root {
  --navy:#102139;
  --orange:#ff7900;
  --line:#dce4ef;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:#edf1f6;
  color:var(--navy);
  font-family:Vazirmatn,Tahoma,sans-serif;
  line-height:1.9;
}

button,input,select,textarea {
  font:inherit;
}

a {
  color:inherit;
  text-decoration:none;
}

a:hover {
  color:var(--orange);
}

button {
  cursor:pointer;
}

:focus-visible {
  outline:2px solid var(--orange);
  outline-offset:3px;
}

.site {
  max-width:1100px;
  margin:auto;
  background:#f8fafc;
  min-height:100vh;
  border-inline:1px solid #d1d9e3;
  container-type:inline-size;
}

header {
  height:14.5cqw;
  padding:2.2cqw 4.2cqw;
  display:flex;
  align-items:center;
  direction:ltr;
  gap:2cqw;
  background:#fff;
  border-bottom:1px solid #e7ecf3;
}

.brand {
  display:flex;
  align-items:center;
  gap:1cqw;
  direction:ltr;
  flex-shrink:0;
}

.brand-copy {
  direction:rtl;
  text-align:right;
  line-height:1.5;
}

.brand b {
  display:block;
  font-size:2.5cqw;
  font-weight:900;
}

.brand small {
  font:1.42cqw Arial;
  display:block;
  color:#4e6585;
  direction:ltr;
}

.brand .art {
  width:8.5cqw;
  height:8.5cqw;
}

nav {
  display:flex;
  align-items:center;
  gap:2cqw;
  margin-left:auto;
  direction:rtl;
  font-size:1.55cqw;
  font-weight:600;
  white-space:nowrap;
}

nav a {
  padding:1cqw 0;
}

nav a.muted {
  color:#8b9ab1;
}

nav a.active {
  color:#102139;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2cqw;
  border:0;
  border-radius:2.4cqw;
  background:#ff7900;
  color:white;
  font-size:2cqw;
  font-weight:500;
  padding:1.3cqw 2.8cqw;
  line-height:1.5;
}

.btn:hover {
  background:#ed7000;
  color:white;
}

.header-cta {
  font-size:1.8cqw;
  border-radius:.8cqw;
  padding:1cqw 1.6cqw;
  white-space:nowrap;
}

.art {
  display:block;
  overflow:hidden;
  width:100%;
  height:100%;
}

.art image {
  pointer-events:none;
}

.hero {
  position:relative;
  height:52.3cqw;
  overflow:hidden;
  color:white;
  direction:ltr;
}

.hero>.art {
  position:absolute;
  inset:0;
}

.hero-copy {
  position:relative;
  padding:9.8cqw 4.5cqw 7cqw;
  width:100%;
  text-align:left;
  direction:rtl;
}

.hero h1 {
  font-size:5.6cqw;
  font-weight:900;
  margin:0;
  line-height:1.7;
  white-space:nowrap;
}

.hero p {
  font-size:3cqw;
  margin:1cqw 0 3.5cqw;
}

.hero .btn {
  padding:1.8cqw 3.5cqw;
  font-size:2.3cqw;
  gap:2cqw;
}

.dots {
  position:absolute;
  bottom:3.2cqw;
  left:50%;
  display:flex;
  gap:1cqw;
  transform:translateX(-50%);
}

.dot {
  border:0;
  width:1.6cqw;
  height:1.6cqw;
  background:#8c9fb2;
  border-radius:50%;
  padding:0;
}

.dot.active {
  background:white;
}

.popular {
  padding:4.3cqw 2.5cqw 5.4cqw;
}

.popular h2 {
  text-align:center;
  font-size:3.4cqw;
  margin:0 0 3.5cqw;
}

.home-courses {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2.5cqw;
  direction:ltr;
}

.home-card {
  border:1px solid var(--line);
  background:#f8fafc;
  border-radius:1.3cqw;
  text-align:center;
  padding:3.8cqw 1cqw 3cqw;
  direction:rtl;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.home-card .art {
  width:9.1cqw;
  height:9.1cqw;
  margin-bottom:2.3cqw;
}

.home-card h3 {
  font-size:2.3cqw;
  margin:0 0 .8cqw;
  line-height:1.65;
}

.home-card p {
  font-size:1.5cqw;
  color:#617693;
  direction:ltr;
  margin:0;
  min-height:5cqw;
}

.round-link {
  display:grid;
  place-items:center;
  border-radius:50%;
  width:3.2cqw;
  height:3.2cqw;
  color:#75421e;
  border:1px solid #fca13e;
  background:#ffbd70;
  font-size:1.9cqw;
  margin-top:2.2cqw;
}

.stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#172b3b;
  color:white;
  text-align:center;
  direction:ltr;
  padding:4.7cqw 2cqw 4.4cqw;
}

.stat {
  direction:rtl;
}

.stat .art {
  width:8.8cqw;
  height:8.8cqw;
  margin:0 auto 1.5cqw;
}

.stat strong {
  font-size:3.9cqw;
  display:block;
  direction:ltr;
  font-weight:500;
}

.stat p {
  font-size:1.7cqw;
  margin:.4cqw 0 0;
  color:#e3e9ef;
}

.page {
  padding:4.2cqw 4.4cqw 6cqw;
  min-height:calc(100vh - 14.5cqw);
}

.page-heading {
  font-size:3.8cqw;
  font-weight:900;
  margin:0 0 6.5cqw;
  text-align:right;
  line-height:1.6;
}

.catalog-page {
  padding:3.5cqw 2cqw;
}

.catalog-page .page-heading {
  text-align:center;
  margin:0 0 .8cqw;
}

.subtitle {
  font-size:2cqw;
  text-align:center;
  margin:0 0 5.6cqw;
  color:#394761;
}

.course-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3.3cqw;
  direction:ltr;
}

.course-card {
  border:1px solid var(--line);
  border-radius:1.5cqw;
  background:#ffffff;
  padding:4cqw 1.3cqw 3.4cqw;
  text-align:center;
  direction:rtl;
  display:flex;
  align-items:center;
  flex-direction:column;
}

.course-card .art {
  width:10.7cqw;
  height:10.7cqw;
  margin:0 auto 2cqw;
}

.course-card h2 {
  font-size:2.6cqw;
  line-height:1.5;
  margin:.5cqw 0 1.5cqw;
}

.course-card p {
  font-size:1.55cqw;
  color:#7185a1;
  min-height:5cqw;
  margin:0 0 2.4cqw;
  direction:ltr;
}

.course-card .btn {
  font-size:1.9cqw;
  padding:1.1cqw 2.6cqw;
  gap:1.6cqw;
  border-radius:2.3cqw;
}

.register-banner {
  background:#eef2f6;
  border-radius:1.6cqw;
  text-align:center;
  margin-top:5.5cqw;
  padding:3cqw 2.5cqw 3.4cqw;
}

.register-banner .art {
  width:8.5cqw;
  height:8.5cqw;
  margin:0 auto;
}

.register-banner h2 {
  font-size:2.7cqw;
  margin:.8cqw 0;
}

.register-banner p {
  font-size:1.8cqw;
  color:#53617b;
  margin:.5cqw 0 2.5cqw;
}

.register-banner .btn {
  font-size:2cqw;
  border-radius:1.8cqw;
}

.course-page .page-heading {
  margin-bottom:1.5cqw;
}

.breadcrumb {
  font-size:1.9cqw;
  margin:0 0 4.5cqw;
  padding-bottom:2.5cqw;
  border-bottom:1px solid #e3e9f0;
}

.course-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4.8cqw;
  align-items:start;
  margin:0 0 6cqw;
}

.course-intro>.art {
  aspect-ratio:1.15;
  height:auto;
  border-radius:1.6cqw;
}

.course-intro h2 {
  font-size:3.8cqw;
  margin:1cqw 0 .5cqw;
}

.course-intro p {
  font-size:2.4cqw;
  margin:0 0 3cqw;
}

.benefits {
  list-style:none;
  padding:0;
  margin:0;
  font-size:2.25cqw;
  line-height:2.4;
}

.benefits li:before {
  content:'✔';
  color:var(--orange);
  padding-left:1.2cqw;
}

.syllabus-title {
  font-size:3.4cqw;
  display:flex;
  align-items:center;
  gap:2.5cqw;
  margin:0 0 3cqw;
}

.syllabus-title:after {
  content:'';
  height:1px;
  background:var(--line);
  flex:1;
}

.syllabus details {
  border:1px solid #d6e1ee;
  background:#fff;
  border-radius:.8cqw;
  margin:1.2cqw 0;
  padding:1.3cqw 2.3cqw;
  font-size:2.3cqw;
}

.syllabus summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
}

.syllabus summary:after {
  content:'⌄';
}

.syllabus details[open] summary:after {
  content:'⌃';
}

.syllabus p {
  font-size:1.9cqw;
  color:#61718b;
}

.course-register {
  width:100%;
  margin-top:7.8cqw;
  padding:1.5cqw;
  font-size:2.5cqw;
  border-radius:3.5cqw;
}

.about-intro {
  display:grid;
  grid-template-columns:1.2fr .85fr;
  gap:5.6cqw;
  align-items:center;
}

.about-intro>.art {
  aspect-ratio:.96;
  height:auto;
  border-radius:1.6cqw;
}

.about-intro h2 {
  font-size:3.3cqw;
  margin:0 0 2.5cqw;
}

.about-intro p {
  font-size:2.5cqw;
  line-height:2.15;
  margin:0;
}

.values {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2.8cqw;
  margin:8cqw 0 10cqw;
  direction:ltr;
}

.value {
  border:1px solid #e3e9f1;
  border-radius:1.2cqw;
  background:#f3f6f9;
  text-align:center;
  padding:3.4cqw 1.2cqw 3cqw;
  direction:rtl;
}

.value .art {
  width:8.5cqw;
  height:8.5cqw;
  margin:auto;
}

.value h3 {
  font-size:2.3cqw;
  line-height:1.7;
  margin:2cqw 0 0;
}

.vision {
  display:flex;
  align-items:flex-start;
  gap:4cqw;
  margin:0 3.8cqw 4cqw;
}

.vision>.art {
  width:11cqw;
  height:11cqw;
  flex-shrink:0;
}

.vision h2 {
  font-size:3.6cqw;
  margin:0 0 2cqw;
}

.vision p {
  font-size:2.4cqw;
  line-height:2.2;
  margin:0;
}

.blog-page {
  padding:3.8cqw 2.8cqw 10cqw;
}

.blog-page .page-heading {
  margin-bottom:7cqw;
}

.blog-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4.2cqw;
}

.article {
  border:1px solid var(--line);
  border-radius:1.4cqw;
  background:white;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.article>.art {
  aspect-ratio:1.65;
  height:auto;
}

.article h2 {
  font-size:2.5cqw;
  text-align:center;
  line-height:1.9;
  margin:2.2cqw 1.5cqw 4cqw;
  min-height:8.5cqw;
}

.article time {
  font-size:1.8cqw;
  text-align:right;
  padding:0 1.8cqw 1.8cqw;
  direction:ltr;
}

.article-link {
  font-size:2.1cqw;
  color:var(--orange);
  text-align:right;
  border-top:1px solid #edf1f6;
  padding:1.7cqw 1.8cqw;
}

.pagination {
  display:flex;
  direction:ltr;
  justify-content:center;
  gap:1.2cqw;
  margin:10.5cqw 0 .5cqw;
}

.pagination button {
  background:#fff;
  border:1px solid var(--line);
  border-radius:.7cqw;
  width:5.7cqw;
  height:5.8cqw;
  font-size:2.4cqw;
  color:var(--navy);
}

.pagination button.active {
  background:var(--orange);
  color:white;
  border-color:var(--orange);
}

.gallery-page {
  padding:3.2cqw 4.3cqw 4cqw;
}

.gallery-page .page-heading {
  margin-bottom:3.7cqw;
}

.filters {
  display:flex;
  gap:1.8cqw;
  margin-bottom:6.6cqw;
}

.filter {
  border:1px solid var(--line);
  border-radius:2.3cqw;
  background:#fbfcfe;
  padding:1cqw 2.4cqw;
  color:var(--navy);
  font-size:2.3cqw;
}

.filter.active {
  background:var(--orange);
  border-color:var(--orange);
  color:white;
}

.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.3cqw;
  direction:ltr;
}

.gallery-grid button {
  padding:0;
  border:0;
  border-radius:1.7cqw;
  overflow:hidden;
  background:#e9eef4;
  aspect-ratio:1.65;
}

.gallery-grid .art {
  transition:transform .2s;
}

.gallery-grid button:hover .art {
  transform:scale(1.04);
}

.register-page {
  padding:5.8cqw 4cqw;
}

.form-layout {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:4cqw;
  align-items:stretch;
}

.form-panel {
  border:1px solid var(--line);
  background:white;
  border-radius:1.4cqw;
  padding:2cqw 2.8cqw 3.5cqw;
}

.form-panel h1 {
  font-size:4cqw;
  margin:0 0 2.7cqw;
  padding-bottom:1.7cqw;
  border-bottom:1px solid #edf1f6;
}

.form-panel label {
  display:block;
  font-size:2.1cqw;
  margin:1.8cqw 0 .7cqw;
}

.form-panel input,.form-panel select,.form-panel textarea {
  display:block;
  width:100%;
  border:1px solid #dae4f1;
  border-radius:.7cqw;
  background:#f8fafc;
  padding:1.3cqw 1.6cqw;
  min-height:6.7cqw;
  font-size:1.9cqw;
  color:var(--navy);
}

.form-panel input::placeholder,.form-panel textarea::placeholder {
  color:#b8c5d6;
}

.form-panel textarea {
  height:14.3cqw;
  resize:vertical;
}

.form-panel .btn {
  border-radius:.8cqw;
  width:100%;
  margin-top:2.7cqw;
  font-size:2.5cqw;
}

.contact-panel {
  margin-top:3.5cqw;
  background:#eff4fa;
  border-radius:1.5cqw;
  padding:6.5cqw 2.8cqw 3.5cqw;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.contact-panel>.art {
  width:13cqw;
  height:11cqw;
  margin-bottom:1.2cqw;
}

.contact-panel h2 {
  font-size:3.5cqw;
  margin:0 0 1cqw;
}

.contact-panel p {
  text-align:center;
  font-size:2.3cqw;
  margin:0 0 2.5cqw;
}

.contact-lines {
  width:100%;
  direction:ltr;
}

.contact-line {
  display:flex;
  align-items:center;
  gap:2.1cqw;
  margin:2.1cqw 0;
  font-size:2.3cqw;
}

.contact-line .symbol {
  color:var(--orange);
  width:3.2cqw;
  height:3.6cqw;
  flex-shrink:0;
}

.contact-line span {
  direction:rtl;
  text-align:right;
}

.socials {
  display:flex;
  direction:ltr;
  gap:1.7cqw;
  justify-content:center;
  margin-top:2.5cqw;
}

.social {
  border:0;
  padding:0;
  background:none;
  width:5.1cqw;
  height:5.1cqw;
  border-radius:50%;
  overflow:hidden;
}

.form-status {
  font-size:1.8cqw;
  line-height:1.9;
  margin-top:1.4cqw;
}

.form-status a {
  color:var(--orange);
  text-decoration:underline;
}

.contact-page {
  padding:3.5cqw 4cqw 4.5cqw;
  min-height:0;
}

.contact-page .page-heading {
  margin-bottom:4.2cqw;
}

.contact-layout {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:5cqw;
  align-items:center;
  direction:rtl;
}

.contact-layout .contact-line {
  font-size:2.1cqw;
  margin:2.1cqw 0;
}

.map {
  display:block;
  width:100%;
  aspect-ratio:1.4;
  border:0;
  border-radius:1.5cqw;
  overflow:hidden;
}

.map:hover {
  outline:2px solid #dce6ed;
}

.contact-layout .socials {
  justify-content:flex-start;
  gap:1.6cqw;
}

.contact-layout .social {
  width:4.3cqw;
  height:4.3cqw;
}

footer {
  background:#192d3c;
  color:white;
  padding:3.9cqw 5cqw 2.4cqw;
}

.footer-main {
  display:flex;
  direction:ltr;
  justify-content:space-between;
  align-items:start;
}

.footer-brand .brand b {
  font-size:2.9cqw;
}

.footer-brand .brand small {
  font-size:2.1cqw;
  color:white;
}

.footer-brand .brand .art {
  width:9.5cqw;
  height:9.5cqw;
}

.footer-brand p {
  font-size:2.3cqw;
  margin:1cqw 0 0;
  text-align:right;
}

.footer-nav {
  display:flex;
  flex-direction:column;
  text-align:right;
  font-size:2cqw;
  gap:1cqw;
}

.copyright {
  text-align:center;
  font-size:1.6cqw;
  margin:3cqw 0 0;
}

.modal {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:25px;
  background:#102437dd;
}

.modal[hidden],footer[hidden] {
  display:none;
}

.modal-inner {
  position:relative;
  width:min(900px,95vw);
  max-height:90vh;
  overflow:auto;
  background:white;
  border-radius:15px;
  padding:40px;
}

.modal-inner>.art {
  max-height:70vh;
  aspect-ratio:1.65;
}

.close {
  position:absolute;
  top:8px;
  left:8px;
  border:0;
  background:var(--navy);
  color:white;
  font-size:25px;
  border-radius:50%;
  width:36px;
  height:36px;
}

.article-content h1 {
  font-size:3.8cqw;
}

.article-content p {
  font-size:2.4cqw;
}

.article-content>.art {
  aspect-ratio:1.65;
  height:auto;
  border-radius:1.2cqw;
}

.empty {
  padding:50px;
  text-align:center;
}

.home-card:hover,.course-card:hover {
  border-color:#ffad59;
}

.social-info {
  font-size:2cqw;
  text-align:center;
  padding-top:1.4cqw;
}

button:disabled {
  opacity:.5;
  cursor:default;
}

@media(max-width:500px) {
  .site {
    border:0;
  }
  .hero-copy {
    padding-top:10cqw;
  }
  .form-status {
    font-size:2.5cqw;
  }
  .modal-inner {
    padding:35px 20px 20px;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
  }
}

.hero:after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(13, 43, 59, .66);
  pointer-events:none;
}

.hero-copy,.dots {
  z-index:1;
}

.hero-copy {
  isolation:isolate;
}

[hidden] {
  display:none!important;
}