@keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes slideUp {
          from { opacity: 0; transform: translateY(30px); }
          to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade-in {
          animation: fadeIn 0.6s ease-out forwards;
        }
        
        .animate-slide-up {
          animation: slideUp 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
        
        .profile-page {
          background: linear-gradient(to bottom, #57252D 200px, #f9f2f2 200px);
        }
        
        .profile-avatar {
          position: relative;
          display: inline-block;
}

        .avatar-container {
          position: relative;
        }
        
        .avatar-circle {
              margin-bottom: -16px;
          width: 120px;
          height: 120px;
          border-radius: 50%;
          background: linear-gradient(135deg, #57252D, #8a3c48);
          display: flex;
          align-items: center;
          justify-content: center;
          border: 5px solid white;
          box-shadow: 0 6px 15px rgba(87, 37, 45, 0.3);
        }
        
        .status-indicator {
          position: absolute;
          bottom: 8px;
          right: 8px;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #4caf50;
          border: 2px solid white;
}

        .profile-card {
            margin-top: 35px;
          border-radius: 16px;
          overflow: hidden;
          margin-bottom: 40px;
        }
        
        .profile-tabs {
          border-radius: 16px 16px 0 0;
          overflow: hidden;
        }
        
        .tab-button {
          flex: 1;
          padding: 16px;
          background: none;
          border: none;
          font-weight: 500;
          color: #6c757d;
          position: relative;
          transition: all 0.3s ease;
          cursor: pointer;
        }
        
        .tab-button:hover:not(.active) {
          color: #57252D;
          background-color: rgba(87, 37, 45, 0.05);
}

        .tab-button.active {
          color: #57252D;
          background-color: white;
        }
        
        .tab-button.active::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 3px;
          background-color: #57252D;
        }
        
.profile-item {
          padding: 12px 0;
          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
          transition: all 0.3s ease;
}

        .profile-item:hover {
          background-color: rgba(87, 37, 45, 0.03);
          border-radius: 8px;
          padding: 12px;
        }
        
        .icon-container {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: rgba(87, 37, 45, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
}

        .timeline {
          position: relative;
          padding-left: 30px;
        }
        
        .timeline::before {
          content: '';
          position: absolute;
          left: 10px;
          top: 0;
          bottom: 0;
          width: 2px;
          background-color: #e9ecef;
        }
        
        .timeline-item {
          position: relative;
          padding-bottom: 25px;
        }
        
        .timeline-icon {
          position: absolute;
          left: -30px;
          top: 0;
          width: 22px;
          height: 22px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1;
        }
        
        .timeline-content {
          background-color: white;
          border-radius: 8px;
          padding: 15px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

        .timeline-date {
          display: block;
          font-size: 0.8rem;
          color: #6c757d;
          margin-top: 5px;
        }
        
        .form-control:focus {
          border-color: #57252D;
          box-shadow: 0 0 0 0.25rem rgba(87, 37, 45, 0.25);
        }
        
        .btn {
          transition: all 0.3s ease;
        }
        
        .btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}