:root {
  /* Primary Colors */
  --primary-50: 236, 250, 248; /* #ecfaf8 */
  --primary-100: 207, 242, 236; /* #cff2ec */
  --primary-200: 163, 228, 217; /* #a3e4d9 */
  --primary-300: 118, 213, 197; /* #76d5c5 */
  --primary-400: 82, 192, 176; /* #52c0b0 */
  --primary-500: 17, 153, 142; /* #11998e */
  --primary-600: 15, 138, 128; /* #0f8a80 */
  --primary-700: 13, 117, 109; /* #0d756d */
  --primary-800: 11, 97, 91; /* #0b615b */
  --primary-900: 9, 82, 77; /* #09524d */
  --primary-950: 4, 49, 46; /* #04312e */
  /* Secondary Colors */
  --secondary-50: 250, 240, 236; /* #faf0ec */
  --secondary-100: 244, 222, 213; /* #f4ded5 */
  --secondary-200: 235, 192, 176; /* #ebc0b0 */
  --secondary-300: 223, 156, 131; /* #df9c83 */
  --secondary-400: 213, 126, 98; /* #d57e62 */
  --secondary-500: 153, 61, 17; /* #993d11 */
  --secondary-600: 138, 55, 15; /* #8a370f */
  --secondary-700: 117, 46, 13; /* #752e0d */
  --secondary-800: 97, 38, 10; /* #61260a */
  --secondary-900: 82, 32, 9; /* #522009 */
  --secondary-950: 49, 17, 4; /* #311104 */  
  /* Gray Colors */
  --gray-50: 249, 250, 251; /* #f9fafb */
  --gray-100: 243, 244, 246; /* #f3f4f6 */
  --gray-200: 229, 231, 235; /* #e5e7eb */
  --gray-300: 209, 213, 219; /* #d1d5db */
  --gray-400: 156, 163, 175; /* #9ca3af */
  --gray-500: 107, 114, 128; /* #6b7280 */
  --gray-600: 75, 85, 99; /* #4b5563 */
  --gray-700: 55, 65, 81; /* #374151 */
  --gray-800: 31, 41, 55; /* #1f2937 */
  --gray-900: 17, 24, 39; /* #111827 */
  --gray-950: 9, 12, 16; /* #090c10 */
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  scroll-behavior: smooth !important;
}
html {
  scroll-behavior: smooth !important;
}
body {
  font-family: "Cairo", serif;
  scroll-behavior: smooth !important;
}
/* default styles for items  */
ul {
  list-style-type: none;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  border: none;
  outline: none;
  padding: 0;
  background: none;
  cursor: pointer;
}
/* container class  */
.container {
  margin: 0 auto;
  padding: 0 1rem;
  max-width: 1200px;
}

@media (min-width: 768px) {
  .container {
    max-width: 768px; /* Adjust for your desired width */
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 992px; /* Adjust for your desired width */
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1200px; /* Adjust for your desired width */
  }
}

.section_title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--primary-11);
}