/* ========== Base Styles ========== */
body {
  background-color: #111;
  font-family: 'Segoe UI', sans-serif;
  color: #fff;
}

h2 {
  font-size: 2rem;
  font-weight: bold;
}

/* ========== Sections ========== */
.section-dark {
  background-color: #111;
}

.section-grey {
  background-color: #181818;
}

.hero-section {
  min-height: 100vh;
   background-color: #0b0b0b;
  padding: 80px 0;
}

/* ========== Navbar ========== */
.navbar {
  background-color: #000 !important;
  border-bottom: 1px solid #222;
}

.navbar .nav-link {
  transition: color 0.3s ease;
}

.navbar .nav-link:hover {
  color: #6e8afb !important;
}

/* ========== Typing Animation ========== */
.typing-animation {
  border-right: 2px solid #fff;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: typing 3s steps(30, end) forwards, blink 0.7s step-end infinite, fadeUp 1s ease-in-out;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink {
  50% { border-color: transparent }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== Skills Box Hover ========== */
.bg-dark:hover {
  background-color: #1f1f1f;
  transform: scale(1.05);
  transition: all 0.3s ease;
  cursor: default;
}

/* ========== Buttons ========== */
.btn {
  transition: all 0.3s ease;
}

.btn-success:hover {
  background-color: #5c7beb;
  color: #fff;
}

.btn-outline-light:hover {
  background-color: #fff;
  color: #111;
}

/* ========== Icon Links ========== */
a img {
  transition: transform 0.3s ease;
}

a:hover img {
  transform: scale(1.2);
}

/* ========== Scroll to Top Button (Optional) ========== */
.scroll-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #6e8afb;
  color: white;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
}

.scroll-top-btn:hover {
  background-color: #8f9fff;
}
 #contact form {
      background-color: #222;
      padding: 20px;
      border-radius: 10px;
      display: inline-block;
      text-align: left;
      max-width: 400px;
      width: 100%;
      margin: 0 auto; /* لتوسيط النموذج */
    }

    #contact form label {
      display: block;
      margin-top: 10px;
    }

    #contact form input, 
    #contact form textarea {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
      border: none;
      border-radius: 5px;
    }

    #contact form input::placeholder,
    #contact form textarea::placeholder {
      color: #999;
    }

    #contact form button {
      width: 100%;
      padding: 10px;
      margin-top: 15px;
      border: none;
      border-radius: 5px;
      background-color: #444;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    #contact form button:hover {
      background-color: #555;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }