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

:root {
  /* Colors from Figma - Exact Values */
  --white: #ffffff;
  --black: #000000;
  --mine-shaft: #333333;
  --boulder: #777777;
  --tundora: #444444;
  --dusty-gray: #999999;
  --mercury: #e7e7e7;
  --gray: #898989;
  --alto: #d6d6d6;
  --haiti: #0e152f;
  --tussock: #be9249;
  --shark: #212529;
  --cod-gray: #111111;

  /* Font */
  --font-family: "Tajawal", sans-serif;

  /* Spacing - Exact from Figma */
  --container-width: 1236px;
  --container-padding: 15px;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-family);
  color: var(--mine-shaft);
  line-height: 1.6;
  direction: ltr;
  text-align: right;
  max-width: 100%;
  width: 100%;
  position: relative;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: 100%;
  box-sizing: border-box;
}

a {
  text-decoration: none !important;
}

/* Prevent horizontal scroll - constrain media elements */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Ensure tables don't cause overflow */
table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
}