/* =========================================================
   IEDU.MUI.AC.IR
   GLOBAL DESIGN SYSTEM
   LTR + RTL READY
   Drupal 10
   ========================================================= */


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {

  /* ---------- Brand Colors ---------- */

  --iedu-primary: #00acc1;
  --iedu-primary-dark: #00838f;
  --iedu-primary-light: #e0f2fe;
  --iedu-primary-soft: rgba(0, 172, 193, 0.10);

  /* ---------- Text Colors ---------- */

  --iedu-heading: #0f172a;
  --iedu-text: #334155;
  --iedu-text-secondary: #475569;
  --iedu-text-muted: #64748b;

  /* ---------- Background ---------- */

  --iedu-white: #ffffff;
  --iedu-background: #ffffff;
  --iedu-background-soft: #f8fafc;
  --iedu-background-muted: #f1f5f9;

  /* ---------- Borders ---------- */

  --iedu-border: #e2e8f0;
  --iedu-border-light: #f1f5f9;

  /* ---------- Status ---------- */

  --iedu-success: #16a34a;
  --iedu-warning: #f59e0b;
  --iedu-danger: #dc2626;

  /* ---------- Typography ---------- */

  --iedu-font-family:
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;

  --iedu-font-size: 16px;
  --iedu-line-height: 1.7;

  /* ---------- Headings ---------- */

  --iedu-h1: 36px;
  --iedu-h2: 30px;
  --iedu-h3: 22px;
  --iedu-h4: 19px;
  --iedu-h5: 17px;
  --iedu-h6: 16px;

  /* ---------- Layout ---------- */

  --iedu-container: 1200px;
  --iedu-content-width: 900px;

  /* ---------- Spacing ---------- */

  --iedu-space-xs: 8px;
  --iedu-space-sm: 12px;
  --iedu-space-md: 16px;
  --iedu-space-lg: 24px;
  --iedu-space-xl: 32px;
  --iedu-space-xxl: 48px;
  --iedu-space-xxxl: 64px;

  /* ---------- Radius ---------- */

  --iedu-radius-sm: 6px;
  --iedu-radius-md: 10px;
  --iedu-radius-lg: 12px;
  --iedu-radius-xl: 16px;
  --iedu-radius-xxl: 20px;

  /* ---------- Shadows ---------- */

  --iedu-shadow-sm:
    0 2px 8px rgba(0, 0, 0, 0.03);

  --iedu-shadow-md:
    0 4px 15px rgba(0, 0, 0, 0.04);

  --iedu-shadow-lg:
    0 10px 25px -5px rgba(0, 0, 0, 0.05);

  --iedu-shadow-primary:
    0 6px 20px rgba(0, 172, 193, 0.25);

  /* ---------- Transition ---------- */

  --iedu-transition:
    all 0.3s ease;
}


/* =========================================================
   02. GLOBAL RESET
   ========================================================= */

.iedu-page,
.iedu-page *,
.iedu-page *::before,
.iedu-page *::after {
  box-sizing: border-box;
}

.iedu-page {
  width: 100%;
  margin: 0;
  padding: 0;

  color: var(--iedu-text);

  font-family: var(--iedu-font-family);
  font-size: var(--iedu-font-size);
  line-height: var(--iedu-line-height);

  direction: ltr;
  text-align: start;
}

.iedu-page p {
  margin-block-start: 0;
  margin-block-end: var(--iedu-space-md);
}

.iedu-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.iedu-page figure {
  margin: 0;
}

.iedu-page button,
.iedu-page input,
.iedu-page select,
.iedu-page textarea {
  font-family: inherit;
}


/* =========================================================
   03. RTL SUPPORT
   ========================================================= */

html[dir="rtl"] .iedu-page {
  direction: rtl;
}


/* =========================================================
   04. HEADINGS
   ========================================================= */

.iedu-page h1,
.iedu-page h2,
.iedu-page h3,
.iedu-page h4,
.iedu-page h5,
.iedu-page h6 {
  margin-block-start: 0;

  color: var(--iedu-heading);

  font-weight: 700;
  line-height: 1.3;
}

.iedu-page h1 {
  font-size: var(--iedu-h1);
}

.iedu-page h2 {
  font-size: var(--iedu-h2);
}

.iedu-page h3 {
  font-size: var(--iedu-h3);
}

.iedu-page h4 {
  font-size: var(--iedu-h4);
}

.iedu-page h5 {
  font-size: var(--iedu-h5);
}

.iedu-page h6 {
  font-size: var(--iedu-h6);
}


/* =========================================================
   05. LINKS
   ========================================================= */

.iedu-page a {
  color: var(--iedu-primary);
  text-decoration: none;
  transition: var(--iedu-transition);
}

.iedu-page a:hover {
  color: var(--iedu-primary-dark);
  text-decoration: none;
}

.iedu-page a:focus-visible,
.iedu-page button:focus-visible,
.iedu-page input:focus-visible,
.iedu-page select:focus-visible,
.iedu-page textarea:focus-visible {
  outline: 3px solid var(--iedu-primary-soft);
  outline-offset: 2px;
}


/* =========================================================
   06. MAIN CONTAINER
   ========================================================= */

.iedu-container {
  width: 100%;
  max-width: var(--iedu-container);

  margin-inline: auto;

  padding-inline: 20px;
}

.iedu-content {
  width: 100%;
  max-width: var(--iedu-content-width);

  margin-inline: auto;
}


/* =========================================================
   07. HERO
   ========================================================= */

.iedu-hero {
  position: relative;
  overflow: hidden;

  margin-block-end: var(--iedu-space-xl);

  padding: 40px 28px;

  background: var(--iedu-background-soft);

  border: 1px solid var(--iedu-border);
  border-radius: var(--iedu-radius-xxl);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.04);

  text-align: center;
}

.iedu-hero::after {
  content: "";

  position: absolute;

  width: 150px;
  height: 150px;

  inset-block-start: -50px;
  inset-inline-end: -50px;

  background: var(--iedu-primary-soft);

  border-radius: 50%;

  pointer-events: none;
}

.iedu-hero > * {
  position: relative;
  z-index: 1;
}


/* =========================================================
   08. HERO BADGE
   ========================================================= */

.iedu-badge {
  display: inline-block;

  margin-block-end: var(--iedu-space-md);

  padding: 6px 16px;

  background: var(--iedu-primary-soft);

  border-radius: 50px;

  color: var(--iedu-primary);

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.iedu-hero-title {
  margin-block-end: var(--iedu-space-md);

  color: var(--iedu-heading);

  font-size: var(--iedu-h1);
  font-weight: 800;

  letter-spacing: -0.5px;
}

.iedu-hero-description {
  max-width: 820px;

  margin-inline: auto;
  margin-block-end: var(--iedu-space-lg);

  color: var(--iedu-text-secondary);

  font-size: 16px;
  line-height: 1.8;
}


/* =========================================================
   09. INTRO / QUOTE BANNER
   ========================================================= */

.iedu-intro {
  margin-block-end: var(--iedu-space-xl);

  padding: 20px 24px;

  background: var(--iedu-primary-light);

  border-inline-start: 5px solid var(--iedu-primary);

  border-radius: var(--iedu-radius-lg);

  color: var(--iedu-text);

  box-shadow: var(--iedu-shadow-sm);
}

.iedu-intro p {
  margin: 0;

  color: var(--iedu-heading);

  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.7;
}


/* =========================================================
   10. BUTTONS
   ========================================================= */

.iedu-button {
  display: inline-flex;

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

  min-height: 44px;

  padding: 12px 24px;

  background: var(--iedu-primary);

  border: 0;
  border-radius: var(--iedu-radius-md);

  color: var(--iedu-white);

  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;

  text-align: center;

  cursor: pointer;

  box-shadow:
    0 4px 14px rgba(0, 172, 193, 0.30);

  transition: var(--iedu-transition);
}

.iedu-button:hover {
  background: var(--iedu-primary-dark);

  color: var(--iedu-white);

  transform: translateY(-1px);

  box-shadow:
    0 6px 18px rgba(0, 172, 193, 0.35);
}

.iedu-button-outline {
  background: transparent;

  border: 1px solid var(--iedu-primary);

  color: var(--iedu-primary);

  box-shadow: none;
}

.iedu-button-outline:hover {
  background: var(--iedu-primary);

  color: var(--iedu-white);
}


/* =========================================================
   11. SECTION
   ========================================================= */

.iedu-section {
  margin-block-start: 40px;
  margin-block-end: 48px;
}

.iedu-section:last-child {
  margin-block-end: 32px;
}


/* =========================================================
   12. SECTION HEADER
   ========================================================= */

.iedu-section-header {
  display: flex;

  align-items: center;

  gap: 16px;

  margin-block-start: 40px;
  margin-block-end: 28px;

  padding: 22px 28px;

  background: var(--iedu-primary);

  border-radius: var(--iedu-radius-xl);

  box-shadow: var(--iedu-shadow-primary);
}

.iedu-section-icon {
  display: flex;

  flex: 0 0 auto;

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

  width: 48px;
  height: 48px;

  background: rgba(255, 255, 255, 0.25);

  border-radius: var(--iedu-radius-lg);

  color: var(--iedu-white);

  font-size: 24px;
}

.iedu-section-title {
  margin: 0;

  color: var(--iedu-white);

  font-size: var(--iedu-h3);
  font-weight: 800;

  letter-spacing: -0.3px;
}

.iedu-section-description {
  margin: 4px 0 0;

  color: var(--iedu-white);

  font-size: 14px;

  opacity: 0.95;
}


/* =========================================================
   13. STANDARD CARD
   ========================================================= */

.iedu-card {
  background: var(--iedu-white);

  border: 1px solid var(--iedu-border);

  border-radius: var(--iedu-radius-xl);

  box-shadow: var(--iedu-shadow-md);

  transition: var(--iedu-transition);
}

.iedu-card:hover {
  box-shadow: var(--iedu-shadow-lg);

  transform: translateY(-2px);
}

.iedu-card-body {
  padding: 28px;
}

.iedu-card-title {
  margin-block-end: 12px;

  color: var(--iedu-primary);

  font-size: var(--iedu-h4);
  font-weight: 700;
}

.iedu-card-text {
  margin: 0;

  color: var(--iedu-text-secondary);

  font-size: 15px;
  line-height: 1.8;
}


/* =========================================================
   14. CARD GRID
   ========================================================= */

.iedu-grid,
.iedu-grid-3 {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;
}

.iedu-grid-2 {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 24px;
}


/* =========================================================
   15. FEATURE CARD WITH IMAGE
   ========================================================= */

.iedu-feature-card {
  display: flex;

  align-items: center;

  overflow: hidden;

  background: var(--iedu-white);

  border: 1px solid var(--iedu-border);

  border-radius: var(--iedu-radius-xl);

  box-shadow: var(--iedu-shadow-md);

  transition: var(--iedu-transition);
}

.iedu-feature-card:hover {
  box-shadow: var(--iedu-shadow-lg);

  transform: translateY(-2px);
}

.iedu-feature-content {
  flex: 0 0 55%;

  padding: 28px;
}

.iedu-feature-image {
  flex: 0 0 45%;

  padding: 12px;
}

.iedu-feature-image img {
  width: 100%;

  max-height: 240px;

  border-radius: var(--iedu-radius-lg);

  object-fit: cover;
}

.iedu-feature-label {
  display: inline-block;

  margin-block-end: 8px;

  padding: 4px 10px;

  background: var(--iedu-background-muted);

  border-radius: 4px;

  color: var(--iedu-text-secondary);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.5px;

  text-transform: uppercase;
}

.iedu-feature-title {
  margin-block-start: 8px;
  margin-block-end: 12px;

  color: var(--iedu-primary);

  font-size: var(--iedu-h4);
  font-weight: 700;
}

.iedu-feature-text {
  margin: 0;

  color: var(--iedu-text-secondary);

  font-size: 15px;
  line-height: 1.8;
}


/* =========================================================
   16. IMAGE
   ========================================================= */

.iedu-image {
  overflow: hidden;

  border-radius: var(--iedu-radius-lg);
}

.iedu-image img {
  width: 100%;

  border-radius: var(--iedu-radius-lg);

  object-fit: cover;
}


/* =========================================================
   17. STATISTICS
   ========================================================= */

.iedu-stats {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

  margin-block-end: 40px;
}

.iedu-stat {
  padding: 16px;

  background: var(--iedu-white);

  border: 1px solid var(--iedu-border);

  border-radius: 14px;

  box-shadow: var(--iedu-shadow-sm);

  text-align: center;
}

.iedu-stat-number {
  color: var(--iedu-primary);

  font-size: 24px;
  font-weight: 800;
}

.iedu-stat-label {
  margin-block-start: 2px;

  color: var(--iedu-text-muted);

  font-size: 12px;
  font-weight: 700;

  text-transform: uppercase;
}


/* =========================================================
   18. TWO COLUMN INFORMATION LAYOUT
   ========================================================= */

.iedu-two-column {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 24px;
}

.iedu-two-column > * {
  height: 100%;
}


/* =========================================================
   19. INFO ITEM
   ========================================================= */

.iedu-info-item {
  display: flex;

  align-items: flex-start;

  gap: 14px;

  margin-block-end: 20px;

  color: var(--iedu-text);

  font-size: 15.5px;
  line-height: 1.6;
}

.iedu-info-icon {
  display: flex;

  flex: 0 0 auto;

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

  width: 42px;
  height: 42px;

  background: var(--iedu-primary-light);

  border-radius: 50%;

  color: var(--iedu-primary-dark);
}

.iedu-info-content {
  padding-block-start: 4px;
}

.iedu-info-label {
  display: block;

  margin-block-end: 2px;

  color: var(--iedu-heading);

  font-weight: 700;
}


/* =========================================================
   20. CHECKLIST
   ========================================================= */

.iedu-checklist {
  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-block-end: 28px;
}

.iedu-check-item {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 16px;

  background: var(--iedu-background-soft);

  border: 1px solid var(--iedu-border-light);

  border-radius: var(--iedu-radius-lg);
}

.iedu-check-icon {
  display: flex;

  flex: 0 0 auto;

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

  width: 22px;
  height: 22px;

  background: var(--iedu-primary);

  border-radius: 50%;

  color: var(--iedu-white);

  font-size: 13px;
  font-weight: 700;
}

.iedu-check-text {
  color: var(--iedu-text);

  font-size: 14.5px;
  font-weight: 500;
}


/* =========================================================
   21. TABLE
   ========================================================= */

.iedu-table-wrapper {
  width: 100%;

  overflow-x: auto;

  margin-block-end: 32px;

  -webkit-overflow-scrolling: touch;
}

.iedu-table {
  width: 100%;

  border-collapse: separate;
  border-spacing: 0;

  overflow: hidden;

  background: var(--iedu-white);

  border: 1px solid var(--iedu-border);

  border-radius: var(--iedu-radius-lg);
}

.iedu-table th,
.iedu-table td {
  padding: 14px 16px;

  border-block-end: 1px solid var(--iedu-border);

  text-align: start;

  vertical-align: middle;
}

.iedu-table th {
  background: var(--iedu-primary);

  color: var(--iedu-white);

  font-weight: 700;
}

.iedu-table tbody tr:last-child td {
  border-block-end: 0;
}

.iedu-table tbody tr:nth-child(even) {
  background: var(--iedu-background-soft);
}

.iedu-table tbody tr:hover {
  background: var(--iedu-primary-light);
}


/* =========================================================
   22. FORMS
   ========================================================= */

.iedu-form .form-item {
  margin-block-end: 20px;
}

.iedu-form label {
  display: block;

  margin-block-end: 8px;

  color: var(--iedu-heading);

  font-size: 15px;
  font-weight: 600;
}

.iedu-form input,
.iedu-form select,
.iedu-form textarea {
  width: 100%;

  padding: 12px 14px;

  background: var(--iedu-white);

  border: 1px solid var(--iedu-border);

  border-radius: var(--iedu-radius-md);

  color: var(--iedu-text);

  font-family: inherit;
  font-size: 15px;

  transition: var(--iedu-transition);
}

.iedu-form input:focus,
.iedu-form select:focus,
.iedu-form textarea:focus {
  outline: none;

  border-color: var(--iedu-primary);

  box-shadow:
    0 0 0 3px var(--iedu-primary-soft);
}

.iedu-form textarea {
  min-height: 150px;

  resize: vertical;
}

.iedu-form input::placeholder,
.iedu-form textarea::placeholder {
  color: var(--iedu-text-muted);
  opacity: 0.8;
}


/* =========================================================
   23. ALERTS
   ========================================================= */

.iedu-alert {
  margin-block-end: 20px;

  padding: 16px 20px;

  border: 1px solid transparent;

  border-radius: var(--iedu-radius-md);
}

.iedu-alert-success {
  background: #f0fdf4;

  border-color: #bbf7d0;

  color: var(--iedu-success);
}

.iedu-alert-warning {
  background: #fffbeb;

  border-color: #fde68a;

  color: var(--iedu-warning);
}

.iedu-alert-danger {
  background: #fef2f2;

  border-color: #fecaca;

  color: var(--iedu-danger);
}


/* =========================================================
   24. BREADCRUMB
   ========================================================= */

.iedu-breadcrumb {
  margin-block-end: 24px;

  color: var(--iedu-text-muted);

  font-size: 13px;
}

.iedu-breadcrumb a {
  color: var(--iedu-primary);
}

.iedu-breadcrumb .separator {
  margin-inline: 8px;

  color: var(--iedu-border);
}


/* =========================================================
   25. CONTENT / ARTICLE
   ========================================================= */

.iedu-content p {
  color: var(--iedu-text-secondary);

  font-size: 15.5px;
  line-height: 1.8;
}

.iedu-content strong {
  color: var(--iedu-heading);
}

.iedu-content ul,
.iedu-content ol {
  color: var(--iedu-text-secondary);

  line-height: 1.8;

  padding-inline-start: 24px;
}

.iedu-content li {
  margin-block-end: 6px;
}


/* =========================================================
   26. HORIZONTAL DIVIDER
   ========================================================= */

.iedu-divider {
  height: 1px;

  margin-block: 32px;

  background: var(--iedu-border-light);

  border: 0;
}


/* =========================================================
   27. UTILITY CLASSES
   ========================================================= */

.iedu-text-center {
  text-align: center;
}

.iedu-text-start {
  text-align: start;
}

.iedu-text-end {
  text-align: end;
}

.iedu-hidden {
  display: none !important;
}

.iedu-muted {
  color: var(--iedu-text-muted);
}


/* =========================================================
   28. RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 992px) {

  :root {
    --iedu-h1: 32px;
    --iedu-h2: 28px;
    --iedu-h3: 21px;
  }

  .iedu-grid,
  .iedu-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .iedu-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =========================================================
   29. RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 768px) {

  :root {
    --iedu-h1: 28px;
    --iedu-h2: 25px;
    --iedu-h3: 20px;
    --iedu-h4: 18px;
  }

  .iedu-container {
    padding-inline: 16px;
  }

  .iedu-hero {
    padding: 32px 20px;
  }

  .iedu-hero-title {
    font-size: 28px;
  }

  .iedu-section-header {
    padding: 18px 20px;
  }

  .iedu-grid,
  .iedu-grid-2,
  .iedu-grid-3,
  .iedu-two-column {
    grid-template-columns: 1fr;
  }

  .iedu-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .iedu-feature-card {
    flex-direction: column;
  }

  .iedu-feature-content,
  .iedu-feature-image {
    flex: 0 0 100%;

    width: 100%;
    max-width: 100%;
  }

  .iedu-feature-image {
    padding-block-start: 0;
  }

  .iedu-feature-image img {
    max-height: 280px;
  }
}


/* =========================================================
   30. RESPONSIVE - SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .iedu-hero {
    padding: 28px 18px;
  }

  .iedu-section-header {
    align-items: flex-start;

    gap: 12px;

    padding: 18px;
  }

  .iedu-section-icon {
    width: 42px;
    height: 42px;

    font-size: 20px;
  }

  .iedu-stats {
    grid-template-columns: 1fr;
  }

  .iedu-button {
    width: 100%;
  }

  .iedu-card-body,
  .iedu-feature-content {
    padding: 22px;
  }
}


/* =========================================================
   31. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .iedu-page *,
  .iedu-page *::before,
  .iedu-page *::after {
    scroll-behavior: auto !important;

    transition: none !important;

    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .iedu-card:hover,
  .iedu-feature-card:hover,
  .iedu-button:hover {
    transform: none;
  }
}


/* =========================================================
   END OF IEDU GLOBAL DESIGN SYSTEM
   ========================================================= */