:root {
  --manaf-primary: #c1272d;
  --manaf-primary-dark: rgb(255, 0, 0);
  --manaf-primary-darker: #5a1014;
  --manaf-primary-darkest: #2a080a;
  --manaf-primary-light: #f8d7da;
  --manaf-primary-ultraglow: rgba(193, 39, 45, 0.4);
  --manaf-white: #ffffff;
  --manaf-light: #f5f5f5;
  --manaf-gray: #e0e0e0;
  --manaf-dark: #333333;
  --manaf-black: #000000;

  --manaf-deep-black: #050507;
  --manaf-charcoal: #0d0d11;
  --manaf-dark-gray: #121218;
  --manaf-mid-gray: #1a1a22;
  --manaf-light-gray: #2a2a35;
  --manaf-silver: #3e3e4d;
  --manaf-light-silver: #555566;
  --manaf-platinum: #777788;
  --manaf-off-white: #e0e0e8;
  --manaf-pure-white: #ffffff;

  --manaf-gradient-dark: linear-gradient(
    135deg,
    var(--manaf-deep-black) 0%,
    var(--manaf-charcoal) 100%
  );
  --manaf-gradient-medium: linear-gradient(
    135deg,
    var(--manaf-charcoal) 0%,
    var(--manaf-dark-gray) 100%
  );
  --manaf-gradient-light: linear-gradient(
    135deg,
    var(--manaf-dark-gray) 0%,
    var(--manaf-mid-gray) 100%
  );
  --manaf-light-bg: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
  --manaf-dark-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);

  --manaf-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
  --manaf-shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);
  --manaf-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  --manaf-shadow-primary: 0 5px 15px rgba(193, 39, 45, 0.3);
  --manaf-glow-primary: 0 0 15px rgba(193, 39, 45, 0.6);
  --manaf-glow-intense: 0 0 25px rgba(193, 39, 45, 0.8);
  --manaf-glow-soft: 0 0 10px rgba(255, 255, 255, 0.1);
  --manaf-glow-white: 0 0 12px rgba(255, 255, 255, 0.15);

  --manaf-light-text: #212529;
  --manaf-dark-text: #f8f9fa;
  --manaf-light-card: rgba(255, 255, 255, 0.95);
  --manaf-dark-card: rgba(33, 37, 41, 0.95);

  --manaf-about-bg: var(--manaf-gradient-dark);
  --manaf-about-text: var(--manaf-off-white);
  --manaf-about-card-bg: rgba(25, 27, 33, 0.95);
  --manaf-about-card-border: rgba(255, 255, 255, 0.1);
  --manaf-about-card-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  --manaf-about-title: var(--manaf-primary-light);
  --manaf-about-border: var(--manaf-primary);

  --manaf-radius-sm: 5px;
  --manaf-radius-md: 10px;
  --manaf-radius-lg: 20px;
  --manaf-radius-full: 50%;

  --manaf-transition-fast: 0.2s ease;
  --manaf-transition-normal: 0.3s ease;
  --manaf-transition-slow: 0.5s ease;

  --manaf-padding-sm: 10px;
  --manaf-padding-md: 20px;
  --manaf-padding-lg: 40px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--manaf-white);
}

body {
  font-family: "Tajawal", sans-serif;
  color: var(--manaf-dark);
  background-color: var(--manaf-white);
  line-height: 1.6;
  direction: rtl;
  /*
  overflow-x: hidden;
  */
  transition: background-color var(--manaf-transition-normal);
}

.manaf-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--manaf-transition-fast);
}

ul {
  list-style: none;
}

.manaf-btn {
  display: inline-block;
  background: linear-gradient(
    135deg,
    var(--manaf-primary) 0%,
    var(--manaf-primary-dark) 100%
  );
  color: var(--manaf-white);
  padding: 12px 30px;
  border-radius: var(--manaf-radius-lg);
  font-weight: 700;
  transition: all var(--manaf-transition-normal);
  border: none;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.manaf-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--manaf-shadow-primary);
}

.manaf-btn-outline {
  background: transparent;
  border: 2px solid var(--manaf-primary);
  color: var(--manaf-primary);
}

.manaf-btn-outline:hover {
  background: linear-gradient(
    135deg,
    var(--manaf-primary) 0%,
    var(--manaf-primary-dark) 100%
  );
  color: var(--manaf-white);
}

.manaf-btn-small {
  padding: 8px 20px;
  border-radius: var(--manaf-radius-md);
  font-weight: 500;
  font-size: 0.9rem;
}

.manaf-btn-small:hover {
  background: var(--manaf-primary-dark);
  transform: translateY(-2px);
}

.manaf-section-title {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 900;
  color: var(--manaf-primary-dark);
  margin-bottom: 50px;
  text-align: center;
  position: relative;
}

.manaf-section-title::after {
  content: "";
  position: absolute;
  bottom: -15px;
  right: 50%;
  transform: translateX(50%);
  width: 80px;
  height: 4px;
  background-color: var(--manaf-primary);
  border-radius: 2px;
}

.manaf-section {
  padding: 100px 0;
}

.manaf-btn,
.manaf-nav ul li a,
.manaf-social-icons a {
  position: relative;
  overflow: hidden;
  transition: all var(--manaf-transition-normal);
}

.manaf-btn::after,
.manaf-social-icons a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-120%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transition:
    transform 0.7s ease,
    opacity 0.2s ease;
}

.manaf-btn:hover::after,
.manaf-social-icons a:hover::after {
  opacity: 1;
  transform: translateX(120%);
}