:root {
  /* #095da9 */
  --primary: #536f35;
  --primary-1: #fcfdfb;
  --primary-a1: #40800004;
  --primary-2: #f7faf5;
  --primary-a2: #3380000a;
  --primary-3: #ebf6e0;
  --primary-a3: #5bb5001f;
  --primary-4: #ddf0cd;
  --primary-a4: #52b30032;
  --primary-5: #cfe7ba;
  --primary-a5: #4ea70045;
  --primary-6: #bfd9a6;
  --primary-a6: #48930059;
  --primary-7: #aac88e;
  --primary-a7: #40830071;
  --primary-8: #8fb36b;
  --primary-a8: #3e7c0094;
  --primary-9: #536f35;
  --primary-a9: #264900ca;
  --primary-10: #456127;
  --primary-a10: #244500d8;
  --primary-11: #5d7a3f;
  --primary-a11: #284f00c0;
  --primary-12: #323f26;
  --primary-a12: #0e1d00d9;

  --gray: #ffffff;
  --gray-1: #fcfcfc;
  --gray-a1: #fcfcfc03;
  --gray-2: #f9f9f9;
  --gray-a2: #f9f9f90a;
  --gray-3: #f0f0f0;
  --gray-a3: #f0f0f016;
  --gray-4: #e8e8e8;
  --gray-a4: #e8e8e822;
  --gray-5: #e0e0e0;
  --gray-a5: #0000001f;
  --gray-6: #d9d9d9;
  --gray-a6: #00000026;
  --gray-7: #cecece;
  --gray-a7: #00000031;
  --gray-8: #bbbbbb;
  --gray-a8: #00000044;
  --gray-9: #8d8d8d;
  --gray-10: #838383;
  --gray-11: #646464;
  --gray-12: #202020;

  --section-padding: 80px;
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  scroll-behavior: smooth !important;
}
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: var(--section-padding);
}
body {
  font-family: "Noto Kufi Arabic", sans-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.2rem;
  text-align: center;
  margin-bottom: 1.5rem;
  color: #1a2014;
}
section[id] {
  padding: var(--section-padding) 0;
}