body {
  font-family: "Fjalla One", "Nunito", sans-serif;
}
.card {
  border: none;
}
#topnav,
#about {
  display: flex;
  height: 70px;
  flex-direction: column;
  justify-content: center;
  font-family: "Nunito", sans-serif;
}
#about {
  margin-top: 5px;
}
#abt {
  line-height: 2;
}
.full-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card img {
  border-radius: 10px;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.card-group .card img {
  width: 100%;     /* تغطي عرض الكارت بالكامل */
  height: auto;    /* يحافظ على نسبة الطول والعرض */
  object-fit: cover; /* لو حابب الصورة تقطع أي زيادة لتغطية المساحة */
}
.badge {
  font-family: sans-serif;
  font-size: 0.9rem;          /* حجم الخط */
  font-weight: lighter;
  padding: 0.5em 0.8em;       /* مسافة داخلية */
  margin: 0.2em;              /* مسافة بين البادجز */
  border-radius: 0.5rem;      /* حواف مدورة */
  display: inline-block;      
  transition: all 0.5s ease; /* تأثير خفيف عند المرور */
}

.badge:hover {
  filter: brightness(85%);
}
/* Frontend - أزرق فاتح */
#collapse1 .badge-gradient {
  background: linear-gradient(135deg, #e7f1ff, #b4d2fe);
  color: #0d6efd;
}

/* Backend - أزرق متوسط */
#collapse2 .badge-gradient {
  background: linear-gradient(135deg, #0d6efd, #0a58ca);
  color: white;
}

/* Cloud - أزرق غامق */
#collapse3 .badge-gradient {
  background: linear-gradient(135deg, #0a53be, #063172);
  color: white;
}
#Education ,#WorkExperience ,#PersonalValues,#Services ,#Projects{
  display: flex;
  flex-direction: column;
}
/* Only for work experience logos */
#WorkExperience .card img {
  border-radius: 0 !important;  /* Remove rounded corners */
  object-fit: contain;           /* Keep the whole logo visible */
  width: 100%;
  height: auto;
}
#Services .card {
  border-radius: 12px;
  transition: transform 0.3s, box-shadow 0.3s;
}

#Services .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.gradient-btn {
  background: linear-gradient(135deg, #e7f1ff, #b4d2fe);
  color: #0d6efd;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}
.gradient-btn:hover {
  background: linear-gradient(135deg, #e7f1ff, #b4d2fe);
  color: #0d6efd;
  transform: scale(1.05);
}
.footer {
  font-family: "Nunito", sans-serif;
}

.footer a:hover {
  text-decoration: underline;
  color: #0d6efd; /* نفس اللون الأزرق العام */
}

.footer i {
  font-size: 1.2rem;
  vertical-align: middle;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .footer .row {
    text-align: center;
  }
  .footer .col-md-4 {
    margin-bottom: 1.5rem;
  }
}
#Projects .card {
  border: none;
  transition: transform 0.3s ease;
}

#Projects .card:hover {
  transform: translateY(-5px);
}

#Projects h3.card-title {
  font-size: 1.5rem;
}

#Projects ul {
  padding-left: 1.5rem;
}
.navbar-nav .nav-link {
  color: #6c757d; /* رمادي ناعم */
  font-weight: 500;
  transition: color 0.3s ease, transform 0.2s ease;
}

.navbar-nav .nav-link:hover {
  color: #b4d2fe; /* أزرق فاتح */
  text-decoration: none;
  transform: scale(1.05);
}

/* شاشات كبيرة */
@media (max-width: 1200px) {
  #topnav .navbar-nav { gap: 3rem !important; }
}

/* شاشات متوسطة */
@media (max-width: 992px) {
  #topnav .navbar-nav { gap: 2rem !important; }
  .navbar-nav .nav-link { font-size: 0.95rem; }
}

/* شاشات صغيرة */
@media (max-width: 768px) {
  #topnav .navbar-nav { gap: 1rem !important; }
  .navbar-nav .nav-link { font-size: 0.9rem; }
}

/* شاشات صغيرة جدًا (موبايل متوسط 360px) */
@media (max-width: 576px) {
  #topnav .navbar-nav {
    gap: 0.5rem !important; /* أصغر مسافة ممكنة */
    justify-content: center;
    flex-wrap: nowrap; /* خليهم دايمًا في سطر واحد */
  }
  .navbar-nav .nav-link { font-size: 0.8rem; }
}

/* شاشات أصغر جدًا (≤320px) - حل احتياطي */
@media (max-width: 320px) {
  #topnav .navbar-nav { flex-wrap: wrap; gap: 0.4rem !important; }
  .navbar-nav .nav-link { font-size: 0.75rem; }
}