:root {
  --glass-blue: #0f4c5c;
  --glass-blue2: #2aa7b8;
  --glass-cyan: #67d5df;
  --glass-light: #e8f8fa;
  --navy: #071923;
  --navy2: #0b2732;
  --silver: #cbd5d8;
  --gray: #64748b;
  --light: #f5fafb;
  --white: #ffffff;
}

html[dir="rtl"] body {
  font-family: "Cairo", sans-serif;
}

html[dir="ltr"] body {
  font-family: "Inter", sans-serif;
}

body {
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(42, 167, 184, 0.20),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 10%,
      rgba(103, 213, 223, 0.14),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #071923 0%,
      #0b2732 48%,
      #071923 100%
    ) !important;

  color: var(--white);
}

/* =========================================
   Glass Architectural Background
   ========================================= */

.geometric-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.geometric-bg::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      120deg,
      transparent 0 25%,
      rgba(255, 255, 255, 0.055) 25.2% 25.8%,
      transparent 26%
    ),
    linear-gradient(
      45deg,
      transparent 0 55%,
      rgba(103, 213, 223, 0.10) 55.2% 63%,
      transparent 63.2%
    ),
    linear-gradient(
      135deg,
      transparent 0 70%,
      rgba(42, 167, 184, 0.12) 70.2% 72%,
      transparent 72.2%
    );

  pointer-events: none;
  z-index: -1;
}

/* Decorative glass shine */

.geometric-bg::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  top: -180px;
  right: -120px;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16),
    rgba(103, 213, 223, 0.04),
    transparent 70%
  );

  transform: rotate(25deg);
  filter: blur(2px);
  pointer-events: none;
}

/* =========================================
   Navigation
   ========================================= */

.nav-link {
  color: #d7e7e9;
  font-weight: 700;
  transition: 0.25s ease;
}

.nav-link:hover {
  color: var(--glass-cyan);
}

/* =========================================
   Glass Cards
   ========================================= */

.service-card,
.partner-card {
  position: relative;

  border: 1px solid rgba(255, 255, 255, 0.13);

  background:
    linear-gradient(
      145deg,
      rgba(18, 57, 67, 0.88),
      rgba(7, 25, 35, 0.82)
    );

  border-radius: 28px;
  padding: 30px;

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.service-card::before,
.partner-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(103, 213, 223, 0.75),
    transparent
  );

  opacity: 0.8;
}

.service-card:hover,
.partner-card:hover {
  transform: translateY(-7px);

  border-color: rgba(103, 213, 223, 0.55);

  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.40),
    0 0 25px rgba(42, 167, 184, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* =========================================
   Partner / Previous Projects Logo
   ========================================= */

.partner-logo {
  height: 62px;
  width: 62px;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98),
      rgba(220, 240, 242, 0.92)
    );

  color: var(--glass-blue);

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 900;

  margin-bottom: 18px;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.18),
    inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* =========================================
   Forms
   ========================================= */

.form-label {
  display: block;
  margin-bottom: 8px;

  color: #d7e7e9;
  font-weight: 700;
}

.form-input {
  width: 100%;

  border-radius: 16px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  background:
    linear-gradient(
      145deg,
      rgba(19, 54, 64, 0.88),
      rgba(7, 25, 35, 0.88)
    );

  padding: 14px 16px;

  color: white;

  outline: none;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.form-input::placeholder {
  color: rgba(203, 213, 216, 0.55);
}

.form-input:focus {
  border-color: rgba(103, 213, 223, 0.75);

  box-shadow:
    0 0 0 3px rgba(42, 167, 184, 0.12),
    0 8px 25px rgba(0, 0, 0, 0.18);

  background:
    linear-gradient(
      145deg,
      rgba(20, 63, 74, 0.95),
      rgba(7, 25, 35, 0.92)
    );
}

/* =========================================
   Buttons
   ========================================= */

.btn-primary {
  background:
    linear-gradient(
      135deg,
      var(--glass-blue2),
      var(--glass-blue)
    );

  color: white;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 16px;

  padding: 13px 22px;

  font-weight: 800;

  box-shadow:
    0 10px 25px rgba(42, 167, 184, 0.20);

  transition: 0.25s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #42c4d1,
      #116477
    );

  box-shadow:
    0 14px 30px rgba(42, 167, 184, 0.28);
}

/* =========================================
   Headings & Accent
   ========================================= */

.section-title {
  color: #ffffff;
}

.text-accent {
  color: var(--glass-cyan);
}

.accent-line {
  width: 70px;
  height: 3px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--glass-blue2),
      var(--glass-cyan)
    );

  margin: 12px 0 20px;
}

/* =========================================
   Glass Decorative Elements
   ========================================= */

.glass-effect {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.025)
    );

  border: 1px solid rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 20px 50px rgba(0, 0, 0, 0.25);
}

/* =========================================
   Glass Shine Animation
   ========================================= */

.glass-shine {
  position: relative;
  overflow: hidden;
}

.glass-shine::after {
  content: "";

  position: absolute;
  top: -100%;
  left: -60%;

  width: 35%;
  height: 300%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.12),
      transparent
    );

  transform: rotate(20deg);

  transition: 0.7s ease;

  pointer-events: none;
}

.glass-shine:hover::after {
  left: 130%;
}

/* =========================================
   Responsive
   ========================================= */

@media (max-width: 768px) {
  .service-card,
  .partner-card {
    padding: 22px;
    border-radius: 22px;
  }

  .geometric-bg::after {
    width: 280px;
    height: 280px;
  }
}