:root {
  /* Primary Colors */
  --primary-50: 254, 243, 240; /* #FEF3F0 */
  --primary-100: 253, 226, 217; /* #FDE2D9 */
  --primary-200: 252, 201, 184; /* #FCC9B8 */
  --primary-300: 250, 165, 140; /* #FAA58C */
  --primary-400: 247, 115, 84;  /* #F77354 */
  --primary-500: 240, 76, 35;   /* #F04C23 */
  --primary-600: 209, 56, 28;   /* #D1381C */
  --primary-700: 176, 47, 24;   /* #B02F18 */
  --primary-800: 143, 38, 21;   /* #8F2615 */
  --primary-900: 120, 32, 18;   /* #782012 */
  --primary-950: 72, 19, 11;    /* #48130B */
  /* Secondary Colors */
  --secondary-50: 235, 247, 243; /* #EBF7F3 */
  --secondary-100: 211, 239, 231; /* #D3EFE7 */
  --secondary-200: 176, 223, 211; /* #B0DFD3 */
  --secondary-300: 135, 201, 184; /* #87C9B8 */
  --secondary-400: 90, 178, 156;  /* #5AB29C */
  --secondary-500: 75, 155, 128;  /* #4B9B80 */
  --secondary-600: 64, 134, 111;  /* #40866F */
  --secondary-700: 53, 112, 92;   /* #35705C */
  --secondary-800: 44, 93, 76;    /* #2C5D4C */
  --secondary-900: 37, 78, 63;    /* #254E3F */
  --secondary-950: 20, 46, 37;    /* #142E25 */
  /* 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;
  /* height:900vh; */
}
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: 40px;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--primary-11);
}