/* public/css/styles.css */
/* This is the complete CSS file, extracted and expanded from previous styles */

:root {
  --primary-rgb: #5B2D8B;
  --primary-light-rgb: #906fb2;
  --primary: rgb(var(--primary-rgb));
  --secondary-rgb: #2F9C9A;
  --secondary: rgb(var(--secondary-rgb));
  --dark: #333;
  --light-gray: #EEE;
  --light: #f4f4f4;
  --font-family: 'Vazirmatn', sans-serif;
  --font-size-base: 1.1rem;
  --font-size-large: 1.8rem;
  --font-size-small: 0.9rem;
}

body {
  font-size: var(--font-size-base);
  background: var(--light);
  color: var(--dark);
  margin: 0;
  padding: 0;
  direction: rtl;
  text-align: justify;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
  align-items: stretch
}

main {
  /* margin-top: 5rem; */

  margin: 5rem 12vw;
  min-height: 80vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
line-height:1;
}

a {
  text-decoration: none;
  color: var(--primary);
  transition: color 0.3s;
}

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

.ltr {
  font-family: 'Segoe UI', Helvetica, Tahoma, sans-serif;
  direction: ltr;
}

p {
  line-height: 1.9;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
table{
  margin-bottom: 1.5rem;
}

ul {
    padding: 0 1rem;
}
li{
  line-height: 1.9;
}

h1 {
  color: var(--primary-rgb);
    font-weight: 900;
    font-size: 2rem;
    /* padding: 0 2rem; */
    line-height: 2.2; margin-top: 1.5rem;
  margin-bottom: 1rem;
}
h2 {
  color: var( --secondary-rgb);
    font-weight: 800;
    font-size: 1.8rem;
    padding: 0 2rem;
    line-height: 2.2; margin-top: 1.5rem;
  margin-bottom: 1rem;
}
h3 {
  color: var( --secondary-rgb);
    font-weight: 600;
    font-size: 1.4rem;
    padding: 0 1rem;
    line-height: 2.2; margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
h4 {
  color: var( --secondary-rgb);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0 1rem;
    line-height: 2.2;
     margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 1200px) {
  main {

    margin: 5rem 10vw;
  }
}

@media (max-width: 768px) {
  main {

    margin: 5rem 5vw;
  }
}