body {
  font-family: 'Tajawal', sans-serif;
  background-color: #c4d6d1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg fill-opacity='0.09'%3E%3Cpolygon fill='%23f5a881' points='800 100 0 200 0 800 1600 800 1600 200'/%3E%3Cpolygon fill='%23eeb599' points='800 200 0 400 0 800 1600 800 1600 400'/%3E%3Cpolygon fill='%23e9c2af' points='800 300 0 600 0 800 1600 800 1600 600'/%3E%3Cpolygon fill='%23e7cec2' points='1600 800 800 400 0 800'/%3E%3Cpolygon fill='%23e7dad3' points='1280 800 800 500 320 800'/%3E%3Cpolygon fill='%23e9e4e2' points='533.3 800 1066.7 800 800 600'/%3E%3Cpolygon fill='%23EEE' points='684.1 800 914.3 800 800 700'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.fade-in {
  animation: fadeIn 1.2s ease-in-out;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}