/* =========================================================
   Profile Page (Rabeek) – Mindari Purple Theme
   Consistent royal purple + violet accents
   ========================================================= */

/* -------- Theme Variables (easy future tuning) -------- */
:root {
  --purple-primary: #6D28D9;   /* Royal Purple */
  --purple-deep: #4C1D95;      /* Deep Indigo */
  --purple-soft: #EDE9FE;      /* Light Lavender */
  --purple-accent: #C4B5FD;   /* Accent Lavender */
  --text-dark: #1F2937;
  --text-muted: #6B7280;
}

/* -------- Header -------- */
.profile-header {
  background: linear-gradient(
    135deg,
    var(--purple-primary) 0%,
    var(--purple-deep) 100%
  );
  padding: 80px 0 60px;
}

.profile-photo {
  width: 180px;
  height: 180px;
  border-radius: 20px;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 12px 35px rgba(76, 29, 149, 0.35);
}

/* -------- Profile Info -------- */
.profile-info h1 {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.profile-info .designation {
  color: var(--purple-accent);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 15px;
}

.profile-meta {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
}
.profile-meta i {
  margin-right: 8px;
  color: var(--purple-accent);
}

/* -------- Reusable Card -------- */
.content-card {
  background: #ffffff;
  border-radius: 15px;
  padding: 35px;
  box-shadow: 0 12px 30px rgba(109, 40, 217, 0.08);
  margin-bottom: 30px;
}

.section-heading {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 15px;
}
.section-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: var(--purple-primary);
}

/* -------- Skills -------- */
.skill-tag {
  display: inline-block;
  padding: 8px 16px;
  background: var(--purple-soft);
  color: var(--purple-primary);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 5px;
}

.skill-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.skill-list li {
  color: var(--text-muted);
  line-height: 2;
  font-size: 1rem;
  position: relative;
  padding-left: 24px;
}
.skill-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--purple-primary);
  font-weight: bold;
}

/* -------- Projects -------- */
.project-item {
  padding: 20px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
.project-item:hover {
  border-color: var(--purple-primary);
  box-shadow: 0 8px 20px rgba(109, 40, 217, 0.15);
}
.project-item h4 {
  color: var(--text-dark);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.project-item p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* -------- Contact Card -------- */
.contact-card {
  background: linear-gradient(
    135deg,
    var(--purple-deep),
    var(--purple-primary)
  );
  color: #ffffff;
  border-radius: 15px;
  padding: 40px;
  margin-top: 30px;
}

.contact-card .section-heading {
  color: #ffffff;
}
.contact-card .section-heading::after {
  background: var(--purple-accent);
}

.contact-info a {
  color: var(--purple-accent);
  text-decoration: none;
  transition: color 0.3s ease;
}
.contact-info a:hover {
  color: #ffffff;
}
.contact-info i {
  margin-right: 12px;
  color: var(--purple-accent);
}
.contact-info p {
  margin-bottom: 15px;
  font-size: 1rem;
}

/* -------- Social Links -------- */
.social-link {
  color: var(--purple-accent);
  font-size: 1.5rem;
  margin-right: 15px;
  transition: color 0.3s ease, transform 0.3s ease;
}
.social-link:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

/* -------- Page Background -------- */
body.profile-page {
  background-color: #F5F3FF;
}

/* -------- Responsive -------- */
@media (max-width: 992px) {
  .profile-header {
    padding: 60px 0 40px;
  }
}
@media (max-width: 768px) {
  .profile-info h1 {
    font-size: 2rem;
  }
  .profile-info .designation {
    font-size: 1.25rem;
  }
}
@media (max-width: 480px) {
  .profile-photo {
    width: 140px;
    height: 140px;
  }
}