/* public/css/styles.css */

/* Base Variables - Using your color table */
:root {
  --primary-rgb: #6caff3;
  --primary: rgb(var(--primary-rgb));
  --secondary-rgb: #2F9C9A;
  --secondary: rgb(var(--secondary-rgb));
  --dark: #333;
  --light: #f4f4f4;
  --primary-light-rgb: #89b8e8;
  --light-gray: #EEE;

  --font-family: 'Vazirmatn', sans-serif;
  --font-size-base: 1.1rem;
  --font-size-large: 1.8rem;
  --font-size-small: 0.8rem;

  /* Animation Customization Variables */
  --bg-transition-duration: 1s;
  --bg-hold-duration: 3s;
  --text-change-duration: 4s;
  --text-transition-duration: 0.8s;
  --scroll-transition: 0.3s;

  /* Page Margins */
  --page-margin: 10%;
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  direction: rtl;
  text-align: right;
  background-color: #101926;
  color: var(--light);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 70px;
}

main {
  margin-left: var(--page-margin);
  margin-right: var(--page-margin);
  width: calc(100% - 2 * var(--page-margin));
  flex: 1;
}


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

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

.ltr {
  font-family: Arial, Helvetica, sans-serif;
  direction: ltr;
}

h1,h2,h3,h4 {
  line-height: 1.8;
  text-align: right;
  margin-top: 0.5rem;
}


p {
  line-height: 1.8;
  text-align: justify;
  margin-top: 0.5rem;
}

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

/* Responsive Design */
@media (max-width: 1200px) {
  :root {
    --page-margin: 10%;
  }
}

@media (max-width: 992px) {
  :root {
    --page-margin: 5%;
  }
}

@media (max-width: 768px) {
  body {
    padding-top: 60px;
  }

  :root {
    --page-margin: 0%;
  }
}

@media (max-width: 480px) {}