/* Additional styles for team profile page */
    .profile-header {
      padding-top: 150px;
      padding-bottom: 80px;
      background: linear-gradient(to right, rgba(26, 54, 93, 0.9), rgba(229, 39, 37, 0.8)), url('https://images.unsplash.com/photo-1462899006636-339e08d1844e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
      background-size: cover;
      background-position: center;
      position: relative;
    }

    .profile-img {
      border-radius: 50%;
      border: 8px solid white;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      width: 280px;
      height: 280px;
      object-fit: cover;
      margin-top: -140px;
      position: relative;
      z-index: 2;
    }

    .social-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      margin-right: 10px;
      transition: all 0.3s ease;
    }

    .social-links a:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 10px rgba(229, 39, 37, 0.2);
    }

    .profile-tabs .nav-link {
      color: #666;
      font-weight: 600;
      padding: 1rem 1.5rem;
      border: none;
      border-bottom: 3px solid transparent;
      transition: all 0.3s ease;
    }

    .profile-tabs .nav-link.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
      background-color: transparent;
    }

    .profile-tabs .nav-link:hover:not(.active) {
      border-bottom-color: #ddd;
    }

    .skill-bar {
      height: 8px;
      margin-bottom: 30px;
      background-color: #eee;
      border-radius: 4px;
    }

.skill-bar-fill {
      height: 100%;
      border-radius: 4px;
      background-color: var(--primary);
      position: relative;
      width: 0;
      transition: width 1.5s ease;
      /* Remove inline width, will be set via data-width attribute */
    }

    .skill-percentage {
      position: absolute;
      right: 0;
      top: -25px;
      font-weight: 600;
    }

    .timeline-item {
      padding-left: 30px;
      position: relative;
      padding-bottom: 30px;
      border-left: 2px solid #eee;
    }

    .timeline-item:last-child {
      border-left: 2px solid transparent;
    }

    .timeline-item::before {
      content: '';
      position: absolute;
      left: -8px;
      top: 0;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: var(--primary);
    }

    .timeline-date {
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 5px;
    }

    .award-item {
      padding: 1.5rem;
      border-radius: 10px;
      background-color: #f8f9fa;
      margin-bottom: 1.5rem;
      transition: all 0.3s ease;
    }

    .award-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    }

    .award-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgba(229, 39, 37, 0.1);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin-right: 1rem;
    }

    .publication-item {
      border-left: 3px solid var(--primary);
      padding-left: 20px;
      margin-bottom: 25px;
    }

    .quote-text {
      font-style: italic;
      position: relative;
      padding: 20px 0;
    }

    .quote-text::before,
    .quote-text::after {
      content: '"';
      font-family: Georgia, serif;
      font-size: 4rem;
      color: rgba(229, 39, 37, 0.2);
      position: absolute;
      line-height: 1;
    }

    .quote-text::before {
      top: 0;
      left: -20px;
    }

    .quote-text::after {
      bottom: 45px;
      left:188px;
      transform: rotate(180deg);
    }

    .animated-bg {
      background: linear-gradient(-45deg, #f8f9fa, #ffffff, #f1f1f1, #f8f9fa);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
    }

    @keyframes gradient {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    .contact-icon {
      font-size: 1.5rem;
      color: var(--primary);
      margin-right: 15px;
    }

    .team-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
    }